From 9c6e869f95fcfb97855aa727e00b07e7a7cbfcd0 Mon Sep 17 00:00:00 2001 From: Wladimir Palant Date: Thu, 4 Jun 2020 12:52:52 +0200 Subject: [PATCH] refactor: Do not rely on JavaScript for code highlighting, make dark and light themes consistent --- assets/js/dark-mode.js | 8 --- assets/scss/components/_highlight.scss | 65 ++++++++++++++++++++++- assets/scss/main.scss | 11 ++-- assets/scss/themes/_dark.scss | 15 ++++++ assets/scss/themes/_light.scss | 18 ++++++- assets/scss/themes/highlight/_dark.scss | 63 ---------------------- assets/scss/themes/highlight/_light.scss | 67 ------------------------ 7 files changed, 101 insertions(+), 146 deletions(-) delete mode 100644 assets/scss/themes/highlight/_dark.scss delete mode 100644 assets/scss/themes/highlight/_light.scss diff --git a/assets/js/dark-mode.js b/assets/js/dark-mode.js index 47b29f56..fd301a4e 100644 --- a/assets/js/dark-mode.js +++ b/assets/js/dark-mode.js @@ -65,14 +65,6 @@ function changeMode() { const themeColor = isDark ? '{{ .Site.Params.themeColorDark }}': '{{ .Site.Params.themeColor }}'; document.querySelector('meta[name="theme-color"]').setAttribute('content', themeColor); - // Change Chroma Code Highlight Theme - const oldChromaTheme = isDark ? 'chroma' : 'chroma-dark'; - const newChromaTheme = isDark ? 'chroma-dark' : 'chroma'; - - [].slice.apply(document.getElementsByClassName(oldChromaTheme)).forEach((e) => { - e.className = newChromaTheme; - }); - {{ if and .Site.Params.enableUtterances (eq hugo.Environment "production") }} // Change Utterances Comments Theme // https://github.com/utterance/utterances/issues/229 diff --git a/assets/scss/components/_highlight.scss b/assets/scss/components/_highlight.scss index 88d7c2db..b8e6c315 100644 --- a/assets/scss/components/_highlight.scss +++ b/assets/scss/components/_highlight.scss @@ -24,7 +24,7 @@ span.lnt { text-align: right; } -.chroma, .chroma-dark { +.chroma { color: var(--color-contrast-high); background-color: alpha(var(--color-contrast-lower), 0.5); } @@ -34,3 +34,66 @@ span.lnt { max-height: $maxHeight; } } + +/* The following is the output of `hugo gen chromastyles --style=dracula` */ +/* with color values replaced by variables. */ + +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } +/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: var(--chroma-line-numbers-background) } +/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: var(--chroma-line-numbers-color) } +/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: var(--chroma-line-numbers-color) } +/* Keyword */ .chroma .k { color: var(--chroma-keyword-color) } +/* KeywordConstant */ .chroma .kc { color: var(--chroma-keyword-color) } +/* KeywordDeclaration */ .chroma .kd { color: var(--chroma-declaration-color); font-style: italic } +/* KeywordNamespace */ .chroma .kn { color: var(--chroma-name-color) } +/* KeywordPseudo */ .chroma .kp { color: var(--chroma-keyword-color) } +/* KeywordReserved */ .chroma .kr { color: var(--chroma-keyword-color) } +/* KeywordType */ .chroma .kt { color: var(--chroma-name-color) } +/* NameAttribute */ .chroma .na { color: var(--chroma-attribute-color) } +/* NameBuiltin */ .chroma .nb { color: var(--chroma-name-color); font-style: italic } +/* NameClass */ .chroma .nc { color: var(--chroma-attribute-color) } +/* NameFunction */ .chroma .nf { color: var(--chroma-attribute-color) } +/* NameLabel */ .chroma .nl { color: var(--chroma-name-color); font-style: italic } +/* NameTag */ .chroma .nt { color: var(--chroma-keyword-color) } +/* NameVariable */ .chroma .nv { color: var(--chroma-name-color); font-style: italic } +/* NameVariableClass */ .chroma .vc { color: var(--chroma-name-color); font-style: italic } +/* NameVariableGlobal */ .chroma .vg { color: var(--chroma-name-color); font-style: italic } +/* NameVariableInstance */ .chroma .vi { color: var(--chroma-name-color); font-style: italic } +/* LiteralString */ .chroma .s { color: var(--chroma-literal-color) } +/* LiteralStringAffix */ .chroma .sa { color: var(--chroma-literal-color) } +/* LiteralStringBacktick */ .chroma .sb { color: var(--chroma-literal-color) } +/* LiteralStringChar */ .chroma .sc { color: var(--chroma-literal-color) } +/* LiteralStringDelimiter */ .chroma .dl { color: var(--chroma-literal-color) } +/* LiteralStringDoc */ .chroma .sd { color: var(--chroma-literal-color) } +/* LiteralStringDouble */ .chroma .s2 { color: var(--chroma-literal-color) } +/* LiteralStringEscape */ .chroma .se { color: var(--chroma-literal-color) } +/* LiteralStringHeredoc */ .chroma .sh { color: var(--chroma-literal-color) } +/* LiteralStringInterpol */ .chroma .si { color: var(--chroma-literal-color) } +/* LiteralStringOther */ .chroma .sx { color: var(--chroma-literal-color) } +/* LiteralStringRegex */ .chroma .sr { color: var(--chroma-literal-color) } +/* LiteralStringSingle */ .chroma .s1 { color: var(--chroma-literal-color) } +/* LiteralStringSymbol */ .chroma .ss { color: var(--chroma-literal-color) } +/* LiteralNumber */ .chroma .m { color: var(--chroma-number-color) } +/* LiteralNumberBin */ .chroma .mb { color: var(--chroma-number-color) } +/* LiteralNumberFloat */ .chroma .mf { color: var(--chroma-number-color) } +/* LiteralNumberHex */ .chroma .mh { color: var(--chroma-number-color) } +/* LiteralNumberInteger */ .chroma .mi { color: var(--chroma-number-color) } +/* LiteralNumberIntegerLong */ .chroma .il { color: var(--chroma-number-color) } +/* LiteralNumberOct */ .chroma .mo { color: var(--chroma-number-color) } +/* Operator */ .chroma .o { color: var(--chroma-keyword-color) } +/* OperatorWord */ .chroma .ow { color: var(--chroma-keyword-color) } +/* Comment */ .chroma .c { color: var(--chroma-comment-color) } +/* CommentHashbang */ .chroma .ch { color: var(--chroma-comment-color) } +/* CommentMultiline */ .chroma .cm { color: var(--chroma-comment-color) } +/* CommentSingle */ .chroma .c1 { color: var(--chroma-comment-color) } +/* CommentSpecial */ .chroma .cs { color: var(--chroma-comment-color) } +/* CommentPreproc */ .chroma .cp { color: var(--chroma-keyword-color) } +/* CommentPreprocFile */ .chroma .cpf { color: var(--chroma-keyword-color) } +/* GenericDeleted */ .chroma .gd { color: var(--chroma-deleted-color) } +/* GenericEmph */ .chroma .ge { text-decoration: underline } +/* GenericHeading */ .chroma .gh { font-weight: bold } +/* GenericInserted */ .chroma .gi { font-weight: bold } +/* GenericOutput */ .chroma .go { color: var(--chroma-output-color) } +/* GenericSubheading */ .chroma .gu { font-weight: bold } +/* GenericUnderline */ .chroma .gl { text-decoration: underline } diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 5fc1e093..ec34747b 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -162,6 +162,12 @@ $defaultTheme: light; {{ end }} +{{ if .Site.Params.enableHighlight }} + $enableHighlight: true; +{{ else }} + $enableHighlight: false; +{{ end }} + @import "themes/light"; // Dark Mode @@ -184,10 +190,6 @@ @import "themes/dark"; @import "components/dark-mode"; - - {{ if .Site.Params.enableHighlight }} - @import "themes/highlight/dark"; - {{ end }} {{ end }} @@ -343,7 +345,6 @@ {{ end }} {{ if .Site.Params.enableHighlight }} - @import "themes/highlight/light"; @import "components/highlight"; {{ end }} diff --git a/assets/scss/themes/_dark.scss b/assets/scss/themes/_dark.scss index df5e61ba..382b00a9 100644 --- a/assets/scss/themes/_dark.scss +++ b/assets/scss/themes/_dark.scss @@ -16,6 +16,21 @@ .theme-icon-dark { display: inline-block; } + @if ($enableHighlight) { + /* https://xyproto.github.io/splash/docs/all.html */ + /* Color values matching dracula style */ + + --chroma-line-numbers-background: #ffffcc; + --chroma-line-numbers-color: #7f7f7f; + --chroma-keyword-color: #ff79c6; + --chroma-name-color: #8be9fd; + --chroma-attribute-color: #50fa7b; + --chroma-literal-color: #f1fa8c; + --chroma-number-color: #bd93f9; + --chroma-comment-color: #6272a4; + --chroma-deleted-color: #8b080b; + --chroma-output-color: #44475a; + } } @media (prefers-color-scheme: dark) { diff --git a/assets/scss/themes/_light.scss b/assets/scss/themes/_light.scss index c1f4a704..6761ce2a 100644 --- a/assets/scss/themes/_light.scss +++ b/assets/scss/themes/_light.scss @@ -15,11 +15,25 @@ .theme-icon-dark { display: none; } + @if ($enableHighlight) { + /* https://xyproto.github.io/splash/docs/all.html */ + /* Color values matching manni style */ + + --chroma-line-numbers-background: #ffffcc; + --chroma-line-numbers-color: #7f7f7f; + --chroma-keyword-color: #006699; + --chroma-name-color: #9999ff; + --chroma-attribute-color: #330099; + --chroma-literal-color: #cc3300; + --chroma-number-color: #ff6600; + --chroma-comment-color: #0099ff; + --chroma-deleted-color: #ffcccc; + --chroma-output-color: #aaaaaa; + } } @media (prefers-color-scheme: light) { - :root:not([data-theme]) - { + :root:not([data-theme]) { @include light-theme; } } diff --git a/assets/scss/themes/highlight/_dark.scss b/assets/scss/themes/highlight/_dark.scss deleted file mode 100644 index 39ea935e..00000000 --- a/assets/scss/themes/highlight/_dark.scss +++ /dev/null @@ -1,63 +0,0 @@ -/* https://xyproto.github.io/splash/docs/all.html */ -/* hugo gen chromastyles --style=dracula > _dark.scss */ - -/* Background */ .chroma-dark { color: #f8f8f2; background-color: #282a36 } -/* LineTableTD */ .chroma-dark .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } -/* LineTable */ .chroma-dark .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } -/* LineHighlight */ .chroma-dark .hl { display: block; width: 100%;background-color: #3c3c3c } -/* LineNumbersTable */ .chroma-dark .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } -/* LineNumbers */ .chroma-dark .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } -/* Keyword */ .chroma-dark .k { color: #ff79c6 } -/* KeywordConstant */ .chroma-dark .kc { color: #ff79c6 } -/* KeywordDeclaration */ .chroma-dark .kd { color: #8be9fd; font-style: italic } -/* KeywordNamespace */ .chroma-dark .kn { color: #ff79c6 } -/* KeywordPseudo */ .chroma-dark .kp { color: #ff79c6 } -/* KeywordReserved */ .chroma-dark .kr { color: #ff79c6 } -/* KeywordType */ .chroma-dark .kt { color: #8be9fd } -/* NameAttribute */ .chroma-dark .na { color: #50fa7b } -/* NameBuiltin */ .chroma-dark .nb { color: #8be9fd; font-style: italic } -/* NameClass */ .chroma-dark .nc { color: #50fa7b } -/* NameFunction */ .chroma-dark .nf { color: #50fa7b } -/* NameLabel */ .chroma-dark .nl { color: #8be9fd; font-style: italic } -/* NameTag */ .chroma-dark .nt { color: #ff79c6 } -/* NameVariable */ .chroma-dark .nv { color: #8be9fd; font-style: italic } -/* NameVariableClass */ .chroma-dark .vc { color: #8be9fd; font-style: italic } -/* NameVariableGlobal */ .chroma-dark .vg { color: #8be9fd; font-style: italic } -/* NameVariableInstance */ .chroma-dark .vi { color: #8be9fd; font-style: italic } -/* LiteralString */ .chroma-dark .s { color: #f1fa8c } -/* LiteralStringAffix */ .chroma-dark .sa { color: #f1fa8c } -/* LiteralStringBacktick */ .chroma-dark .sb { color: #f1fa8c } -/* LiteralStringChar */ .chroma-dark .sc { color: #f1fa8c } -/* LiteralStringDelimiter */ .chroma-dark .dl { color: #f1fa8c } -/* LiteralStringDoc */ .chroma-dark .sd { color: #f1fa8c } -/* LiteralStringDouble */ .chroma-dark .s2 { color: #f1fa8c } -/* LiteralStringEscape */ .chroma-dark .se { color: #f1fa8c } -/* LiteralStringHeredoc */ .chroma-dark .sh { color: #f1fa8c } -/* LiteralStringInterpol */ .chroma-dark .si { color: #f1fa8c } -/* LiteralStringOther */ .chroma-dark .sx { color: #f1fa8c } -/* LiteralStringRegex */ .chroma-dark .sr { color: #f1fa8c } -/* LiteralStringSingle */ .chroma-dark .s1 { color: #f1fa8c } -/* LiteralStringSymbol */ .chroma-dark .ss { color: #f1fa8c } -/* LiteralNumber */ .chroma-dark .m { color: #bd93f9 } -/* LiteralNumberBin */ .chroma-dark .mb { color: #bd93f9 } -/* LiteralNumberFloat */ .chroma-dark .mf { color: #bd93f9 } -/* LiteralNumberHex */ .chroma-dark .mh { color: #bd93f9 } -/* LiteralNumberInteger */ .chroma-dark .mi { color: #bd93f9 } -/* LiteralNumberIntegerLong */ .chroma-dark .il { color: #bd93f9 } -/* LiteralNumberOct */ .chroma-dark .mo { color: #bd93f9 } -/* Operator */ .chroma-dark .o { color: #ff79c6 } -/* OperatorWord */ .chroma-dark .ow { color: #ff79c6 } -/* Comment */ .chroma-dark .c { color: #6272a4 } -/* CommentHashbang */ .chroma-dark .ch { color: #6272a4 } -/* CommentMultiline */ .chroma-dark .cm { color: #6272a4 } -/* CommentSingle */ .chroma-dark .c1 { color: #6272a4 } -/* CommentSpecial */ .chroma-dark .cs { color: #6272a4 } -/* CommentPreproc */ .chroma-dark .cp { color: #ff79c6 } -/* CommentPreprocFile */ .chroma-dark .cpf { color: #ff79c6 } -/* GenericDeleted */ .chroma-dark .gd { color: #ffcccc } -/* GenericEmph */ .chroma-dark .ge { text-decoration: underline } -/* GenericHeading */ .chroma-dark .gh { font-weight: bold } -/* GenericInserted */ .chroma-dark .gi { color: #ccffcc } -/* GenericOutput */ .chroma-dark .go { color: #44475a } -/* GenericSubheading */ .chroma-dark .gu { font-weight: bold } -/* GenericUnderline */ .chroma-dark .gl { text-decoration: underline } diff --git a/assets/scss/themes/highlight/_light.scss b/assets/scss/themes/highlight/_light.scss deleted file mode 100644 index 21580fa6..00000000 --- a/assets/scss/themes/highlight/_light.scss +++ /dev/null @@ -1,67 +0,0 @@ -/* https://xyproto.github.io/splash/docs/all.html */ -/* hugo gen chromastyles --style=rainbow_dash > _light.scss */ - -/* Background */ .chroma { color: #4d4d4d; background-color: #ffffff } -/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } -/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } -/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc } -/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } -/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } -/* Keyword */ .chroma .k { color: #2c5dcd; font-weight: bold } -/* KeywordConstant */ .chroma .kc { color: #2c5dcd; font-weight: bold } -/* KeywordDeclaration */ .chroma .kd { color: #2c5dcd; font-weight: bold } -/* KeywordNamespace */ .chroma .kn { color: #2c5dcd; font-weight: bold } -/* KeywordPseudo */ .chroma .kp { color: #2c5dcd } -/* KeywordReserved */ .chroma .kr { color: #2c5dcd; font-weight: bold } -/* KeywordType */ .chroma .kt { color: #5918bb; font-weight: bold } -/* NameAttribute */ .chroma .na { color: #2c5dcd; font-style: italic } -/* NameBuiltin */ .chroma .nb { color: #5918bb; font-weight: bold } -/* NameClass */ .chroma .nc { text-decoration: underline } -/* NameConstant */ .chroma .no { color: #318495 } -/* NameDecorator */ .chroma .nd { color: #ff8000; font-weight: bold } -/* NameEntity */ .chroma .ni { color: #5918bb; font-weight: bold } -/* NameException */ .chroma .ne { color: #5918bb; font-weight: bold } -/* NameFunction */ .chroma .nf { color: #ff8000; font-weight: bold } -/* NameTag */ .chroma .nt { color: #2c5dcd; font-weight: bold } -/* LiteralString */ .chroma .s { color: #00cc66 } -/* LiteralStringAffix */ .chroma .sa { color: #00cc66 } -/* LiteralStringBacktick */ .chroma .sb { color: #00cc66 } -/* LiteralStringChar */ .chroma .sc { color: #00cc66 } -/* LiteralStringDelimiter */ .chroma .dl { color: #00cc66 } -/* LiteralStringDoc */ .chroma .sd { color: #00cc66; font-style: italic } -/* LiteralStringDouble */ .chroma .s2 { color: #00cc66 } -/* LiteralStringEscape */ .chroma .se { color: #c5060b; font-weight: bold } -/* LiteralStringHeredoc */ .chroma .sh { color: #00cc66 } -/* LiteralStringInterpol */ .chroma .si { color: #00cc66 } -/* LiteralStringOther */ .chroma .sx { color: #318495 } -/* LiteralStringRegex */ .chroma .sr { color: #00cc66 } -/* LiteralStringSingle */ .chroma .s1 { color: #00cc66 } -/* LiteralStringSymbol */ .chroma .ss { color: #c5060b; font-weight: bold } -/* LiteralNumber */ .chroma .m { color: #5918bb; font-weight: bold } -/* LiteralNumberBin */ .chroma .mb { color: #5918bb; font-weight: bold } -/* LiteralNumberFloat */ .chroma .mf { color: #5918bb; font-weight: bold } -/* LiteralNumberHex */ .chroma .mh { color: #5918bb; font-weight: bold } -/* LiteralNumberInteger */ .chroma .mi { color: #5918bb; font-weight: bold } -/* LiteralNumberIntegerLong */ .chroma .il { color: #5918bb; font-weight: bold } -/* LiteralNumberOct */ .chroma .mo { color: #5918bb; font-weight: bold } -/* Operator */ .chroma .o { color: #2c5dcd } -/* OperatorWord */ .chroma .ow { color: #2c5dcd; font-weight: bold } -/* Comment */ .chroma .c { color: #0080ff } -/* CommentHashbang */ .chroma .ch { color: #0080ff } -/* CommentMultiline */ .chroma .cm { color: #0080ff } -/* CommentSingle */ .chroma .c1 { color: #0080ff } -/* CommentSpecial */ .chroma .cs { color: #0080ff; font-weight: bold } -/* CommentPreproc */ .chroma .cp { color: #0080ff } -/* CommentPreprocFile */ .chroma .cpf { color: #0080ff } -/* GenericDeleted */ .chroma .gd { background-color: #ffcccc } -/* GenericEmph */ .chroma .ge { font-style: italic } -/* GenericError */ .chroma .gr { color: #ff0000 } -/* GenericHeading */ .chroma .gh { color: #2c5dcd; font-weight: bold } -/* GenericInserted */ .chroma .gi { background-color: #ccffcc } -/* GenericOutput */ .chroma .go { color: #aaaaaa } -/* GenericPrompt */ .chroma .gp { color: #2c5dcd; font-weight: bold } -/* GenericStrong */ .chroma .gs { font-weight: bold } -/* GenericSubheading */ .chroma .gu { color: #2c5dcd; font-weight: bold } -/* GenericTraceback */ .chroma .gt { color: #c5060b } -/* GenericUnderline */ .chroma .gl { text-decoration: underline } -/* TextWhitespace */ .chroma .w { color: #cbcbcb }