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.
Seneca-CDOT · Feb 2, 2022 · f30ac73 · f30ac73
1 parent 8f2ac63
commit f30ac73
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 6 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -7,6 +7,7 @@ certs
 .next
 out
 pnpm-lock.yaml
+*.min.css
 
 # We don't maintain these files
 src/api/status/public/assets

diff --git a/src/web/public/styles/github-dark.min.css b/src/web/public/styles/github-dark.min.css
diff --git a/src/web/public/styles/github.min.css b/src/web/public/styles/github.min.css
diff --git a/src/web/src/components/Posts/Post.tsx b/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.default,
+      },
+      '& code': {
+        backgroundColor: theme.palette.background.default,
+      },
       [theme.breakpoints.down(600)]: {
         padding: '.5em',
         width: 'auto',

diff --git a/src/web/src/hooks/use-preferred-theme.ts b/src/web/src/hooks/use-preferred-theme.ts
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useLocalStorage, useMedia } from 'react-use';
 
 /**
@@ -10,6 +11,19 @@ export default function usePreferredTheme() {
     'preference:theme',
     isDarkThemePreferred ? 'dark' : 'light'
   );
+  useEffect(() => {
+    const lightStyleSheet = (document.querySelector('#light-stylesheet') as HTMLStyleElement).sheet;
+
+    if (lightStyleSheet !== null) {
+      lightStyleSheet.disabled = preferredTheme === 'dark';
+    }
+
+    const darkStyleSheet = (document.querySelector('#dark-stylesheet') as HTMLStyleElement).sheet;
+
+    if (darkStyleSheet !== null) {
+      darkStyleSheet.disabled = preferredTheme === 'light';
+    }
+  }, [preferredTheme]);
 
   return [preferredTheme, setPreferredTheme] as const;
 }
diff --git a/src/web/src/pages/_document.tsx b/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.min.css" id="light-stylesheet" />
+          <link rel="stylesheet" href="/styles/github-dark.min.css" id="dark-stylesheet" />
         </Head>
         <body>
           <Main />

diff --git a/src/web/src/styles/globals.css b/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

diff --git a/src/web/src/styles/telescope-post-content.css b/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;