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`.
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
<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 }}
{{- with index $themevariants 0 }}
<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 }}
<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/print.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print">
{{- 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: '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-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', },