From d31ce0ba37e37506d2c5cd756d44f74982ae2049 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. --- src/web/public/styles/github-dark.css | 94 +++++++++++++++++++ src/web/public/styles/github.css | 94 +++++++++++++++++++ src/web/src/components/Posts/Post.tsx | 6 ++ src/web/src/pages/_app.tsx | 20 +++- src/web/src/pages/_document.tsx | 3 + src/web/src/styles/globals.css | 3 - src/web/src/styles/telescope-post-content.css | 3 - 7 files changed, 215 insertions(+), 8 deletions(-) create mode 100644 src/web/public/styles/github-dark.css create mode 100644 src/web/public/styles/github.css diff --git a/src/web/public/styles/github-dark.css b/src/web/public/styles/github-dark.css new file mode 100644 index 0000000000..98816d974c --- /dev/null +++ b/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; +} diff --git a/src/web/public/styles/github.css b/src/web/public/styles/github.css new file mode 100644 index 0000000000..018ce45be2 --- /dev/null +++ b/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; +} diff --git a/src/web/src/components/Posts/Post.tsx b/src/web/src/components/Posts/Post.tsx index 2a47b7c87d..23e62b6cf4 100644 --- a/src/web/src/components/Posts/Post.tsx +++ b/src/web/src/components/Posts/Post.tsx @@ -210,6 +210,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', diff --git a/src/web/src/pages/_app.tsx b/src/web/src/pages/_app.tsx index 9e1888fca3..974253aae4 100644 --- a/src/web/src/pages/_app.tsx +++ b/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 ( diff --git a/src/web/src/pages/_document.tsx b/src/web/src/pages/_document.tsx index f5e9e57595..e4a7e63f6f 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;