Solid UI Neobrutalism

List Of Variables#

1
:root {
2
  --background: oklch(0.93 0.03 256);
3
  --foreground: oklch(0.28 0.09 268);
4
  --primary: oklch(0.72 0.19 260);
5
  --primary-foreground: oklch(0.28 0.09 268);
6
  --secondary-background: oklch(100% 0 0);
7
  --border: oklch(0.28 0.09 268);
8
  --ring: oklch(0.28 0.09 268);
9
  --overlay: oklch(0.28 0.09 268 / 0.8);
10
  --shadow: 4px 4px 0px 0px var(--border);
11
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
12
  --chart-1: oklch(0.646 0.222 41.116);
13
  --chart-2: oklch(0.6 0.118 184.704);
14
  --chart-3: oklch(0.398 0.07 227.392);
15
  --chart-4: oklch(0.828 0.189 84.429);
16
  --chart-5: oklch(0.769 0.188 70.08);
17
  --chart-active-dot: oklch(0.28 0.09 268);
18

19
  --info: oklch(0.95 0.024 236.81);
20
  --info-foreground: oklch(0.68 0.148143 238.1044);
21
  --success: oklch(0.95 0.0506 162.83);
22
  --success-foreground: oklch(0.69 0.1481 162.37);
23
  --warning: oklch(0.96 0.0569 95.61);
24
  --warning-foreground: oklch(0.71 0.186 48.13);
25
  --error: oklch(0.93 0.0314 17.73);
26
  --error-foreground: oklch(0.64 0.2082 25.38);
27

28
  --muted: oklch(0.97 0 0);
29
  --muted-foreground: oklch(0.556 0 0);
30
}
31

32
.dark {
33
  --background: oklch(0.28 0.09 268);
34
  --foreground: oklch(0.97 0.01 255);
35
  --primary: oklch(0.62 0.19 260);
36
  --primary-foreground: oklch(0.28 0.09 268);
37
  --secondary-background: oklch(0.28 0.09 268);
38
  --border: oklch(0.97 0.01 255);
39
  --ring: oklch(0.97 0.01 255);
40
  --overlay: oklch(0.28 0.09 268 / 0.8);
41
  --shadow: 4px 4px 0px 0px var(--border);
42
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
43
  --chart-1: oklch(0.488 0.243 264.376);
44
  --chart-2: oklch(0.696 0.17 162.48);
45
  --chart-3: oklch(0.769 0.188 70.08);
46
  --chart-4: oklch(0.627 0.265 303.9);
47
  --chart-5: oklch(0.645 0.246 16.439);
48
  --chart-active-dot: oklch(100% 0 0);
49

50
  --info: oklch(0.28 0.0875 267.91);
51
  --info-foreground: oklch(0.68 0.148143 238.1044);
52
  --success: oklch(0.26 0.0487 172.54);
53
  --success-foreground: oklch(0.69 0.1481 162.37);
54
  --warning: oklch(0.29 0.0638 53.82);
55
  --warning-foreground: oklch(0.71 0.186 48.13);
56
  --error: oklch(0.26 0.0886 26.05);
57
  --error-foreground: oklch(0.64 0.2082 25.38);
58

59
  --muted: oklch(0.269 0 0);
60
  --muted-foreground: oklch(0.708 0 0);
61
}

Adding New Colors#

To add new colors, you need to add them to your CSS file.

1
:root {
2
    ...
3
    --my-primary: oklch(0.5 0.2 200);
4
    --my-primary-foreground: oklch(0.2 0.1 200);
5
}
6

7
.dark {
8
    ...
9
    --my-primary: oklch(0.4 0.15 200);
10
    --my-primary-foreground: oklch(0.15 0.05 200);
11
}
12

13
@theme inline {
14
    --color-my-primary: var(--my-primary);
15
    --color-my-primary-foreground: var(--my-primary-foreground);
16
}

You can now use the my-primary color utility classes in your components.

1
<div class="bg-my-primary text-my-primary-foreground">My Primary</div>

Other Color Formats#

See the Tailwind CSS Documentation for more information on using colors in Tailwind CSS.

Other Themes#

Neutral#

1
:root {
2
  --background: oklch(0.97 0 0);
3
  --foreground: oklch(0.14 0 0);
4
  --primary: oklch(0.66 0 0);
5
  --primary-foreground: oklch(0.14 0 0);
6
  --secondary-background: oklch(100% 0 0);
7
  --border: oklch(0.14 0 0);
8
  --ring: oklch(0.14 0 0);
9
  --overlay: oklch(0.14 0 0 / 0.8);
10
  --shadow: 4px 4px 0px 0px var(--border);
11
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
12
  --chart-1: oklch(0.646 0.222 41.116);
13
  --chart-2: oklch(0.6 0.118 184.704);
14
  --chart-3: oklch(0.398 0.07 227.392);
15
  --chart-4: oklch(0.828 0.189 84.429);
16
  --chart-5: oklch(0.769 0.188 70.08);
17
  --chart-active-dot: oklch(0.14 0 0);
18

19
--info: oklch(0.95 0.024 236.81);
20
--info-foreground: oklch(0.68 0.148143 238.1044);
21
--success: oklch(0.95 0.0506 162.83);
22
--success-foreground: oklch(0.69 0.1481 162.37);
23
--warning: oklch(0.96 0.0569 95.61);
24
--warning-foreground: oklch(0.71 0.186 48.13);
25
--error: oklch(0.93 0.0314 17.73);
26
--error-foreground: oklch(0.64 0.2082 25.38);
27

28
--muted: oklch(0.97 0.00 0);
29
--muted-foreground: oklch(0.56 0.00 0);
30
}
31

32
.dark {
33
--background: oklch(0.20 0.00 0);
34
--foreground: oklch(0.99 0.00 0);
35
--primary: oklch(0.56 0.00 0);
36
--primary-foreground: oklch(0.14 0.00 0);
37
--secondary-background: oklch(0.14 0.00 0);
38
--border: oklch(0.99 0.00 0);
39
--ring: oklch(0.99 0.00 0);
40
--overlay: oklch(0.20 0.00 0 / 0.8);
41
--shadow: 4px 4px 0px 0px var(--border);
42
--shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
43
--chart-1: oklch(0.488 0.243 264.376);
44
--chart-2: oklch(0.696 0.17 162.48);
45
--chart-3: oklch(0.769 0.188 70.08);
46
--chart-4: oklch(0.627 0.265 303.9);
47
--chart-5: oklch(0.645 0.246 16.439);
48
--chart-active-dot: oklch(100% 0 0);
49

50
--info: oklch(0.28 0.0875 267.91);
51
--info-foreground: oklch(0.68 0.148143 238.1044);
52
--success: oklch(0.26 0.0487 172.54);
53
--success-foreground: oklch(0.69 0.1481 162.37);
54
--warning: oklch(0.29 0.0638 53.82);
55
--warning-foreground: oklch(0.71 0.186 48.13);
56
--error: oklch(0.26 0.0886 26.05);
57
--error-foreground: oklch(0.64 0.2082 25.38);
58

59
--muted: oklch(0.20 0.00 0);
60
--muted-foreground: oklch(0.72 0.00 0);
61
}

Slate#

1
:root {
2
  --background: oklch(96.8% 0.007 247.896);
3
  --foreground: oklch(12.9% 0.042 264.695);
4
  --primary: oklch(65.4% 0.046 257.417);
5
  --primary-foreground: oklch(12.9% 0.042 264.695);
6
  --secondary-background: oklch(100% 0 0);
7
  --border: oklch(12.9% 0.042 264.695);
8
  --ring: oklch(12.9% 0.042 264.695);
9
  --overlay: oklch(12.9% 0.042 264.695 / 0.8);
10
  --shadow: 4px 4px 0px 0px var(--border);
11
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
12
  --chart-1: oklch(0.646 0.222 41.116);
13
  --chart-2: oklch(0.6 0.118 184.704);
14
  --chart-3: oklch(0.398 0.07 227.392);
15
  --chart-4: oklch(0.828 0.189 84.429);
16
  --chart-5: oklch(0.769 0.188 70.08);
17
  --chart-active-dot: oklch(12.9% 0.042 264.695);
18

19
  --info: oklch(0.95 0.024 236.81);
20
  --info-foreground: oklch(0.68 0.148143 238.1044);
21
  --success: oklch(0.95 0.0506 162.83);
22
  --success-foreground: oklch(0.69 0.1481 162.37);
23
  --warning: oklch(0.96 0.0569 95.61);
24
  --warning-foreground: oklch(0.71 0.186 48.13);
25
  --error: oklch(0.93 0.0314 17.73);
26
  --error-foreground: oklch(0.64 0.2082 25.38);
27

28
  --muted: oklch(0.97 0.01 248);
29
  --muted-foreground: oklch(0.55 0.04 257);
30
}
31

32
.dark {
33
  --background: oklch(12.9% 0.042 264.695);
34
  --foreground: oklch(98.4% 0.003 247.858);
35
  --primary: oklch(55.4% 0.046 257.417);
36
  --primary-foreground: oklch(12.9% 0.042 264.695);
37
  --secondary-background: oklch(0.13 0.04 265);
38
  --border: oklch(98.4% 0.003 247.858);
39
  --ring: oklch(98.4% 0.003 247.858);
40
  --overlay: oklch(12.9% 0.042 264.695 / 0.8);
41
  --shadow: 4px 4px 0px 0px var(--border);
42
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
43
  --chart-1: oklch(0.488 0.243 264.376);
44
  --chart-2: oklch(0.696 0.17 162.48);
45
  --chart-3: oklch(0.769 0.188 70.08);
46
  --chart-4: oklch(0.627 0.265 303.9);
47
  --chart-5: oklch(0.645 0.246 16.439);
48
  --chart-active-dot: oklch(100% 0 0);
49

50
  --info: oklch(0.28 0.0875 267.91);
51
  --info-foreground: oklch(0.68 0.148143 238.1044);
52
  --success: oklch(0.26 0.0487 172.54);
53
  --success-foreground: oklch(0.69 0.1481 162.37);
54
  --warning: oklch(0.29 0.0638 53.82);
55
  --warning-foreground: oklch(0.71 0.186 48.13);
56
  --error: oklch(0.26 0.0886 26.05);
57
  --error-foreground: oklch(0.64 0.2082 25.38);
58

59
  --muted: oklch(0.21 0.04 266);
60
  --muted-foreground: oklch(0.71 0.04 257);
61
}

Gray#

1
:root {
2
  --background: oklch(0.97 0.00 265);
3
  --foreground: oklch(0.21 0.03 254);
4
  --primary: oklch(0.65 0.02 264);
5
  --primary-foreground: oklch(0.21 0.03 254);
6
  --secondary-background: oklch(100% 0 0);
7
  --border: oklch(0.21 0.03 254);
8
  --ring: oklch(0.21 0.03 254);
9
  --overlay: oklch(0.21 0.03 254 / 0.8);
10
  --shadow: 4px 4px 0px 0px var(--border);
11
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
12
  --chart-1: oklch(0.646 0.222 41.116);
13
  --chart-2: oklch(0.6 0.118 184.704);
14
  --chart-3: oklch(0.398 0.07 227.392);
15
  --chart-4: oklch(0.828 0.189 84.429);
16
  --chart-5: oklch(0.769 0.188 70.08);
17
  --chart-active-dot: oklch(0.21 0.03 254);
18

19
--info: oklch(0.95 0.024 236.81);
20
--info-foreground: oklch(0.68 0.148143 238.1044);
21
--success: oklch(0.95 0.0506 162.83);
22
--success-foreground: oklch(0.69 0.1481 162.37);
23
--warning: oklch(0.96 0.0569 95.61);
24
--warning-foreground: oklch(0.71 0.186 48.13);
25
--error: oklch(0.93 0.0314 17.73);
26
--error-foreground: oklch(0.64 0.2082 25.38);
27

28
--muted: oklch(0.97 0.00 265);
29
--muted-foreground: oklch(0.55 0.02 264);
30
}
31

32
.dark {
33
--background: oklch(0.21 0.03 254);
34
--foreground: oklch(0.98 0.00 248);
35
--primary: oklch(0.55 0.02 264);
36
--primary-foreground: oklch(0.21 0.03 254);
37
--secondary-background: oklch(0.13 0.03 262);
38
--border: oklch(0.98 0.00 248);
39
--ring: oklch(0.98 0.00 248);
40
--overlay: oklch(0.21 0.03 254 / 0.8);
41
--shadow: 4px 4px 0px 0px var(--border);
42
--shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
43
--chart-1: oklch(0.488 0.243 264.376);
44
--chart-2: oklch(0.696 0.17 162.48);
45
--chart-3: oklch(0.769 0.188 70.08);
46
--chart-4: oklch(0.627 0.265 303.9);
47
--chart-5: oklch(0.645 0.246 16.439);
48
--chart-active-dot: oklch(100% 0 0);
49

50
--info: oklch(0.28 0.0875 267.91);
51
--info-foreground: oklch(0.68 0.148143 238.1044);
52
--success: oklch(0.26 0.0487 172.54);
53
--success-foreground: oklch(0.69 0.1481 162.37);
54
--warning: oklch(0.29 0.0638 53.82);
55
--warning-foreground: oklch(0.71 0.186 48.13);
56
--error: oklch(0.26 0.0886 26.05);
57
--error-foreground: oklch(0.64 0.2082 25.38);
58

59
--muted: oklch(0.21 0.03 265);
60
--muted-foreground: oklch(0.71 0.02 261);
61
}

Zinc#

1
:root {
2
  --background: oklch(0.97 0.00 286);
3
  --foreground: oklch(0.14 0.00 286);
4
  --primary: oklch(0.65 0.01 286);
5
  --primary-foreground: oklch(0.14 0.00 286);
6
  --secondary-background: oklch(100% 0 0);
7
  --border: oklch(0.14 0.00 286);
8
  --ring: oklch(0.14 0.00 286);
9
  --overlay: oklch(0.14 0.00 286 / 0.8);
10
  --shadow: 4px 4px 0px 0px var(--border);
11
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
12
  --chart-1: oklch(0.646 0.222 41.116);
13
  --chart-2: oklch(0.6 0.118 184.704);
14
  --chart-3: oklch(0.398 0.07 227.392);
15
  --chart-4: oklch(0.828 0.189 84.429);
16
  --chart-5: oklch(0.769 0.188 70.08);
17
  --chart-active-dot: oklch(0.14 0.00 286);
18

19
  --info: oklch(0.95 0.024 236.81);
20
  --info-foreground: oklch(0.68 0.148143 238.1044);
21
  --success: oklch(0.95 0.0506 162.83);
22
  --success-foreground: oklch(0.69 0.1481 162.37);
23
  --warning: oklch(0.96 0.0569 95.61);
24
  --warning-foreground: oklch(0.71 0.186 48.13);
25
  --error: oklch(0.93 0.0314 17.73);
26
  --error-foreground: oklch(0.64 0.2082 25.38);
27

28
  --muted: oklch(0.97 0.00 286);
29
  --muted-foreground: oklch(0.55 0.01 286);
30
}
31

32
.dark {
33
  --background: oklch(0.14 0.00 286);
34
  --foreground: oklch(0.99 0.00 0);
35
  --primary: oklch(0.55 0.01 286);
36
  --primary-foreground: oklch(0.14 0.00 286);
37
  --secondary-background: oklch(0.14 0.00 286);
38
  --border: oklch(0.99 0.00 0);
39
  --ring: oklch(0.99 0.00 0);
40
  --overlay: oklch(0.14 0.00 286 / 0.8);
41
  --shadow: 4px 4px 0px 0px var(--border);
42
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
43
  --chart-1: oklch(0.488 0.243 264.376);
44
  --chart-2: oklch(0.696 0.17 162.48);
45
  --chart-3: oklch(0.769 0.188 70.08);
46
  --chart-4: oklch(0.627 0.265 303.9);
47
  --chart-5: oklch(0.645 0.246 16.439);
48
  --chart-active-dot: oklch(100% 0 0);
49

50
  --info: oklch(0.28 0.0875 267.91);
51
  --info-foreground: oklch(0.68 0.148143 238.1044);
52
  --success: oklch(0.26 0.0487 172.54);
53
  --success-foreground: oklch(0.69 0.1481 162.37);
54
  --warning: oklch(0.29 0.0638 53.82);
55
  --warning-foreground: oklch(0.71 0.186 48.13);
56
  --error: oklch(0.26 0.0886 26.05);
57
  --error-foreground: oklch(0.64 0.2082 25.38);
58

59
  --muted: oklch(0.21 0.01 286);
60
  --muted-foreground: oklch(0.71 0.01 286);
61
}

Stone#

1
:root {
2
  --background: oklch(0.97 0.00 106);
3
  --foreground: oklch(0.15 0.00 49);
4
  --primary: oklch(0.65 0.01 58);
5
  --primary-foreground: oklch(0.15 0.00 49);
6
  --secondary-background: oklch(100% 0 0);
7
  --border: oklch(0.15 0.00 49);
8
  --ring: oklch(0.15 0.00 49);
9
  --overlay: oklch(0.15 0.00 49 / 0.8);
10
  --shadow: 4px 4px 0px 0px var(--border);
11
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
12
  --chart-1: oklch(0.646 0.222 41.116);
13
  --chart-2: oklch(0.6 0.118 184.704);
14
  --chart-3: oklch(0.398 0.07 227.392);
15
  --chart-4: oklch(0.828 0.189 84.429);
16
  --chart-5: oklch(0.769 0.188 70.08);
17
  --chart-active-dot: oklch(0.15 0.00 49);
18

19
--info: oklch(0.95 0.024 236.81);
20
--info-foreground: oklch(0.68 0.148143 238.1044);
21
--success: oklch(0.95 0.0506 162.83);
22
--success-foreground: oklch(0.69 0.1481 162.37);
23
--warning: oklch(0.96 0.0569 95.61);
24
--warning-foreground: oklch(0.71 0.186 48.13);
25
--error: oklch(0.93 0.0314 17.73);
26
--error-foreground: oklch(0.64 0.2082 25.38);
27

28
--muted: oklch(0.97 0.00 106);
29
--muted-foreground: oklch(0.55 0.01 58);
30
}
31

32
.dark {
33
--background: oklch(0.22 0.01 56);
34
--foreground: oklch(0.98 0.00 106);
35
--primary: oklch(0.55 0.01 58);
36
--primary-foreground: oklch(0.15 0.00 49);
37
--secondary-background: oklch(0.15 0.00 49);
38
--border: oklch(0.98 0.00 106);
39
--ring: oklch(0.98 0.00 106);
40
--overlay: oklch(0.22 0.01 56 / 0.8);
41
--shadow: 4px 4px 0px 0px var(--border);
42
--shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
43
--chart-1: oklch(0.488 0.243 264.376);
44
--chart-2: oklch(0.696 0.17 162.48);
45
--chart-3: oklch(0.769 0.188 70.08);
46
--chart-4: oklch(0.627 0.265 303.9);
47
--chart-5: oklch(0.645 0.246 16.439);
48
--chart-active-dot: oklch(100% 0 0);
49

50
--info: oklch(0.28 0.0875 267.91);
51
--info-foreground: oklch(0.68 0.148143 238.1044);
52
--success: oklch(0.26 0.0487 172.54);
53
--success-foreground: oklch(0.69 0.1481 162.37);
54
--warning: oklch(0.29 0.0638 53.82);
55
--warning-foreground: oklch(0.71 0.186 48.13);
56
--error: oklch(0.26 0.0886 26.05);
57
--error-foreground: oklch(0.64 0.2082 25.38);
58

59
--muted: oklch(0.22 0.01 56);
60
--muted-foreground: oklch(0.72 0.01 56);
61
}

Blue#

1
:root {
2
  --background: oklch(0.93 0.03 256);
3
  --foreground: oklch(0.28 0.09 268);
4
  --primary: oklch(0.72 0.19 260);
5
  --primary-foreground: oklch(0.28 0.09 268);
6
  --secondary-background: oklch(100% 0 0);
7
  --border: oklch(0.28 0.09 268);
8
  --ring: oklch(0.28 0.09 268);
9
  --overlay: oklch(0.28 0.09 268 / 0.8);
10
  --shadow: 4px 4px 0px 0px var(--border);
11
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
12
  --chart-1: oklch(0.646 0.222 41.116);
13
  --chart-2: oklch(0.6 0.118 184.704);
14
  --chart-3: oklch(0.398 0.07 227.392);
15
  --chart-4: oklch(0.828 0.189 84.429);
16
  --chart-5: oklch(0.769 0.188 70.08);
17
  --chart-active-dot: oklch(0.28 0.09 268);
18

19
  --info: oklch(0.95 0.024 236.81);
20
  --info-foreground: oklch(0.68 0.148143 238.1044);
21
  --success: oklch(0.95 0.0506 162.83);
22
  --success-foreground: oklch(0.69 0.1481 162.37);
23
  --warning: oklch(0.96 0.0569 95.61);
24
  --warning-foreground: oklch(0.71 0.186 48.13);
25
  --error: oklch(0.93 0.0314 17.73);
26
  --error-foreground: oklch(0.64 0.2082 25.38);
27

28
  --muted: oklch(0.97 0 0);
29
  --muted-foreground: oklch(0.556 0 0);
30
}
31

32
.dark {
33
  --background: oklch(0.28 0.09 268);
34
  --foreground: oklch(0.97 0.01 255);
35
  --primary: oklch(0.62 0.19 260);
36
  --primary-foreground: oklch(0.28 0.09 268);
37
  --secondary-background: oklch(0.28 0.09 268);
38
  --border: oklch(0.97 0.01 255);
39
  --ring: oklch(0.97 0.01 255);
40
  --overlay: oklch(0.28 0.09 268 / 0.8);
41
  --shadow: 4px 4px 0px 0px var(--border);
42
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
43
  --chart-1: oklch(0.488 0.243 264.376);
44
  --chart-2: oklch(0.696 0.17 162.48);
45
  --chart-3: oklch(0.769 0.188 70.08);
46
  --chart-4: oklch(0.627 0.265 303.9);
47
  --chart-5: oklch(0.645 0.246 16.439);
48
  --chart-active-dot: oklch(100% 0 0);
49

50
  --info: oklch(0.28 0.0875 267.91);
51
  --info-foreground: oklch(0.68 0.148143 238.1044);
52
  --success: oklch(0.26 0.0487 172.54);
53
  --success-foreground: oklch(0.69 0.1481 162.37);
54
  --warning: oklch(0.29 0.0638 53.82);
55
  --warning-foreground: oklch(0.71 0.186 48.13);
56
  --error: oklch(0.26 0.0886 26.05);
57
  --error-foreground: oklch(0.64 0.2082 25.38);
58

59
  --muted: oklch(0.269 0 0);
60
  --muted-foreground: oklch(0.708 0 0);
61
}

Red#

1
:root {
2
  --background: oklch(0.94 0.03 18);
3
  --foreground: oklch(0.26 0.09 26);
4
  --primary: oklch(0.74 0.21 25);
5
  --primary-foreground: oklch(0.26 0.09 26);
6
  --secondary-background: oklch(100% 0 0);
7
  --border: oklch(0.26 0.09 26);
8
  --ring: oklch(0.26 0.09 26);
9
  --overlay: oklch(0.26 0.09 26 / 0.8);
10
  --shadow: 4px 4px 0px 0px var(--border);
11
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
12
  --chart-1: oklch(0.646 0.222 41.116);
13
  --chart-2: oklch(0.6 0.118 184.704);
14
  --chart-3: oklch(0.398 0.07 227.392);
15
  --chart-4: oklch(0.828 0.189 84.429);
16
  --chart-5: oklch(0.769 0.188 70.08);
17
  --chart-active-dot: oklch(0.26 0.09 26);
18

19
--info: oklch(0.95 0.024 236.81);
20
--info-foreground: oklch(0.68 0.148143 238.1044);
21
--success: oklch(0.95 0.0506 162.83);
22
--success-foreground: oklch(0.69 0.1481 162.37);
23
--warning: oklch(0.96 0.0569 95.61);
24
--warning-foreground: oklch(0.71 0.186 48.13);
25
--error: oklch(0.93 0.0314 17.73);
26
--error-foreground: oklch(0.64 0.2082 25.38);
27

28
--muted: oklch(0.97 0 0);
29
--muted-foreground: oklch(0.556 0 0);
30

31
}
32

33
.dark {
34
--background: oklch(0.26 0.09 26);
35
--foreground: oklch(0.97 0.01 17);
36
--primary: oklch(0.64 0.21 25);
37
--primary-foreground: oklch(0.26 0.09 26);
38
--secondary-background: oklch(0.26 0.09 26);
39
--border: oklch(0.97 0.01 17);
40
--ring: oklch(0.97 0.01 17);
41
--overlay: oklch(0.26 0.09 26 / 0.8);
42
--shadow: 4px 4px 0px 0px var(--border);
43
--shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
44
--chart-1: oklch(0.488 0.243 264.376);
45
--chart-2: oklch(0.696 0.17 162.48);
46
--chart-3: oklch(0.769 0.188 70.08);
47
--chart-4: oklch(0.627 0.265 303.9);
48
--chart-5: oklch(0.645 0.246 16.439);
49
--chart-active-dot: oklch(100% 0 0);
50

51
--info: oklch(0.28 0.0875 267.91);
52
--info-foreground: oklch(0.68 0.148143 238.1044);
53
--success: oklch(0.26 0.0487 172.54);
54
--success-foreground: oklch(0.69 0.1481 162.37);
55
--warning: oklch(0.29 0.0638 53.82);
56
--warning-foreground: oklch(0.71 0.186 48.13);
57
--error: oklch(0.26 0.0886 26.05);
58
--error-foreground: oklch(0.64 0.2082 25.38);
59

60
--muted: oklch(0.269 0 0);
61
--muted-foreground: oklch(0.708 0 0);
62
}

Green#

1
:root {
2
  --background: oklch(0.96 0.04 157);
3
  --foreground: oklch(0.27 0.06 153);
4
  --primary: oklch(0.82 0.19 150);
5
  --primary-foreground: oklch(0.27 0.06 153);
6
  --secondary-background: oklch(100% 0 0);
7
  --border: oklch(0.27 0.06 153);
8
  --ring: oklch(0.27 0.06 153);
9
  --overlay: oklch(0.27 0.06 153 / 0.8);
10
  --shadow: 4px 4px 0px 0px var(--border);
11
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
12
  --chart-1: oklch(0.646 0.222 41.116);
13
  --chart-2: oklch(0.6 0.118 184.704);
14
  --chart-3: oklch(0.398 0.07 227.392);
15
  --chart-4: oklch(0.828 0.189 84.429);
16
  --chart-5: oklch(0.769 0.188 70.08);
17
  --chart-active-dot: oklch(0.27 0.06 153);
18

19
  --info: oklch(0.95 0.024 236.81);
20
  --info-foreground: oklch(0.68 0.148143 238.1044);
21
  --success: oklch(0.95 0.0506 162.83);
22
  --success-foreground: oklch(0.69 0.1481 162.37);
23
  --warning: oklch(0.96 0.0569 95.61);
24
  --warning-foreground: oklch(0.71 0.186 48.13);
25
  --error: oklch(0.93 0.0314 17.73);
26
  --error-foreground: oklch(0.64 0.2082 25.38);
27

28
  --muted: oklch(0.97 0 0);
29
  --muted-foreground: oklch(0.556 0 0);
30
}
31

32
.dark {
33
  --background: oklch(0.27 0.06 153);
34
  --foreground: oklch(0.98 0.02 156);
35
  --primary: oklch(0.72 0.19 150);
36
  --primary-foreground: oklch(0.27 0.06 153);
37
  --secondary-background: oklch(0.27 0.06 153);
38
  --border: oklch(0.98 0.02 156);
39
  --ring: oklch(0.98 0.02 156);
40
  --overlay: oklch(0.27 0.06 153 / 0.8);
41
  --shadow: 4px 4px 0px 0px var(--border);
42
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
43
  --chart-1: oklch(0.488 0.243 264.376);
44
  --chart-2: oklch(0.696 0.17 162.48);
45
  --chart-3: oklch(0.769 0.188 70.08);
46
  --chart-4: oklch(0.627 0.265 303.9);
47
  --chart-5: oklch(0.645 0.246 16.439);
48
  --chart-active-dot: oklch(100% 0 0);
49

50
  --info: oklch(0.28 0.0875 267.91);
51
  --info-foreground: oklch(0.68 0.148143 238.1044);
52
  --success: oklch(0.26 0.0487 172.54);
53
  --success-foreground: oklch(0.69 0.1481 162.37);
54
  --warning: oklch(0.29 0.0638 53.82);
55
  --warning-foreground: oklch(0.71 0.186 48.13);
56
  --error: oklch(0.26 0.0886 26.05);
57
  --error-foreground: oklch(0.64 0.2082 25.38);
58

59
  --muted: oklch(0.269 0 0);
60
  --muted-foreground: oklch(0.708 0 0);
61
}

Yellow#

1
:root {
2
  --background: oklch(0.97 0.07 103);
3
  --foreground: oklch(0.29 0.06 54);
4
  --primary: oklch(0.90 0.16 86);
5
  --primary-foreground: oklch(0.29 0.06 54);
6
  --secondary-background: oklch(100% 0 0);
7
  --border: oklch(0.29 0.06 54);
8
  --ring: oklch(0.29 0.06 54);
9
  --overlay: oklch(0.29 0.06 54 / 0.8);
10
  --shadow: 4px 4px 0px 0px var(--border);
11
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
12
  --chart-1: oklch(0.646 0.222 41.116);
13
  --chart-2: oklch(0.6 0.118 184.704);
14
  --chart-3: oklch(0.398 0.07 227.392);
15
  --chart-4: oklch(0.828 0.189 84.429);
16
  --chart-5: oklch(0.769 0.188 70.08);
17
  --chart-active-dot: oklch(0.29 0.06 54);
18

19
--info: oklch(0.95 0.024 236.81);
20
--info-foreground: oklch(0.68 0.148143 238.1044);
21
--success: oklch(0.95 0.0506 162.83);
22
--success-foreground: oklch(0.69 0.1481 162.37);
23
--warning: oklch(0.96 0.0569 95.61);
24
--warning-foreground: oklch(0.71 0.186 48.13);
25
--error: oklch(0.93 0.0314 17.73);
26
--error-foreground: oklch(0.64 0.2082 25.38);
27

28
--muted: oklch(0.97 0 0);
29
--muted-foreground: oklch(0.556 0 0);
30
}
31

32
.dark {
33
--background: oklch(0.29 0.06 54);
34
--foreground: oklch(0.99 0.03 102);
35
--primary: oklch(0.80 0.16 86);
36
--primary-foreground: oklch(0.29 0.06 54);
37
--secondary-background: oklch(0.29 0.06 54);
38
--border: oklch(0.99 0.03 102);
39
--ring: oklch(0.99 0.03 102);
40
--overlay: oklch(0.29 0.06 54 / 0.8);
41
--shadow: 4px 4px 0px 0px var(--border);
42
--shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
43
--chart-1: oklch(0.488 0.243 264.376);
44
--chart-2: oklch(0.696 0.17 162.48);
45
--chart-3: oklch(0.769 0.188 70.08);
46
--chart-4: oklch(0.627 0.265 303.9);
47
--chart-5: oklch(0.645 0.246 16.439);
48
--chart-active-dot: oklch(100% 0 0);
49

50
--info: oklch(0.28 0.0875 267.91);
51
--info-foreground: oklch(0.68 0.148143 238.1044);
52
--success: oklch(0.26 0.0487 172.54);
53
--success-foreground: oklch(0.69 0.1481 162.37);
54
--warning: oklch(0.29 0.0638 53.82);
55
--warning-foreground: oklch(0.71 0.186 48.13);
56
--error: oklch(0.26 0.0886 26.05);
57
--error-foreground: oklch(0.64 0.2082 25.38);
58

59
--muted: oklch(0.269 0 0);
60
--muted-foreground: oklch(0.708 0 0);
61
}

Purple#

1
:root {
2
  --background: oklch(0.95 0.03 307);
3
  --foreground: oklch(0.29 0.14 303);
4
  --primary: oklch(0.73 0.23 304);
5
  --primary-foreground: oklch(0.29 0.14 303);
6
  --secondary-background: oklch(100% 0 0);
7
  --border: oklch(0.29 0.14 303);
8
  --ring: oklch(0.29 0.14 303);
9
  --overlay: oklch(0.29 0.14 303 / 0.8);
10
  --shadow: 4px 4px 0px 0px var(--border);
11
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
12
  --chart-1: oklch(0.646 0.222 41.116);
13
  --chart-2: oklch(0.6 0.118 184.704);
14
  --chart-3: oklch(0.398 0.07 227.392);
15
  --chart-4: oklch(0.828 0.189 84.429);
16
  --chart-5: oklch(0.769 0.188 70.08);
17
  --chart-active-dot: oklch(0.29 0.14 303);
18

19
  --info: oklch(0.95 0.024 236.81);
20
  --info-foreground: oklch(0.68 0.148143 238.1044);
21
  --success: oklch(0.95 0.0506 162.83);
22
  --success-foreground: oklch(0.69 0.1481 162.37);
23
  --warning: oklch(0.96 0.0569 95.61);
24
  --warning-foreground: oklch(0.71 0.186 48.13);
25
  --error: oklch(0.93 0.0314 17.73);
26
  --error-foreground: oklch(0.64 0.2082 25.38);
27

28
  --muted: oklch(0.97 0 0);
29
  --muted-foreground: oklch(0.556 0 0);
30
}
31

32
.dark {
33
  --background: oklch(0.29 0.14 303);
34
  --foreground: oklch(0.98 0.01 308);
35
  --primary: oklch(0.63 0.23 304);
36
  --primary-foreground: oklch(0.29 0.14 303);
37
  --secondary-background: oklch(0.29 0.14 303);
38
  --border: oklch(0.98 0.01 308);
39
  --ring: oklch(0.98 0.01 308);
40
  --overlay: oklch(0.29 0.14 303 / 0.8);
41
  --shadow: 4px 4px 0px 0px var(--border);
42
  --shadow-destructive: 4px 4px 0px 0px oklch(0 0 0);
43
  --chart-1: oklch(0.488 0.243 264.376);
44
  --chart-2: oklch(0.696 0.17 162.48);
45
  --chart-3: oklch(0.769 0.188 70.08);
46
  --chart-4: oklch(0.627 0.265 303.9);
47
  --chart-5: oklch(0.645 0.246 16.439);
48
  --chart-active-dot: oklch(100% 0 0);
49

50
  --info: oklch(0.28 0.0875 267.91);
51
  --info-foreground: oklch(0.68 0.148143 238.1044);
52
  --success: oklch(0.26 0.0487 172.54);
53
  --success-foreground: oklch(0.69 0.1481 162.37);
54
  --warning: oklch(0.29 0.0638 53.82);
55
  --warning-foreground: oklch(0.71 0.186 48.13);
56
  --error: oklch(0.26 0.0886 26.05);
57
  --error-foreground: oklch(0.64 0.2082 25.38);
58

59
  --muted: oklch(0.269 0 0);
60
  --muted-foreground: oklch(0.708 0 0);
61
}

Theming