From b49668a203f38b25f399a58f8c2b4f66a81b40f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Sat, 25 Nov 2023 14:23:58 +0100 Subject: [PATCH] variant: make chroma style dynamically switchable #679 --- assets/css/auto.css | 2 + {static => assets}/css/format-print.css | 3 +- assets/css/theme-auto.css | 6 -- exampleSite/config/_default/config.toml | 8 ++- .../content/basics/branding/_index.en.md | 6 +- layouts/partials/get-theme-variants.hugo | 65 +++++++++++++++++++ layouts/partials/stylesheet.html | 12 +--- static/css/theme-blue.css | 10 +-- static/css/theme-green.css | 10 +-- static/css/theme-learn.css | 10 +-- static/css/theme-neon.css | 10 +-- static/css/theme-red.css | 10 +-- static/css/theme-relearn-bright.css | 10 +-- static/css/theme-relearn-dark.css | 10 +-- static/css/theme-relearn-light.css | 10 +-- static/css/theme-zen-dark.css | 10 +-- static/css/theme-zen-light.css | 10 +-- static/css/variant-internal.css | 5 +- static/js/theme.js | 9 +++ static/js/variant.js | 5 +- 20 files changed, 103 insertions(+), 118 deletions(-) create mode 100644 assets/css/auto.css rename {static => assets}/css/format-print.css (97%) delete mode 100644 assets/css/theme-auto.css diff --git a/assets/css/auto.css b/assets/css/auto.css new file mode 100644 index 0000000000..9b966e0d28 --- /dev/null +++ b/assets/css/auto.css @@ -0,0 +1,2 @@ +@import "{{ printf "%s-%s.css" .prefix .light }}" screen and (prefers-color-scheme: light); +@import "{{ printf "%s-%s.css" .prefix .dark }}" screen and (prefers-color-scheme: dark); diff --git a/static/css/format-print.css b/assets/css/format-print.css similarity index 97% rename from static/css/format-print.css rename to assets/css/format-print.css index a5881b923a..d2a3b82ce3 100644 --- a/static/css/format-print.css +++ b/assets/css/format-print.css @@ -1,4 +1,5 @@ -@import "theme-relearn-light.css"; +@import "{{ printf "chroma-%s.css" .chroma }}"; +@import "{{ printf "theme-%s.css" .identifier }}"; #R-sidebar { display: none; diff --git a/assets/css/theme-auto.css b/assets/css/theme-auto.css deleted file mode 100644 index b4db4806a7..0000000000 --- a/assets/css/theme-auto.css +++ /dev/null @@ -1,6 +0,0 @@ -{{- with index .auto 0 -}} -@import "{{ printf "theme-%s.css" . }}" screen and (prefers-color-scheme: light); -{{ end -}} -{{- with index .auto 1 -}} -@import "{{ printf "theme-%s.css" . }}" screen and (prefers-color-scheme: dark); -{{ end -}} \ No newline at end of file diff --git a/exampleSite/config/_default/config.toml b/exampleSite/config/_default/config.toml index 999201ef1f..c5cde5f9e7 100644 --- a/exampleSite/config/_default/config.toml +++ b/exampleSite/config/_default/config.toml @@ -52,10 +52,14 @@ title = "Hugo Relearn Theme" lineNumbersInTable = false # the shipped variants come with their own modified chroma syntax highlightning - # style which is imported in theme-relearn-light.css, theme-relearn-dark.css, etc.; - # if you want to use a predefined style instead: + # stylesheets which are linked in your generated HTML pages; you can use Hugo to generate + # own stylesheets to your liking and use them in your variant; + # if you want to use Hugo's internal styles instead of the shipped stylesheets: # - remove `noClasses` or set `noClasses = true` # - set `style` to a predefined style name + # note: with using the internal styles, the `--CODE-theme` setting in your variant + # stylesheet will be ignored and the internal style is used for all variants and + # even print noClasses = false # style = "tango" diff --git a/exampleSite/content/basics/branding/_index.en.md b/exampleSite/content/basics/branding/_index.en.md index 4b007f0a91..09843177fa 100644 --- a/exampleSite/content/basics/branding/_index.en.md +++ b/exampleSite/content/basics/branding/_index.en.md @@ -91,11 +91,11 @@ The size of the logo will adapt automatically. ## Syntax highlightning -If you want to switch the syntax highlighting theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation [according to Hugo's documentation](https://gohugo.io/content-management/syntax-highlighting/). Then, `@import` the syntax highlightning stylesheet in your color variant stylesheet. +If you want to switch the syntax highlighting theme together with your color variant, you need to configure your installation [according to Hugo's documentation](https://gohugo.io/content-management/syntax-highlighting/) and provide a syntax highlighting stylesheet file. -For an example, take a look into `theme-relearn-light.css` and `config.toml` of the exampleSite. +You can use a one of the shipped stylesheet files or use Hugo to generate a file for you. The file must be written to `static/css/chroma-.css`. To use it with your color variant you have to define `--CODE-theme: ` in the color variant stylesheet file. -If you want to reconfigure just the syntax highlighting of an existing color variant, you need to copy the file to your site's directory and adjust it accordingly. +For an example, take a look into [`theme-relearn-light.css`](https://github.com/McShelby/hugo-theme-relearn/blob/main/static/css/theme-relearn-light.css) and [`config.toml`](https://github.com/McShelby/hugo-theme-relearn/blob/main/exampleSite/config/_default/config.toml) of the exampleSite. ## Change the Variant (Advanced) {#theme-variant-advanced} diff --git a/layouts/partials/get-theme-variants.hugo b/layouts/partials/get-theme-variants.hugo index cbb15314a8..6727cd3534 100644 --- a/layouts/partials/get-theme-variants.hugo +++ b/layouts/partials/get-theme-variants.hugo @@ -1,3 +1,13 @@ +{{- $page := . }} +{{- $autores := resources.Get "css/auto.css" }} +{{- $printres := resources.Get "css/format-print.css" }} + +{{- /* +First run: +- convert from old forms to slice of dicts +- convert auto property to slice +- add name property +*/}} {{- $tempthemevariants := slice | append (.Site.Params.themeVariant | default "auto" ) }} {{- $themevariants := slice }} {{- range $tempthemevariant := $tempthemevariants }} @@ -14,6 +24,48 @@ {{- $themevariants = $themevariants | append $themevariant }} {{- end }} +{{- /* +Second run, handle non-auto variants +- fix and regenerate theme css for advanced config mode +- add chroma property from stylesheet +*/}} +{{- $tempthemevariants = $themevariants }} +{{- $themevariants = slice }} +{{- range $tempthemevariant := $tempthemevariants }} + {{- $themevariant := $tempthemevariant }} + {{- if not (collections.IsSet $themevariant "auto") }} + {{- $themecontent := "" }} + {{- with resources.Get (printf "css/theme-%s.css" $themevariant.identifier) }} + {{- $themecontent = .Content}} + {{- else }} + {{- $themecontent = readFile (printf "static/css/theme-%s.css" $themevariant.identifier) }} + {{- end }} + {{- $chroma := "" }} + {{- range findRESubmatch `[ \t]*--CODE-theme\s*:\s*([^;]*?)\s*;` $themecontent 1 }} + {{- $chroma = index . 1 }} + {{- else }} + {{- range findRESubmatch `[ \t]*@import\s+[^$]*?chroma-([^.]*?)\.css` $themecontent 1 }} + {{- $chroma = index . 1 }} + {{- warnf "\"theme-%s.css\": DEPRECATED use of @import for chroma stylesheet, instead use '--CODE-theme: %s;'" $themevariant.identifier $chroma }} + {{- $themecontent = replaceRE `[ \t]*@import\s+[^$]*?chroma-[^.]*?\.css.*?\n` "" $themecontent }} + {{- else }} + {{- $chroma = "relearn-light" }} + {{- end }} + {{- $themecontent = replaceRE `(:root\s*\{[ \t]*)(\s*)` (printf "${1}${2}--CODE-theme: %s;${2}" $chroma) $themecontent }} + {{- end }} + {{- $themevariant = collections.Merge $themevariant (dict "chroma" $chroma) }} + {{- $cssres := $themecontent | resources.FromString (printf "css/theme-%s.css" $themevariant.identifier) }} + {{- /* the following code causes Hugo to generate our css file - although it is in comments */}} + {{- end }} + {{- $themevariants = $themevariants | append $themevariant }} +{{- end }} + +{{- /* +Third run, handle auto variants +- fill up auto property +- fill up chroma property +- generate theme and chroma css files from template +*/}} {{- $tempthemevariants = $themevariants }} {{- $themevariants = slice }} {{- range $tempthemevariant := $tempthemevariants }} @@ -45,7 +97,20 @@ {{- $themevariant = collections.Merge $themevariant (dict "auto" ($themevariant.auto | append "relearn-dark")) }} {{- end }} {{- $themevariant = collections.Merge $themevariant (dict "auto" ($themevariant.auto | first 2)) }} + {{- $light := index $themevariant.auto 0 }}; + {{- $dark := index $themevariant.auto 1 }}; + {{- $cssres := $autores | resources.ExecuteAsTemplate (printf "css/theme-%s.css" $themevariant.identifier) (dict "prefix" "theme" "light" $light "dark" $dark) }} + {{- /* the following code causes Hugo to generate our css file - although it is in comments */}} + {{- $themevariant = collections.Merge $themevariant (dict "chroma" $themevariant.identifier) }} + {{- $light = (index (collections.Where $tempthemevariants "identifier" $light) 0).chroma }} + {{- $dark = (index (collections.Where $tempthemevariants "identifier" $dark) 0).chroma }} + {{- $cssres = $autores | resources.ExecuteAsTemplate (printf "css/chroma-%s.css" $themevariant.chroma) (dict "prefix" "chroma" "light" $light "dark" $dark) }} + {{- /* the following code causes Hugo to generate our css file - although it is in comments */}} {{- end }} {{- $themevariants = $themevariants | append $themevariant }} {{- end }} + +{{- $cssres := $printres | resources.ExecuteAsTemplate "css/format-print.css" (index (collections.Where $themevariants "identifier" "relearn-light") 0) }} +{{- /* the following code causes Hugo to generate our css file - although it is in comments */}} + {{- return $themevariants }} \ No newline at end of file diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html index ae899ed928..16276ee4c6 100644 --- a/layouts/partials/stylesheet.html +++ b/layouts/partials/stylesheet.html @@ -14,22 +14,14 @@ {{- $themevariants := partial "get-theme-variants.hugo" . }} - {{- if $page.IsHome }} - {{- $autotemplate := resources.Get "css/theme-auto.css" }} - {{- range $themevariants }} - {{- if collections.IsSet . "auto" }} - {{- $autocss := $autotemplate | resources.ExecuteAsTemplate (printf "css/theme-%s.css" .identifier) . }} - {{- /* the following line causes Hugo to generate our theme css file - although it is in comments */}} - {{- end }} - {{- end }} - {{- end }} {{- with index $themevariants 0 }} + {{- end }} {{- $f := printf "/static/css/format-%s.css" $outputFormat }} - {{- if partialCached "fileExists.hugo" $f $f }} + {{- if or (partialCached "fileExists.hugo" $f $f) (resources.Get (printf "/css/format-%s.css" $outputFormat)) }} {{- end }} diff --git a/static/css/theme-blue.css b/static/css/theme-blue.css index 8a92190f02..08508c1bd0 100644 --- a/static/css/theme-blue.css +++ b/static/css/theme-blue.css @@ -1,10 +1,3 @@ -/* here in this showcase we use our own modified chroma syntax highlightning style; - if you want to use a predefined style instead: - - remove `markup.highlight.noClasses` from your config.toml - - set `markup.highlight.style` to a predefined style name in your config.toml - - remove the following `@import` of the self-defined chroma stylesheet */ -@import "chroma-learn.css"; - :root { --MAIN-TEXT-color: rgba( 50, 50, 50, 1 ); /* Color of text by default */ --MAIN-TITLES-TEXT-color: rgba( 94, 94, 94, 1 ); /* Color of titles h2-h3-h4-h5-h6 */ @@ -13,11 +6,10 @@ --MAIN-LINK-HOVER-color: rgba( 22, 122, 208, 1 ); /* Color of hovered links */ --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* color of text by default */ - /* adjusted to base16-snazzy chroma style */ + --CODE-theme: learn; /* name of the chroma styleheet file */ --CODE-BLOCK-color: rgba( 226, 228, 229, 1 ); /* fallback color for code text */ --CODE-BLOCK-BG-color: rgba( 40, 42, 54, 1 ); /* fallback color for code background */ --CODE-BLOCK-BORDER-color: rgba( 40, 42, 54, 1 ); /* color of block code border */ - --CODE-INLINE-color: rgba( 94, 94, 94, 1 ); /* color for inline code text */ --CODE-INLINE-BG-color: rgba( 255, 250, 233, 1 ); /* color for inline code background */ --CODE-INLINE-BORDER-color: rgba( 248, 232, 200, 1 ); /* color of inline code border */ diff --git a/static/css/theme-green.css b/static/css/theme-green.css index 8eb5f68aff..ef6dabf117 100644 --- a/static/css/theme-green.css +++ b/static/css/theme-green.css @@ -1,10 +1,3 @@ -/* here in this showcase we use our own modified chroma syntax highlightning style; - if you want to use a predefined style instead: - - remove `markup.highlight.noClasses` from your config.toml - - set `markup.highlight.style` to a predefined style name in your config.toml - - remove the following `@import` of the self-defined chroma stylesheet */ -@import "chroma-learn.css"; - :root { --MAIN-TEXT-color: rgba( 50, 50, 50, 1 ); /* Color of text by default */ --MAIN-TITLES-TEXT-color: rgba( 94, 94, 94, 1 ); /* Color of titles h2-h3-h4-h5-h6 */ @@ -13,11 +6,10 @@ --MAIN-LINK-HOVER-color: rgba( 63, 109, 44, 1 ); /* Color of hovered links */ --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* color of text by default */ - /* adjusted to base16-snazzy chroma style */ + --CODE-theme: learn; /* name of the chroma styleheet file */ --CODE-BLOCK-color: rgba( 226, 228, 229, 1 ); /* fallback color for code text */ --CODE-BLOCK-BG-color: rgba( 40, 42, 54, 1 ); /* fallback color for code background */ --CODE-BLOCK-BORDER-color: rgba( 40, 42, 54, 1 ); /* color of block code border */ - --CODE-INLINE-color: rgba( 94, 94, 94, 1 ); /* color for inline code text */ --CODE-INLINE-BG-color: rgba( 255, 250, 233, 1 ); /* color for inline code background */ --CODE-INLINE-BORDER-color: rgba( 248, 232, 200, 1 ); /* color of inline code border */ diff --git a/static/css/theme-learn.css b/static/css/theme-learn.css index 443162c53f..a7e3fa7360 100644 --- a/static/css/theme-learn.css +++ b/static/css/theme-learn.css @@ -1,10 +1,3 @@ -/* here in this showcase we use our own modified chroma syntax highlightning style; - if you want to use a predefined style instead: - - remove `markup.highlight.noClasses` from your config.toml - - set `markup.highlight.style` to a predefined style name in your config.toml - - remove the following `@import` of the self-defined chroma stylesheet */ -@import "chroma-learn.css"; - :root { --MAIN-TEXT-color: rgba( 50, 50, 50, 1 ); /* Color of text by default */ --MAIN-TITLES-TEXT-color: rgba( 94, 94, 94, 1 ); /* Color of titles h2-h3-h4-h5-h6 */ @@ -13,11 +6,10 @@ --MAIN-LINK-HOVER-color: rgba( 0, 130, 167, 1 ); /* Color of hovered links */ --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* color of text by default */ - /* adjusted to base16-snazzy chroma style */ + --CODE-theme: learn; /* name of the chroma styleheet file */ --CODE-BLOCK-color: rgba( 226, 228, 229, 1 ); /* fallback color for code text */ --CODE-BLOCK-BG-color: rgba( 40, 42, 54, 1 ); /* fallback color for code background */ --CODE-BLOCK-BORDER-color: rgba( 40, 42, 54, 1 ); /* color of block code border */ - --CODE-INLINE-color: rgba( 94, 94, 94, 1 ); /* color for inline code text */ --CODE-INLINE-BG-color: rgba( 255, 247, 221, 1 ); /* color for inline code background */ --CODE-INLINE-BORDER-color: rgba( 251, 240, 203, 1 ); /* color of inline code border */ diff --git a/static/css/theme-neon.css b/static/css/theme-neon.css index 0bd47fee22..9068641d9e 100644 --- a/static/css/theme-neon.css +++ b/static/css/theme-neon.css @@ -1,10 +1,3 @@ -/* here in this showcase we use our own modified chroma syntax highlightning style; - if you want to use a predefined style instead: - - remove `markup.highlight.noClasses` from your config.toml - - set `markup.highlight.style` to a predefined style name in your config.toml - - remove the following `@import` of the self-defined chroma stylesheet */ -@import "chroma-neon.css"; - /* this variant does not work well if we use fallback styles for IE11 so better ignore this variant in IE completely */ @supports not (-ms-high-contrast:none) { @@ -23,10 +16,9 @@ --MAIN-TITLES-H3-color: rgba( 0, 243, 211, 1 ); /* text color of h3-h6 titles */ --MAIN-TITLES-H4-color: rgba( 255, 255, 0, 1 ); /* text color of h4-h6 titles */ - /* adjusted to neon chroma style */ + --CODE-theme: neon; /* name of the chroma styleheet file */ --CODE-BLOCK-color: rgba( 248, 248, 242, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ --CODE-BLOCK-BG-color: rgba( 0, 0, 0, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ - --CODE-INLINE-color: rgba( 130, 229, 80, 1 ); /* text color of inline code */ --CODE-INLINE-BG-color: rgba( 40, 42, 54, 1 ); /* background color of inline code */ --CODE-INLINE-BORDER-color: rgba( 70, 70, 70, 1 ); /* border color of inline code */ diff --git a/static/css/theme-red.css b/static/css/theme-red.css index 17b23c86a4..bc081cc957 100644 --- a/static/css/theme-red.css +++ b/static/css/theme-red.css @@ -1,10 +1,3 @@ -/* here in this showcase we use our own modified chroma syntax highlightning style; - if you want to use a predefined style instead: - - remove `markup.highlight.noClasses` from your config.toml - - set `markup.highlight.style` to a predefined style name in your config.toml - - remove the following `@import` of the self-defined chroma stylesheet */ -@import "chroma-learn.css"; - :root { --MAIN-TEXT-color: rgba( 50, 50, 50, 1 ); /* Color of text by default */ --MAIN-TITLES-TEXT-color: rgba( 94, 94, 94, 1 ); /* Color of titles h2-h3-h4-h5-h6 */ @@ -13,11 +6,10 @@ --MAIN-LINK-HOVER-color: rgba( 208, 22, 22, 1 ); /* Color of hovered links */ --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* color of text by default */ - /* adjusted to base16-snazzy chroma style */ + --CODE-theme: learn; /* name of the chroma styleheet file */ --CODE-BLOCK-color: rgba( 226, 228, 229, 1 ); /* fallback color for code text */ --CODE-BLOCK-BG-color: rgba( 40, 42, 54, 1 ); /* fallback color for code background */ --CODE-BLOCK-BORDER-color: rgba( 40, 42, 54, 1 ); /* color of block code border */ - --CODE-INLINE-color: rgba( 94, 94, 94, 1 ); /* color for inline code text */ --CODE-INLINE-BG-color: rgba( 255, 250, 233, 1 ); /* color for inline code background */ --CODE-INLINE-BORDER-color: rgba( 248, 232, 200, 1 ); /* color of inline code border */ diff --git a/static/css/theme-relearn-bright.css b/static/css/theme-relearn-bright.css index 711b231953..ece28ad43a 100644 --- a/static/css/theme-relearn-bright.css +++ b/static/css/theme-relearn-bright.css @@ -1,10 +1,3 @@ -/* here in this showcase we use our own modified chroma syntax highlightning style; - if you want to use a predefined style instead: - - remove `markup.highlight.noClasses` from your config.toml - - set `markup.highlight.style` to a predefined style name in your config.toml - - remove the following `@import` of the self-defined chroma stylesheet */ -@import "chroma-relearn-light.css"; - :root { --PRIMARY-color: rgba( 131, 201, 50, 1 ); /* brand primary color */ --SECONDARY-color: rgba( 99, 128, 208, 1 ); /* brand secondary color */ @@ -15,11 +8,10 @@ --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* background color of content */ --MAIN-TITLES-TEXT-color: rgba( 16, 16, 16, 1 ); /* text color of h2-h6 titles and transparent box titles */ - /* adjusted to relearn-light chroma style */ + --CODE-theme: relearn-light; /* name of the chroma styleheet file */ --CODE-BLOCK-color: rgba( 39, 40, 34, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ --CODE-BLOCK-BG-color: rgba( 250, 250, 250, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ --CODE-BLOCK-BORDER-color: rgba( 216, 216, 216, 1 ); /* border color of block code */ - --CODE-INLINE-color: rgba( 94, 94, 94, 1 ); /* text color of inline code */ --CODE-INLINE-BG-color: rgba( 255, 250, 233, 1 ); /* background color of inline code */ --CODE-INLINE-BORDER-color: rgba( 248, 232, 200, 1 ); /* border color of inline code */ diff --git a/static/css/theme-relearn-dark.css b/static/css/theme-relearn-dark.css index 7aad593fd8..b6106ffbf9 100644 --- a/static/css/theme-relearn-dark.css +++ b/static/css/theme-relearn-dark.css @@ -1,10 +1,3 @@ -/* here in this showcase we use our own modified chroma syntax highlightning style; - if you want to use a predefined style instead: - - remove `markup.highlight.noClasses` from your config.toml - - set `markup.highlight.style` to a predefined style name in your config.toml - - remove the following `@import` of the self-defined chroma stylesheet */ -@import "chroma-relearn-dark.css"; - :root { --PRIMARY-color: rgba( 125, 201, 3, 1 ); /* brand primary color */ --SECONDARY-color: rgba( 108, 140, 227, 1 ); /* brand secondary color */ @@ -15,11 +8,10 @@ --MAIN-BG-color: rgba( 32, 32, 32, 1 ); /* background color of content */ --MAIN-TITLES-TEXT-color: rgba( 255, 255, 255, 1 ); /* text color of h2-h6 titles and transparent box titles */ - /* adjusted to relearn-dark chroma style */ + --CODE-theme: relearn-dark; /* name of the chroma styleheet file */ --CODE-BLOCK-color: rgba( 248, 248, 242, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ --CODE-BLOCK-BG-color: rgba( 43, 43, 43, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ --CODE-BLOCK-BORDER-color: rgba( 71, 71, 71, 1 ); /* border color of block code */ - --CODE-INLINE-color: rgba( 130, 229, 80, 1 ); /* text color of inline code */ --CODE-INLINE-BG-color: rgba( 45, 45, 45, 1 ); /* background color of inline code */ --CODE-INLINE-BORDER-color: rgba( 70, 70, 70, 1 ); /* border color of inline code */ diff --git a/static/css/theme-relearn-light.css b/static/css/theme-relearn-light.css index 3303c0992c..4d6b67ddc2 100644 --- a/static/css/theme-relearn-light.css +++ b/static/css/theme-relearn-light.css @@ -1,10 +1,3 @@ -/* here in this showcase we use our own modified chroma syntax highlightning style; - if you want to use a predefined style instead: - - remove `markup.highlight.noClasses` from your config.toml - - set `markup.highlight.style` to a predefined style name in your config.toml - - remove the following `@import` of the self-defined chroma stylesheet */ -@import "chroma-relearn-light.css"; - :root { --PRIMARY-color: rgba( 125, 201, 3, 1 ); /* brand primary color */ --SECONDARY-color: rgba( 72, 106, 201, 1 ); /* brand secondary color */ @@ -15,11 +8,10 @@ --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* background color of content */ --MAIN-TITLES-TEXT-color: rgba( 16, 16, 16, 1 ); /* text color of h2-h6 titles and transparent box titles */ - /* adjusted to relearn-light chroma style */ + --CODE-theme: relearn-light; /* name of the chroma styleheet file */ --CODE-BLOCK-color: rgba( 39, 40, 34, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ --CODE-BLOCK-BG-color: rgba( 250, 250, 250, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ --CODE-BLOCK-BORDER-color: rgba( 216, 216, 216, 1 ); /* border color of block code */ - --CODE-INLINE-color: rgba( 94, 94, 94, 1 ); /* text color of inline code */ --CODE-INLINE-BG-color: rgba( 255, 250, 233, 1 ); /* background color of inline code */ --CODE-INLINE-BORDER-color: rgba( 248, 232, 200, 1 ); /* border color of inline code */ diff --git a/static/css/theme-zen-dark.css b/static/css/theme-zen-dark.css index 1c44c427b5..860bffa3d6 100644 --- a/static/css/theme-zen-dark.css +++ b/static/css/theme-zen-dark.css @@ -1,10 +1,3 @@ -/* here in this showcase we use our own modified chroma syntax highlightning style; - if you want to use a predefined style instead: - - remove `markup.highlight.noClasses` from your config.toml - - set `markup.highlight.style` to a predefined style name in your config.toml - - remove the following `@import` of the self-defined chroma stylesheet */ -@import "chroma-relearn-dark.css"; - :root { --PRIMARY-color: rgba( 47, 129, 235, 1 ); /* brand primary color */ --SECONDARY-color: rgba( 47, 129, 235, 1 ); /* brand secondary color */ @@ -15,11 +8,10 @@ --MAIN-TEXT-color: rgba( 224, 224, 224, 1 ); /* text color of content and h1 titles */ --MAIN-TITLES-TEXT-color: rgba( 255, 255, 255, 1 ); /* text color of h2-h6 titles and transparent box titles */ - /* adjusted to relearn-dark chroma style */ + --CODE-theme: relearn-dark; /* name of the chroma styleheet file */ --CODE-BLOCK-color: rgba( 248, 248, 242, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ --CODE-BLOCK-BG-color: rgba( 43, 43, 43, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ --CODE-BLOCK-BORDER-color: rgba( 71, 71, 71, 1 ); /* border color of block code */ - --CODE-INLINE-color: rgba( 130, 229, 80, 1 ); /* text color of inline code */ --CODE-INLINE-BG-color: rgba( 45, 45, 45, 1 ); /* background color of inline code */ --CODE-INLINE-BORDER-color: rgba( 71, 71, 71, 1 ); /* border color of inline code */ diff --git a/static/css/theme-zen-light.css b/static/css/theme-zen-light.css index 56ac4d5771..d9d0c3cf8a 100644 --- a/static/css/theme-zen-light.css +++ b/static/css/theme-zen-light.css @@ -1,10 +1,3 @@ -/* here in this showcase we use our own modified chroma syntax highlightning style; - if you want to use a predefined style instead: - - remove `markup.highlight.noClasses` from your config.toml - - set `markup.highlight.style` to a predefined style name in your config.toml - - remove the following `@import` of the self-defined chroma stylesheet */ -@import "chroma-relearn-light.css"; - :root { --PRIMARY-color: rgba( 26, 115, 232, 1 ); /* brand primary color */ --SECONDARY-color: rgba( 26, 115, 232, 1 ); /* brand secondary color */ @@ -15,11 +8,10 @@ --MAIN-TEXT-color: rgba( 0, 0, 0, 1 ); /* text color of content and h1 titles */ --MAIN-TITLES-TEXT-color: rgba( 16, 16, 16, 1 ); /* text color of h2-h6 titles and transparent box titles */ - /* adjusted to relearn-light chroma style */ + --CODE-theme: relearn-light; /* name of the chroma styleheet file */ --CODE-BLOCK-color: rgba( 39, 40, 34, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ --CODE-BLOCK-BG-color: rgba( 250, 250, 250, 1 ); /* fallback background color of block code; should be adjusted to your selected chroma style */ --CODE-BLOCK-BORDER-color: rgba( 210, 210, 210, 1 ); /* border color of block code */ - --CODE-INLINE-color: rgba( 94, 94, 94, 1 ); /* text color of inline code */ --CODE-INLINE-BG-color: rgba( 255, 250, 233, 1 ); /* background color of inline code */ --CODE-INLINE-BORDER-color: rgba( 248, 232, 200, 1 ); /* border color of inline code */ diff --git a/static/css/variant-internal.css b/static/css/variant-internal.css index d8ed642113..9bd7600a29 100644 --- a/static/css/variant-internal.css +++ b/static/css/variant-internal.css @@ -30,16 +30,15 @@ --INTERNAL-MAIN-TITLES-H5-font: var(--MAIN-TITLES-H5-font, var(--INTERNAL-MAIN-TITLES-H4-font)); --INTERNAL-MAIN-TITLES-H6-font: var(--MAIN-TITLES-H6-font, var(--INTERNAL-MAIN-TITLES-H5-font)); + --INTERNAL-CODE-theme: var(--CODE-theme, relearn-light); + --INTERNAL-CODE-font: var(--CODE-font, "Consolas", menlo, monospace); --INTERNAL-CODE-BLOCK-color: var(--CODE-BLOCK-color, var(--MAIN-CODE-color, rgba( 39, 40, 34, 1 ))); --INTERNAL-CODE-BLOCK-BG-color: var(--CODE-BLOCK-BG-color, var(--MAIN-CODE-BG-color, rgba( 250, 250, 250, 1 ))); --INTERNAL-CODE-BLOCK-BORDER-color: var(--CODE-BLOCK-BORDER-color, var(--MAIN-CODE-BG-color, var(--INTERNAL-CODE-BLOCK-BG-color))); - --INTERNAL-CODE-INLINE-color: var(--CODE-INLINE-color, rgba( 94, 94, 94, 1 )); --INTERNAL-CODE-INLINE-BG-color: var(--CODE-INLINE-BG-color, rgba( 255, 250, 233, 1 )); --INTERNAL-CODE-INLINE-BORDER-color: var(--CODE-INLINE-BORDER-color, rgba( 251, 240, 203, 1 )); - --INTERNAL-CODE-font: var(--CODE-font, "Consolas", menlo, monospace); - --INTERNAL-BROWSER-theme: var(--BROWSER-theme, light); --INTERNAL-MERMAID-theme: var(--CONFIG-MERMAID-theme, var(--MERMAID-theme, var(--INTERNAL-PRINT-MERMAID-theme))); --INTERNAL-OPENAPI-theme: var(--CONFIG-OPENAPI-theme, var(--OPENAPI-theme, var(--SWAGGER-theme, var(--INTERNAL-PRINT-OPENAPI-theme)))); diff --git a/static/js/theme.js b/static/js/theme.js index 4ecbbb9d7b..394cf40adb 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -683,6 +683,14 @@ function initCodeClipboard(){ } } +function initChroma( update ){ + var chroma = variants.getColorValue( 'CODE-theme' ); + var link = document.querySelector( '#R-variant-chroma-style' ); + var old_path = link.getAttribute( 'href' ); + var new_path = old_path.replace( /^(.*\/chroma-).*?(\.css.*)$/, '$1' + chroma + '$2' ); + link.setAttribute( 'href', new_path ); +} + function initArrowNav(){ if( isPrint ){ return; @@ -1464,6 +1472,7 @@ function updateTheme( detail ){ } window.relearn.lastVariant = detail.variant; + initChroma( true ); initMermaid( true ); initOpenapi( true ); document.dispatchEvent( new CustomEvent( 'themeVariantLoaded', { diff --git a/static/js/variant.js b/static/js/variant.js index d79794ad46..4f7022c3ab 100644 --- a/static/js/variant.js +++ b/static/js/variant.js @@ -571,16 +571,15 @@ var variants = { { name: 'MAIN-TITLES-H5-font', group: 'headings', fallback: 'MAIN-TITLES-H4-font', tooltip: 'text font of h5-h6 titles', }, { name: 'MAIN-TITLES-H6-font', group: 'headings', fallback: 'MAIN-TITLES-H5-font', tooltip: 'text font of h6 titles', }, + { name: 'CODE-theme', group: 'code', default: 'relearn-light', tooltip: 'name of the chroma styleheet file', }, + { name: 'CODE-font', group: 'code', default: '"Consolas", menlo, monospace', tooltip: 'text font of code', }, { name: 'CODE-BLOCK-color', group: 'code blocks', default: '#000000', tooltip: 'fallback text color of block code; should be adjusted to your selected chroma style', }, { name: 'CODE-BLOCK-BG-color', group: 'code blocks', default: '#f8f8f8', tooltip: 'fallback background color of block code; should be adjusted to your selected chroma style', }, { name: 'CODE-BLOCK-BORDER-color', group: 'code blocks', fallback: 'CODE-BLOCK-BG-color', tooltip: 'border color of block code', }, - { name: 'CODE-INLINE-color', group: 'inline code', default: '#5e5e5e', tooltip: 'text color of inline code', }, { name: 'CODE-INLINE-BG-color', group: 'inline code', default: '#fffae9', tooltip: 'background color of inline code', }, { name: 'CODE-INLINE-BORDER-color', group: 'inline code', default: '#fbf0cb', tooltip: 'border color of inline code', }, - { name: 'CODE-font', group: 'code', default: '"Consolas", menlo, monospace', tooltip: 'text font of code', }, - { name: 'BROWSER-theme', group: '3rd party', default: 'light', tooltip: 'name of the theme for browser scrollbars of the main section', }, { name: 'MERMAID-theme', group: '3rd party', default: 'default', tooltip: 'name of the default Mermaid theme for this variant, can be overridden in config.toml', }, { name: 'OPENAPI-theme', group: '3rd party', default: 'light', tooltip: 'name of the default OpenAPI theme for this variant, can be overridden in config.toml', },