Themes & Design Tokens

Beautifully designed open-source themes and design tokens built from our apps.

Default Theme

A default theme for the Inverter UI

Light(33)

--backgroundhsl(210 20% 98%)

--background-2hsl(210 8% 95%)

--foregroundhsl(222 9% 21%)

--accenthsl(220 18% 10% / 0.03)

--accent-foregroundhsl(220 18% 10%)

--cardhsl(0 0 100%)

--card-foregroundhsl(220 18% 10%)

--destructivehsl(5 77% 47%)

--destructive-activehsl(5 77% 47%)

--destructive-foregroundhsl(0 0 100%)

--destructive-hoverhsl(7 85% 60%)

--inputhsl(216 4% 74%)

--input-hoverhsl(220 4% 44%)

--linkhsl(240 92% 65%)

--link-activehsl(240 92% 65%)

--link-hoverhsl(235 100% 72%)

--mutedhsl(220 4% 44%)

--muted-foregroundhsl(220 18% 10%)

--popoverhsl(0 0 100%)

--popover-foregroundhsl(220 18% 10%)

--primaryhsl(220 18% 10%)

--primary-activehsl(220 18% 10%)

--primary-foregroundhsl(0 0 100%)

--primary-hoverhsl(222 9% 21%)

--secondaryhsl(220 18% 10% / 0.08)

--secondary-activehsl(220 18% 10% / 0.06)

--secondary-foregroundhsl(220 18% 10%)

--secondary-hoverhsl(220 18% 10% / 0.12)

--borderhsl(200 7% 92%)

--ringhsl(235 100% 72%)

--errorhsl(5 77% 47%)

--successhsl(101 84% 27%)

--warninghsl(44 100% 28%)

Dark(38)

--accenthsl(0 0 100% / 0.03)

--accent-foregroundhsl(0 0 100%)

--backgroundhsl(220 9% 7%)

--background-2hsl(220 7% 9%)

--foregroundhsl(0 0 100%)

--cardhsl(210 8% 10%)

--card-foregroundhsl(0 0 100%)

--destructivehsl(7 87% 56%)

--destructive-activehsl(7 87% 56%)

--destructive-foregroundhsl(0 0 100%)

--destructive-hoverhsl(10 100% 67%)

--inputhsl(204 4% 26%)

--input-hoverhsl(204 2% 39%)

--linkhsl(237 73% 68%)

--link-activehsl(233 80% 74%)

--link-hoverhsl(233 79% 81%)

--mutedhsl(204 3% 61%)

--muted-foregroundhsl(0 0 100%)

--popoverhsl(220 9% 7%)

--popover-foregroundhsl(0 0 100%)

--primaryhsl(0 0 100%)

--primary-activehsl(210 4% 69%)

--primary-foregroundhsl(220 9% 7%)

--primary-hoverhsl(200 17% 93%)

--secondaryhsl(0 0 100% / 0.06)

--secondary-activehsl(0 0 100% / 0.04)

--secondary-foregroundhsl(0 0 100%)

--secondary-hoverhsl(0 0 100% / 0.08)

--errorhsl(10 100% 67%)

--successhsl(127 67% 42%)

--warninghsl(40 69% 47%)

--borderhsl(216 6% 17%)

--ringhsl(237 73% 68%)

--chart-1hsl(155 78% 55%)

--chart-2hsl(204 4% 26%)

--chart-3hsl(155 78% 55%)

--chart-4hsl(7 87% 56%)

--chart-5hsl(127 67% 42%)

Tokenizer Theme

A theme for the tokenizer component

Light(38)

--accenthsl(220 18% 10% / 0.03)

--accent-foregroundhsl(220 18% 10%)

--backgroundhsl(210 25% 98%)

--background-2hsl(210 14% 97%)

--foregroundhsl(220 18% 10%)

--borderhsl(200 7% 92%)

--cardhsl(0 0 100%)

--card-foregroundhsl(220 18% 10%)

--inputhsl(220 3% 62%)

--input-hoverhsl(216 6% 32%)

--mutedhsl(220 4% 40%)

--muted-foregroundhsl(210 14% 97%)

--popoverhsl(0 0 100%)

--popover-foregroundhsl(220 18% 10%)

--primaryhsl(48 97% 47%)

--primary-activehsl(48 97% 47%)

--primary-foregroundhsl(220 18% 10%)

--primary-hoverhsl(49 96% 78%)

--secondaryhsl(220 18% 10% / 0.08)

--secondary-activehsl(220 18% 10% / 0.06)

--secondary-foregroundhsl(220 18% 10%)

--secondary-hoverhsl(220 18% 10% / 0.12)

--destructivehsl(1 80% 44%)

--destructive-activehsl(1 80% 44%)

--destructive-foregroundhsl(0 0 100%)

--destructive-hoverhsl(2 81% 56%)

--errorhsl(1 80% 44%)

--successhsl(113 89% 24%)

--warninghsl(43 100% 26%)

--linkhsl(252 65% 50%)

--link-activehsl(252 65% 50%)

--link-hoverhsl(247 89% 61%)

--chart-1hsl(48 97% 47%)

--chart-2hsl(113 89% 24%)

--chart-3hsl(1 80% 44%)

--chart-4hsl(220 18% 10%)

--chart-5hsl(220 4% 40%)

--ringhsl(31 100% 31%)

Dark(38)

--accenthsl(210 10% 89% / 0.03)

--accent-foregroundhsl(0 0 100%)

--backgroundhsl(225 11% 7%)

--background-2hsl(225 9% 9%)

--foregroundhsl(0 0 100%)

--borderhsl(216 6% 17%)

--cardhsl(216 9% 11%)

--card-foregroundhsl(0 0 100%)

--inputhsl(220 4% 27%)

--input-hoverhsl(210 3% 36%)

--mutedhsl(210 4% 67%)

--muted-foregroundhsl(216 6% 17%)

--popoverhsl(225 11% 7%)

--popover-foregroundhsl(0 0 100%)

--primaryhsl(48 73% 59%)

--primary-activehsl(48 73% 59%)

--primary-foregroundhsl(225 11% 7%)

--primary-hoverhsl(48 76% 79%)

--secondaryhsl(210 10% 89% / 0.08)

--secondary-activehsl(210 10% 89% / 0.06)

--secondary-foregroundhsl(210 10% 89%)

--secondary-hoverhsl(210 10% 89% / 0.12)

--successhsl(110 100% 33%)

--warninghsl(46 100% 35%)

--errorhsl(4 78% 64%)

--destructivehsl(0 66% 42%)

--destructive-activehsl(0 66% 42%)

--destructive-foregroundhsl(0 0 100%)

--destructive-hoverhsl(2 66% 53%)

--linkhsl(237 100% 75%)

--link-activehsl(237 100% 75%)

--link-hoverhsl(233 100% 80%)

--ringhsl(36 81% 69%)

--chart-1hsl(48 73% 59%)

--chart-2hsl(110 100% 33%)

--chart-3hsl(4 78% 64%)

--chart-4hsl(0 0 100%)

--chart-5hsl(210 4% 67%)