variant: show generator even if no themeVariant is configured #188

This commit is contained in:
Sören Weber 2022-02-21 00:35:50 +01:00
parent 0e61737c53
commit 3b0e21949a
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
3 changed files with 9 additions and 2 deletions

View file

@ -14,6 +14,13 @@ The arrowed lines reflect how colors are inherited thru different parts of the t
To better understand this select the `neon` variant and modify the differnet heading colors. There, colors for the heading `h2`, `h3` and `h4` are explicitly set. `h5` is not set and inherits its value from `h4`. `h6` is also not set and inherits its value from `h5`. To better understand this select the `neon` variant and modify the differnet heading colors. There, colors for the heading `h2`, `h3` and `h4` are explicitly set. `h5` is not set and inherits its value from `h4`. `h6` is also not set and inherits its value from `h5`.
Once you are satisfied, you can download the new variants file and install it in your site. Once you are satisfied, you can download the new variants file and install it in your site.
{{% notice note %}}
You need to define at least one `themeVariant` in your `config.toml` to modify and download the styles.
This only works in modern browsers.
{{% /notice %}}
## Variant generator ## Variant generator
<div id="vargenerator" class="mermaid" style="background-color: var(--INTERNAL-MAIN-TEXT-color);" align="center">Graph</div> <div id="vargenerator" class="mermaid" style="background-color: var(--INTERNAL-MAIN-TEXT-color);" align="center">Graph</div>

View file

@ -8,8 +8,8 @@
{{- $themevariants := slice | append .Site.Params.themeVariant }} {{- $themevariants := slice | append .Site.Params.themeVariant }}
{{- with index $themevariants 0 }} {{- with index $themevariants 0 }}
<link id="variant-style" href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"> <link id="variant-style" href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/variant.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
{{- end }} {{- end }}
<link href="{{"css/variant.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/theme-relearn-light.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print"> <link href="{{"css/theme-relearn-light.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print">
<link href="{{"css/print.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print"> <link href="{{"css/print.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print">
{{- range .Site.Params.custom_css }} {{- range .Site.Params.custom_css }}

View file

@ -316,7 +316,7 @@ var variants = {
{ name: 'MAIN-BG-color', group: 'content', default: '#ffffff', tooltip: 'background color of content', }, { name: 'MAIN-BG-color', group: 'content', default: '#ffffff', tooltip: 'background color of content', },
{ name: 'TAG-BG-color', group: 'content', fallback: 'MENU-HEADER-BG-color', tooltip: 'tag color', }, { name: 'TAG-BG-color', group: 'content', fallback: 'MENU-HEADER-BG-color', tooltip: 'tag color', },
{ name: 'MAIN-TITLES-TEXT-color', group: 'headings', default: '#444753', tooltip: 'text color of h2-h6 titles and transparent box titles', }, { name: 'MAIN-TITLES-TEXT-color', group: 'headings', default: '#4a4a4a', tooltip: 'text color of h2-h6 titles and transparent box titles', },
{ name: 'MAIN-TITLES-H1-color', group: 'headings', fallback: 'MAIN-TEXT-color', tooltip: 'text color of h1 titles', }, { name: 'MAIN-TITLES-H1-color', group: 'headings', fallback: 'MAIN-TEXT-color', tooltip: 'text color of h1 titles', },
{ name: 'MAIN-TITLES-H2-color', group: 'headings', fallback: 'MAIN-TITLES-TEXT-color', tooltip: 'text color of h2-h6 titles', }, { name: 'MAIN-TITLES-H2-color', group: 'headings', fallback: 'MAIN-TITLES-TEXT-color', tooltip: 'text color of h2-h6 titles', },
{ name: 'MAIN-TITLES-H3-color', group: 'headings', fallback: 'MAIN-TITLES-H2-color', tooltip: 'text color of h3-h6 titles', }, { name: 'MAIN-TITLES-H3-color', group: 'headings', fallback: 'MAIN-TITLES-H2-color', tooltip: 'text color of h3-h6 titles', },