introduction

customization

Configuration Theme Colors Color Modes Styles syntax

modules

elements

helpers

presets

packages

Colors

We provide a default color palette that you can use to customize your theme in case that you do not have any brand colors.

gray

100

#f6f7f9

200

#ebedef

300

#d4d8dd

400

#a4abb6

500

#747c8b

600

#4b5563

700

#363f4f

800

#1d2734

900

#101623

neutral

100

#fafafa

200

#eaeaec

300

#dadadd

400

#a7a7af

500

#76767f

600

#55555e

700

#44444b

800

#2c2c30

900

#1d1d20

warm

100

#fafaf9

200

#f0f0ef

300

#e0dddc

400

#b2aca9

500

#817974

600

#5d5651

700

#48423d

800

#2e2a29

900

#211e1c

red

100

#fef6f6

200

#fbe5e5

300

#f7c5c5

400

#eb7870

500

#e23636

600

#a61c1c

700

#7a1515

800

#500c0c

900

#350808

orange

100

#fef8f6

200

#fde9e2

300

#fbd0c1

400

#f38d68

500

#e85621

600

#ae3d13

700

#832c0c

800

#551c07

900

#381305

beige

100

#fdf9f6

200

#faefe5

300

#f4dcc7

400

#e6a875

500

#d97c30

600

#a45a1e

700

#7d4517

800

#4e2b0e

900

#341c09

yellow

100

#fffcf5

200

#fef6e1

300

#feebbe

400

#fbc850

500

#f0a905

600

#be8004

700

#905604

800

#593103

900

#3b2002

green

100

#f7fdf9

200

#e7f9ee

300

#cbf1d9

400

#72da9b

500

#34c56e

600

#299956

700

#1e713f

800

#134929

900

#0d301b

mint

100

#f7fdfb

200

#e7f8f4

300

#cbf0e7

400

#80dbc4

500

#38c7a3

600

#2b977c

700

#21735f

800

#14483b

900

#0d3027

aqua

100

#f6fcfe

200

#e4f7fb

300

#c1ecf6

400

#75d7ea

500

#21bede

600

#1991a9

700

#136e81

800

#0c4550

900

#082e35

blue

100

#f5f9ff

200

#cce2ff

300

#9bc5fd

400

#63a8fd

500

#1c76fd

600

#025cca

700

#024597

800

#022464

900

#011232

royal

100

#f6f7fd

200

#e5e7fa

300

#c7cbf4

400

#7d85e3

500

#3542d4

600

#202ba2

700

#18217b

800

#0f144d

900

#0a0d33

purple

100

#f9f7fd

200

#ebe5fa

300

#d5c8f3

400

#9678e2

500

#6235d4

600

#4622a0

700

#351a7a

800

#21104c

900

#160b32

pink

100

#fdf6fa

200

#fae5f1

300

#f5c7e0

400

#e675b3

500

#d9308d

600

#a41e68

700

#7d174f

800

#4e0e31

900

#340921

Using default colors

In case that you do not have custom colors defined in your project, you can import the @siimple/colors module in your configuration file to access the default colors provided in siimple.

siimple.config.js

import colors from "@siimple/colors";

// Comfigure siimple using the color palette
export default {
    colors: {
        primary: colors.mint["500"],
        secondary: colors.royal["600"],
        text: colors.gray["700"],
        // ...other colors
    },
    // ...other configuration
};

Adding all colors to your theme

You can register all colors in your theme just using a tiny piece of JS code to transform color objects into plain color names with the pattern {name}-{shade}:

siimple.config.js

import colors from "@siimple/colors";

export default {
    colors: {
        ...Object.keys(colors).reduce((prev, name) => ({
            ...prev,
            ...Object.fromEntries(Object.keys(colors[name]).map(shade => {
                return [`${name}-${shade}`, colors[name][shade]];
            })),
        }), {}),
        // ...other colors
    },
    // ...other configuration
};

If you have the helpers module enabled, this will generate the following colors helpers:

.has-bg-blue-100 { /* ... */ }
.has-bg-highlight { /* ... */ }
.has-bg-blue-300 { /* ... */ }
/* ... */
.has-text-blue-100 { /* ... */ }
.has-text-blue-200 { /* ... */ }
.has-text-blue-300 { /* ... */ }
/* ... */

Theme

Color Modes

Designed and maintained with by @jmjuanes.

Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.

Currently v4.3.1

Repository

Issues

Releases