diff --git a/docs/docs/user-guide/customization/color-schemes.md b/docs/docs/user-guide/customization/color-schemes.md deleted file mode 100644 index 42d2c213..00000000 --- a/docs/docs/user-guide/customization/color-schemes.md +++ /dev/null @@ -1,52 +0,0 @@ -# Color Schemes - -## Default - -The default color scheme is different depending on the Android version: - -- On **Android 12+**: the default color scheme is the color scheme provided by the system, usually based on the wallpaper (“Material You”). -- On **Android 8.1 - Android 11**: the default color scheme is based on the current wallpaper (“Material You Compat”) -- On **Android 8.0**: the default color scheme is a blueish fallback theme because the APIs to extract wallpaper colors do not exist on this version. This is also used on Android 8.1 - Android 11 if the wallpaper color extraction fails for some reason. - -## Black and White - -A high contrast theme using only black and white. - -## Custom - -Customize the launchers color scheme to your likings. There is a simple mode and an advanced mode. You can toggle between them using the overflow menu in the top right corner. - -Since Kvaesitso uses Material Design 3, all colors are based on the [Material 3 color system](https://m3.material.io/styles/color/the-color-system/key-colors-tones). - -### Simple mode - -In simple mode, you specify six base colors from which a light and a dark color scheme will be generated. - -:::tip -You can also specify only one color, the primary color, and generate the rest using the “Generate from primary color” option in the overflow menu. This will generate a whole palette from one color, using the same method that wallpaper-based color schemes use to generate the entire color scheme from only one base color. -::: - -These are the six base colors. Refer to the [Material 3 documentation](https://m3.material.io/styles/color/the-color-system/key-colors-tones) for more information. - -- **Primary**: mainly used for interactive key components, like buttons, switches and input fields. Also used for [themed icons](./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 -- **Tertiary**: not used anywhere at the moment, reserved for future use -- **Neutral**: used as background for cards, dialogs, settings, and other surfaces. Also used for text and some icons. -- **Neutral variant**: used for banners, switch and slider tracks and for outlines. -- **Error**: used to indicate errors, like invalid inputs in text fields. - -Several color tones (brightness levels) are generated from each color. These tonal values are fixed so that the brightness of any given color doesn't actually matter that much. Surfaces and texts will always have high contrast to each other even though both are generated from the same base color. - -### Advanced mode - -In advanced mode, you have full control over every color that might or might not be used anywhere in the launcher UI. In this mode, you can customize light and dark mode color scheme seperately. Colors are used as is, without any further processing. - -:::tip -Since there are quite a lot of different colors and color shades, it can be tedious to customize every single color. A good approach is to set the base colors in simple mode and then switch to advanced mode to tweak only individual colors. -::: - -:::caution -If you switch back from advanced to simple mode at a later point, you will lose your customizations. -::: - -Please refer to the [Material Design 3 documentation](https://m3.material.io/styles/color/the-color-system/color-roles) to get an understanding how each of these colors is used. diff --git a/docs/docs/user-guide/customization/color-schemes.mdx b/docs/docs/user-guide/customization/color-schemes.mdx new file mode 100644 index 00000000..be590bb1 --- /dev/null +++ b/docs/docs/user-guide/customization/color-schemes.mdx @@ -0,0 +1,94 @@ +import AddIcon from '@mui/icons-material/AddRounded' +import EditIcon from '@mui/icons-material/EditRounded' +import MoreVertIcon from '@mui/icons-material/MoreVertRounded' +import ContentCopyIcon from '@mui/icons-material/ContentCopyRounded' +import AutoFixHighIcon from '@mui/icons-material/AutoFixHighRounded' +import LightModeIcon from '@mui/icons-material/LightModeRounded' +import DarkModeIcon from '@mui/icons-material/DarkModeRounded' +import PaletteIcon from '@mui/icons-material/PaletteRounded' + +# Color Schemes + +Color schemes can be managed at settings > appearance > color schemes. + +## Default + +The default color scheme is different depending on the Android version: + +- On **Android 12+**: the default color scheme is the color scheme provided by the system, usually based on the wallpaper (“Material You”). +- On **Android 8.1 - Android 11**: the default color scheme is based on the current wallpaper (“Material You Compat”) +- On **Android 8.0**: the default color scheme is a blueish fallback theme because the APIs to extract wallpaper colors do not exist on this version. This is also used on Android 8.1 - Android 11 if the wallpaper color extraction fails for some reason. + +## Black and White + +A high contrast theme using only black and white. + +## Custom color schemes + +Customize the launchers color scheme to your likings. You can have as many color schemes as you want. +Create a new color scheme by clicking the button in the bottom right corner, or by +selecting > **Duplicate** on an existing color scheme. + +You can then edit a color scheme by selecting > **Edit**. + + +Kvaesitso uses the Material Design 3 system for its user interface. The color schemes are therefore +based on the Material Design 3 color system. + +:::info +For a detailed explanation of the color system, see https://m3.material.io/styles/color/the-color-system +::: + +### Key colors + +A color scheme is defined by a set of key colors. These key colors are not used by themselves, 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 +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 +- **Tertiary**: not used anywhere at the moment, reserved for future use +- **Neutral**: used as background for cards, dialogs, settings, and other surfaces. Also used for text and some icons +- **Neutral variant**: used for banners, switch and slider tracks and for outlines +- **Error**: used to indicate errors, like invalid inputs in text fields + +Key colors can be edited in the "color palette" section in the first row of the color scheme editor. +For each key color, you can select a custom color, or you can use the system default, which is +usually based on the wallpaper. + +Material Design 3 comes with an algorithm to generate an entire key color palette based on a single +seed color (this is what the system uses to generate an entire color palette based on a single +wallpaper key color). To make use of this algorithm, each key color (except primary) has +a **From primary** button, which generates a new color based on the currently +selected primary color. + +### Scheme colors + +Scheme colors are colors that are derived from the key colors and that are used for actual UI +components. + +:::info +To derive these colors, Material 3 uses a color model called HCT (Hue, Chroma, Tone). In its core, +it is similar to the probably more commonly known HSL (Hue, Saturation, Lightness) color model, but it +better reflects how humans perceive colors. For more information, read https://material.io/blog/science-of-color-design + +Each scheme color is generated from a specific key color by changing the key color's tone. +::: + +To learn how the different scheme colors are used in components, refer to the +[Material 3 Design docs](https://m3.material.io/styles/color/the-color-system/color-roles). +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 and buttons in the top right corner +of each section. + +:::tip +Long press a color to display its name. +::: + +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 **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. \ No newline at end of file