Victorious is a shadcn/ui theme built around a purple primary color (#cf8fd6) with teal accents (#8fd6cf). The light mode uses a neutral background (#ffffff). Dark mode keeps the purple primary (#cf8fd6) on a purple-tinted background (#0a040b).
| Token | Light | Dark |
|---|---|---|
| Background | #ffffffwhite | #0a040bblack |
| Foreground | #080109black | #ffffffwhite |
| Card | #fcfcfcsnow | #0e060fblack |
| Card foreground | #040104black | #ffffffwhite |
| Popover | #ffffffwhite | #0a040bblack |
| Popover foreground | #080109black | #ffffffwhite |
| Primary | #cf8fd6plum | #cf8fd6plum |
| Primary foreground | #230e25black | #230e25black |
| Secondary | #d6cf8fburlywood | #d6cf8fburlywood |
| Secondary foreground | #25230eblack | #25230eblack |
| Muted | #e1e0dbgainsboro | #24231eblack |
| Muted foreground | #514f3ddarkolivegreen | #c2c0aesilver |
| Accent | #8fd6cfskyblue | #8fd6cfskyblue |
| Accent foreground | #0e2523black | #0e2523black |
| Destructive | #d2500fchocolate | #db530fchocolate |
| Destructive foreground | #ffffffwhite | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #cf8fd6plum | #cf8fd6plum |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 20.61:1 | AAA |
| Text on card | 20.31:1 | AAA |
| Primary button | 7.35:1 | AAA |
| Secondary button | 9.97:1 | AAA |
| Muted text | 6.25:1 | AA |
| Accent | 9.73:1 | AAA |
| Destructive | 4.30:1 | AA Large |
| Text on background | 20.26:1 | AAA |
| Text on card | 20.01:1 | AAA |
| Primary button | 7.35:1 | AAA |
| Secondary button | 9.97:1 | AAA |
| Muted text | 8.55:1 | AAA |
| Accent | 9.73:1 | AAA |
| Destructive | 3.98:1 | AA Large |
Paste this into your globals.css to use Victorious in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0.105 0.032 324.864);
--muted: oklch(0.906 0.006 101.4);
--muted-foreground: oklch(0.426 0.029 102.252);
--popover: oklch(1 0 180);
--popover-foreground: oklch(0.105 0.032 324.864);
--card: oklch(0.992 0 161.565);
--card-foreground: oklch(0.083 0.025 324.864);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.737 0.123 323.232);
--primary-foreground: oklch(0.206 0.054 323.482);
--secondary: oklch(0.846 0.084 102.623);
--secondary-foreground: oklch(0.253 0.036 102.951);
--accent: oklch(0.828 0.073 187.933);
--accent-foreground: oklch(0.246 0.03 186.816);
--destructive: oklch(0.597 0.177 41.223);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.737 0.123 323.232);
--chart-1: oklch(0.737 0.123 323.232);
--chart-2: oklch(0.846 0.084 102.623);
--chart-3: oklch(0.828 0.073 187.933);
--chart-4: oklch(0.861 0.076 102.505);
--chart-5: oklch(0.736 0.131 323.264);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.125 0.023 323.94);
--foreground: oklch(1 0 180);
--muted: oklch(0.256 0.009 101.807);
--muted-foreground: oklch(0.803 0.025 101.76);
--popover: oklch(0.125 0.023 323.94);
--popover-foreground: oklch(1 0 180);
--card: oklch(0.138 0.026 323.592);
--card-foreground: oklch(1 0 180);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.737 0.123 323.232);
--primary-foreground: oklch(0.206 0.054 323.482);
--secondary: oklch(0.846 0.084 102.623);
--secondary-foreground: oklch(0.253 0.036 102.951);
--accent: oklch(0.828 0.073 187.933);
--accent-foreground: oklch(0.246 0.03 186.816);
--destructive: oklch(0.617 0.184 41.15);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.737 0.123 323.232);
--chart-1: oklch(0.737 0.123 323.232);
--chart-2: oklch(0.846 0.084 102.623);
--chart-3: oklch(0.828 0.073 187.933);
--chart-4: oklch(0.861 0.076 102.505);
--chart-5: oklch(0.736 0.131 323.264);
}