Colors Usage

Within Shimoku you can use the different style tokens for components such as charts or html. This allows consistency to be maintained and makes it easy for Theme changes to be uncomplicated.

From the theming json you can change the hexes to adapt them to your color palette.

DO NOT MODIFY the Variable name

Use the variable name within your graphics or html for consistency.

To easily modify the styles change the HEX color of the variable. Check that the affected components are displayed correctly as you want.

For ease of use an enumerator can be used where all these names are already defined, you can import it from the library like this: 

from shimoku import ShimokuPalette

Main palette

PreviewColor nameHEXVariable nameComments

Color primary

#002FD8

var(--color-primary)

Color primary light

#B8C7F9

var(--color-primary-light)

Color primary dark

#0315B9

var(--color-primary-dark)

Color secondary

#29D86F

var(--color-secondary)

Color secondary light

#C7F0D8

var(--color-secondary-light)

Color secondary dark

#09B85A

var(--color-secondary-dark)

Color success

#2e7d32

var(--color-success)

Color success light

#4caf50

var(--color-success-light)

Color warning

#ed6c02

var(--color-warning)

Color warning light

#ff9800

var(--color-warning-light)

Color error

#d32f2f

var(--color-error)

Color error light

#ef5350

var(--color-error-light)

Color status error

#F76868

var(--color-status-error)

Color white

#FFFFFF

var(--color-white)

Color black

#202A36

var(--color-black)

Color base icon

#202A36

var(--color-base-icon)

Color background-default

#FFFFFF

var(--background-default)

Color Background paper

#FFFFFF

var(--background-paper)

Complementary & Chart series colors

PreviewColor nameHEXVariableComments

Complementary red

#EE3A4F

var(--complementary-red)

Complementary red light

#F86C7D

var(--complementary-red-light)

Complementary green

#2ED020

var(--complementary-green)

Complementary yellow

#F3B922

var(--complementary-yellow)

Complementary orange

#ED5627

var(--complementary-orange)

Complementary aqua

#20C69E

var(--complementary-aqua)

Complementary violet

#7208B4

var(--complementary-violet)

Chart C1

#4C72F9

var(--chart-C1)

Chart C2

#74D890

var(--chart-C2)

Chart C3

#F2BB67

var(--chart-C3)

Chart C4

#F78A68

var(--chart-C4)

Chart C5

#C6E2E9

var(--chart-C5)

Chart C6

#9BA4F5

var(--chart-C6)

Chart C7

#EAB8CD

var(--chart-C7)

Chart C8

#D28AC7

var(--chart-C8)

Chart C9

#B6AFD0

var(--chart-C9)

Chart C10

#4C5AA4

var(--chart-C10)

Grey

PreviewColor nameHEXVarComments

Grey50

#fafafa

var(--color-grey-50)

Grey100

#FAFAFB

var(--color-grey-100)

Grey200

#F1F1F5

var(--color-grey-200)

Grey300

#E2E2EA

var(--color-grey-300)

Grey400

#D5D5DC

var(--color-grey-400)

Grey500

#AEAEAE

var(--color-grey-500)

Grey600

#92929D

var(--color-grey-600)

Grey700

#696974

var(--color-grey-700)

Grey800

#44444F

var(--color-grey-800)

PreviousThemingNextActions

Last updated