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%

This is the baseline, values can be changed based on what color they are on.


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

mages usually have a transparent black gradient scrim over them, therefore the color On Images is most of the time set to white.