From f30ac730e754886cc2b17a036630cea927b45edc Mon Sep 17 00:00:00 2001 From: Diana Belokon <67607236+dbelokon@users.noreply.github.com> Date: Fri, 28 Jan 2022 14:36:20 -0500 Subject: [PATCH] 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. --- .prettierignore | 1 + src/web/public/styles/github-dark.min.css | 10 ++++++++++ src/web/public/styles/github.min.css | 10 ++++++++++ src/web/src/components/Posts/Post.tsx | 6 ++++++ src/web/src/hooks/use-preferred-theme.ts | 14 ++++++++++++++ src/web/src/pages/_document.tsx | 3 +++ src/web/src/styles/globals.css | 3 --- src/web/src/styles/telescope-post-content.css | 3 --- 8 files changed, 44 insertions(+), 6 deletions(-) create mode 100644 src/web/public/styles/github-dark.min.css create mode 100644 src/web/public/styles/github.min.css diff --git a/.prettierignore b/.prettierignore index ff468db60c..52f67aa013 100644 --- 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 new file mode 100644 index 0000000000..03b6da8bf4 --- /dev/null +++ b/src/web/public/styles/github-dark.min.css @@ -0,0 +1,10 @@ +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} \ No newline at end of file diff --git a/src/web/public/styles/github.min.css b/src/web/public/styles/github.min.css new file mode 100644 index 0000000000..275239a7aa --- /dev/null +++ b/src/web/public/styles/github.min.css @@ -0,0 +1,10 @@ +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} \ No newline at end of file diff --git a/src/web/src/components/Posts/Post.tsx b/src/web/src/components/Posts/Post.tsx index 24b4f67d4c..91f77cb83c 100644 --- 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 index 2f2065e472..57ea545ce9 100644 --- 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 index f5e9e57595..15f1d3342c 100644 --- a/src/web/src/pages/_document.tsx +++ b/src/web/src/pages/_document.tsx @@ -41,6 +41,9 @@ class MyDocument extends Document { + + +
diff --git a/src/web/src/styles/globals.css b/src/web/src/styles/globals.css index 5c86f0f5ae..f9a0c68cb3 100644 --- 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 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 index 5fef27cdcc..332978dfc4 100644 --- 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;