Update color-schemes.mdx

This commit is contained in:
U. N. Owen 2023-08-28 13:08:54 +02:00 committed by GitHub
parent a99a177a8b
commit c7fa36157f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -41,10 +41,10 @@ For a detailed explanation of the color system, see https://m3.material.io/style
### Key colors ### Key colors
A color scheme is defined by a set of key colors. These key colors are not used by themselves, but A color scheme is defined by a set of key colors. These key colors are not used on their own, but
they are used to generate the rest of the color scheme. The key colors are: they are used to generate the rest of the color scheme. The key colors are:
- **Primary**: used for mainly used for interactive key components, like buttons, switches and input - **Primary**: mainly used for interactive key components, like buttons, switches and input
fields. Also used for [themed icons](/docs/user-guide/customization/themed-icons/) and as elevation overlay color (cards, dialogs and other elevated fields. Also used for [themed icons](/docs/user-guide/customization/themed-icons/) and as elevation overlay color (cards, dialogs and other elevated
surfaces will have a slight tint of this color) surfaces will have a slight tint of this color)
- **Secondary**: used for less prominent components, such as chips, badges and some (non interactive) headlines - **Secondary**: used for less prominent components, such as chips, badges and some (non interactive) headlines
@ -81,14 +81,14 @@ To learn how the different scheme colors are used in components, refer to the
Examples are shown in the color scheme editor. Keep in mind, that not all scheme colors are currently Examples are shown in the color scheme editor. Keep in mind, that not all scheme colors are currently
used by Kvaesitso. used by Kvaesitso.
For each scheme color, there is one variant for light mode, and one for dark mode. To toggle between
light and dark mode variants, use the <LightModeIcon /> and <DarkModeIcon /> buttons in the top right corner
of each section.
:::tip :::tip
Long press a color to display its name. Long press a color to display its name.
::: :::
For each scheme color, there is one variant for light mode, and one for dark mode. To toggle between
light and dark mode variants, use the <LightModeIcon /> and <DarkModeIcon /> buttons in the top right corner
of each section.
For each scheme color, you can either select a custom color, or you can derive a color from a key color. For each scheme color, you can either select a custom color, or you can derive a color from a key color.
To derive a color from a key color, select <PaletteIcon /> **Palette**, and then select the key color To derive a color from a key color, select <PaletteIcon /> **Palette**, and then select the key color
to derive from. You can then adjust the tone of the derived color by dragging the **T** slider. to derive from. You can then adjust the tone of the derived color by dragging the **T** slider.