variants: release generator to public #188

This commit is contained in:
Sören Weber 2022-02-21 00:24:22 +01:00
parent 269ccf7eea
commit 0e61737c53
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
3 changed files with 4 additions and 3 deletions

View file

@ -1,7 +1,6 @@
+++
title = "Stylesheet generator"
weight = 26
hidden = true
+++
This interactive tool may help you to generate your own color variant stylesheet.
@ -12,8 +11,9 @@ The graph is interactive and reflect the current colors. You can click on any of
The arrowed lines reflect how colors are inherited thru different parts of the theme if the descendent isn't overwritten. If you want to delete a color and let it inherit from its parent, just delete the value from the input field.
This is best seen in the `neon` variant with the differnet headings colors. There, colors for the heading `h1`, `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.
## Variant generator
<div id="vargenerator" class="mermaid" style="background-color: var(--INTERNAL-MAIN-TEXT-color);" align="center">Graph</div>

View file

@ -1,6 +1,5 @@
+++
title = "Stylesheet generrrat'r"
weight = 26
hidden = true
+++
{{< piratify >}}

View file

@ -34,6 +34,8 @@ This document shows you what's new in the latest release. For a detailed list of
To see what's now possible, see the new variants `relearn-dark` and `neon` that are coming with this release.
- **New**: To make the creation of new variants easier for you, we've added a new interactive [theme variant generator]({{%relref "basics/generator" %}}).
- **New**: You can now configure multiple color variants in your `config.toml`. In this case, the first variant is the default chosen on first view and a theme switch will be shown in the menu footer. See the [documentation]({{%relref "basics/customization/#multiple-variants" %}}) for configuration.
Note, that the new theme switch will not work with Internet Explorer 11 as it does not support CSS variables.