Theme
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.
Kustom Theme
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:
$if(gv(theme)~=#, gv(theme),
gv(theme)~=Auto,
if(ai(isday), gv(bright), gv(dark)),
gv(theme)~=System,
if(si(darkmode), gv(dark), gv(bright)),
gv(theme)=Color, gv(bright),
gv(gv(theme)))$
This formula is an example of a Surface text global for most cards. It can be adjusted based on what color the surface has to be.
Background text global:
$if(gv(theme)~=#, gv(theme),
gv(theme)=Color Auto,
if(ai(isday), gv(color), gv(dark)),
gv(theme)=Color System,
if(si(darkmode), gv(dark), gv(color)),
gv(theme)=Auto,
if(ai(isday), gv(bright), gv(dark)),
gv(theme)=System,
if(si(darkmode), gv(dark), gv(bright)),
gv(gv(theme)))$
This formula is an example of a Background text global for the Backdrop setup. Most of the time the Background is the same as Surface.
Color Accents
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.
Primary Color
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.
Secondary Color
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
Progress bars
Links and headlines
Kustom Colors
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:
Red, Pink, Purple, Deep Purple, Indigo, Blue, Light Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Gray, Blue Gray | #...
Secondary = Secondary color name - set to one of:
Red, Pink, Purple, Deep Purple, Indigo, Blue, Light Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Gray, Blue Gray | #...
Palette = the text containing all colors:
Material Design Color Palette 2014
.
Red
S050#FFEBEE
S100#FFCDD2
S200#EF9A9A
S300#E57373
S400#EF5350
S500#F44336
S600#E53935
S700#D32F2F
S800#C62828
S900#B71C1C
SA100#FF8A80
SA200#FF5252
SA400#FF1744
SA700#D50000
.
Pink
S050#FCE4EC
S100#F8BBD0
S200#F48FB1
S300#F06292
S400#EC407A
S500#E91E63
S600#D81B60
S700#C2185B
S800#AD1457
S900#880E4F
SA100#FF80AB
SA200#FF4081
SA400#F50057
SA700#C51162
.
Purple
S050#F3E5F5
S100#E1BEE7
S200#CE93D8
S300#BA68C8
S400#AB47BC
S500#9C27B0
S600#8E24AA
S700#7B1FA2
S800#6A1B9A
S900#4A148C
SA100#EA80FC
SA200#E040FB
SA400#D500F9
SA700#AA00FF
.
Deep Purple
S050#EDE7F6
S100#D1C4E9
S200#B39DDB
S300#9575CD
S400#7E57C2
S500#673AB7
S600#5E35B1
S700#512DA8
S800#4527A0
S900#311B92
SA100#B388FF
SA200#7C4DFF
SA400#651FFF
SA700#6200EA
.
Indigo
S050#E8EAF6
S100#C5CAE9
S200#9FA8DA
S300#7986CB
S400#5C6BC0
S500#3F51B5
S600#3949AB
S700#303F9F
S800#283593
S900#1A237E
SA100#8C9EFF
SA200#536DFE
SA400#3D5AFE
SA700#304FFE
.
Blue
S050#E3F2FD
S100#BBDEFB
S200#90CAF9
S300#64B5F6
S400#42A5F5
S500#2196F3
S600#1E88E5
S700#1976D2
S800#1565C0
S900#0D47A1
SA100#82B1FF
SA200#448AFF
SA400#2979FF
SA700#2962FF
.
Light Blue
S050#E1F5FE
S100#B3E5FC
S200#81D4FA
S300#4FC3F7
S400#29B6F6
S500#03A9F4
S600#039BE5
S700#0288D1
S800#0277BD
S900#01579B
SA100#80D8FF
SA200#40C4FF
SA400#00B0FF
SA700#0091EA
.
Cyan
S050#E0F7FA
S100#B2EBF2
S200#80DEEA
S300#4DD0E1
S400#26C6DA
S500#00BCD4
S600#00ACC1
S700#0097A7
S800#00838F
S900#006064
SA100#84FFFF
SA200#18FFFF
SA400#00E5FF
SA700#00B8D4
.
Teal
S050#E0F2F1
S100#B2DFD8
S200#80CBC4
S300#4DB6AC
S400#26A69A
S500#009688
S600#00897B
S700#00796B
S800#00695C
S900#004D40
SA100#A7FFEB
SA200#64FFDA
SA400#1DE9B6
SA700#00BFA5
.
Green
S050#E8F5E9
S100#C8E6C9
S200#A5D6A7
S300#81C784
S400#66BB6A
S500#4CAF50
S600#43A047
S700#388E3C
S800#2E7D32
S900#1B5E20
SA100#B9F6CA
SA200#69F0AE
SA400#00E676
SA700#00C853
.
Light Green
S050#F1F8E9
S100#DCEDC8
S200#C5E1A5
S300#AED581
S400#9CCC65
S500#8BC34A
S600#7CB342
S700#689F38
S800#558B2F
S900#33691E
SA100#CCFF90
SA200#B2FF59
SA400#76FF03
SA700#64DD17
.
Lime
S050#F9FBE7
S100#F0F4C3
S200#E6EE9C
S300#DCE775
S400#D4E157
S500#CDDC39
S600#C0CA33
S700#AFB42B
S800#9E9D24
S900#827717
SA100#F4FF81
SA200#EEFF41
SA400#C6FF00
SA700#AEEA00
.
Yellow
S050#FFFDE7
S100#FFF9C4
S200#FFF59D
S300#FFF176
S400#FFEE58
S500#FFEB3B
S600#FDD835
S700#FBC02D
S800#F9A825
S900#F57F17
SA100#FFFF8D
SA200#FFFF00
SA400#FFEA00
SA700#FFD600
.
Amber
S050#FFF8E1
S100#FFECB3
S200#FFE082
S300#FFD54F
S400#FFCA28
S500#FFC107
S600#FFB300
S700#FFA000
S800#FF8F00
SP900#FF6F00
SA100#FFE57F
SA200#FFD740
SA400#FFC400
SA700#FFAB00
.
Orange
S050#FFF3E0
S100#FFE0B2
S200#FFCC80
S300#FFB74D
S400#FFA726
S500#FF9800
S600#FB8C00
S700#F57C00
S800#EF6C00
S900#E65100
SA100#FFD180
SA200#FFAB40
SA400#FF9100
SA700#FF6D00
.
Deep Orange
S050#FBE9E7
S100#FFCCBC
S200#FFAB91
S300#FF8A65
S400#FF7043
S500#FF5722
S600#F4511E
S700#E64A19
S800#D84315
S900#BF360C
SA100#FF9E80
SA200#FF6E40
SA400#FF3D00
SA700#DD2C00
.
Brown
S050#EFEBE9
S100#D7CCC8
S200#BCAAA4
S300#A1887F
S400#8D6E63
S500#795548
S600#6D4C41
S700#5D4037
S800#4E342E
S900#3E2723
.
Gray
S050#FAFAFA
S100#F5F5F5
S200#EEEEEE
S300#E0E0E0
S400#BDBDBD
S500#9E9E9E
S600#757575
S700#616161
S800#424242
S900#212121
.
Blue Gray
S050#ECEFF1
S100#CFD8DC
S200#B0BEC5
S300#90A4AE
S400#78909C
S500#607D8B
S600#546E7A
S700#455A64
S800#37474F
S900#263238
.
material.io/design/color
Color = the formula for the primary color:
$if(gv(primary)~=#, gv(primary),
tc(cut, tc(split, tc(split, gv(palette), gv(primary), 1),
if(gv(theme)=Dark | (gv(theme)~=Auto & ai(isday)=0) | (gv(theme)~=System & si(darkmode)), "S200", "S500"), 1), 7))$
Accent = the formula for the secondary color:
$if(gv(secondary)~=#, gv(secondary),
tc(cut, tc(split, tc(split, gv(palette), gv(secondary), 1),
if(gv(theme)=Color | gv(theme)=Bright | (gv(theme)~=Auto & ai(isday)) | (gv(theme)~=System & si(darkmode)=0), "S700", "S200"), 1), 7))$
The swatches can be adjusted based on which component they are applied to (this is for components that use swatch 700 in bright mode).
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.
https://material.io/design/color/the-color-system.html#color-theme-creation
"On" Colors
Kustom can get the color of the text on surface automatically with a formula:
$ce(gv(surface), contrast)$
For maximum customization you can create a text global to override the "on" color formula.
OnTheme text global - set to one of: Auto | #...
Object Opacity
The level of opacity changes based on the importance of that object:
Primary: 87%
Secondary: 60%
Tertiary: 38%
Quaternary: 12%
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