ui: tweak code highlighting color to match themes

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;
+    }
   }
 `

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;
-  }
 `