Update color-schemes.mdx
This commit is contained in:
parent
a99a177a8b
commit
c7fa36157f
@ -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.
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user