Colors
Overview
Below is a table of the custom colors that we have defined. These colors can be used to by themselves or in combination with the utility classes to style components and screens in a consistent way.
Note: These are just the default colors. You can customize these colors in the custom stylesheet.
Color Definitions
Name | CSS Variable | Color Value | Color Value (Dark Mode) |
---|---|---|---|
White | --color-white | oklch(100% 0 0) | oklch(0% 0 0) |
Black | --color-black | oklch(0% 0 0) | oklch(100% 0 0) |
Primary | --color-primary | oklch(49.12% 0.3096 275.75) | oklch(49.12% 0.3096 275.75) |
Primary Content | --color-primary-content | oklch(89.824% 0.06192 275.75) | oklch(89.824% 0.06192 275.75) |
Secondary | --color-secondary | oklch(69.71% 0.329 342.55) | oklch(69.71% 0.329 342.55) |
Secondary Content | --color-secondary-content | oklch(98.71% 0.0106 342.55) | oklch(98.71% 0.0106 342.55) |
Accent | --color-accent | oklch(76.76% 0.184 183.61) | oklch(76.76% 0.184 183.61) |
Accent Content | --color-accent-content | oklch(47.65% 0.113 183.61) | oklch(15.352% 0.0368 183.61) |
Info | --color-info | oklch(72.06% 0.191 231.6) | oklch(72.06% 0.191 231.6) |
Info Content | --color-info-content | oklch(44.12% 0.1175 231.6) | oklch(0% 0 0) |
Success | --color-success | oklch(64.8% 0.15 160) | oklch(64.8% 0.15 160) |
Success Content | --color-success-content | oklch(48.24% 0.15 160) | oklch(0% 0 0) |
Warning | --color-warning | oklch(84.71% 0.199 83.87) | oklch(84.71% 0.199 83.87) |
Warning Content | --color-warning-content | oklch(55.89% 0.1317 83.87) | oklch(0% 0 0) |
Error | --color-error | oklch(71.76% 0.221 22.18) | oklch(71.76% 0.221 22.18) |
Error Content | --color-error-content | oklch(48.83% 0.221 22.18) | oklch(0% 0 0) |
Neutral 10 | --color-neutral-10 | oklch(96.68% 0.006 264.53) | oklch(19.73% 0.009 240.37) |
Neutral 20 | --color-neutral-20 | oklch(90.81% 0.008 253.86) | oklch(26.8% 0.01 229.31) |
Neutral 30 | --color-neutral-30 | oklch(82.68% 0.011 247.96) | oklch(34.47% 0.012 243.17) |
Neutral 40 | --color-neutral-40 | oklch(73.14% 0.013 248) | oklch(43.87% 0.011 243.05) |
Neutral 50 | --color-neutral-50 | oklch(64.14% 0.015 258.36) | oklch(54.16% 0.014 248.08) |
Neutral 60 | --color-neutral-60 | oklch(54.16% 0.014 248.08) | oklch(64.14% 0.015 258.36) |
Neutral 70 | --color-neutral-70 | oklch(43.87% 0.011 243.05) | oklch(73.14% 0.013 248) |
Neutral 80 | --color-neutral-80 | oklch(34.47% 0.012 243.17) | oklch(82.68% 0.011 247.96) |
Neutral 90 | --color-neutral-90 | oklch(26.8% 0.01 229.31) | oklch(90.81% 0.008 253.86) |
Neutral 100 | --color-neutral-100 | oklch(19.73% 0.009 240.37) | oklch(96.68% 0.006 264.53) |