mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-23 07:47:54 +00:00
variant: make chroma style dynamically switchable #679
This commit is contained in:
Sören Weber
parent
c7dd2632a3
commit
b49668a203
20 changed files with 103 additions and 118 deletions
2
assets/css/auto.css
Normal file
2
assets/css/auto.css
Normal file
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -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 -}}
|
||||
|
|
@ -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"
|
||||
|
||||
|
|
|
|||
|
|
@ -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-<NAME>.css`. To use it with your color variant you have to define `--CODE-theme: <NAME>` 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}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 */}}<!-- {{ $cssres.RelPermalink }} -->
|
||||
{{- 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 */}}<!-- {{ $cssres.RelPermalink }} -->
|
||||
{{- $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 */}}<!-- {{ $cssres.RelPermalink }} -->
|
||||
{{- 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 */}}<!-- {{ $cssres.RelPermalink }} -->
|
||||
|
||||
{{- return $themevariants }}
|
||||
|
|
@ -14,22 +14,14 @@
|
|||
<link href="{{"css/fonts.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="{{"css/fonts.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"></noscript>
|
||||
<link href="{{"css/theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
{{- $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 */}}<!-- link href="{{ $autocss.RelPermalink }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"-->
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- with index $themevariants 0 }}
|
||||
<link href="{{(printf "css/chroma-%s.css" .chroma) | safeHTML | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" id="R-variant-chroma-style">
|
||||
<link href="{{(printf "css/theme-%s.css" .identifier) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" id="R-variant-style">
|
||||
{{- end }}
|
||||
<link href="{{"css/variant.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
<link href="{{"css/print.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print">
|
||||
{{- $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)) }}
|
||||
<link href="{{(printf "css/format-%s.css" $outputFormat) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
{{- end }}
|
||||
<link href="{{"css/ie.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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))));
|
||||
|
|
|
|||
|
|
@ -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', {
|
||||
|
|
|
|||
|
|
@ -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', },
|
||||
|
|
|
|||
Loading…
Reference in a new issue