Adapt syntax highlighting on dark theme

All code blocks that the Telescope back-end sends us are annotated with
highlight.js classes, so the front-end has to provide the stylesheet
that defines these.

Since the stylesheet is global, we have to link both stylesheets for
light and dark theme, and disable either depending on the current
theme.

src/web/public/styles/github-dark.css

@@ -0,0 +1,94 @@
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+code.hljs {
+  padding: 3px 5px;
+} /*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+.hljs {
+  color: #c9d1d9;
+  background: #0d1117;
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  color: #ff7b72;
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  color: #d2a8ff;
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-variable {
+  color: #79c0ff;
+}
+.hljs-meta .hljs-string,
+.hljs-regexp,
+.hljs-string {
+  color: #a5d6ff;
+}
+.hljs-built_in,
+.hljs-symbol {
+  color: #ffa657;
+}
+.hljs-code,
+.hljs-comment,
+.hljs-formula {
+  color: #8b949e;
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-pseudo,
+.hljs-selector-tag {
+  color: #7ee787;
+}
+.hljs-subst {
+  color: #c9d1d9;
+}
+.hljs-section {
+  color: #1f6feb;
+  font-weight: 700;
+}
+.hljs-bullet {
+  color: #f2cc60;
+}
+.hljs-emphasis {
+  color: #c9d1d9;
+  font-style: italic;
+}
+.hljs-strong {
+  color: #c9d1d9;
+  font-weight: 700;
+}
+.hljs-addition {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+.hljs-deletion {
+  color: #ffdcd7;
+  background-color: #67060c;
+}

src/web/public/styles/github.css

@@ -0,0 +1,94 @@
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+code.hljs {
+  padding: 3px 5px;
+} /*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/
+.hljs {
+  color: #24292e;
+  background: #fff;
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  color: #d73a49;
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  color: #6f42c1;
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-variable {
+  color: #005cc5;
+}
+.hljs-meta .hljs-string,
+.hljs-regexp,
+.hljs-string {
+  color: #032f62;
+}
+.hljs-built_in,
+.hljs-symbol {
+  color: #e36209;
+}
+.hljs-code,
+.hljs-comment,
+.hljs-formula {
+  color: #6a737d;
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-pseudo,
+.hljs-selector-tag {
+  color: #22863a;
+}
+.hljs-subst {
+  color: #24292e;
+}
+.hljs-section {
+  color: #005cc5;
+  font-weight: 700;
+}
+.hljs-bullet {
+  color: #735c0f;
+}
+.hljs-emphasis {
+  color: #24292e;
+  font-style: italic;
+}
+.hljs-strong {
+  color: #24292e;
+  font-weight: 700;
+}
+.hljs-addition {
+  color: #22863a;
+  background-color: #f0fff4;
+}
+.hljs-deletion {
+  color: #b31d28;
+  background-color: #ffeef0;
+}

src/web/src/components/Posts/Post.tsx

@@ -217,6 +217,12 @@ const useStyles = makeStyles((theme: Theme) =>
       '& a:visited': {
         color: theme.palette.action.selected,
       },
+      '& pre code': {
+        backgroundColor: theme.palette.background.paper,
+      },
+      '& code': {
+        backgroundColor: theme.palette.background.paper,
+      },
       [theme.breakpoints.down(600)]: {
         padding: '.5em',
         width: 'auto',

src/web/src/pages/_app.tsx

@@ -27,11 +27,27 @@ const App = ({ Component, pageProps }: AppProps) => {
     if (jssStyles) {
       jssStyles.parentElement?.removeChild(jssStyles);
     }
-  }, []);
+
+    // Enable the stylesheet for the syntax highlighting depending on the theme
+    if (preferredTheme === 'dark') {
+      document.querySelector('#light-stylesheet')?.setAttribute('disabled', 'disabled');
+    } else {
+      document.querySelector('#dark-stylesheet')?.setAttribute('disabled', 'disabled');
+    }
+  });
 
   // Switch the active theme, and also store it for next load
+  // We also disable the current stylesheet and enable the other one.
   const toggleTheme = () => {
-    setPreferredTheme(preferredTheme === 'dark' ? 'light' : 'dark');
+    if (preferredTheme === 'dark') {
+      document.querySelector('#light-stylesheet')?.removeAttribute('disabled');
+      document.querySelector('#dark-stylesheet')?.setAttribute('disabled', 'disabled');
+      setPreferredTheme('light');
+    } else {
+      document.querySelector('#dark-stylesheet')?.removeAttribute('disabled');
+      document.querySelector('#light-stylesheet')?.setAttribute('disabled', 'disabled');
+      setPreferredTheme('dark');
+    }
   };
 
   return (

src/web/src/pages/_document.tsx

@@ -41,6 +41,9 @@ class MyDocument extends Document {
           <meta name="twitter:description" content={description} />
           <meta name="twitter:image" content={image} />
           <meta name="twitter:image:alt" content={imageAlt} />
+
+          <link rel="stylesheet" href="/styles/github.css" id="light-stylesheet" />
+          <link rel="stylesheet" href="/styles/github-dark.css" id="dark-stylesheet" />
         </Head>
         <body>
           <Main />

src/web/src/styles/globals.css

@@ -1,9 +1,6 @@
 /* Import telescope-post-content.css */
 @import './telescope-post-content.css';
 
-/* Import highlight.js */
-@import 'highlight.js/styles/github.css';
-
 /* As pages/_app.tsx import this CSS it will resets the CSS
 * and makes our <html> font 10px.  Any other "global" things
 * that need to happen for a page should get added here, and

src/web/src/styles/telescope-post-content.css

@@ -106,13 +106,10 @@
   overflow-wrap: unset;
   word-wrap: none;
   font-family: Menlo, Consolas, Monaco, 'Liberation Mono', 'Lucida Console', monospace;
-  background: #eff0f1;
-  color: #242424;
   border-radius: 3px;
 }
 
 .telescope-post-content pre {
-  border: 1px solid #242424;
   page-break-inside: avoid;
   font-size: 1.5rem;
   line-height: 1.5;