From 9a0b518f0eaf468c6eda905125a2904a250eb005 Mon Sep 17 00:00:00 2001 From: Matt Wang Date: Wed, 8 Mar 2023 15:11:41 -0800 Subject: [PATCH] Update default theme code highlighting with Atom's One Light colors, consolidate theme variables (#1166) This PR replaces the default light code highlighting theme with Atom's One Light theme colors. This should provide more visual similarity with our dark theme, and as a byproduct, fix some of the contrast issues from our current light theme. In addition (different from the original purpose of this PR), this also moves theme variables from `variables.scss` to `light.scss`, which always gets loaded anyways. To test, compare the [deploy preview's kitchen sink Python code](https://deploy-preview-1166--just-the-docs.netlify.app/docs/index-test/#more-code) to the current [`main` branch's code](https://just-the-docs.github.io/just-the-docs/docs/index-test/#more-code); you can also use the "Preview dark color scheme" button to see OneDarkJekyll in action. Users can opt-in to the old theme with `legacy_light`. I've documented this in the "customization" page. Closes #679. ## implementation Feel free to skip this part. To do this, I: - forked [mgyongyosi/OneDarkJekyll](https://github.com/mgyongyosi/OneDarkJekyll) to our own organization, [OneLightJekyll](https://github.com/just-the-docs/OneLightJekyll) - updated the code to be slightly more robust (e.g. not require installing to global path) - replaced the `colors.less` with the one pulled from Atom's [one-light-syntax](https://github.com/atom/atom/tree/master/packages/one-light-syntax) - updated the license notice to also include GitHub's work in Atom - regenerated the file - plopped it in our current theme code ## next steps This is related to #1100. I wanted to make this PR easier to review, so I won't implement that just yet; once we merge this, I can push that PR through. It's also related to #1173; in a comment below, I've also outlined some potential future work. After we merge this, I'll trigger a release soon. I think this next minor bump can be focused on color schemes, e.g. dark theme, theme switching, and some bugfixes. --- _sass/color_schemes/dark.scss | 35 +-- _sass/color_schemes/legacy_light.scss | 208 +++++++++++++++++ _sass/color_schemes/light.scss | 221 ++---------------- _sass/support/_variables.scss | 13 -- ...syntax-one-dark-vivid.scss => syntax.scss} | 2 + _sass/vendor/OneLightJekyll/LICENSE | 65 ++++++ _sass/vendor/OneLightJekyll/syntax.scss | 211 +++++++++++++++++ docs/customization.md | 9 + 8 files changed, 519 insertions(+), 245 deletions(-) create mode 100644 _sass/color_schemes/legacy_light.scss rename _sass/vendor/OneDarkJekyll/{syntax-one-dark-vivid.scss => syntax.scss} (97%) create mode 100644 _sass/vendor/OneLightJekyll/LICENSE create mode 100644 _sass/vendor/OneLightJekyll/syntax.scss diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss index e1952f6..0e444b7 100644 --- a/_sass/color_schemes/dark.scss +++ b/_sass/color_schemes/dark.scss @@ -1,32 +1,17 @@ $body-background-color: $grey-dk-300; -$sidebar-color: $grey-dk-300; -$border-color: $grey-dk-200; -$body-text-color: $grey-lt-300; $body-heading-color: $grey-lt-000; -$nav-child-link-color: $grey-dk-000; -$search-result-preview-color: $grey-dk-000; +$body-text-color: $grey-lt-300; $link-color: $blue-000; -$btn-primary-color: $blue-200; +$nav-child-link-color: $grey-dk-000; +$sidebar-color: $grey-dk-300; $base-button-color: $grey-dk-250; -$search-background-color: $grey-dk-250; -$table-background-color: $grey-dk-250; -$feedback-color: darken($sidebar-color, 3%); - -// The following highlight theme is more legible than that used for the light color scheme - -// @import "./vendor/OneDarkJekyll/syntax-one-dark"; -// $code-background-color: #282c34; // OneDarkJekyll default for syntax-one-dark -// $code-linenumber-color: #abb2bf; // OneDarkJekyll .nf for syntax-one-dark - -@import "./vendor/OneDarkJekyll/syntax-one-dark-vivid"; - +$btn-primary-color: $blue-200; $code-background-color: #31343f; // OneDarkJekyll default for syntax-one-dark-vivid $code-linenumber-color: #dee2f7; // OneDarkJekyll .nf for syntax-one-dark-vivid +$feedback-color: darken($sidebar-color, 3%); +$table-background-color: $grey-dk-250; +$search-background-color: $grey-dk-250; +$search-result-preview-color: $grey-dk-000; +$border-color: $grey-dk-200; -// @import "./vendor/OneDarkJekyll/syntax-firewatch"; -// $code-background-color: #282c34; // OneDarkJekyll default for syntax-firewatch -// $code-linenumber-color: #abb2bf; // OneDarkJekyll .nf for syntax-firewatch - -// @import "./vendor/OneDarkJekyll/syntax-firewatch-green"; -// $code-background-color: #282c34; // OneDarkJekyll default for syntax-firewatch-green -// $code-linenumber-color: #abb2bf; // OneDarkJekyll .nf for syntax-firewatch-green +@import "./vendor/OneDarkJekyll/syntax"; // this is the one-dark-vivid atom syntax theme diff --git a/_sass/color_schemes/legacy_light.scss b/_sass/color_schemes/legacy_light.scss new file mode 100644 index 0000000..5eaa1ac --- /dev/null +++ b/_sass/color_schemes/legacy_light.scss @@ -0,0 +1,208 @@ +// Moved from _sass/code.scss + +.highlight .c { + color: #586e75; +} // comment // +.highlight .err { + color: #93a1a1; +} // error // +.highlight .g { + color: #93a1a1; +} // generic // +.highlight .k { + color: #859900; +} // keyword // +.highlight .l { + color: #93a1a1; +} // literal // +.highlight .n { + color: #93a1a1; +} // name // +.highlight .o { + color: #859900; +} // operator // +.highlight .x { + color: #cb4b16; +} // other // +.highlight .p { + color: #93a1a1; +} // punctuation // +.highlight .cm { + color: #586e75; +} // comment.multiline // +.highlight .cp { + color: #859900; +} // comment.preproc // +.highlight .c1 { + color: #586e75; +} // comment.single // +.highlight .cs { + color: #859900; +} // comment.special // +.highlight .gd { + color: #2aa198; +} // generic.deleted // +.highlight .ge { + font-style: italic; + color: #93a1a1; +} // generic.emph // +.highlight .gr { + color: #dc322f; +} // generic.error // +.highlight .gh { + color: #cb4b16; +} // generic.heading // +.highlight .gi { + color: #859900; +} // generic.inserted // +.highlight .go { + color: #93a1a1; +} // generic.output // +.highlight .gp { + color: #93a1a1; +} // generic.prompt // +.highlight .gs { + font-weight: bold; + color: #93a1a1; +} // generic.strong // +.highlight .gu { + color: #cb4b16; +} // generic.subheading // +.highlight .gt { + color: #93a1a1; +} // generic.traceback // +.highlight .kc { + color: #cb4b16; +} // keyword.constant // +.highlight .kd { + color: #268bd2; +} // keyword.declaration // +.highlight .kn { + color: #859900; +} // keyword.namespace // +.highlight .kp { + color: #859900; +} // keyword.pseudo // +.highlight .kr { + color: #268bd2; +} // keyword.reserved // +.highlight .kt { + color: #dc322f; +} // keyword.type // +.highlight .ld { + color: #93a1a1; +} // literal.date // +.highlight .m { + color: #2aa198; +} // literal.number // +.highlight .s { + color: #2aa198; +} // literal.string // +.highlight .na { + color: #555; +} // name.attribute // +.highlight .nb { + color: #b58900; +} // name.builtin // +.highlight .nc { + color: #268bd2; +} // name.class // +.highlight .no { + color: #cb4b16; +} // name.constant // +.highlight .nd { + color: #268bd2; +} // name.decorator // +.highlight .ni { + color: #cb4b16; +} // name.entity // +.highlight .ne { + color: #cb4b16; +} // name.exception // +.highlight .nf { + color: #268bd2; +} // name.function // +.highlight .nl { + color: #555; +} // name.label // +.highlight .nn { + color: #93a1a1; +} // name.namespace // +.highlight .nx { + color: #555; +} // name.other // +.highlight .py { + color: #93a1a1; +} // name.property // +.highlight .nt { + color: #268bd2; +} // name.tag // +.highlight .nv { + color: #268bd2; +} // name.variable // +.highlight .ow { + color: #859900; +} // operator.word // +.highlight .w { + color: #93a1a1; +} // text.whitespace // +.highlight .mf { + color: #2aa198; +} // literal.number.float // +.highlight .mh { + color: #2aa198; +} // literal.number.hex // +.highlight .mi { + color: #2aa198; +} // literal.number.integer // +.highlight .mo { + color: #2aa198; +} // literal.number.oct // +.highlight .sb { + color: #586e75; +} // literal.string.backtick // +.highlight .sc { + color: #2aa198; +} // literal.string.char // +.highlight .sd { + color: #93a1a1; +} // literal.string.doc // +.highlight .s2 { + color: #2aa198; +} // literal.string.double // +.highlight .se { + color: #cb4b16; +} // literal.string.escape // +.highlight .sh { + color: #93a1a1; +} // literal.string.heredoc // +.highlight .si { + color: #2aa198; +} // literal.string.interpol // +.highlight .sx { + color: #2aa198; +} // literal.string.other // +.highlight .sr { + color: #dc322f; +} // literal.string.regex // +.highlight .s1 { + color: #2aa198; +} // literal.string.single // +.highlight .ss { + color: #2aa198; +} // literal.string.symbol // +.highlight .bp { + color: #268bd2; +} // name.builtin.pseudo // +.highlight .vc { + color: #268bd2; +} // name.variable.class // +.highlight .vg { + color: #268bd2; +} // name.variable.global // +.highlight .vi { + color: #268bd2; +} // name.variable.instance // +.highlight .il { + color: #2aa198; +} // literal.number.integer.long // diff --git a/_sass/color_schemes/light.scss b/_sass/color_schemes/light.scss index 5eaa1ac..64bbd3a 100644 --- a/_sass/color_schemes/light.scss +++ b/_sass/color_schemes/light.scss @@ -1,208 +1,15 @@ -// Moved from _sass/code.scss +$body-background-color: $white !default; +$body-heading-color: $grey-dk-300 !default; +$body-text-color: $grey-dk-100 !default; +$link-color: $purple-000 !default; +$nav-child-link-color: $grey-dk-100 !default; +$sidebar-color: $grey-lt-000 !default; +$base-button-color: #f7f7f7 !default; +$btn-primary-color: $purple-100 !default; +$code-background-color: $grey-lt-000 !default; +$feedback-color: darken($sidebar-color, 3%) !default; +$table-background-color: $white !default; +$search-background-color: $white !default; +$search-result-preview-color: $grey-dk-000 !default; -.highlight .c { - color: #586e75; -} // comment // -.highlight .err { - color: #93a1a1; -} // error // -.highlight .g { - color: #93a1a1; -} // generic // -.highlight .k { - color: #859900; -} // keyword // -.highlight .l { - color: #93a1a1; -} // literal // -.highlight .n { - color: #93a1a1; -} // name // -.highlight .o { - color: #859900; -} // operator // -.highlight .x { - color: #cb4b16; -} // other // -.highlight .p { - color: #93a1a1; -} // punctuation // -.highlight .cm { - color: #586e75; -} // comment.multiline // -.highlight .cp { - color: #859900; -} // comment.preproc // -.highlight .c1 { - color: #586e75; -} // comment.single // -.highlight .cs { - color: #859900; -} // comment.special // -.highlight .gd { - color: #2aa198; -} // generic.deleted // -.highlight .ge { - font-style: italic; - color: #93a1a1; -} // generic.emph // -.highlight .gr { - color: #dc322f; -} // generic.error // -.highlight .gh { - color: #cb4b16; -} // generic.heading // -.highlight .gi { - color: #859900; -} // generic.inserted // -.highlight .go { - color: #93a1a1; -} // generic.output // -.highlight .gp { - color: #93a1a1; -} // generic.prompt // -.highlight .gs { - font-weight: bold; - color: #93a1a1; -} // generic.strong // -.highlight .gu { - color: #cb4b16; -} // generic.subheading // -.highlight .gt { - color: #93a1a1; -} // generic.traceback // -.highlight .kc { - color: #cb4b16; -} // keyword.constant // -.highlight .kd { - color: #268bd2; -} // keyword.declaration // -.highlight .kn { - color: #859900; -} // keyword.namespace // -.highlight .kp { - color: #859900; -} // keyword.pseudo // -.highlight .kr { - color: #268bd2; -} // keyword.reserved // -.highlight .kt { - color: #dc322f; -} // keyword.type // -.highlight .ld { - color: #93a1a1; -} // literal.date // -.highlight .m { - color: #2aa198; -} // literal.number // -.highlight .s { - color: #2aa198; -} // literal.string // -.highlight .na { - color: #555; -} // name.attribute // -.highlight .nb { - color: #b58900; -} // name.builtin // -.highlight .nc { - color: #268bd2; -} // name.class // -.highlight .no { - color: #cb4b16; -} // name.constant // -.highlight .nd { - color: #268bd2; -} // name.decorator // -.highlight .ni { - color: #cb4b16; -} // name.entity // -.highlight .ne { - color: #cb4b16; -} // name.exception // -.highlight .nf { - color: #268bd2; -} // name.function // -.highlight .nl { - color: #555; -} // name.label // -.highlight .nn { - color: #93a1a1; -} // name.namespace // -.highlight .nx { - color: #555; -} // name.other // -.highlight .py { - color: #93a1a1; -} // name.property // -.highlight .nt { - color: #268bd2; -} // name.tag // -.highlight .nv { - color: #268bd2; -} // name.variable // -.highlight .ow { - color: #859900; -} // operator.word // -.highlight .w { - color: #93a1a1; -} // text.whitespace // -.highlight .mf { - color: #2aa198; -} // literal.number.float // -.highlight .mh { - color: #2aa198; -} // literal.number.hex // -.highlight .mi { - color: #2aa198; -} // literal.number.integer // -.highlight .mo { - color: #2aa198; -} // literal.number.oct // -.highlight .sb { - color: #586e75; -} // literal.string.backtick // -.highlight .sc { - color: #2aa198; -} // literal.string.char // -.highlight .sd { - color: #93a1a1; -} // literal.string.doc // -.highlight .s2 { - color: #2aa198; -} // literal.string.double // -.highlight .se { - color: #cb4b16; -} // literal.string.escape // -.highlight .sh { - color: #93a1a1; -} // literal.string.heredoc // -.highlight .si { - color: #2aa198; -} // literal.string.interpol // -.highlight .sx { - color: #2aa198; -} // literal.string.other // -.highlight .sr { - color: #dc322f; -} // literal.string.regex // -.highlight .s1 { - color: #2aa198; -} // literal.string.single // -.highlight .ss { - color: #2aa198; -} // literal.string.symbol // -.highlight .bp { - color: #268bd2; -} // name.builtin.pseudo // -.highlight .vc { - color: #268bd2; -} // name.variable.class // -.highlight .vg { - color: #268bd2; -} // name.variable.global // -.highlight .vi { - color: #268bd2; -} // name.variable.instance // -.highlight .il { - color: #2aa198; -} // literal.number.integer.long // +@import "./vendor/OneLightJekyll/syntax"; diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss index 987e6d0..42a1cf8 100644 --- a/_sass/support/_variables.scss +++ b/_sass/support/_variables.scss @@ -56,19 +56,6 @@ $red-000: #f77e7e !default; $red-100: #f96e65 !default; $red-200: #e94c4c !default; $red-300: #dd2e2e !default; -$body-background-color: $white !default; -$sidebar-color: $grey-lt-000 !default; -$search-background-color: $white !default; -$table-background-color: $white !default; -$code-background-color: $grey-lt-000 !default; -$feedback-color: darken($sidebar-color, 3%) !default; -$body-text-color: $grey-dk-100 !default; -$body-heading-color: $grey-dk-300 !default; -$search-result-preview-color: $grey-dk-000 !default; -$nav-child-link-color: $grey-dk-100 !default; -$link-color: $purple-000 !default; -$btn-primary-color: $purple-100 !default; -$base-button-color: #f7f7f7 !default; // Spacing diff --git a/_sass/vendor/OneDarkJekyll/syntax-one-dark-vivid.scss b/_sass/vendor/OneDarkJekyll/syntax.scss similarity index 97% rename from _sass/vendor/OneDarkJekyll/syntax-one-dark-vivid.scss rename to _sass/vendor/OneDarkJekyll/syntax.scss index adcf989..3888797 100644 --- a/_sass/vendor/OneDarkJekyll/syntax-one-dark-vivid.scss +++ b/_sass/vendor/OneDarkJekyll/syntax.scss @@ -1,3 +1,5 @@ +// Generated with OneDarkJekyll applied to Atom's One Dark Vivid theme + .highlight, pre.highlight { background: #31343f; diff --git a/_sass/vendor/OneLightJekyll/LICENSE b/_sass/vendor/OneLightJekyll/LICENSE new file mode 100644 index 0000000..df5eca0 --- /dev/null +++ b/_sass/vendor/OneLightJekyll/LICENSE @@ -0,0 +1,65 @@ +OneLightJekyll relies on two works: OneDarkJekyll, and Atom's One Light theme. This file contains the licensing for all the related software. + +--- + +OneLightJekyll (https://github.com/just-the-docs/OneLightJekyll/blob/main/LICENSE) + +MIT License + +Copyright (c) 2023 Matthew Wang + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +--- + +OneDarkJekyll (https://github.com/mgyongyosi/OneDarkJekyll/blob/master/LICENSE) + +MIT License + +Copyright (c) 2016 Mihály Gyöngyösi + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +--- + +Atom One Light (https://github.com/atom/atom/blob/master/LICENSE.md) + +Copyright (c) 2011-2022 GitHub Inc. + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/_sass/vendor/OneLightJekyll/syntax.scss b/_sass/vendor/OneLightJekyll/syntax.scss new file mode 100644 index 0000000..a38326a --- /dev/null +++ b/_sass/vendor/OneLightJekyll/syntax.scss @@ -0,0 +1,211 @@ +// Generated with OneLightJekyll applied to Atom's One Light theme + +.highlight, +pre.highlight { + background: #f9f9f9; + color: #383942; +} +.highlight pre { + background: #f9f9f9; +} +.highlight .hll { + background: #f9f9f9; +} +.highlight .c { + color: #9fa0a6; + font-style: italic; +} +.highlight .err { + color: #fff; + background-color: #e05151; +} +.highlight .k { + color: #a625a4; +} +.highlight .l { + color: #50a04f; +} +.highlight .n { + color: #383942; +} +.highlight .o { + color: #383942; +} +.highlight .p { + color: #383942; +} +.highlight .cm { + color: #9fa0a6; + font-style: italic; +} +.highlight .cp { + color: #9fa0a6; + font-style: italic; +} +.highlight .c1 { + color: #9fa0a6; + font-style: italic; +} +.highlight .cs { + color: #9fa0a6; + font-style: italic; +} +.highlight .ge { + font-style: italic; +} +.highlight .gs { + font-weight: 700; +} +.highlight .kc { + color: #a625a4; +} +.highlight .kd { + color: #a625a4; +} +.highlight .kn { + color: #a625a4; +} +.highlight .kp { + color: #a625a4; +} +.highlight .kr { + color: #a625a4; +} +.highlight .kt { + color: #a625a4; +} +.highlight .ld { + color: #50a04f; +} +.highlight .m { + color: #b66a00; +} +.highlight .s { + color: #50a04f; +} +.highlight .na { + color: #b66a00; +} +.highlight .nb { + color: #ca7601; +} +.highlight .nc { + color: #ca7601; +} +.highlight .no { + color: #ca7601; +} +.highlight .nd { + color: #ca7601; +} +.highlight .ni { + color: #ca7601; +} +.highlight .ne { + color: #ca7601; +} +.highlight .nf { + color: #383942; +} +.highlight .nl { + color: #ca7601; +} +.highlight .nn { + color: #383942; +} +.highlight .nx { + color: #383942; +} +.highlight .py { + color: #ca7601; +} +.highlight .nt { + color: #e35549; +} +.highlight .nv { + color: #ca7601; +} +.highlight .ow { + font-weight: 700; +} +.highlight .w { + color: #f8f8f2; +} +.highlight .mf { + color: #b66a00; +} +.highlight .mh { + color: #b66a00; +} +.highlight .mi { + color: #b66a00; +} +.highlight .mo { + color: #b66a00; +} +.highlight .sb { + color: #50a04f; +} +.highlight .sc { + color: #50a04f; +} +.highlight .sd { + color: #50a04f; +} +.highlight .s2 { + color: #50a04f; +} +.highlight .se { + color: #50a04f; +} +.highlight .sh { + color: #50a04f; +} +.highlight .si { + color: #50a04f; +} +.highlight .sx { + color: #50a04f; +} +.highlight .sr { + color: #0083bb; +} +.highlight .s1 { + color: #50a04f; +} +.highlight .ss { + color: #0083bb; +} +.highlight .bp { + color: #ca7601; +} +.highlight .vc { + color: #ca7601; +} +.highlight .vg { + color: #ca7601; +} +.highlight .vi { + color: #e35549; +} +.highlight .il { + color: #b66a00; +} +.highlight .gu { + color: #75715e; +} +.highlight .gd { + color: #e05151; +} +.highlight .gi { + color: #43d089; +} +.highlight ::selection { + background-color: #fff; +} +.highlight .language-json .w + .s2 { + color: #e35549; +} +.highlight .language-json .kc { + color: #0083bb; +} diff --git a/docs/customization.md b/docs/customization.md index 9d8ddfc..b25f064 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -45,6 +45,15 @@ jtd.addEvent(toggleDarkMode, 'click', function(){ }); +### deprecated: `legacy_light` +{: .d-inline-block .no_toc } + +New (v0.5.0) +{: .label .label-green } + + +In Just the Docs version `0.5.0`, we changed the default syntax highlighting theme for the `light` color scheme to have higher contrast. Users who are want to use the old highlighting need to explicitly opt-in with the deprecated `legacy_light` color scheme. In a future major release of Just the Docs, we will remove this color scheme. + ## Custom schemes ### Define a custom scheme