zhaolei/NetMesh
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
Files
main
NetMesh/infrastructure/config/uiThemes.ts

3164 lines
92 KiB
TypeScript
Raw Permalink Normal View History

[Init] Initial commit - NetMesh terminal manager
2026-09-13 18:24:01 +08:00
export type UiThemeTokens = {
background: string;
foreground: string;
card: string;
cardForeground: string;
popover: string;
popoverForeground: string;
primary: string;
primaryForeground: string;
secondary: string;
secondaryForeground: string;
muted: string;
mutedForeground: string;
accent: string;
accentForeground: string;
destructive: string;
destructiveForeground: string;
border: string;
input: string;
ring: string;
};
export type UiThemePreset = {
id: string;
name: string;
collection?: "core";
tokens: UiThemeTokens;
};
export const CORE_LIGHT_UI_THEMES: UiThemePreset[] = [
{
id: "snow",
name: "Snow",
collection: "core",
tokens: {
background: "216 33% 96%",
foreground: "222 47% 12%",
card: "0 0% 100%",
cardForeground: "222 47% 12%",
popover: "0 0% 100%",
popoverForeground: "222 47% 12%",
primary: "208 100% 50%",
primaryForeground: "0 0% 100%",
secondary: "220 16% 90%",
secondaryForeground: "222 47% 12%",
muted: "220 16% 90%",
mutedForeground: "220 10% 45%",
accent: "208 100% 50%",
accentForeground: "222 47% 12%",
destructive: "0 70% 50%",
destructiveForeground: "0 0% 100%",
border: "220 16% 82%",
input: "220 16% 82%",
ring: "208 100% 50%",
},
},
{
id: "pure-white",
name: "Pure White",
collection: "core",
tokens: {
background: "0 0% 100%",
foreground: "222 47% 12%",
card: "0 0% 100%",
cardForeground: "222 47% 12%",
popover: "0 0% 100%",
popoverForeground: "222 47% 12%",
primary: "210 90% 48%",
primaryForeground: "0 0% 100%",
secondary: "220 12% 95%",
secondaryForeground: "222 47% 12%",
muted: "220 12% 95%",
mutedForeground: "220 10% 45%",
accent: "210 90% 48%",
accentForeground: "222 47% 12%",
destructive: "0 70% 50%",
destructiveForeground: "0 0% 100%",
border: "220 12% 88%",
input: "220 12% 88%",
ring: "210 90% 48%",
},
},
{
id: "ivory",
name: "Ivory",
collection: "core",
tokens: {
background: "38 40% 95%",
foreground: "222 47% 12%",
card: "40 45% 98%",
cardForeground: "222 47% 12%",
popover: "40 45% 98%",
popoverForeground: "222 47% 12%",
primary: "28 85% 50%",
primaryForeground: "0 0% 100%",
secondary: "36 28% 90%",
secondaryForeground: "222 47% 12%",
muted: "36 28% 90%",
mutedForeground: "220 10% 45%",
accent: "28 85% 50%",
accentForeground: "222 47% 12%",
destructive: "0 70% 50%",
destructiveForeground: "0 0% 100%",
border: "34 24% 84%",
input: "34 24% 84%",
ring: "28 85% 50%",
},
},
{
id: "mist",
name: "Mist",
collection: "core",
tokens: {
background: "210 20% 97%",
foreground: "222 47% 12%",
card: "210 20% 99%",
cardForeground: "222 47% 12%",
popover: "210 20% 99%",
popoverForeground: "222 47% 12%",
primary: "195 90% 45%",
primaryForeground: "0 0% 100%",
secondary: "210 16% 92%",
secondaryForeground: "222 47% 12%",
muted: "210 16% 92%",
mutedForeground: "220 10% 45%",
accent: "195 90% 45%",
accentForeground: "222 47% 12%",
destructive: "0 70% 50%",
destructiveForeground: "0 0% 100%",
border: "210 14% 84%",
input: "210 14% 84%",
ring: "195 90% 45%",
},
},
{
id: "mint",
name: "Mint",
collection: "core",
tokens: {
background: "150 30% 96%",
foreground: "222 47% 12%",
card: "150 30% 98%",
cardForeground: "222 47% 12%",
popover: "150 30% 98%",
popoverForeground: "222 47% 12%",
primary: "160 70% 40%",
primaryForeground: "0 0% 100%",
secondary: "150 18% 90%",
secondaryForeground: "222 47% 12%",
muted: "150 18% 90%",
mutedForeground: "220 10% 45%",
accent: "160 70% 40%",
accentForeground: "222 47% 12%",
destructive: "0 70% 50%",
destructiveForeground: "0 0% 100%",
border: "150 16% 84%",
input: "150 16% 84%",
ring: "160 70% 40%",
},
},
{
id: "sand",
name: "Sand",
collection: "core",
tokens: {
background: "34 30% 94%",
foreground: "222 47% 12%",
card: "34 30% 97%",
cardForeground: "222 47% 12%",
popover: "34 30% 97%",
popoverForeground: "222 47% 12%",
primary: "24 80% 50%",
primaryForeground: "0 0% 100%",
secondary: "34 18% 88%",
secondaryForeground: "222 47% 12%",
muted: "34 18% 88%",
mutedForeground: "220 10% 45%",
accent: "24 80% 50%",
accentForeground: "222 47% 12%",
destructive: "0 70% 50%",
destructiveForeground: "0 0% 100%",
border: "34 16% 82%",
input: "34 16% 82%",
ring: "24 80% 50%",
},
},
{
id: "lavender",
name: "Lavender",
collection: "core",
tokens: {
background: "270 30% 97%",
foreground: "222 47% 12%",
card: "270 30% 99%",
cardForeground: "222 47% 12%",
popover: "270 30% 99%",
popoverForeground: "222 47% 12%",
primary: "270 70% 55%",
primaryForeground: "0 0% 100%",
secondary: "270 20% 92%",
secondaryForeground: "222 47% 12%",
muted: "270 20% 92%",
mutedForeground: "220 10% 45%",
accent: "270 70% 55%",
accentForeground: "222 47% 12%",
destructive: "0 70% 50%",
destructiveForeground: "0 0% 100%",
border: "270 18% 86%",
input: "270 18% 86%",
ring: "270 70% 55%",
},
},
];
export const EXTENDED_LIGHT_UI_THEMES: UiThemePreset[] = [
{
id: "a-cup-of-coffee",
name: "A cup of coffee",
tokens: {
background: "0 0% 98.4%",
foreground: "0 0% 0%",
card: "0 0% 99.2%",
cardForeground: "0 0% 0%",
popover: "0 0% 99.2%",
popoverForeground: "0 0% 0%",
primary: "211.3 95.3% 33.1%",
primaryForeground: "0 0% 100%",
secondary: "0 0% 92.9%",
secondaryForeground: "0 0% 0%",
muted: "0 0% 90.2%",
mutedForeground: "0 0% 33.3%",
accent: "211.3 95.3% 33.1%",
accentForeground: "0 0% 100%",
destructive: "0 61.4% 49.8%",
destructiveForeground: "0 0% 100%",
border: "0 0% 83.5%",
input: "0 0% 83.5%",
ring: "211.3 95.3% 33.1%",
},
},
{
id: "abolkog",
name: "ABOLKOG",
tokens: {
background: "0 0% 100%",
foreground: "210 12.2% 16.1%",
card: "0 0% 100%",
cardForeground: "210 12.2% 16.1%",
popover: "0 0% 100%",
popoverForeground: "210 12.2% 16.1%",
primary: "40 70.6% 73.3%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 94.5%",
secondaryForeground: "210 12.2% 16.1%",
muted: "0 0% 91.4%",
mutedForeground: "205.7 3.1% 44.5%",
accent: "40 70.6% 73.3%",
accentForeground: "0 0% 0%",
destructive: "354.3 42.3% 56.5%",
destructiveForeground: "0 0% 0%",
border: "0 0% 85.1%",
input: "0 0% 85.1%",
ring: "40 70.6% 73.3%",
},
},
{
id: "aurora",
name: "Aurora",
tokens: {
background: "44.5 88.6% 93.1%",
foreground: "40.5 100% 14.5%",
card: "47.1 87.5% 96.9%",
cardForeground: "40.5 100% 14.5%",
popover: "47.1 87.5% 96.9%",
popoverForeground: "40.5 100% 14.5%",
primary: "171.4 100% 22%",
primaryForeground: "0 0% 100%",
secondary: "45.5 47.5% 88%",
secondaryForeground: "40.5 100% 14.5%",
muted: "45 36.8% 85.1%",
mutedForeground: "41 28.6% 41.2%",
accent: "171.4 100% 22%",
accentForeground: "0 0% 100%",
destructive: "341.7 100% 36.1%",
destructiveForeground: "0 0% 100%",
border: "43.8 24.5% 79.2%",
input: "43.8 24.5% 79.2%",
ring: "171.4 100% 22%",
},
},
{
id: "ayu",
name: "Ayu",
tokens: {
background: "210 16.7% 97.6%",
foreground: "210 5.2% 38%",
card: "240 20% 99%",
cardForeground: "210 5.2% 38%",
popover: "240 20% 99%",
popoverForeground: "210 5.2% 38%",
primary: "75.1 100% 35.1%",
primaryForeground: "0 0% 0%",
secondary: "210 5% 92.2%",
secondaryForeground: "210 5.2% 38%",
muted: "210 3.7% 89.4%",
mutedForeground: "205.7 3.3% 58.2%",
accent: "75.1 100% 35.1%",
accentForeground: "0 0% 0%",
destructive: "0 80.9% 69.2%",
destructiveForeground: "0 0% 0%",
border: "210 2.3% 83.1%",
input: "210 2.3% 83.1%",
ring: "75.1 100% 35.1%",
},
},
{
id: "base16-flat",
name: "Base16 Flat",
tokens: {
background: "192 15.2% 93.5%",
foreground: "184.3 5.8% 52.5%",
card: "200 20% 97.1%",
cardForeground: "184.3 5.8% 52.5%",
popover: "200 20% 97.1%",
popoverForeground: "184.3 5.8% 52.5%",
primary: "204.1 69.9% 53.1%",
primaryForeground: "0 0% 0%",
secondary: "192 8.5% 88.4%",
secondaryForeground: "184.3 5.8% 52.5%",
muted: "192 6.8% 85.7%",
mutedForeground: "185.5 6.4% 66.5%",
accent: "204.1 69.9% 53.1%",
accentForeground: "0 0% 0%",
destructive: "5.6 78.1% 57.1%",
destructiveForeground: "0 0% 0%",
border: "195 3.8% 79.6%",
input: "195 3.8% 79.6%",
ring: "204.1 69.9% 53.1%",
},
},
{
id: "base16-mocha",
name: "Base16 Mocha",
tokens: {
background: "18 33.3% 94.1%",
foreground: "30 22% 32.2%",
card: "12 38.5% 97.5%",
cardForeground: "30 22% 32.2%",
popover: "12 38.5% 97.5%",
popoverForeground: "30 22% 32.2%",
primary: "16.1 51.9% 63.3%",
primaryForeground: "0 0% 0%",
secondary: "18 17.9% 89%",
secondaryForeground: "30 22% 32.2%",
muted: "20 12.7% 86.1%",
mutedForeground: "28.9 11.3% 53.1%",
accent: "16.1 51.9% 63.3%",
accentForeground: "0 0% 0%",
destructive: "347.1 50.7% 58.6%",
destructiveForeground: "0 0% 0%",
border: "15 7.8% 80%",
input: "15 7.8% 80%",
ring: "16.1 51.9% 63.3%",
},
},
{
id: "blue-dolphin",
name: "Blue Dolphin",
tokens: {
background: "195 40% 94.1%",
foreground: "193.2 65.8% 14.9%",
card: "192 38.5% 97.5%",
cardForeground: "193.2 65.8% 14.9%",
popover: "192 38.5% 97.5%",
popoverForeground: "193.2 65.8% 14.9%",
primary: "195 100% 25.1%",
primaryForeground: "0 0% 100%",
secondary: "190.9 19.3% 88.8%",
secondaryForeground: "193.2 65.8% 14.9%",
muted: "196.4 15.5% 86.1%",
mutedForeground: "193 17.4% 41.8%",
accent: "195 100% 25.1%",
accentForeground: "0 0% 100%",
destructive: "353.3 64.3% 43.9%",
destructiveForeground: "0 0% 100%",
border: "192 9.8% 80%",
input: "192 9.8% 80%",
ring: "195 100% 25.1%",
},
},
{
id: "calm-days-sober-nights-sky",
name: "Calm Days, Sober Nights Sky",
tokens: {
background: "0 0% 100%",
foreground: "221.5 11.1% 45.9%",
card: "0 0% 100%",
cardForeground: "221.5 11.1% 45.9%",
popover: "0 0% 100%",
popoverForeground: "221.5 11.1% 45.9%",
primary: "142.1 100% 35.1%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 94.5%",
secondaryForeground: "221.5 11.1% 45.9%",
muted: "0 0% 91.4%",
mutedForeground: "220 9.9% 64.3%",
accent: "142.1 100% 35.1%",
accentForeground: "0 0% 0%",
destructive: "350.1 76% 67.3%",
destructiveForeground: "0 0% 0%",
border: "0 0% 85.1%",
input: "0 0% 85.1%",
ring: "142.1 100% 35.1%",
},
},
{
id: "catppuccin",
name: "Catppuccin",
tokens: {
background: "220 23.1% 94.9%",
foreground: "233.8 16% 35.5%",
card: "220 27.3% 97.8%",
cardForeground: "233.8 16% 35.5%",
popover: "220 27.3% 97.8%",
popoverForeground: "233.8 16% 35.5%",
primary: "219.9 91.5% 53.9%",
primaryForeground: "0 0% 100%",
secondary: "220 11.5% 89.8%",
secondaryForeground: "233.8 16% 35.5%",
muted: "216 7.5% 86.9%",
mutedForeground: "231.8 9.7% 55.7%",
accent: "219.9 91.5% 53.9%",
accentForeground: "0 0% 100%",
destructive: "347.1 86.7% 44.1%",
destructiveForeground: "0 0% 100%",
border: "216 5.1% 80.6%",
input: "216 5.1% 80.6%",
ring: "219.9 91.5% 53.9%",
},
},
{
id: "chai",
name: "Chai",
tokens: {
background: "0 0% 96.9%",
foreground: "228 8.2% 23.9%",
card: "0 0% 98.4%",
cardForeground: "228 8.2% 23.9%",
popover: "0 0% 98.4%",
popoverForeground: "228 8.2% 23.9%",
primary: "262.9 85.6% 59.2%",
primaryForeground: "0 0% 100%",
secondary: "0 0% 91.4%",
secondaryForeground: "228 8.2% 23.9%",
muted: "0 0% 88.6%",
mutedForeground: "231.4 2.8% 48.8%",
accent: "262.9 85.6% 59.2%",
accentForeground: "0 0% 100%",
destructive: "344.9 69.7% 49.2%",
destructiveForeground: "0 0% 100%",
border: "0 0% 82.4%",
input: "0 0% 82.4%",
ring: "262.9 85.6% 59.2%",
},
},
{
id: "chinolor",
name: "Chinolor",
tokens: {
background: "38.2 44% 95.1%",
foreground: "130 6.5% 18%",
card: "36 45.5% 97.8%",
cardForeground: "130 6.5% 18%",
popover: "36 45.5% 97.8%",
popoverForeground: "130 6.5% 18%",
primary: "48.2 100% 23.9%",
primaryForeground: "0 0% 100%",
secondary: "42 19.2% 89.8%",
secondaryForeground: "130 6.5% 18%",
muted: "36 15.2% 87.1%",
mutedForeground: "84 2.2% 44.1%",
accent: "48.2 100% 23.9%",
accentForeground: "0 0% 100%",
destructive: "355.2 83.7% 59%",
destructiveForeground: "0 0% 0%",
border: "36 10.2% 80.8%",
input: "36 10.2% 80.8%",
ring: "48.2 100% 23.9%",
},
},
{
id: "cyberdyne",
name: "Cyberdyne",
tokens: {
background: "248.6 22.6% 93.9%",
foreground: "153.9 69.7% 12.9%",
card: "255 28.6% 97.3%",
cardForeground: "153.9 69.7% 12.9%",
popover: "255 28.6% 97.3%",
popoverForeground: "153.9 69.7% 12.9%",
primary: "213 100% 31.4%",
primaryForeground: "0 0% 100%",
secondary: "248.6 12.3% 88.8%",
secondaryForeground: "153.9 69.7% 12.9%",
muted: "250 8.3% 85.9%",
mutedForeground: "158 14.7% 40%",
accent: "213 100% 31.4%",
accentForeground: "0 0% 100%",
destructive: "9 76.9% 40.8%",
destructiveForeground: "0 0% 100%",
border: "240 5.9% 80%",
input: "240 5.9% 80%",
ring: "213 100% 31.4%",
},
},
{
id: "desert",
name: "Desert",
tokens: {
background: "34.3 22.6% 93.9%",
foreground: "27.6 74.5% 20%",
card: "30 28.6% 97.3%",
cardForeground: "27.6 74.5% 20%",
popover: "30 28.6% 97.3%",
popoverForeground: "27.6 74.5% 20%",
primary: "147.7 100% 20.4%",
primaryForeground: "0 0% 100%",
secondary: "34.3 12.3% 88.8%",
secondaryForeground: "27.6 74.5% 20%",
muted: "40 8.3% 85.9%",
mutedForeground: "27.7 22.6% 45.1%",
accent: "147.7 100% 20.4%",
accentForeground: "0 0% 100%",
destructive: "0 100% 36.1%",
destructiveForeground: "0 0% 100%",
border: "30 5.9% 80%",
input: "30 5.9% 80%",
ring: "147.7 100% 20.4%",
},
},
{
id: "django-reborn-again",
name: "Django Reborn Again",
tokens: {
background: "150 26.7% 94.1%",
foreground: "155 47.4% 14.9%",
card: "150 28.6% 97.3%",
cardForeground: "155 47.4% 14.9%",
popover: "150 28.6% 97.3%",
popoverForeground: "155 47.4% 14.9%",
primary: "51.1 100% 23.9%",
primaryForeground: "0 0% 100%",
secondary: "150 14.3% 89%",
secondaryForeground: "155 47.4% 14.9%",
muted: "154.3 9.9% 86.1%",
mutedForeground: "155.6 12.7% 41.8%",
accent: "51.1 100% 23.9%",
accentForeground: "0 0% 100%",
destructive: "20.9 100% 36.1%",
destructiveForeground: "0 0% 100%",
border: "150 5.9% 80%",
input: "150 5.9% 80%",
ring: "51.1 100% 23.9%",
},
},
{
id: "espresso",
name: "Espresso",
tokens: {
background: "46.7 23.1% 92.4%",
foreground: "180 37.9% 17.1%",
card: "45 22.2% 96.5%",
cardForeground: "180 37.9% 17.1%",
popover: "45 22.2% 96.5%",
popoverForeground: "180 37.9% 17.1%",
primary: "195.8 20.4% 36.5%",
primaryForeground: "0 0% 100%",
secondary: "46.7 13.8% 87.3%",
secondaryForeground: "180 37.9% 17.1%",
muted: "46.7 11.4% 84.5%",
mutedForeground: "171.8 10% 43.1%",
accent: "195.8 20.4% 36.5%",
accentForeground: "0 0% 100%",
destructive: "0 27.4% 48.6%",
destructiveForeground: "0 0% 100%",
border: "45 7.3% 78.4%",
input: "45 7.3% 78.4%",
ring: "195.8 20.4% 36.5%",
},
},
{
id: "eyehealth",
name: "EyeHealth",
tokens: {
background: "47 100% 95.5%",
foreground: "22.4 31.2% 42.2%",
card: "48 100% 98%",
cardForeground: "22.4 31.2% 42.2%",
popover: "48 100% 98%",
popoverForeground: "22.4 31.2% 42.2%",
primary: "35.8 100% 50%",
primaryForeground: "0 0% 0%",
secondary: "46.4 44% 90.2%",
secondaryForeground: "22.4 31.2% 42.2%",
muted: "48.6 32.3% 87.3%",
mutedForeground: "25.4 25.7% 60.4%",
accent: "35.8 100% 50%",
accentForeground: "0 0% 0%",
destructive: "354 67% 56.1%",
destructiveForeground: "0 0% 0%",
border: "48 20.8% 81.2%",
input: "48 20.8% 81.2%",
ring: "35.8 100% 50%",
},
},
{
id: "flexoki",
name: "Flexoki",
tokens: {
background: "48 100% 97.1%",
foreground: "0 3.2% 6.1%",
card: "51.4 100% 98.6%",
cardForeground: "0 3.2% 6.1%",
popover: "51.4 100% 98.6%",
popoverForeground: "0 3.2% 6.1%",
primary: "45.3 98.9% 34.1%",
primaryForeground: "0 0% 0%",
secondary: "47.1 33.3% 91.8%",
secondaryForeground: "0 3.2% 6.1%",
muted: "50.8 22.8% 88.8%",
mutedForeground: "48 2.6% 37.1%",
accent: "45.3 98.9% 34.1%",
accentForeground: "0 0% 0%",
destructive: "3.1 62% 42.4%",
destructiveForeground: "0 0% 100%",
border: "46.2 14.6% 82.5%",
input: "46.2 14.6% 82.5%",
ring: "45.3 98.9% 34.1%",
},
},
{
id: "fox",
name: "Fox",
tokens: {
background: "30 30.8% 94.9%",
foreground: "263 35.3% 26.1%",
card: "30 33.3% 97.6%",
cardForeground: "263 35.3% 26.1%",
popover: "30 33.3% 97.6%",
popoverForeground: "263 35.3% 26.1%",
primary: "28.9 97.7% 34.1%",
primaryForeground: "0 0% 100%",
secondary: "34.3 13.2% 89.6%",
secondaryForeground: "263 35.3% 26.1%",
muted: "25.7 10.4% 86.9%",
mutedForeground: "266.9 11.6% 49.2%",
accent: "28.9 97.7% 34.1%",
accentForeground: "0 0% 100%",
destructive: "354 65.8% 39%",
destructiveForeground: "0 0% 100%",
border: "34.3 7.1% 80.6%",
input: "34.3 7.1% 80.6%",
ring: "28.9 97.7% 34.1%",
},
},
{
id: "garbage-oracle",
name: "Garbage Oracle",
tokens: {
background: "303.8 38.1% 91.8%",
foreground: "320.9 100% 26.5%",
card: "300 36.8% 96.3%",
cardForeground: "320.9 100% 26.5%",
popover: "300 36.8% 96.3%",
popoverForeground: "320.9 100% 26.5%",
primary: "22.7 66.2% 29%",
primaryForeground: "0 0% 100%",
secondary: "304 22.4% 86.9%",
secondaryForeground: "320.9 100% 26.5%",
muted: "300 17.1% 83.9%",
mutedForeground: "319.8 37.9% 48.6%",
accent: "22.7 66.2% 29%",
accentForeground: "0 0% 100%",
destructive: "352.2 54.7% 41.6%",
destructiveForeground: "0 0% 100%",
border: "304.3 12.5% 78%",
input: "304.3 12.5% 78%",
ring: "22.7 66.2% 29%",
},
},
{
id: "github",
name: "GitHub",
tokens: {
background: "0 0% 100%",
foreground: "213.3 12.7% 13.9%",
card: "0 0% 100%",
cardForeground: "213.3 12.7% 13.9%",
popover: "0 0% 100%",
popoverForeground: "213.3 12.7% 13.9%",
primary: "212.4 92.1% 44.5%",
primaryForeground: "0 0% 100%",
secondary: "0 0% 94.5%",
secondaryForeground: "213.3 12.7% 13.9%",
muted: "0 0% 91.4%",
mutedForeground: "210 2.7% 43.1%",
accent: "212.4 92.1% 44.5%",
accentForeground: "0 0% 100%",
destructive: "355.8 71.8% 47.3%",
destructiveForeground: "0 0% 100%",
border: "0 0% 85.1%",
input: "0 0% 85.1%",
ring: "212.4 92.1% 44.5%",
},
},
{
id: "gruvbox-material",
name: "Gruvbox Material",
tokens: {
background: "48.5 86.7% 88.2%",
foreground: "22.5 31.2% 30.2%",
card: "49.6 85.2% 94.7%",
cardForeground: "22.5 31.2% 30.2%",
popover: "49.6 85.2% 94.7%",
popoverForeground: "22.5 31.2% 30.2%",
primary: "36.5 90.5% 37.1%",
primaryForeground: "0 0% 0%",
secondary: "49 57.6% 83.3%",
secondaryForeground: "22.5 31.2% 30.2%",
muted: "48.8 49% 80.8%",
mutedForeground: "31.8 19.2% 50%",
accent: "36.5 90.5% 37.1%",
accentForeground: "0 0% 0%",
destructive: "0 49% 52.4%",
destructiveForeground: "0 0% 100%",
border: "49.1 34.4% 74.9%",
input: "49.1 34.4% 74.9%",
ring: "36.5 90.5% 37.1%",
},
},
{
id: "homebrew",
name: "Homebrew",
tokens: {
background: "120 40% 94.1%",
foreground: "120 65.8% 14.9%",
card: "120 38.5% 97.5%",
cardForeground: "120 65.8% 14.9%",
popover: "120 38.5% 97.5%",
popoverForeground: "120 65.8% 14.9%",
primary: "300 100% 23.5%",
primaryForeground: "0 0% 100%",
secondary: "120 19.3% 88.8%",
secondaryForeground: "120 65.8% 14.9%",
muted: "120 15.5% 86.1%",
mutedForeground: "120 17.4% 41.8%",
accent: "300 100% 23.5%",
accentForeground: "0 0% 100%",
destructive: "0 100% 23.9%",
destructiveForeground: "0 0% 100%",
border: "120 9.8% 80%",
input: "120 9.8% 80%",
ring: "300 100% 23.5%",
},
},
{
id: "ic-orange-ppl",
name: "IC Orange PPL",
tokens: {
background: "35 40% 94.1%",
foreground: "34.8 65.8% 14.9%",
card: "36 38.5% 97.5%",
cardForeground: "34.8 65.8% 14.9%",
popover: "36 38.5% 97.5%",
popoverForeground: "34.8 65.8% 14.9%",
primary: "24 100% 23.5%",
primaryForeground: "0 0% 100%",
secondary: "38.2 19.3% 88.8%",
secondaryForeground: "34.8 65.8% 14.9%",
muted: "38.2 15.5% 86.1%",
mutedForeground: "35.7 17.4% 41.8%",
accent: "24 100% 23.5%",
accentForeground: "0 0% 100%",
destructive: "14.1 100% 26.7%",
destructiveForeground: "0 0% 100%",
border: "36 9.8% 80%",
input: "36 9.8% 80%",
ring: "24 100% 23.5%",
},
},
{
id: "ikki",
name: "IKKI",
tokens: {
background: "43.6 100% 97.8%",
foreground: "22.4 31.2% 42.2%",
card: "48 100% 99%",
cardForeground: "22.4 31.2% 42.2%",
popover: "48 100% 99%",
popoverForeground: "22.4 31.2% 42.2%",
primary: "35.8 100% 50%",
primaryForeground: "0 0% 0%",
secondary: "42 26.3% 92.5%",
secondaryForeground: "22.4 31.2% 42.2%",
muted: "48 18.5% 89.4%",
mutedForeground: "23.7 24.2% 61.2%",
accent: "35.8 100% 50%",
accentForeground: "0 0% 0%",
destructive: "354 67% 56.1%",
destructiveForeground: "0 0% 0%",
border: "42 11.6% 83.1%",
input: "42 11.6% 83.1%",
ring: "35.8 100% 50%",
},
},
{
id: "kanso-ink",
name: "Kanso Ink",
tokens: {
background: "40 10.3% 94.3%",
foreground: "218.2 13.9% 15.5%",
card: "60 7.7% 97.5%",
cardForeground: "218.2 13.9% 15.5%",
popover: "60 7.7% 97.5%",
popoverForeground: "218.2 13.9% 15.5%",
primary: "351.6 55.3% 51.8%",
primaryForeground: "0 0% 100%",
secondary: "40 5.5% 89.2%",
secondaryForeground: "218.2 13.9% 15.5%",
muted: "60 2.9% 86.3%",
mutedForeground: "220 2.8% 42.4%",
accent: "351.6 55.3% 51.8%",
accentForeground: "0 0% 100%",
destructive: "351.6 55.3% 51.8%",
destructiveForeground: "0 0% 100%",
border: "40 3% 80.2%",
input: "40 3% 80.2%",
ring: "351.6 55.3% 51.8%",
},
},
{
id: "kary-pro-colors",
name: "Kary Pro Colors",
tokens: {
background: "207.3 57.9% 96.3%",
foreground: "209.5 53.8% 46.7%",
card: "204 55.6% 98.2%",
cardForeground: "209.5 53.8% 46.7%",
popover: "204 55.6% 98.2%",
popoverForeground: "209.5 53.8% 46.7%",
primary: "32.7 76.5% 36.7%",
primaryForeground: "0 0% 100%",
secondary: "210 21.7% 91%",
secondaryForeground: "209.5 53.8% 46.7%",
muted: "210 16.7% 88.2%",
mutedForeground: "209.3 47.3% 63.5%",
accent: "32.7 76.5% 36.7%",
accentForeground: "0 0% 100%",
destructive: "13.1 69.6% 46.5%",
destructiveForeground: "0 0% 100%",
border: "206.7 9.7% 81.8%",
input: "206.7 9.7% 81.8%",
ring: "32.7 76.5% 36.7%",
},
},
{
id: "light-purple",
name: "Light purple",
tokens: {
background: "10 15.8% 92.5%",
foreground: "274.8 33.8% 29%",
card: "20 17.6% 96.7%",
cardForeground: "274.8 33.8% 29%",
popover: "20 17.6% 96.7%",
popoverForeground: "274.8 33.8% 29%",
primary: "46.8 98.2% 44.3%",
primaryForeground: "0 0% 0%",
secondary: "10 9.4% 87.5%",
secondaryForeground: "274.8 33.8% 29%",
muted: "10 7.7% 84.7%",
mutedForeground: "278.2 13% 50.4%",
accent: "46.8 98.2% 44.3%",
accentForeground: "0 0% 0%",
destructive: "0.7 71.2% 55.1%",
destructiveForeground: "0 0% 0%",
border: "12 4.6% 78.6%",
input: "12 4.6% 78.6%",
ring: "46.8 98.2% 44.3%",
},
},
{
id: "mondrian",
name: "Mondrian",
tokens: {
background: "0 0% 100%",
foreground: "0 0% 0%",
card: "0 0% 100%",
cardForeground: "0 0% 0%",
popover: "0 0% 100%",
popoverForeground: "0 0% 0%",
primary: "217.4 89% 60.8%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 94.5%",
secondaryForeground: "0 0% 0%",
muted: "0 0% 91.4%",
mutedForeground: "0 0% 34.1%",
accent: "217.4 89% 60.8%",
accentForeground: "0 0% 0%",
destructive: "4.8 69.5% 53.7%",
destructiveForeground: "0 0% 0%",
border: "0 0% 85.1%",
input: "0 0% 85.1%",
ring: "217.4 89% 60.8%",
},
},
{
id: "monochrome",
name: "Monochrome",
tokens: {
background: "210 40% 96.1%",
foreground: "222.2 47.4% 11.2%",
card: "200 33.3% 98.2%",
cardForeground: "222.2 47.4% 11.2%",
popover: "200 33.3% 98.2%",
popoverForeground: "222.2 47.4% 11.2%",
primary: "222.2 47.4% 11.2%",
primaryForeground: "0 0% 100%",
secondary: "205.7 14.9% 90.8%",
secondaryForeground: "222.2 47.4% 11.2%",
muted: "214.3 11.5% 88%",
mutedForeground: "222 9.8% 40%",
accent: "222.2 47.4% 11.2%",
accentForeground: "0 0% 100%",
destructive: "222.2 47.4% 11.2%",
destructiveForeground: "0 0% 100%",
border: "214.3 7.5% 81.8%",
input: "214.3 7.5% 81.8%",
ring: "222.2 47.4% 11.2%",
},
},
{
id: "monochrome-stone",
name: "Monochrome Stone",
tokens: {
background: "60 4.8% 95.9%",
foreground: "24 9.8% 10%",
card: "60 11.1% 98.2%",
cardForeground: "24 9.8% 10%",
popover: "60 11.1% 98.2%",
popoverForeground: "24 9.8% 10%",
primary: "24 9.8% 10%",
primaryForeground: "0 0% 100%",
secondary: "60 2.1% 90.8%",
secondaryForeground: "24 9.8% 10%",
muted: "60 1.6% 87.6%",
mutedForeground: "30 2% 39.2%",
accent: "24 9.8% 10%",
accentForeground: "0 0% 100%",
destructive: "24 9.8% 10%",
destructiveForeground: "0 0% 100%",
border: "60 1.1% 81.4%",
input: "60 1.1% 81.4%",
ring: "24 9.8% 10%",
},
},
{
id: "monokai-pro-spectrum",
name: "Monokai Pro Spectrum",
tokens: {
background: "28.2 54.8% 93.9%",
foreground: "289.1 13.6% 15.9%",
card: "30 57.1% 97.3%",
cardForeground: "289.1 13.6% 15.9%",
popover: "30 57.1% 97.3%",
popoverForeground: "289.1 13.6% 15.9%",
primary: "34.8 96.7% 35.3%",
primaryForeground: "0 0% 0%",
secondary: "30 27.6% 88.6%",
secondaryForeground: "289.1 13.6% 15.9%",
muted: "30 22.2% 85.9%",
mutedForeground: "326.7 4.1% 42.5%",
accent: "34.8 96.7% 35.3%",
accentForeground: "0 0% 0%",
destructive: "341.8 57.9% 54.3%",
destructiveForeground: "0 0% 0%",
border: "28 14.6% 79.8%",
input: "28 14.6% 79.8%",
ring: "34.8 96.7% 35.3%",
},
},
{
id: "monospace",
name: "Monospace",
tokens: {
background: "0 0% 100%",
foreground: "216.9 29.5% 17.3%",
card: "0 0% 100%",
cardForeground: "216.9 29.5% 17.3%",
popover: "0 0% 100%",
popoverForeground: "216.9 29.5% 17.3%",
primary: "196.7 100% 31.8%",
primaryForeground: "0 0% 100%",
secondary: "0 0% 94.5%",
secondaryForeground: "216.9 29.5% 17.3%",
muted: "0 0% 91.4%",
mutedForeground: "215.3 7.4% 45.3%",
accent: "196.7 100% 31.8%",
accentForeground: "0 0% 100%",
destructive: "356.8 61.6% 52%",
destructiveForeground: "0 0% 100%",
border: "0 0% 85.1%",
input: "0 0% 85.1%",
ring: "196.7 100% 31.8%",
},
},
{
id: "noctis-azureus",
name: "Noctis Azureus",
tokens: {
background: "40 90% 96.1%",
foreground: "186.8 100% 19%",
card: "40 100% 98.2%",
cardForeground: "186.8 100% 19%",
popover: "40 100% 98.2%",
popoverForeground: "186.8 100% 19%",
primary: "203 100% 47.1%",
primaryForeground: "0 0% 0%",
secondary: "38.8 36.2% 90.8%",
secondaryForeground: "186.8 100% 19%",
muted: "41.2 25.8% 87.8%",
mutedForeground: "183.1 25.2% 45.1%",
accent: "203 100% 47.1%",
accentForeground: "0 0% 0%",
destructive: "15.1 78% 50%",
destructiveForeground: "0 0% 0%",
border: "40 16.1% 81.8%",
input: "40 16.1% 81.8%",
ring: "203 100% 47.1%",
},
},
{
id: "noctis-hibernus",
name: "Noctis Hibernus",
tokens: {
background: "180 10% 96.1%",
foreground: "186.8 100% 19%",
card: "180 11.1% 98.2%",
cardForeground: "186.8 100% 19%",
popover: "180 11.1% 98.2%",
popoverForeground: "186.8 100% 19%",
primary: "203 100% 47.1%",
primaryForeground: "0 0% 0%",
secondary: "180 2.1% 90.8%",
secondaryForeground: "186.8 100% 19%",
muted: "180 3.2% 87.8%",
mutedForeground: "187.4 28.1% 45.3%",
accent: "203 100% 47.1%",
accentForeground: "0 0% 0%",
destructive: "15.1 78% 50%",
destructiveForeground: "0 0% 0%",
border: "180 2.1% 81.6%",
input: "180 2.1% 81.6%",
ring: "203 100% 47.1%",
},
},
{
id: "noir-essence",
name: "Noir Essence",
tokens: {
background: "41.5 44.8% 94.3%",
foreground: "0 0% 0%",
card: "48 38.5% 97.5%",
cardForeground: "0 0% 0%",
popover: "48 38.5% 97.5%",
popoverForeground: "0 0% 0%",
primary: "54.1 100% 23.9%",
primaryForeground: "0 0% 100%",
secondary: "45 21.4% 89%",
secondaryForeground: "0 0% 0%",
muted: "40 17.1% 86.3%",
mutedForeground: "45 2.4% 32.2%",
accent: "54.1 100% 23.9%",
accentForeground: "0 0% 100%",
destructive: "3 56.6% 58.4%",
destructiveForeground: "0 0% 0%",
border: "43.6 10.9% 80.2%",
input: "43.6 10.9% 80.2%",
ring: "54.1 100% 23.9%",
},
},
{
id: "nord-midnight",
name: "Nord Midnight",
tokens: {
background: "217.5 26.7% 94.1%",
foreground: "220 16.4% 21.6%",
card: "210 28.6% 97.3%",
cardForeground: "220 16.4% 21.6%",
popover: "210 28.6% 97.3%",
popoverForeground: "220 16.4% 21.6%",
primary: "187.1 83% 30%",
primaryForeground: "0 0% 100%",
secondary: "217.5 14.3% 89%",
secondaryForeground: "220 16.4% 21.6%",
muted: "214.3 9.9% 86.1%",
mutedForeground: "218.6 5.9% 46.3%",
accent: "187.1 83% 30%",
accentForeground: "0 0% 100%",
destructive: "354.3 42.3% 56.5%",
destructiveForeground: "0 0% 0%",
border: "220 5.9% 80%",
input: "220 5.9% 80%",
ring: "187.1 83% 30%",
},
},
{
id: "notionish",
name: "Notionish",
tokens: {
background: "0 0% 100%",
foreground: "60 2% 9.6%",
card: "0 0% 100%",
cardForeground: "60 2% 9.6%",
popover: "0 0% 100%",
popoverForeground: "60 2% 9.6%",
primary: "208.4 100% 43.5%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 94.5%",
secondaryForeground: "60 2% 9.6%",
muted: "0 0% 91.4%",
mutedForeground: "0 0% 40.4%",
accent: "208.4 100% 43.5%",
accentForeground: "0 0% 0%",
destructive: "7.2 83.8% 48.4%",
destructiveForeground: "0 0% 0%",
border: "0 0% 85.1%",
input: "0 0% 85.1%",
ring: "208.4 100% 43.5%",
},
},
{
id: "phonebook",
name: "Phonebook",
tokens: {
background: "35.6 37.2% 83.1%",
foreground: "31.3 45.1% 20%",
card: "36 38.5% 92.4%",
cardForeground: "31.3 45.1% 20%",
popover: "36 38.5% 92.4%",
popoverForeground: "31.3 45.1% 20%",
primary: "186.5 100% 37.8%",
primaryForeground: "0 0% 0%",
secondary: "36 27.3% 78.4%",
secondaryForeground: "31.3 45.1% 20%",
muted: "36 24.6% 76.1%",
mutedForeground: "32.2 19.4% 41.4%",
accent: "186.5 100% 37.8%",
accentForeground: "0 0% 0%",
destructive: "4 89.9% 61%",
destructiveForeground: "0 0% 0%",
border: "35.6 18.1% 70.8%",
input: "35.6 18.1% 70.8%",
ring: "186.5 100% 37.8%",
},
},
{
id: "polychrome",
name: "Polychrome",
tokens: {
background: "30 20% 98%",
foreground: "255.6 60% 44.1%",
card: "60 20% 99%",
cardForeground: "255.6 60% 44.1%",
popover: "60 20% 99%",
popoverForeground: "255.6 60% 44.1%",
primary: "255.3 86.5% 59.2%",
primaryForeground: "0 0% 100%",
secondary: "30 5.3% 92.5%",
secondaryForeground: "255.6 60% 44.1%",
muted: "30 3.8% 89.8%",
mutedForeground: "255.7 45.8% 62.4%",
accent: "255.3 86.5% 59.2%",
accentForeground: "0 0% 100%",
destructive: "0 90.2% 56.1%",
destructiveForeground: "0 0% 0%",
border: "60 1.2% 83.3%",
input: "60 1.2% 83.3%",
ring: "255.3 86.5% 59.2%",
},
},
{
id: "purplepeter",
name: "Purplepeter",
tokens: {
background: "261.8 40.7% 94.7%",
foreground: "258.6 55.3% 14.9%",
card: "264 38.5% 97.5%",
cardForeground: "258.6 55.3% 14.9%",
popover: "264 38.5% 97.5%",
popoverForeground: "258.6 55.3% 14.9%",
primary: "190.2 83.9% 31.6%",
primaryForeground: "0 0% 100%",
secondary: "264 18.5% 89.4%",
secondaryForeground: "258.6 55.3% 14.9%",
muted: "264 14.7% 86.7%",
mutedForeground: "258.8 15% 42%",
accent: "190.2 83.9% 31.6%",
accentForeground: "0 0% 100%",
destructive: "0 41.9% 48.6%",
destructiveForeground: "0 0% 100%",
border: "260 9.1% 80.6%",
input: "260 9.1% 80.6%",
ring: "190.2 83.9% 31.6%",
},
},
{
id: "rainglow-codecourse",
name: "Rainglow Codecourse",
tokens: {
background: "0 0% 100%",
foreground: "197.7 26.6% 44.9%",
card: "0 0% 100%",
cardForeground: "197.7 26.6% 44.9%",
popover: "0 0% 100%",
popoverForeground: "197.7 26.6% 44.9%",
primary: "202.7 97.4% 55.3%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 94.5%",
secondaryForeground: "197.7 26.6% 44.9%",
muted: "0 0% 91.4%",
mutedForeground: "196.5 21.5% 63.5%",
accent: "202.7 97.4% 55.3%",
accentForeground: "0 0% 0%",
destructive: "348.8 86% 39.2%",
destructiveForeground: "0 0% 100%",
border: "0 0% 85.1%",
input: "0 0% 85.1%",
ring: "202.7 97.4% 55.3%",
},
},
{
id: "rainglow-crisp",
name: "Rainglow Crisp",
tokens: {
background: "0 0% 100%",
foreground: "300 13.3% 11.8%",
card: "0 0% 100%",
cardForeground: "300 13.3% 11.8%",
popover: "0 0% 100%",
popoverForeground: "300 13.3% 11.8%",
primary: "23 97.5% 52.4%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 94.5%",
secondaryForeground: "300 13.3% 11.8%",
muted: "0 0% 91.4%",
mutedForeground: "300 2.3% 41.8%",
accent: "23 97.5% 52.4%",
accentForeground: "0 0% 0%",
destructive: "348.8 86% 39.2%",
destructiveForeground: "0 0% 100%",
border: "0 0% 85.1%",
input: "0 0% 85.1%",
ring: "23 97.5% 52.4%",
},
},
{
id: "rainglow-lavender",
name: "Rainglow Lavender",
tokens: {
background: "0 0% 100%",
foreground: "275 15% 15.7%",
card: "0 0% 100%",
cardForeground: "275 15% 15.7%",
popover: "0 0% 100%",
popoverForeground: "275 15% 15.7%",
primary: "273.9 100% 67.1%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 94.5%",
secondaryForeground: "275 15% 15.7%",
muted: "0 0% 91.4%",
mutedForeground: "277.5 3.5% 44.3%",
accent: "273.9 100% 67.1%",
accentForeground: "0 0% 0%",
destructive: "348.8 86% 39.2%",
destructiveForeground: "0 0% 100%",
border: "0 0% 85.1%",
input: "0 0% 85.1%",
ring: "273.9 100% 67.1%",
},
},
{
id: "remedy-tilted",
name: "Remedy Tilted",
tokens: {
background: "41.1 90.5% 95.9%",
foreground: "39.2 72% 19.6%",
card: "40 100% 98.2%",
cardForeground: "39.2 72% 19.6%",
popover: "40 100% 98.2%",
popoverForeground: "39.2 72% 19.6%",
primary: "24.6 65.8% 62.2%",
primaryForeground: "0 0% 0%",
secondary: "40 37.5% 90.6%",
secondaryForeground: "39.2 72% 19.6%",
muted: "42.4 27% 87.6%",
mutedForeground: "40 23.3% 45.5%",
accent: "24.6 65.8% 62.2%",
accentForeground: "0 0% 0%",
destructive: "0 42.9% 45.3%",
destructiveForeground: "0 0% 100%",
border: "41.2 17% 81.6%",
input: "41.2 17% 81.6%",
ring: "24.6 65.8% 62.2%",
},
},
{
id: "rose-pine",
name: "Rosé Pine",
tokens: {
background: "32.3 56.5% 95.5%",
foreground: "247.7 19.2% 39.8%",
card: "30 60% 98%",
cardForeground: "247.7 19.2% 39.8%",
popover: "30 60% 98%",
popoverForeground: "247.7 19.2% 39.8%",
primary: "34.6 81.2% 56.1%",
primaryForeground: "0 0% 0%",
secondary: "35 24% 90.2%",
secondaryForeground: "247.7 19.2% 39.8%",
muted: "30 18.8% 87.5%",
mutedForeground: "253 10.8% 58.2%",
accent: "34.6 81.2% 56.1%",
accentForeground: "0 0% 0%",
destructive: "343 35.1% 54.7%",
destructiveForeground: "0 0% 0%",
border: "30 12.5% 81.2%",
input: "30 12.5% 81.2%",
ring: "34.6 81.2% 56.1%",
},
},
{
id: "selene-selenized",
name: "Selene Selenized",
tokens: {
background: "41.7 94.7% 92.5%",
foreground: "193.8 18.8% 27.1%",
card: "42.4 100% 96.7%",
cardForeground: "193.8 18.8% 27.1%",
popover: "42.4 100% 96.7%",
popoverForeground: "193.8 18.8% 27.1%",
primary: "207.1 100% 41.2%",
primaryForeground: "0 0% 100%",
secondary: "42.4 53.1% 87.5%",
secondaryForeground: "193.8 18.8% 27.1%",
muted: "41.8 41.8% 84.5%",
mutedForeground: "150 3.9% 50.2%",
accent: "207.1 100% 41.2%",
accentForeground: "0 0% 100%",
destructive: "356.6 73.1% 48%",
destructiveForeground: "0 0% 100%",
border: "42.6 28.4% 78.6%",
input: "42.6 28.4% 78.6%",
ring: "207.1 100% 41.2%",
},
},
{
id: "soft-color",
name: "Soft Color",
tokens: {
background: "95 100% 97.6%",
foreground: "0 0% 35.3%",
card: "96 100% 99%",
cardForeground: "0 0% 35.3%",
popover: "96 100% 99%",
popoverForeground: "0 0% 35.3%",
primary: "211.3 95.3% 33.1%",
primaryForeground: "0 0% 100%",
secondary: "98.2 28.2% 92.4%",
secondaryForeground: "0 0% 35.3%",
muted: "92.7 20% 89.2%",
mutedForeground: "90 1.8% 56.5%",
accent: "211.3 95.3% 33.1%",
accentForeground: "0 0% 100%",
destructive: "0 61.4% 49.8%",
destructiveForeground: "0 0% 100%",
border: "96 11.6% 83.1%",
input: "96 11.6% 83.1%",
ring: "211.3 95.3% 33.1%",
},
},
{
id: "tearout",
name: "Tearout",
tokens: {
background: "96.9 26.5% 90.4%",
foreground: "90 7.9% 14.9%",
card: "100 27.3% 95.7%",
cardForeground: "90 7.9% 14.9%",
popover: "100 27.3% 95.7%",
popoverForeground: "90 7.9% 14.9%",
primary: "22.5 36.4% 34.5%",
primaryForeground: "0 0% 100%",
secondary: "100 16.2% 85.5%",
secondaryForeground: "90 7.9% 14.9%",
muted: "95 13.6% 82.7%",
mutedForeground: "93.3 4.3% 40.6%",
accent: "22.5 36.4% 34.5%",
accentForeground: "0 0% 100%",
destructive: "6.7 33.3% 42.4%",
destructiveForeground: "0 0% 100%",
border: "92.7 9.2% 76.7%",
input: "92.7 9.2% 76.7%",
ring: "22.5 36.4% 34.5%",
},
},
{
id: "tokyo-night",
name: "Tokyo Night",
tokens: {
background: "230 11.1% 89.4%",
foreground: "221.9 55.3% 48.2%",
card: "240 8.3% 95.3%",
cardForeground: "221.9 55.3% 48.2%",
popover: "240 8.3% 95.3%",
popoverForeground: "221.9 55.3% 48.2%",
primary: "195.1 100% 29.6%",
primaryForeground: "0 0% 100%",
secondary: "228 6.3% 84.5%",
secondaryForeground: "221.9 55.3% 48.2%",
muted: "228 5.4% 81.8%",
mutedForeground: "222.4 47.9% 62.4%",
accent: "195.1 100% 29.6%",
accentForeground: "0 0% 100%",
destructive: "342.6 91% 56.3%",
destructiveForeground: "0 0% 0%",
border: "228 4.1% 75.9%",
input: "228 4.1% 75.9%",
ring: "195.1 100% 29.6%",
},
},
{
id: "tomorrow-night-eighties",
name: "Tomorrow Night Eighties",
tokens: {
background: "0 0% 100%",
foreground: "60 0.7% 30%",
card: "0 0% 100%",
cardForeground: "60 0.7% 30%",
popover: "0 0% 100%",
popoverForeground: "60 0.7% 30%",
primary: "71.6 100% 27.5%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 94.5%",
secondaryForeground: "60 0.7% 30%",
muted: "0 0% 91.4%",
mutedForeground: "60 0.4% 53.9%",
accent: "71.6 100% 27.5%",
accentForeground: "0 0% 0%",
destructive: "359.6 66.7% 47.1%",
destructiveForeground: "0 0% 100%",
border: "0 0% 85.1%",
input: "0 0% 85.1%",
ring: "71.6 100% 27.5%",
},
},
{
id: "vaporizer-turquoise",
name: "Vaporizer Turquoise",
tokens: {
background: "0 0% 95.3%",
foreground: "117.5 50% 18.8%",
card: "0 0% 98%",
cardForeground: "117.5 50% 18.8%",
popover: "0 0% 98%",
popoverForeground: "117.5 50% 18.8%",
primary: "300 94.8% 37.8%",
primaryForeground: "0 0% 100%",
secondary: "0 0% 90.2%",
secondaryForeground: "117.5 50% 18.8%",
muted: "0 0% 87.1%",
mutedForeground: "116.3 14% 44.7%",
accent: "300 94.8% 37.8%",
accentForeground: "0 0% 100%",
destructive: "0 61.4% 49.8%",
destructiveForeground: "0 0% 100%",
border: "0 0% 81.2%",
input: "0 0% 81.2%",
ring: "300 94.8% 37.8%",
},
},
{
id: "xotopio",
name: "Xotopio",
tokens: {
background: "20 15.8% 96.3%",
foreground: "0 0% 12.9%",
card: "60 11.1% 98.2%",
cardForeground: "0 0% 12.9%",
popover: "60 11.1% 98.2%",
popoverForeground: "0 0% 12.9%",
primary: "331 64.2% 55.1%",
primaryForeground: "0 0% 0%",
secondary: "30 4.3% 91%",
secondaryForeground: "0 0% 12.9%",
muted: "20 4.9% 88%",
mutedForeground: "0 0.5% 41.4%",
accent: "331 64.2% 55.1%",
accentForeground: "0 0% 0%",
destructive: "0.7 71.2% 55.1%",
destructiveForeground: "0 0% 0%",
border: "20 3.2% 81.8%",
input: "20 3.2% 81.8%",
ring: "331 64.2% 55.1%",
},
},
{
id: "yuttari",
name: "Yuttari",
tokens: {
background: "336.7 100% 96.5%",
foreground: "334.3 10.4% 26.3%",
card: "337.5 100% 98.4%",
cardForeground: "334.3 10.4% 26.3%",
popover: "337.5 100% 98.4%",
popoverForeground: "334.3 10.4% 26.3%",
primary: "223.5 30.4% 60%",
primaryForeground: "0 0% 0%",
secondary: "335.3 37.8% 91.2%",
secondaryForeground: "334.3 10.4% 26.3%",
muted: "337.5 26.7% 88.2%",
mutedForeground: "333.8 6.3% 50.2%",
accent: "223.5 30.4% 60%",
accentForeground: "0 0% 0%",
destructive: "0 38.8% 54.5%",
destructiveForeground: "0 0% 0%",
border: "337.5 17.4% 82%",
input: "337.5 17.4% 82%",
ring: "223.5 30.4% 60%",
},
},
{
id: "zenbones-rosebones",
name: "Zenbones Rosebones",
tokens: {
background: "32.7 57.9% 96.3%",
foreground: "2.4 27.4% 35.1%",
card: "36 55.6% 98.2%",
cardForeground: "2.4 27.4% 35.1%",
popover: "36 55.6% 98.2%",
popoverForeground: "2.4 27.4% 35.1%",
primary: "34.4 83% 56.3%",
primaryForeground: "0 0% 0%",
secondary: "30 21.7% 91%",
secondaryForeground: "2.4 27.4% 35.1%",
muted: "30 16.7% 88.2%",
mutedForeground: "5 16.1% 56.1%",
accent: "34.4 83% 56.3%",
accentForeground: "0 0% 0%",
destructive: "343.2 35.7% 54.9%",
destructiveForeground: "0 0% 0%",
border: "33.3 9.7% 81.8%",
input: "33.3 9.7% 81.8%",
ring: "34.4 83% 56.3%",
},
},
{
id: "zhxo-red",
name: "Zhxo'red",
tokens: {
background: "24 100% 97.1%",
foreground: "240 10.1% 51.6%",
card: "25.7 100% 98.6%",
cardForeground: "240 10.1% 51.6%",
popover: "25.7 100% 98.6%",
popoverForeground: "240 10.1% 51.6%",
primary: "284.1 83.8% 45.9%",
primaryForeground: "0 0% 100%",
secondary: "21.4 33.3% 91.8%",
secondaryForeground: "240 10.1% 51.6%",
muted: "23.1 22.8% 88.8%",
mutedForeground: "252 8.8% 66.5%",
accent: "284.1 83.8% 45.9%",
accentForeground: "0 0% 100%",
destructive: "0 53.4% 50.4%",
destructiveForeground: "0 0% 100%",
border: "23.1 14.6% 82.5%",
input: "23.1 14.6% 82.5%",
ring: "284.1 83.8% 45.9%",
},
}
];
export const LIGHT_UI_THEMES: UiThemePreset[] = [
...CORE_LIGHT_UI_THEMES,
...EXTENDED_LIGHT_UI_THEMES,
];
export const EXTENDED_DARK_UI_THEMES: UiThemePreset[] = [
{
id: "a-cup-of-coffee",
name: "A cup of coffee",
tokens: {
background: "0 0% 11.8%",
foreground: "0 0% 74.5%",
card: "0 0% 15.7%",
cardForeground: "0 0% 74.5%",
popover: "0 0% 15.7%",
popoverForeground: "0 0% 74.5%",
primary: "60 86.9% 48%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 19.2%",
secondaryForeground: "0 0% 74.5%",
muted: "0 0% 24.3%",
mutedForeground: "0 0% 56.9%",
accent: "60 86.9% 48%",
accentForeground: "0 0% 0%",
destructive: "0 61.4% 49.8%",
destructiveForeground: "0 0% 100%",
border: "0 0% 29.4%",
input: "0 0% 29.4%",
ring: "60 86.9% 48%",
},
},
{
id: "abolkog",
name: "ABOLKOG",
tokens: {
background: "220 13% 18%",
foreground: "218.8 27.9% 88%",
card: "223.6 9.9% 21.8%",
cardForeground: "218.8 27.9% 88%",
popover: "223.6 9.9% 21.8%",
popoverForeground: "218.8 27.9% 88%",
primary: "40 70.6% 73.3%",
primaryForeground: "0 0% 0%",
secondary: "218.2 8.7% 24.9%",
secondaryForeground: "218.8 27.9% 88%",
muted: "216 6.7% 29.4%",
mutedForeground: "220 9.3% 68.4%",
accent: "40 70.6% 73.3%",
accentForeground: "0 0% 0%",
destructive: "354.3 42.3% 56.5%",
destructiveForeground: "0 0% 0%",
border: "222 5.7% 34.5%",
input: "222 5.7% 34.5%",
ring: "40 70.6% 73.3%",
},
},
{
id: "aurora",
name: "Aurora",
tokens: {
background: "223.6 13.6% 15.9%",
foreground: "45.2 100% 57.8%",
card: "222 10% 19.6%",
cardForeground: "45.2 100% 57.8%",
popover: "222 10% 19.6%",
popoverForeground: "45.2 100% 57.8%",
primary: "171.5 97.2% 42.5%",
primaryForeground: "0 0% 0%",
secondary: "228 8.5% 23.1%",
secondaryForeground: "45.2 100% 57.8%",
muted: "226.7 6.4% 27.6%",
mutedForeground: "45.3 64.3% 46.1%",
accent: "171.5 97.2% 42.5%",
accentForeground: "0 0% 0%",
destructive: "338.3 87.1% 54.5%",
destructiveForeground: "0 0% 0%",
border: "226.7 5.4% 32.7%",
input: "226.7 5.4% 32.7%",
ring: "171.5 97.2% 42.5%",
},
},
{
id: "ayu",
name: "Ayu",
tokens: {
background: "222.4 21.5% 15.5%",
foreground: "48 8.9% 78%",
card: "221.3 16.3% 19.2%",
cardForeground: "48 8.9% 78%",
popover: "221.3 16.3% 19.2%",
popoverForeground: "48 8.9% 78%",
primary: "271.3 95.9% 80.8%",
primaryForeground: "0 0% 0%",
secondary: "221.3 13.8% 22.7%",
secondaryForeground: "48 8.9% 78%",
muted: "220 10.8% 27.3%",
mutedForeground: "60 1.5% 60.6%",
accent: "271.3 95.9% 80.8%",
accentForeground: "0 0% 0%",
destructive: "6.1 83.1% 65.1%",
destructiveForeground: "0 0% 0%",
border: "221.5 7.9% 32.4%",
input: "221.5 7.9% 32.4%",
ring: "271.3 95.9% 80.8%",
},
},
{
id: "base16-flat",
name: "Base16 Flat",
tokens: {
background: "210 29% 24.3%",
foreground: "0 0% 87.8%",
card: "209.1 24.8% 27.6%",
cardForeground: "0 0% 87.8%",
popover: "209.1 24.8% 27.6%",
popoverForeground: "0 0% 87.8%",
primary: "168.1 75.7% 42%",
primaryForeground: "0 0% 0%",
secondary: "210.9 21% 30.8%",
secondaryForeground: "0 0% 87.8%",
muted: "211 17.3% 35.1%",
mutedForeground: "210 6.6% 70.2%",
accent: "168.1 75.7% 42%",
accentForeground: "0 0% 0%",
destructive: "5.6 78.1% 57.1%",
destructiveForeground: "0 0% 0%",
border: "209 14.4% 39.4%",
input: "209 14.4% 39.4%",
ring: "168.1 75.7% 42%",
},
},
{
id: "base16-mocha",
name: "Base16 Mocha",
tokens: {
background: "31.6 19.2% 19.4%",
foreground: "12 9.6% 79.6%",
card: "30 15.3% 23.1%",
cardForeground: "12 9.6% 79.6%",
popover: "30 15.3% 23.1%",
popoverForeground: "12 9.6% 79.6%",
primary: "16.1 51.9% 63.3%",
primaryForeground: "0 0% 0%",
secondary: "30 13.4% 26.3%",
secondaryForeground: "12 9.6% 79.6%",
muted: "33.7 10.3% 30.6%",
mutedForeground: "20 6.3% 62.7%",
accent: "16.1 51.9% 63.3%",
accentForeground: "0 0% 0%",
destructive: "347.1 50.7% 58.6%",
destructiveForeground: "0 0% 0%",
border: "32 8.3% 35.5%",
input: "32 8.3% 35.5%",
ring: "16.1 51.9% 63.3%",
},
},
{
id: "blue-dolphin",
name: "Blue Dolphin",
tokens: {
background: "192.3 100% 25.9%",
foreground: "193.4 100% 88.6%",
card: "192.3 85.2% 29.2%",
cardForeground: "193.4 100% 88.6%",
popover: "192.3 85.2% 29.2%",
popoverForeground: "193.4 100% 88.6%",
primary: "218.8 100% 83.3%",
primaryForeground: "0 0% 0%",
secondary: "192 73.2% 32.2%",
secondaryForeground: "193.4 100% 88.6%",
muted: "192.2 61.1% 36.3%",
mutedForeground: "192.9 53.7% 71.2%",
accent: "218.8 100% 83.3%",
accentForeground: "0 0% 0%",
destructive: "357.1 100% 75.5%",
destructiveForeground: "0 0% 0%",
border: "192.5 51% 40.8%",
input: "192.5 51% 40.8%",
ring: "218.8 100% 83.3%",
},
},
{
id: "calm-days-sober-nights-sky",
name: "Calm Days, Sober Nights Sky",
tokens: {
background: "221.7 31.5% 14.3%",
foreground: "220 31.3% 86.9%",
card: "220.9 23.9% 18%",
cardForeground: "220 31.3% 86.9%",
popover: "220.9 23.9% 18%",
popoverForeground: "220 31.3% 86.9%",
primary: "198 93.3% 70.6%",
primaryForeground: "0 0% 0%",
secondary: "222.9 18.9% 21.8%",
secondaryForeground: "220 31.3% 86.9%",
muted: "222 14.9% 26.3%",
mutedForeground: "220 12.3% 66.5%",
accent: "198 93.3% 70.6%",
accentForeground: "0 0% 0%",
destructive: "354 77.1% 69.2%",
destructiveForeground: "0 0% 0%",
border: "220 11.2% 31.4%",
input: "220 11.2% 31.4%",
ring: "198 93.3% 70.6%",
},
},
{
id: "catppuccin",
name: "Catppuccin",
tokens: {
background: "229.1 18.6% 23.1%",
foreground: "227.2 70.1% 86.9%",
card: "228.6 15.6% 26.5%",
cardForeground: "227.2 70.1% 86.9%",
popover: "228.6 15.6% 26.5%",
popoverForeground: "227.2 70.1% 86.9%",
primary: "316 73.2% 83.9%",
primaryForeground: "0 0% 0%",
secondary: "231 13.2% 29.8%",
secondaryForeground: "227.2 70.1% 86.9%",
muted: "230.5 11% 33.9%",
mutedForeground: "228 25.3% 69%",
accent: "316 73.2% 83.9%",
accentForeground: "0 0% 0%",
destructive: "358.8 67.8% 70.8%",
destructiveForeground: "0 0% 0%",
border: "226.7 9.2% 38.4%",
input: "226.7 9.2% 38.4%",
ring: "316 73.2% 83.9%",
},
},
{
id: "chai",
name: "Chai",
tokens: {
background: "240 75% 1.6%",
foreground: "203.6 27.5% 80%",
card: "240 20% 5.9%",
cardForeground: "203.6 27.5% 80%",
popover: "240 20% 5.9%",
popoverForeground: "203.6 27.5% 80%",
primary: "202.9 78.4% 60%",
primaryForeground: "0 0% 0%",
secondary: "240 9.8% 10%",
secondaryForeground: "203.6 27.5% 80%",
muted: "240 6.3% 15.5%",
mutedForeground: "207.3 10.3% 58%",
accent: "202.9 78.4% 60%",
accentForeground: "0 0% 0%",
destructive: "16.8 78.2% 55.1%",
destructiveForeground: "0 0% 0%",
border: "240 4.6% 21.4%",
input: "240 4.6% 21.4%",
ring: "202.9 78.4% 60%",
},
},
{
id: "chinolor",
name: "Chinolor",
tokens: {
background: "130 6.5% 18%",
foreground: "36.9 19.4% 86.9%",
card: "120 4.5% 21.8%",
cardForeground: "36.9 19.4% 86.9%",
popover: "120 4.5% 21.8%",
popoverForeground: "36.9 19.4% 86.9%",
primary: "44.4 92.4% 69%",
primaryForeground: "0 0% 0%",
secondary: "130 4.7% 25.1%",
secondaryForeground: "36.9 19.4% 86.9%",
muted: "132 3.3% 29.6%",
mutedForeground: "46.7 5.4% 67.3%",
accent: "44.4 92.4% 69%",
accentForeground: "0 0% 0%",
destructive: "355.2 83.7% 59%",
destructiveForeground: "0 0% 0%",
border: "132 2.9% 34.3%",
input: "132 2.9% 34.3%",
ring: "44.4 92.4% 69%",
},
},
{
id: "cyberdyne",
name: "Cyberdyne",
tokens: {
background: "244.7 60% 16.7%",
foreground: "154.4 100% 50%",
card: "245 46.2% 20.4%",
cardForeground: "154.4 100% 50%",
popover: "245 46.2% 20.4%",
popoverForeground: "154.4 100% 50%",
primary: "300.5 100% 78.2%",
primaryForeground: "0 0% 0%",
secondary: "245.1 38.8% 23.7%",
secondaryForeground: "154.4 100% 50%",
muted: "245.5 30.6% 28.2%",
mutedForeground: "158.9 93.8% 38%",
accent: "300.5 100% 78.2%",
accentForeground: "0 0% 0%",
destructive: "6.9 100% 72.5%",
destructiveForeground: "0 0% 0%",
border: "244.5 23.5% 33.3%",
input: "244.5 23.5% 33.3%",
ring: "300.5 100% 78.2%",
},
},
{
id: "desert",
name: "Desert",
tokens: {
background: "0 0% 20%",
foreground: "0 0% 100%",
card: "0 0% 23.5%",
cardForeground: "0 0% 100%",
popover: "0 0% 23.5%",
popoverForeground: "0 0% 100%",
primary: "35.9 100% 83.9%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 26.7%",
secondaryForeground: "0 0% 100%",
muted: "0 0% 31.4%",
mutedForeground: "0 0% 77.6%",
accent: "35.9 100% 83.9%",
accentForeground: "0 0% 0%",
destructive: "0 100% 58.4%",
destructiveForeground: "0 0% 0%",
border: "0 0% 36.1%",
input: "0 0% 36.1%",
ring: "35.9 100% 83.9%",
},
},
{
id: "django-reborn-again",
name: "Django Reborn Again",
tokens: {
background: "154.6 72.2% 7.1%",
foreground: "150 5.7% 86.3%",
card: "156 43.9% 11.2%",
cardForeground: "150 5.7% 86.3%",
popover: "156 43.9% 11.2%",
popoverForeground: "150 5.7% 86.3%",
primary: "51.2 100% 69.2%",
primaryForeground: "0 0% 0%",
secondary: "155 31.6% 14.9%",
secondaryForeground: "150 5.7% 86.3%",
muted: "155.5 21.6% 20%",
mutedForeground: "152.7 6% 64.1%",
accent: "51.2 100% 69.2%",
accentForeground: "0 0% 0%",
destructive: "21.9 98.4% 51.4%",
destructiveForeground: "0 0% 0%",
border: "154.3 16% 25.7%",
input: "154.3 16% 25.7%",
ring: "51.2 100% 69.2%",
},
},
{
id: "espresso",
name: "Espresso",
tokens: {
background: "18 20% 9.8%",
foreground: "33.3 29.5% 76.1%",
card: "13.3 12.7% 13.9%",
cardForeground: "33.3 29.5% 76.1%",
popover: "13.3 12.7% 13.9%",
popoverForeground: "33.3 29.5% 76.1%",
primary: "42.9 70.9% 69%",
primaryForeground: "0 0% 0%",
secondary: "20 10.1% 17.5%",
secondaryForeground: "33.3 29.5% 76.1%",
muted: "13.3 7.8% 22.5%",
mutedForeground: "33.1 13.4% 57.5%",
accent: "42.9 70.9% 69%",
accentForeground: "0 0% 0%",
destructive: "8.6 70.9% 69%",
destructiveForeground: "0 0% 0%",
border: "15 5.6% 27.8%",
input: "15 5.6% 27.8%",
ring: "42.9 70.9% 69%",
},
},
{
id: "eyehealth",
name: "EyeHealth",
tokens: {
background: "0 0% 25.9%",
foreground: "0 0% 100%",
card: "0 0% 29.4%",
cardForeground: "0 0% 100%",
popover: "0 0% 29.4%",
popoverForeground: "0 0% 100%",
primary: "35.8 100% 50%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 32.2%",
secondaryForeground: "0 0% 100%",
muted: "0 0% 36.1%",
mutedForeground: "0 0% 79.2%",
accent: "35.8 100% 50%",
accentForeground: "0 0% 0%",
destructive: "354 67% 56.1%",
destructiveForeground: "0 0% 0%",
border: "0 0% 40.8%",
input: "0 0% 40.8%",
ring: "35.8 100% 50%",
},
},
{
id: "flexoki",
name: "Flexoki",
tokens: {
background: "0 3.2% 6.1%",
foreground: "54.5 10.1% 78.6%",
card: "0 1.9% 10.4%",
cardForeground: "54.5 10.1% 78.6%",
popover: "0 1.9% 10.4%",
popoverForeground: "54.5 10.1% 78.6%",
primary: "45.2 81.7% 44.9%",
primaryForeground: "0 0% 0%",
secondary: "0 1.4% 13.9%",
secondaryForeground: "54.5 10.1% 78.6%",
muted: "0 0% 19.2%",
mutedForeground: "52.5 3.8% 58.4%",
accent: "45.2 81.7% 44.9%",
accentForeground: "0 0% 0%",
destructive: "5 61% 53.7%",
destructiveForeground: "0 0% 0%",
border: "0 0.8% 24.9%",
input: "0 0.8% 24.9%",
ring: "45.2 81.7% 44.9%",
},
},
{
id: "fox",
name: "Fox",
tokens: {
background: "213.9 31.5% 14.3%",
foreground: "210 2% 80.8%",
card: "212.7 23.9% 18%",
cardForeground: "210 2% 80.8%",
popover: "212.7 23.9% 18%",
popoverForeground: "210 2% 80.8%",
primary: "181.1 52.9% 60%",
primaryForeground: "0 0% 0%",
secondary: "214.3 18.9% 21.8%",
secondaryForeground: "210 2% 80.8%",
muted: "213 14.9% 26.3%",
mutedForeground: "214.3 3.6% 62.2%",
accent: "181.1 52.9% 60%",
accentForeground: "0 0% 0%",
destructive: "345.2 53% 54.9%",
destructiveForeground: "0 0% 0%",
border: "213.3 11.2% 31.4%",
input: "213.3 11.2% 31.4%",
ring: "181.1 52.9% 60%",
},
},
{
id: "garbage-oracle",
name: "Garbage Oracle",
tokens: {
background: "311.5 31% 16.5%",
foreground: "303.8 38.1% 91.8%",
card: "312 24.3% 20.2%",
cardForeground: "303.8 38.1% 91.8%",
popover: "312 24.3% 20.2%",
popoverForeground: "303.8 38.1% 91.8%",
primary: "124.3 95.4% 82.9%",
primaryForeground: "0 0% 0%",
secondary: "312.5 20% 23.5%",
secondaryForeground: "303.8 38.1% 91.8%",
muted: "310.9 15.3% 28.2%",
mutedForeground: "306.3 12.8% 70.8%",
accent: "124.3 95.4% 82.9%",
accentForeground: "0 0% 0%",
destructive: "359.4 92.8% 78.2%",
destructiveForeground: "0 0% 0%",
border: "311.4 12.4% 33.1%",
input: "311.4 12.4% 33.1%",
ring: "124.3 95.4% 82.9%",
},
},
{
id: "github",
name: "GitHub",
tokens: {
background: "216 27.8% 7.1%",
foreground: "207.7 35.1% 92.7%",
card: "213.3 15.8% 11.2%",
cardForeground: "207.7 35.1% 92.7%",
popover: "213.3 15.8% 11.2%",
popoverForeground: "207.7 35.1% 92.7%",
primary: "212 100% 67.3%",
primaryForeground: "0 0% 0%",
secondary: "220 11.7% 15.1%",
secondaryForeground: "207.7 35.1% 92.7%",
muted: "217.5 7.8% 20%",
mutedForeground: "210 7.5% 68.6%",
accent: "212 100% 67.3%",
accentForeground: "0 0% 0%",
destructive: "3.8 100% 72.4%",
destructiveForeground: "0 0% 0%",
border: "210 6.2% 25.5%",
input: "210 6.2% 25.5%",
ring: "212 100% 67.3%",
},
},
{
id: "gruvbox-material",
name: "Gruvbox Material",
tokens: {
background: "0 1.2% 15.9%",
foreground: "38 41.1% 71.4%",
card: "0 1% 19.8%",
cardForeground: "38 41.1% 71.4%",
popover: "0 1% 19.8%",
popoverForeground: "38 41.1% 71.4%",
primary: "3.1 76.4% 65.1%",
primaryForeground: "0 0% 0%",
secondary: "0 0.9% 22.9%",
secondaryForeground: "38 41.1% 71.4%",
muted: "0 0.7% 27.6%",
mutedForeground: "37.7 19.1% 55.9%",
accent: "3.1 76.4% 65.1%",
accentForeground: "0 0% 0%",
destructive: "3.1 76.4% 65.1%",
destructiveForeground: "0 0% 0%",
border: "0 0.6% 32.7%",
input: "0 0.6% 32.7%",
ring: "3.1 76.4% 65.1%",
},
},
{
id: "homebrew",
name: "Homebrew",
tokens: {
background: "0 0% 0%",
foreground: "120 100% 50%",
card: "0 0% 4.3%",
cardForeground: "120 100% 50%",
popover: "0 0% 4.3%",
popoverForeground: "120 100% 50%",
primary: "184 100% 34.9%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 8.6%",
secondaryForeground: "120 100% 50%",
muted: "0 0% 14.1%",
mutedForeground: "120 100% 36.1%",
accent: "184 100% 34.9%",
accentForeground: "0 0% 0%",
destructive: "0 100% 30%",
destructiveForeground: "0 0% 100%",
border: "0 0% 20%",
input: "0 0% 20%",
ring: "184 100% 34.9%",
},
},
{
id: "ic-orange-ppl",
name: "IC Orange PPL",
tokens: {
background: "0 0% 14.9%",
foreground: "34.8 100% 75.7%",
card: "0 0% 18.8%",
cardForeground: "34.8 100% 75.7%",
popover: "0 0% 18.8%",
popoverForeground: "34.8 100% 75.7%",
primary: "36.2 100% 48.4%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 22%",
secondaryForeground: "34.8 100% 75.7%",
muted: "0 0% 26.7%",
mutedForeground: "35.1 42.2% 58.6%",
accent: "36.2 100% 48.4%",
accentForeground: "0 0% 0%",
destructive: "17.7 100% 37.8%",
destructiveForeground: "0 0% 100%",
border: "0 0% 31.8%",
input: "0 0% 31.8%",
ring: "36.2 100% 48.4%",
},
},
{
id: "ikki",
name: "IKKI",
tokens: {
background: "0 0% 32.5%",
foreground: "0 0% 83.9%",
card: "0 0% 35.7%",
cardForeground: "0 0% 83.9%",
popover: "0 0% 35.7%",
popoverForeground: "0 0% 83.9%",
primary: "35.8 100% 50%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 38.4%",
secondaryForeground: "0 0% 83.9%",
muted: "0 0% 42%",
mutedForeground: "0 0% 69.4%",
accent: "35.8 100% 50%",
accentForeground: "0 0% 0%",
destructive: "354 67% 56.1%",
destructiveForeground: "0 0% 0%",
border: "0 0% 45.9%",
input: "0 0% 45.9%",
ring: "35.8 100% 50%",
},
},
{
id: "kanso-ink",
name: "Kanso Ink",
tokens: {
background: "220 18.4% 9.6%",
foreground: "150 3.6% 78%",
card: "225 11.4% 13.7%",
cardForeground: "150 3.6% 78%",
popover: "225 11.4% 13.7%",
popoverForeground: "150 3.6% 78%",
primary: "41.4 33% 65.5%",
primaryForeground: "0 0% 0%",
secondary: "217.5 9.1% 17.3%",
secondaryForeground: "150 3.6% 78%",
muted: "225 7% 22.4%",
mutedForeground: "180 1.9% 58.4%",
accent: "41.4 33% 65.5%",
accentForeground: "0 0% 0%",
destructive: "4.2 42.2% 60%",
destructiveForeground: "0 0% 0%",
border: "222.9 5% 27.6%",
input: "222.9 5% 27.6%",
ring: "41.4 33% 65.5%",
},
},
{
id: "kary-pro-colors",
name: "Kary Pro Colors",
tokens: {
background: "0 0% 10.2%",
foreground: "0 0% 80%",
card: "0 0% 14.1%",
cardForeground: "0 0% 80%",
popover: "0 0% 14.1%",
popoverForeground: "0 0% 80%",
primary: "15.8 54.6% 62%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 17.6%",
secondaryForeground: "0 0% 80%",
muted: "0 0% 22.7%",
mutedForeground: "0 0% 60.4%",
accent: "15.8 54.6% 62%",
accentForeground: "0 0% 0%",
destructive: "15.8 54.6% 62%",
destructiveForeground: "0 0% 0%",
border: "0 0% 28.2%",
input: "0 0% 28.2%",
ring: "15.8 54.6% 62%",
},
},
{
id: "light-purple",
name: "Light purple",
tokens: {
background: "293.3 18% 19.6%",
foreground: "0 100% 94.5%",
card: "292.9 14.3% 23.3%",
cardForeground: "0 100% 94.5%",
popover: "292.9 14.3% 23.3%",
popoverForeground: "0 100% 94.5%",
primary: "191.2 74.1% 77.3%",
primaryForeground: "0 0% 0%",
secondary: "292.9 12.6% 26.5%",
secondaryForeground: "0 100% 94.5%",
muted: "296 9.6% 30.8%",
mutedForeground: "348 18.5% 73.5%",
accent: "191.2 74.1% 77.3%",
accentForeground: "0 0% 0%",
destructive: "348 69.3% 60.4%",
destructiveForeground: "0 0% 0%",
border: "295.7 7.7% 35.7%",
input: "295.7 7.7% 35.7%",
ring: "191.2 74.1% 77.3%",
},
},
{
id: "mondrian",
name: "Mondrian",
tokens: {
background: "240 27.8% 14.1%",
foreground: "0 0% 100%",
card: "240 20.9% 17.8%",
cardForeground: "0 0% 100%",
popover: "240 20.9% 17.8%",
popoverForeground: "0 0% 100%",
primary: "186.5 100% 37.8%",
primaryForeground: "0 0% 0%",
secondary: "240 17.4% 21.4%",
secondaryForeground: "0 0% 100%",
muted: "240 12.8% 26.1%",
mutedForeground: "240 4.1% 75.9%",
accent: "186.5 100% 37.8%",
accentForeground: "0 0% 0%",
destructive: "4.6 81.2% 56.3%",
destructiveForeground: "0 0% 0%",
border: "240 10% 31.4%",
input: "240 10% 31.4%",
ring: "186.5 100% 37.8%",
},
},
{
id: "monochrome",
name: "Monochrome",
tokens: {
background: "222.2 47.4% 11.2%",
foreground: "210 40% 96.1%",
card: "223.8 33.3% 15.3%",
cardForeground: "210 40% 96.1%",
popover: "223.8 33.3% 15.3%",
popoverForeground: "210 40% 96.1%",
primary: "210 40% 96.1%",
primaryForeground: "0 0% 0%",
secondary: "220.8 26.3% 18.6%",
secondaryForeground: "210 40% 96.1%",
muted: "224.3 19% 23.7%",
mutedForeground: "216.9 9.2% 72.4%",
accent: "210 40% 96.1%",
accentForeground: "0 0% 0%",
destructive: "210 40% 96.1%",
destructiveForeground: "0 0% 0%",
border: "223.6 14.9% 29%",
input: "223.6 14.9% 29%",
ring: "210 40% 96.1%",
},
},
{
id: "monochrome-stone",
name: "Monochrome Stone",
tokens: {
background: "24 9.8% 10%",
foreground: "60 4.8% 95.9%",
card: "24 7% 13.9%",
cardForeground: "60 4.8% 95.9%",
popover: "24 7% 13.9%",
popoverForeground: "60 4.8% 95.9%",
primary: "60 4.8% 95.9%",
primaryForeground: "0 0% 0%",
secondary: "30 4.4% 17.6%",
secondaryForeground: "60 4.8% 95.9%",
muted: "24 4.3% 22.5%",
mutedForeground: "30 1.4% 71.8%",
accent: "60 4.8% 95.9%",
accentForeground: "0 0% 0%",
destructive: "60 4.8% 95.9%",
destructiveForeground: "0 0% 0%",
border: "30 2.8% 27.8%",
input: "30 2.8% 27.8%",
ring: "60 4.8% 95.9%",
},
},
{
id: "monokai-pro-spectrum",
name: "Monokai Pro Spectrum",
tokens: {
background: "0 0% 13.3%",
foreground: "265.7 100% 97.3%",
card: "0 0% 17.3%",
cardForeground: "265.7 100% 97.3%",
popover: "0 0% 17.3%",
popoverForeground: "265.7 100% 97.3%",
primary: "22.6 97.7% 65.9%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 20.8%",
secondaryForeground: "265.7 100% 97.3%",
muted: "0 0% 25.5%",
mutedForeground: "264 7.5% 73.7%",
accent: "22.6 97.7% 65.9%",
accentForeground: "0 0% 0%",
destructive: "343 96.3% 68.4%",
destructiveForeground: "0 0% 0%",
border: "0 0% 30.6%",
input: "0 0% 30.6%",
ring: "22.6 97.7% 65.9%",
},
},
{
id: "monospace",
name: "Monospace",
tokens: {
background: "216 30.3% 12.9%",
foreground: "214.3 22.6% 87.8%",
card: "216 23.3% 16.9%",
cardForeground: "214.3 22.6% 87.8%",
popover: "216 23.3% 16.9%",
popoverForeground: "214.3 22.6% 87.8%",
primary: "227 100% 72%",
primaryForeground: "0 0% 0%",
secondary: "216.7 17.3% 20.4%",
secondaryForeground: "214.3 22.6% 87.8%",
muted: "216.7 14.1% 25.1%",
mutedForeground: "216 8.9% 66.9%",
accent: "227 100% 72%",
accentForeground: "0 0% 0%",
destructive: "359.2 90% 68.6%",
destructiveForeground: "0 0% 0%",
border: "213.8 10.4% 30.2%",
input: "213.8 10.4% 30.2%",
ring: "227 100% 72%",
},
},
{
id: "noctis-azureus",
name: "Noctis Azureus",
tokens: {
background: "203.1 78.8% 12.9%",
foreground: "203.6 27.5% 80%",
card: "202.8 58.1% 16.9%",
cardForeground: "203.6 27.5% 80%",
popover: "202.8 58.1% 16.9%",
popoverForeground: "203.6 27.5% 80%",
primary: "187.1 78.4% 60%",
primaryForeground: "0 0% 0%",
secondary: "203.7 46.2% 20.4%",
secondaryForeground: "203.6 27.5% 80%",
muted: "203.2 34.4% 25.1%",
mutedForeground: "202.9 17.2% 61.2%",
accent: "187.1 78.4% 60%",
accentForeground: "0 0% 0%",
destructive: "16.8 78.2% 55.1%",
destructiveForeground: "0 0% 0%",
border: "203.4 26.5% 30.4%",
input: "203.4 26.5% 30.4%",
ring: "187.1 78.4% 60%",
},
},
{
id: "noctis-hibernus",
name: "Noctis Hibernus",
tokens: {
background: "246.9 25.5% 20%",
foreground: "249 19.6% 80%",
card: "247.2 20.7% 23.7%",
cardForeground: "249 19.6% 80%",
popover: "247.2 20.7% 23.7%",
popoverForeground: "249 19.6% 80%",
primary: "187.1 78.4% 60%",
primaryForeground: "0 0% 0%",
secondary: "247.5 17.6% 26.7%",
secondaryForeground: "249 19.6% 80%",
muted: "247.8 14.5% 31.2%",
mutedForeground: "248.2 11.7% 63.1%",
accent: "187.1 78.4% 60%",
accentForeground: "0 0% 0%",
destructive: "16.8 78.2% 55.1%",
destructiveForeground: "0 0% 0%",
border: "248.6 11.5% 35.9%",
input: "248.6 11.5% 35.9%",
ring: "187.1 78.4% 60%",
},
},
{
id: "noir-essence",
name: "Noir Essence",
tokens: {
background: "200 8.1% 7.3%",
foreground: "41.5 44.8% 94.3%",
card: "200 5.1% 11.6%",
cardForeground: "41.5 44.8% 94.3%",
popover: "200 5.1% 11.6%",
popoverForeground: "41.5 44.8% 94.3%",
primary: "23.5 76.1% 60.6%",
primaryForeground: "0 0% 0%",
secondary: "200 3.9% 15.1%",
secondaryForeground: "41.5 44.8% 94.3%",
muted: "200 2.9% 20.2%",
mutedForeground: "40 5.9% 70%",
accent: "23.5 76.1% 60.6%",
accentForeground: "0 0% 0%",
destructive: "3.1 76.4% 65.1%",
destructiveForeground: "0 0% 0%",
border: "210 1.5% 25.9%",
input: "210 1.5% 25.9%",
ring: "23.5 76.1% 60.6%",
},
},
{
id: "nord-midnight",
name: "Nord Midnight",
tokens: {
background: "220 14.8% 12%",
foreground: "218.8 27.9% 88%",
card: "220 11.1% 15.9%",
cardForeground: "218.8 27.9% 88%",
popover: "220 11.1% 15.9%",
popoverForeground: "218.8 27.9% 88%",
primary: "40 70.6% 73.3%",
primaryForeground: "0 0% 0%",
secondary: "220 9.1% 19.4%",
secondaryForeground: "218.8 27.9% 88%",
muted: "217.5 6.5% 24.3%",
mutedForeground: "220 8.9% 66.9%",
accent: "40 70.6% 73.3%",
accentForeground: "0 0% 0%",
destructive: "354.3 42.3% 56.5%",
destructiveForeground: "0 0% 0%",
border: "222.9 4.6% 29.6%",
input: "222.9 4.6% 29.6%",
ring: "40 70.6% 73.3%",
},
},
{
id: "notionish",
name: "Notionish",
tokens: {
background: "60 2% 9.6%",
foreground: "30 10% 96.1%",
card: "60 1.4% 13.5%",
cardForeground: "30 10% 96.1%",
popover: "60 1.4% 13.5%",
popoverForeground: "30 10% 96.1%",
primary: "39.9 100% 68.4%",
primaryForeground: "0 0% 0%",
secondary: "60 1.1% 17.5%",
secondaryForeground: "30 10% 96.1%",
muted: "60 0.9% 22.2%",
mutedForeground: "30 1.4% 71.8%",
accent: "39.9 100% 68.4%",
accentForeground: "0 0% 0%",
destructive: "6.9 90.2% 67.8%",
destructiveForeground: "0 0% 0%",
border: "60 0.7% 27.6%",
input: "60 0.7% 27.6%",
ring: "39.9 100% 68.4%",
},
},
{
id: "phonebook",
name: "Phonebook",
tokens: {
background: "27.3 14.3% 15.1%",
foreground: "43 71.4% 67.1%",
card: "30 10.4% 18.8%",
cardForeground: "43 71.4% 67.1%",
popover: "30 10.4% 18.8%",
popoverForeground: "43 71.4% 67.1%",
primary: "186.5 100% 37.8%",
primaryForeground: "0 0% 0%",
secondary: "24 8.8% 22.4%",
secondaryForeground: "43 71.4% 67.1%",
muted: "24 7.2% 27.1%",
mutedForeground: "42 37.2% 52.5%",
accent: "186.5 100% 37.8%",
accentForeground: "0 0% 0%",
destructive: "4 89.9% 61%",
destructiveForeground: "0 0% 0%",
border: "26.7 5.5% 32%",
input: "26.7 5.5% 32%",
ring: "186.5 100% 37.8%",
},
},
{
id: "polychrome",
name: "Polychrome",
tokens: {
background: "250.9 12.1% 17.8%",
foreground: "251.7 31.6% 77.6%",
card: "252 9.1% 21.6%",
cardForeground: "251.7 31.6% 77.6%",
popover: "252 9.1% 21.6%",
popoverForeground: "251.7 31.6% 77.6%",
primary: "47.7 100% 76.1%",
primaryForeground: "0 0% 0%",
secondary: "252 7.9% 24.7%",
secondaryForeground: "251.7 31.6% 77.6%",
muted: "252 6.7% 29.4%",
mutedForeground: "250.3 14.6% 61%",
accent: "47.7 100% 76.1%",
accentForeground: "0 0% 0%",
destructive: "9.1 100% 63.9%",
destructiveForeground: "0 0% 0%",
border: "253.3 5.1% 34.3%",
input: "253.3 5.1% 34.3%",
ring: "47.7 100% 76.1%",
},
},
{
id: "purplepeter",
name: "Purplepeter",
tokens: {
background: "260 48% 19.6%",
foreground: "255.8 65.5% 94.3%",
card: "260.9 39% 23.1%",
cardForeground: "255.8 65.5% 94.3%",
popover: "260.9 39% 23.1%",
popoverForeground: "255.8 65.5% 94.3%",
primary: "264 100% 77.5%",
primaryForeground: "0 0% 0%",
secondary: "260.5 32.8% 26.3%",
secondaryForeground: "255.8 65.5% 94.3%",
muted: "260.5 26.1% 30.8%",
mutedForeground: "257.8 20% 73.5%",
accent: "264 100% 77.5%",
accentForeground: "0 0% 0%",
destructive: "4.9 100% 71.4%",
destructiveForeground: "0 0% 0%",
border: "260.5 20.9% 35.7%",
input: "260.5 20.9% 35.7%",
ring: "264 100% 77.5%",
},
},
{
id: "rainglow-codecourse",
name: "Rainglow Codecourse",
tokens: {
background: "204 33.3% 2.9%",
foreground: "197.6 30.4% 78%",
card: "204 13.5% 7.3%",
cardForeground: "197.6 30.4% 78%",
popover: "204 13.5% 7.3%",
popoverForeground: "197.6 30.4% 78%",
primary: "202.7 97.4% 55.3%",
primaryForeground: "0 0% 0%",
secondary: "204 8.8% 11.2%",
secondaryForeground: "197.6 30.4% 78%",
muted: "195 4.8% 16.5%",
mutedForeground: "196.2 11.8% 56.9%",
accent: "202.7 97.4% 55.3%",
accentForeground: "0 0% 0%",
destructive: "348.8 86% 39.2%",
destructiveForeground: "0 0% 100%",
border: "210 3.5% 22.4%",
input: "210 3.5% 22.4%",
ring: "202.7 97.4% 55.3%",
},
},
{
id: "rainglow-crisp",
name: "Rainglow Crisp",
tokens: {
background: "300 14.3% 4.1%",
foreground: "0 0% 100%",
card: "300 7% 8.4%",
cardForeground: "0 0% 100%",
popover: "300 7% 8.4%",
popoverForeground: "0 0% 100%",
primary: "23 97.5% 52.4%",
primaryForeground: "0 0% 0%",
secondary: "300 4.8% 12.4%",
secondaryForeground: "0 0% 100%",
muted: "300 3.4% 17.5%",
mutedForeground: "300 0.7% 73.1%",
accent: "23 97.5% 52.4%",
accentForeground: "0 0% 0%",
destructive: "348.8 86% 39.2%",
destructiveForeground: "0 0% 100%",
border: "300 2.5% 23.3%",
input: "300 2.5% 23.3%",
ring: "23 97.5% 52.4%",
},
},
{
id: "rainglow-lavender",
name: "Rainglow Lavender",
tokens: {
background: "270 12.5% 3.1%",
foreground: "274.8 46.3% 86.9%",
card: "270 5.3% 7.5%",
cardForeground: "274.8 46.3% 86.9%",
popover: "270 5.3% 7.5%",
popoverForeground: "274.8 46.3% 86.9%",
primary: "273.9 100% 67.1%",
primaryForeground: "0 0% 0%",
secondary: "270 3.4% 11.4%",
secondaryForeground: "274.8 46.3% 86.9%",
muted: "300 1.2% 16.7%",
mutedForeground: "276.5 12.3% 63.3%",
accent: "273.9 100% 67.1%",
accentForeground: "0 0% 0%",
destructive: "348.8 86% 39.2%",
destructiveForeground: "0 0% 100%",
border: "240 0.9% 22.5%",
input: "240 0.9% 22.5%",
ring: "273.9 100% 67.1%",
},
},
{
id: "remedy-tilted",
name: "Remedy Tilted",
tokens: {
background: "5 10.5% 22.4%",
foreground: "39.4 80.7% 83.7%",
card: "5 9.1% 25.9%",
cardForeground: "39.4 80.7% 83.7%",
popover: "5 9.1% 25.9%",
popoverForeground: "39.4 80.7% 83.7%",
primary: "24.6 65.8% 62.2%",
primaryForeground: "0 0% 0%",
secondary: "5.5 7.5% 28.8%",
secondaryForeground: "39.4 80.7% 83.7%",
muted: "0 5.9% 33.3%",
mutedForeground: "37.6 29.8% 66.5%",
accent: "24.6 65.8% 62.2%",
accentForeground: "0 0% 0%",
destructive: "0 42.9% 45.3%",
destructiveForeground: "0 0% 100%",
border: "6.7 4.7% 37.8%",
input: "6.7 4.7% 37.8%",
ring: "24.6 65.8% 62.2%",
},
},
{
id: "rose-pine",
name: "Rosé Pine",
tokens: {
background: "249.2 22% 11.6%",
foreground: "245.5 50% 91.4%",
card: "249.2 16.5% 15.5%",
cardForeground: "245.5 50% 91.4%",
popover: "249.2 16.5% 15.5%",
popoverForeground: "245.5 50% 91.4%",
primary: "35 87.6% 71.6%",
primaryForeground: "0 0% 0%",
secondary: "250 12.2% 19.2%",
secondaryForeground: "245.5 50% 91.4%",
muted: "250 9.8% 23.9%",
mutedForeground: "246 12.7% 69%",
accent: "35 87.6% 71.6%",
accentForeground: "0 0% 0%",
destructive: "343.1 75.6% 67.8%",
destructiveForeground: "0 0% 0%",
border: "250.9 7.4% 29.2%",
input: "250.9 7.4% 29.2%",
ring: "35 87.6% 71.6%",
},
},
{
id: "selene-selenized",
name: "Selene Selenized",
tokens: {
background: "189.9 87% 15.1%",
foreground: "183.8 17% 81.6%",
card: "189.4 66.7% 18.8%",
cardForeground: "183.8 17% 81.6%",
popover: "189.4 66.7% 18.8%",
popoverForeground: "183.8 17% 81.6%",
primary: "203.3 100% 48%",
primaryForeground: "0 0% 0%",
secondary: "190.6 54.4% 22.4%",
secondaryForeground: "183.8 17% 81.6%",
muted: "190.3 42% 27.1%",
mutedForeground: "187.7 16.4% 62.9%",
accent: "203.3 100% 48%",
accentForeground: "0 0% 0%",
destructive: "2.7 97.8% 64.9%",
destructiveForeground: "0 0% 0%",
border: "190 32.9% 32.2%",
input: "190 32.9% 32.2%",
ring: "203.3 100% 48%",
},
},
{
id: "soft-color",
name: "Soft Color",
tokens: {
background: "0 0% 14.5%",
foreground: "151.2 100% 95.1%",
card: "0 0% 18.4%",
cardForeground: "151.2 100% 95.1%",
popover: "0 0% 18.4%",
popoverForeground: "151.2 100% 95.1%",
primary: "60 86.9% 48%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 22%",
secondaryForeground: "151.2 100% 95.1%",
muted: "0 0% 26.7%",
mutedForeground: "150 12.9% 72.5%",
accent: "60 86.9% 48%",
accentForeground: "0 0% 0%",
destructive: "0 61.4% 49.8%",
destructiveForeground: "0 0% 100%",
border: "0 0% 31.8%",
input: "0 0% 31.8%",
ring: "60 86.9% 48%",
},
},
{
id: "tearout",
name: "Tearout",
tokens: {
background: "85 11.8% 20%",
foreground: "30.9 76.1% 82%",
card: "85 10% 23.5%",
cardForeground: "30.9 76.1% 82%",
popover: "85 10% 23.5%",
popoverForeground: "30.9 76.1% 82%",
primary: "46.4 51.2% 67.8%",
primaryForeground: "0 0% 0%",
secondary: "87.3 8% 26.9%",
secondaryForeground: "30.9 76.1% 82%",
muted: "87.3 6.9% 31.2%",
mutedForeground: "33.5 28.6% 64.3%",
accent: "46.4 51.2% 67.8%",
accentForeground: "0 0% 0%",
destructive: "20 44.3% 64.1%",
destructiveForeground: "0 0% 0%",
border: "84 5.4% 36.1%",
input: "84 5.4% 36.1%",
ring: "46.4 51.2% 67.8%",
},
},
{
id: "tokyo-night",
name: "Tokyo Night",
tokens: {
background: "235 18.8% 12.5%",
foreground: "228.7 72.6% 85.7%",
card: "235 14.3% 16.5%",
cardForeground: "228.7 72.6% 85.7%",
popover: "235 14.3% 16.5%",
popoverForeground: "228.7 72.6% 85.7%",
primary: "202.2 100% 74.5%",
primaryForeground: "0 0% 0%",
secondary: "234.5 10.9% 19.8%",
secondaryForeground: "228.7 72.6% 85.7%",
muted: "234 7.9% 24.7%",
mutedForeground: "229.8 23.2% 65.3%",
accent: "202.2 100% 74.5%",
accentForeground: "0 0% 0%",
destructive: "348.8 89% 71.6%",
destructiveForeground: "0 0% 0%",
border: "233.3 5.9% 30%",
input: "233.3 5.9% 30%",
ring: "202.2 100% 74.5%",
},
},
{
id: "tomorrow-night-eighties",
name: "Tomorrow Night Eighties",
tokens: {
background: "0 0% 17.6%",
foreground: "0 0% 80%",
card: "0 0% 21.2%",
cardForeground: "0 0% 80%",
popover: "0 0% 21.2%",
popoverForeground: "0 0% 80%",
primary: "40 100% 70%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 24.7%",
secondaryForeground: "0 0% 80%",
muted: "0 0% 29%",
mutedForeground: "0 0% 62.4%",
accent: "40 100% 70%",
accentForeground: "0 0% 0%",
destructive: "358.5 82.6% 70.8%",
destructiveForeground: "0 0% 0%",
border: "0 0% 34.1%",
input: "0 0% 34.1%",
ring: "40 100% 70%",
},
},
{
id: "vaporizer-turquoise",
name: "Vaporizer Turquoise",
tokens: {
background: "0 0% 9.8%",
foreground: "110.8 31.7% 67.8%",
card: "0 0% 13.7%",
cardForeground: "110.8 31.7% 67.8%",
popover: "0 0% 13.7%",
popoverForeground: "110.8 31.7% 67.8%",
primary: "151.9 100% 36.9%",
primaryForeground: "0 0% 0%",
secondary: "0 0% 17.6%",
secondaryForeground: "110.8 31.7% 67.8%",
muted: "0 0% 22.4%",
mutedForeground: "110.3 15% 51.6%",
accent: "151.9 100% 36.9%",
accentForeground: "0 0% 0%",
destructive: "0 61.4% 49.8%",
destructiveForeground: "0 0% 100%",
border: "0 0% 27.8%",
input: "0 0% 27.8%",
ring: "151.9 100% 36.9%",
},
},
{
id: "xotopio",
name: "Xotopio",
tokens: {
background: "233.3 69.2% 5.1%",
foreground: "0 0% 100%",
card: "232.9 36.2% 9.2%",
cardForeground: "0 0% 100%",
popover: "232.9 36.2% 9.2%",
popoverForeground: "0 0% 100%",
primary: "195.1 100% 66.5%",
primaryForeground: "0 0% 0%",
secondary: "232.9 25.4% 13.1%",
secondaryForeground: "0 0% 100%",
muted: "232.5 17% 18.4%",
mutedForeground: "240 3.7% 73.5%",
accent: "195.1 100% 66.5%",
accentForeground: "0 0% 0%",
destructive: "327.7 100% 48.8%",
destructiveForeground: "0 0% 0%",
border: "232 12.2% 24.1%",
input: "232 12.2% 24.1%",
ring: "195.1 100% 66.5%",
},
},
{
id: "yuttari",
name: "Yuttari",
tokens: {
background: "320 11.1% 10.6%",
foreground: "336.7 100% 96.5%",
card: "320 8.1% 14.5%",
cardForeground: "336.7 100% 96.5%",
popover: "320 8.1% 14.5%",
popoverForeground: "336.7 100% 96.5%",
primary: "38.5 43.3% 64.7%",
primaryForeground: "0 0% 0%",
secondary: "324 5.4% 18.2%",
secondaryForeground: "336.7 100% 96.5%",
muted: "320 5.1% 23.1%",
mutedForeground: "332 10.6% 72.4%",
accent: "38.5 43.3% 64.7%",
accentForeground: "0 0% 0%",
destructive: "0 41.1% 58%",
destructiveForeground: "0 0% 0%",
border: "324 3.4% 28.4%",
input: "324 3.4% 28.4%",
ring: "38.5 43.3% 64.7%",
},
},
{
id: "zenbones-rosebones",
name: "Zenbones Rosebones",
tokens: {
background: "249.2 21.3% 12%",
foreground: "0 17.8% 85.7%",
card: "249.2 16% 15.9%",
cardForeground: "0 17.8% 85.7%",
popover: "249.2 16% 15.9%",
popoverForeground: "0 17.8% 85.7%",
primary: "35.1 87.8% 71%",
primaryForeground: "0 0% 0%",
secondary: "245 12% 19.6%",
secondaryForeground: "0 17.8% 85.7%",
muted: "250 9.7% 24.3%",
mutedForeground: "336 5.5% 64.3%",
accent: "35.1 87.8% 71%",
accentForeground: "0 0% 0%",
destructive: "343.3 75.3% 68.2%",
destructiveForeground: "0 0% 0%",
border: "250.9 7.3% 29.6%",
input: "250.9 7.3% 29.6%",
ring: "35.1 87.8% 71%",
},
},
{
id: "zhxo-red",
name: "Zhxo'red",
tokens: {
background: "240 5.5% 10.8%",
foreground: "0 0% 67.1%",
card: "240 4% 14.7%",
cardForeground: "0 0% 67.1%",
popover: "240 4% 14.7%",
popoverForeground: "0 0% 67.1%",
primary: "182.7 86% 44.9%",
primaryForeground: "0 0% 0%",
secondary: "240 3.2% 18.2%",
secondaryForeground: "0 0% 67.1%",
muted: "240 2.5% 23.3%",
mutedForeground: "240 0.4% 51.2%",
accent: "182.7 86% 44.9%",
accentForeground: "0 0% 0%",
destructive: "0 72.6% 55.7%",
destructiveForeground: "0 0% 0%",
border: "240 1.4% 28.6%",
input: "240 1.4% 28.6%",
ring: "182.7 86% 44.9%",
},
}
];
export const CORE_DARK_UI_THEMES: UiThemePreset[] = [
{
id: "pure-black",
name: "Pure Black",
tokens: {
background: "0 0% 0%",
foreground: "0 0% 95%",
card: "0 0% 5%",
cardForeground: "0 0% 95%",
popover: "0 0% 5%",
popoverForeground: "0 0% 95%",
primary: "210 90% 60%",
primaryForeground: "0 0% 100%",
secondary: "0 0% 0%",
secondaryForeground: "0 0% 92%",
muted: "0 0% 15%",
mutedForeground: "0 0% 65%",
accent: "210 90% 60%",
accentForeground: "0 0% 100%",
destructive: "0 70% 50%",
destructiveForeground: "0 0% 100%",
border: "0 0% 12%",
input: "0 0% 12%",
ring: "210 90% 60%",
},
},
{
id: "midnight",
name: "Midnight",
tokens: {
background: "220 28% 10%",
foreground: "210 40% 95%",
card: "220 22% 12%",
cardForeground: "210 40% 95%",
popover: "220 22% 12%",
popoverForeground: "210 40% 95%",
primary: "200 100% 61%",
primaryForeground: "220 40% 96%",
secondary: "220 16% 16%",
secondaryForeground: "210 40% 90%",
muted: "220 16% 16%",
mutedForeground: "220 10% 70%",
accent: "200 100% 61%",
accentForeground: "220 40% 96%",
destructive: "0 70% 50%",
destructiveForeground: "210 40% 96%",
border: "220 22% 18%",
input: "220 22% 18%",
ring: "200 100% 61%",
},
},
{
id: "deep-blue",
name: "Deep Blue",
tokens: {
background: "220 35% 10%",
foreground: "210 40% 96%",
card: "220 28% 14%",
cardForeground: "210 40% 96%",
popover: "220 28% 14%",
popoverForeground: "210 40% 96%",
primary: "210 90% 60%",
primaryForeground: "220 40% 96%",
secondary: "220 20% 18%",
secondaryForeground: "210 40% 90%",
muted: "220 20% 18%",
mutedForeground: "220 10% 72%",
accent: "210 90% 60%",
accentForeground: "220 40% 96%",
destructive: "0 70% 50%",
destructiveForeground: "210 40% 96%",
border: "220 20% 22%",
input: "220 20% 22%",
ring: "210 90% 60%",
},
},
{
id: "vscode",
name: "VS Code",
tokens: {
background: "0 0% 12%",
foreground: "210 20% 92%",
card: "0 0% 16%",
cardForeground: "210 20% 92%",
popover: "0 0% 16%",
popoverForeground: "210 20% 92%",
primary: "210 90% 60%",
primaryForeground: "0 0% 100%",
secondary: "0 0% 18%",
secondaryForeground: "210 20% 92%",
muted: "0 0% 18%",
mutedForeground: "0 0% 65%",
accent: "210 90% 60%",
accentForeground: "0 0% 100%",
destructive: "0 70% 50%",
destructiveForeground: "0 0% 100%",
border: "0 0% 22%",
input: "0 0% 22%",
ring: "210 90% 60%",
},
},
{
id: "graphite",
name: "Graphite",
tokens: {
background: "220 8% 12%",
foreground: "210 20% 94%",
card: "220 8% 16%",
cardForeground: "210 20% 94%",
popover: "220 8% 16%",
popoverForeground: "210 20% 94%",
primary: "210 80% 60%",
primaryForeground: "0 0% 100%",
secondary: "220 6% 18%",
secondaryForeground: "210 20% 92%",
muted: "220 6% 18%",
mutedForeground: "0 0% 70%",
accent: "210 80% 60%",
accentForeground: "0 0% 100%",
destructive: "0 70% 50%",
destructiveForeground: "0 0% 100%",
border: "220 6% 22%",
input: "220 6% 22%",
ring: "210 80% 60%",
},
},
{
id: "obsidian",
name: "Obsidian",
tokens: {
background: "240 8% 8%",
foreground: "210 20% 94%",
card: "240 8% 12%",
cardForeground: "210 20% 94%",
popover: "240 8% 12%",
popoverForeground: "210 20% 94%",
primary: "265 80% 65%",
primaryForeground: "0 0% 100%",
secondary: "240 6% 16%",
secondaryForeground: "210 20% 92%",
muted: "240 6% 16%",
mutedForeground: "240 5% 70%",
accent: "265 80% 65%",
accentForeground: "0 0% 100%",
destructive: "0 70% 50%",
destructiveForeground: "0 0% 100%",
border: "240 6% 20%",
input: "240 6% 20%",
ring: "265 80% 65%",
},
},
{
id: "forest",
name: "Forest",
tokens: {
background: "150 12% 10%",
foreground: "150 20% 92%",
card: "150 12% 14%",
cardForeground: "150 20% 92%",
popover: "150 12% 14%",
popoverForeground: "150 20% 92%",
primary: "160 70% 50%",
primaryForeground: "0 0% 100%",
secondary: "150 10% 18%",
secondaryForeground: "150 20% 90%",
muted: "150 10% 18%",
mutedForeground: "150 8% 68%",
accent: "160 70% 50%",
accentForeground: "0 0% 100%",
destructive: "0 70% 50%",
destructiveForeground: "0 0% 100%",
border: "150 8% 22%",
input: "150 8% 22%",
ring: "160 70% 50%",
},
},
];
export const DARK_UI_THEMES: UiThemePreset[] = [
...CORE_DARK_UI_THEMES,
...EXTENDED_DARK_UI_THEMES,
];
export const getUiThemeById = (theme: "light" | "dark", id: string): UiThemePreset => {
const list = theme === "dark" ? DARK_UI_THEMES : LIGHT_UI_THEMES;
const found = list.find((preset) => preset.id === id);
return found || list[0];
};
Reference in New Issue Copy Permalink