Bright theme uses white as the background and surface color for components.
Dark theme uses a dark gray color, rather than black. Dark gray surfaces can express a wider range of color, elevation, and depth, because it's easier to see shadows on gray (instead of black).
Dark theme can have a colored background instead of dark grey. It's dark grey mixed with 8% primary color.
Surface colors affect surfaces of components, such as cards, sheets, and menus. The background color appears behind scrollable content.
> Use Surface for elevated material and Background for the background.
For the Theme, we need 5 globals:
Theme text global - set to one of: Color, Bright, Dark, Auto, System | #...
Bright color global - set to white
Dark color global - set to dark color
Surface text global:
Background text global:
In the Material Design system you select a primary and a secondary color to represent your brand. Dark and light variants of each color can then be applied throughout your UI.
A primary color is the color displayed most frequently across your app's screens and components.
To create contrast between UI elements, such as a top app bar from a system bar, you can use light or dark variants of your primary colors (set Theme global to Color). You can also use these to distinguish elements within a component, such as the icon of a floating action button from its circular container.
A secondary color provides more ways to accent and distinguish your product. Having a secondary color is optional, and should be applied sparingly to accent select parts of your UI. Your secondary color can also have variants.
If you don’t have a secondary color, use your primary color to accent elements (set Secondary global to Primary).
Secondary colors are best for:
Floating action buttons
Selection controls, like sliders and switches
Highlighting selected text
Links and headlines
Set the Primary and Secondary colors by specifying the name of those colors. The swatch is defined in the formula, based on the component it's applied to.
Pick from the Material Design color palette from 2014 or make your own palette with the Material Palette Generator.
For the colors, we need 5 text globals:
Primary = Primary color name - set to one of:
Secondary = Secondary color name - set to one of:
Palette = the text containing all colors:
Color = the formula for the primary color:
Accent = the formula for the secondary color:
Typography and Iconography Colors
App surfaces use colors from specific categories in your color palette, such as a primary color. Whenever elements, such as text or icons, appear in front of those surfaces, those elements should use colors designed to be clear and legible against the colors behind them.
This category of colors is called “on” colors, referring to the fact that they appear “on” top of surfaces. When a color appears “on” top of a primary color, it’s called an “on primary color.” They are labelled using the original color category (such as primary color) with the prefix “on.”
“On” colors are primarily applied to text, iconography, and strokes. (Sometimes, they are applied to surfaces.)
The default values for “on” colors are #FFFFFF and #000000.
Kustom can get the color of the text on surface automatically with a formula:
For maximum customization you can create a text global to override the "on" color formula.
OnTheme text global - set to one of: Auto | #...
The level of opacity changes based on the importance of that object:
Use separate globals for the text On Background = OnB, On Surface (Theme) = OnS, On Primary (Color) = OnC and On Secondary (Accent) = OnA.
For easier control over the whole theme, create a global text for the color and global numbers for each opacity level:
On Background globals
OnB = $if(gv(ontheme)~=#, gv(ontheme), ce(gv(background), contrast))$
OnB.0 = 87
OnB.1 = 60
OnB.2 = 38
OnB.3 = 12
On Surface globals
OnS = $if(gv(ontheme)~=#, gv(ontheme), ce(gv(surface), contrast))$
OnS.0 = 87
OnS.1 = 60
OnS.2 = 38
OnS.3 = 12
On Color globals
OnC = $ce(gv(color), contrast)$
OnC.0 = 100
OnC.1 = 74
OnC.2 = 38
OnC.3 = 12
On Accent globals
OnA = $ce(gv(accent), contrast)$
OnA.0 = 100
OnA.1 = 74
OnA.2 = 38
OnA.3 = 12
On Image globals
Text and icons on images have their own settings.
OnI = $ce(bp(dominant, gv(image)), contrast)$
OnI.0 = 100
OnI.1 = 68
OnI.2 = 38
OnI.3 = 12