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
|
||||
|
||||
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:
|
||||
|
||||
- **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
|
||||
surfaces will have a slight tint of this color)
|
||||
- **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
|
||||
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
|
||||
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.
|
||||
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.
|
||||
Loading…
x
Reference in New Issue
Block a user