From 543c16b4127f1e407b0e9cd6b94de620a464ae6e Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Sat, 14 Sep 2019 15:47:51 -0400
Subject: [PATCH] ui: tweak code highlighting color to match themes

---
 src/components/Markdown/styles.tsx | 26 +++++++++++++++++++++++++-
 src/globalStyles.tsx               | 19 -------------------
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/components/Markdown/styles.tsx b/src/components/Markdown/styles.tsx
index 9c6b4ad..9e446f0 100644
--- a/src/components/Markdown/styles.tsx
+++ b/src/components/Markdown/styles.tsx
@@ -67,7 +67,31 @@ export const MarkdownWrapper = styled.div`
     ${modularScaleCSS(1)};
   }
 
+  :not(pre) > code[class*="language-"],
   pre[class*="language-"] {
-    overflow-x: scroll;
+    overflow-x: auto;
+    background: #192129;
+  }
+
+  pre[class*="language-"] {
+    .token.boolean,
+    .token.number,
+    .token.function {
+      color: #d48d5d;
+    }
+
+    .token.operator,
+    .token.entity,
+    .token.url {
+      color: #00add9;
+    }
+
+    .token.selector,
+    .token.important,
+    .token.atrule,
+    .token.keyword,
+    .token.builtin {
+      color: #d1529d;
+    }
   }
 `
diff --git a/src/globalStyles.tsx b/src/globalStyles.tsx
index 3b3d0ee..a295a9c 100644
--- a/src/globalStyles.tsx
+++ b/src/globalStyles.tsx
@@ -19,23 +19,4 @@ export const GlobalStyles = createGlobalStyle`
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
-
-  /* TODO: probably extract this */
-  .gatsby-highlight pre[class*="language-"].line-numbers {
-    padding-left: 2.8em;
-  }
-
-  .gatsby-highlight {
-    background-color: #fdf6e3;
-    border-radius: 0.3em;
-    margin: 0.5em 0;
-    padding: 1em;
-    overflow: auto;
-  }
-
-  .gatsby-highlight pre[class*="language-"].line-numbers {
-    padding: 0;
-    padding-left: 2.8em;
-    overflow: initial;
-  }
 `