diff --git a/frontend/index.html b/frontend/index.html
index db314db..4e8b4a3 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,7 +6,8 @@
-
+
+
SpotiFLAC
diff --git a/frontend/src/lib/settings.ts b/frontend/src/lib/settings.ts
index b861383..7872a76 100644
--- a/frontend/src/lib/settings.ts
+++ b/frontend/src/lib/settings.ts
@@ -1,6 +1,6 @@
import { GetDefaults } from "../../wailsjs/go/main/App";
-export type FontFamily = "google-sans" | "inter" | "poppins" | "roboto" | "dm-sans" | "plus-jakarta-sans" | "manrope" | "space-grotesk";
+export type FontFamily = "google-sans" | "inter" | "poppins" | "roboto" | "dm-sans" | "plus-jakarta-sans" | "manrope" | "space-grotesk" | "noto-sans" | "nunito-sans" | "figtree" | "raleway" | "public-sans" | "outfit" | "jetbrains-mono" | "geist-sans";
// Folder structure presets
export type FolderPreset = "none" | "artist" | "album" | "artist-album" | "artist-year-album" | "custom";
@@ -92,13 +92,21 @@ export const DEFAULT_SETTINGS: Settings = {
};
export const FONT_OPTIONS: { value: FontFamily; label: string; fontFamily: string }[] = [
+ { value: "dm-sans", label: "DM Sans", fontFamily: '"DM Sans", system-ui, sans-serif' },
+ { value: "figtree", label: "Figtree", fontFamily: '"Figtree", system-ui, sans-serif' },
+ { value: "geist-sans", label: "Geist Sans", fontFamily: '"Geist Sans", system-ui, sans-serif' },
{ value: "google-sans", label: "Google Sans Flex", fontFamily: '"Google Sans Flex", system-ui, sans-serif' },
{ value: "inter", label: "Inter", fontFamily: '"Inter", system-ui, sans-serif' },
- { value: "poppins", label: "Poppins", fontFamily: '"Poppins", system-ui, sans-serif' },
- { value: "roboto", label: "Roboto", fontFamily: '"Roboto", system-ui, sans-serif' },
- { value: "dm-sans", label: "DM Sans", fontFamily: '"DM Sans", system-ui, sans-serif' },
- { value: "plus-jakarta-sans", label: "Plus Jakarta Sans", fontFamily: '"Plus Jakarta Sans", system-ui, sans-serif' },
+ { value: "jetbrains-mono", label: "JetBrains Mono", fontFamily: '"JetBrains Mono", ui-monospace, monospace' },
{ value: "manrope", label: "Manrope", fontFamily: '"Manrope", system-ui, sans-serif' },
+ { value: "noto-sans", label: "Noto Sans", fontFamily: '"Noto Sans", system-ui, sans-serif' },
+ { value: "nunito-sans", label: "Nunito Sans", fontFamily: '"Nunito Sans", system-ui, sans-serif' },
+ { value: "outfit", label: "Outfit", fontFamily: '"Outfit", system-ui, sans-serif' },
+ { value: "plus-jakarta-sans", label: "Plus Jakarta Sans", fontFamily: '"Plus Jakarta Sans", system-ui, sans-serif' },
+ { value: "poppins", label: "Poppins", fontFamily: '"Poppins", system-ui, sans-serif' },
+ { value: "public-sans", label: "Public Sans", fontFamily: '"Public Sans", system-ui, sans-serif' },
+ { value: "raleway", label: "Raleway", fontFamily: '"Raleway", system-ui, sans-serif' },
+ { value: "roboto", label: "Roboto", fontFamily: '"Roboto", system-ui, sans-serif' },
{ value: "space-grotesk", label: "Space Grotesk", fontFamily: '"Space Grotesk", system-ui, sans-serif' },
];
diff --git a/frontend/src/lib/themes.ts b/frontend/src/lib/themes.ts
index 3f3deea..0ac9895 100644
--- a/frontend/src/lib/themes.ts
+++ b/frontend/src/lib/themes.ts
@@ -7,835 +7,275 @@ export interface Theme {
};
}
+// Base colors yang sama untuk semua tema (kecuali primary dan primary-foreground)
+const baseLightColors: Record = {
+ background: "oklch(1 0 0)",
+ foreground: "oklch(0.145 0 0)",
+ card: "oklch(1 0 0)",
+ "card-foreground": "oklch(0.145 0 0)",
+ popover: "oklch(1 0 0)",
+ "popover-foreground": "oklch(0.145 0 0)",
+ secondary: "oklch(0.967 0.001 286.375)",
+ "secondary-foreground": "oklch(0.21 0.006 285.885)",
+ muted: "oklch(0.97 0 0)",
+ "muted-foreground": "oklch(0.556 0 0)",
+ accent: "oklch(0.97 0 0)",
+ "accent-foreground": "oklch(0.205 0 0)",
+ destructive: "oklch(0.58 0.22 27)",
+ border: "oklch(0.922 0 0)",
+ input: "oklch(0.922 0 0)",
+ ring: "oklch(0.708 0 0)",
+};
+
+const baseDarkColors: Record = {
+ background: "oklch(0.145 0 0)",
+ foreground: "oklch(0.985 0 0)",
+ card: "oklch(0.205 0 0)",
+ "card-foreground": "oklch(0.985 0 0)",
+ popover: "oklch(0.205 0 0)",
+ "popover-foreground": "oklch(0.985 0 0)",
+ secondary: "oklch(0.274 0.006 286.033)",
+ "secondary-foreground": "oklch(0.985 0 0)",
+ muted: "oklch(0.269 0 0)",
+ "muted-foreground": "oklch(0.708 0 0)",
+ accent: "oklch(0.371 0 0)",
+ "accent-foreground": "oklch(0.985 0 0)",
+ destructive: "oklch(0.704 0.191 22.216)",
+ border: "oklch(1 0 0 / 10%)",
+ input: "oklch(1 0 0 / 15%)",
+ ring: "oklch(0.556 0 0)",
+};
+
+// Primary colors yang berbeda untuk setiap tema
+interface PrimaryColors {
+ light: {
+ primary: string;
+ "primary-foreground": string;
+ };
+ dark: {
+ primary: string;
+ "primary-foreground": string;
+ };
+}
+
+const primaryColors: Record = {
+ amber: {
+ light: {
+ primary: "oklch(0.67 0.16 58)",
+ "primary-foreground": "oklch(0.99 0.02 95)",
+ },
+ dark: {
+ primary: "oklch(0.77 0.16 70)",
+ "primary-foreground": "oklch(0.28 0.07 46)",
+ },
+ },
+ blue: {
+ light: {
+ primary: "oklch(0.488 0.243 264.376)",
+ "primary-foreground": "oklch(0.97 0.014 254.604)",
+ },
+ dark: {
+ primary: "oklch(0.42 0.18 266)",
+ "primary-foreground": "oklch(0.97 0.014 254.604)",
+ },
+ },
+ cyan: {
+ light: {
+ primary: "oklch(0.61 0.11 222)",
+ "primary-foreground": "oklch(0.98 0.02 201)",
+ },
+ dark: {
+ primary: "oklch(0.71 0.13 215)",
+ "primary-foreground": "oklch(0.30 0.05 230)",
+ },
+ },
+ emerald: {
+ light: {
+ primary: "oklch(0.60 0.13 163)",
+ "primary-foreground": "oklch(0.98 0.02 166)",
+ },
+ dark: {
+ primary: "oklch(0.70 0.15 162)",
+ "primary-foreground": "oklch(0.26 0.05 173)",
+ },
+ },
+ fuchsia: {
+ light: {
+ primary: "oklch(0.59 0.26 323)",
+ "primary-foreground": "oklch(0.98 0.02 320)",
+ },
+ dark: {
+ primary: "oklch(0.67 0.26 322)",
+ "primary-foreground": "oklch(0.98 0.02 320)",
+ },
+ },
+ green: {
+ light: {
+ primary: "oklch(0.648 0.2 131.684)",
+ "primary-foreground": "oklch(0.986 0.031 120.757)",
+ },
+ dark: {
+ primary: "oklch(0.648 0.2 131.684)",
+ "primary-foreground": "oklch(0.986 0.031 120.757)",
+ },
+ },
+ indigo: {
+ light: {
+ primary: "oklch(0.51 0.23 277)",
+ "primary-foreground": "oklch(0.96 0.02 272)",
+ },
+ dark: {
+ primary: "oklch(0.59 0.20 277)",
+ "primary-foreground": "oklch(0.96 0.02 272)",
+ },
+ },
+ lime: {
+ light: {
+ primary: "oklch(0.65 0.18 132)",
+ "primary-foreground": "oklch(0.99 0.03 121)",
+ },
+ dark: {
+ primary: "oklch(0.77 0.20 131)",
+ "primary-foreground": "oklch(0.27 0.07 132)",
+ },
+ },
+ neutral: {
+ light: {
+ primary: "oklch(0.205 0 0)",
+ "primary-foreground": "oklch(0.985 0 0)",
+ },
+ dark: {
+ primary: "oklch(0.922 0 0)",
+ "primary-foreground": "oklch(0.205 0 0)",
+ },
+ },
+ orange: {
+ light: {
+ primary: "oklch(0.646 0.222 41.116)",
+ "primary-foreground": "oklch(0.98 0.016 73.684)",
+ },
+ dark: {
+ primary: "oklch(0.705 0.213 47.604)",
+ "primary-foreground": "oklch(0.98 0.016 73.684)",
+ },
+ },
+ pink: {
+ light: {
+ primary: "oklch(0.59 0.22 1)",
+ "primary-foreground": "oklch(0.97 0.01 343)",
+ },
+ dark: {
+ primary: "oklch(0.66 0.21 354)",
+ "primary-foreground": "oklch(0.97 0.01 343)",
+ },
+ },
+ purple: {
+ light: {
+ primary: "oklch(0.56 0.25 302)",
+ "primary-foreground": "oklch(0.98 0.01 308)",
+ },
+ dark: {
+ primary: "oklch(0.63 0.23 304)",
+ "primary-foreground": "oklch(0.98 0.01 308)",
+ },
+ },
+ red: {
+ light: {
+ primary: "oklch(0.577 0.245 27.325)",
+ "primary-foreground": "oklch(0.971 0.013 17.38)",
+ },
+ dark: {
+ primary: "oklch(0.637 0.237 25.331)",
+ "primary-foreground": "oklch(0.971 0.013 17.38)",
+ },
+ },
+ rose: {
+ light: {
+ primary: "oklch(0.586 0.253 17.585)",
+ "primary-foreground": "oklch(0.969 0.015 12.422)",
+ },
+ dark: {
+ primary: "oklch(0.645 0.246 16.439)",
+ "primary-foreground": "oklch(0.969 0.015 12.422)",
+ },
+ },
+ sky: {
+ light: {
+ primary: "oklch(0.59 0.14 242)",
+ "primary-foreground": "oklch(0.98 0.01 237)",
+ },
+ dark: {
+ primary: "oklch(0.68 0.15 237)",
+ "primary-foreground": "oklch(0.29 0.06 243)",
+ },
+ },
+ teal: {
+ light: {
+ primary: "oklch(0.60 0.10 185)",
+ "primary-foreground": "oklch(0.98 0.01 181)",
+ },
+ dark: {
+ primary: "oklch(0.70 0.12 183)",
+ "primary-foreground": "oklch(0.28 0.04 193)",
+ },
+ },
+ violet: {
+ light: {
+ primary: "oklch(0.541 0.281 293.009)",
+ "primary-foreground": "oklch(0.969 0.016 293.756)",
+ },
+ dark: {
+ primary: "oklch(0.606 0.25 292.717)",
+ "primary-foreground": "oklch(0.969 0.016 293.756)",
+ },
+ },
+ yellow: {
+ light: {
+ primary: "oklch(0.852 0.199 91.936)",
+ "primary-foreground": "oklch(0.421 0.095 57.708)",
+ },
+ dark: {
+ primary: "oklch(0.795 0.184 86.047)",
+ "primary-foreground": "oklch(0.421 0.095 57.708)",
+ },
+ },
+};
+
+// Helper function untuk menggabungkan base colors dengan primary colors
+function createTheme(
+ name: string,
+ label: string,
+ primary: PrimaryColors
+): Theme {
+ return {
+ name,
+ label,
+ cssVars: {
+ light: { ...baseLightColors, ...primary.light },
+ dark: { ...baseDarkColors, ...primary.dark },
+ },
+ };
+}
+
export const themes: Theme[] = [
- {
- name: "neutral",
- label: "Neutral",
- cssVars: {
- light: {
- background: "oklch(1 0 0)",
- foreground: "oklch(0.145 0 0)",
- card: "oklch(1 0 0)",
- "card-foreground": "oklch(0.145 0 0)",
- popover: "oklch(1 0 0)",
- "popover-foreground": "oklch(0.145 0 0)",
- primary: "oklch(0.205 0 0)",
- "primary-foreground": "oklch(0.985 0 0)",
- secondary: "oklch(0.97 0 0)",
- "secondary-foreground": "oklch(0.205 0 0)",
- muted: "oklch(0.97 0 0)",
- "muted-foreground": "oklch(0.556 0 0)",
- accent: "oklch(0.97 0 0)",
- "accent-foreground": "oklch(0.205 0 0)",
- destructive: "oklch(0.577 0.245 27.325)",
- border: "oklch(0.922 0 0)",
- input: "oklch(0.922 0 0)",
- ring: "oklch(0.708 0 0)",
- },
- dark: {
- background: "oklch(0.145 0 0)",
- foreground: "oklch(0.985 0 0)",
- card: "oklch(0.205 0 0)",
- "card-foreground": "oklch(0.985 0 0)",
- popover: "oklch(0.205 0 0)",
- "popover-foreground": "oklch(0.985 0 0)",
- primary: "oklch(0.922 0 0)",
- "primary-foreground": "oklch(0.205 0 0)",
- secondary: "oklch(0.269 0 0)",
- "secondary-foreground": "oklch(0.985 0 0)",
- muted: "oklch(0.269 0 0)",
- "muted-foreground": "oklch(0.708 0 0)",
- accent: "oklch(0.269 0 0)",
- "accent-foreground": "oklch(0.985 0 0)",
- destructive: "oklch(0.704 0.191 22.216)",
- border: "oklch(1 0 0 / 10%)",
- input: "oklch(1 0 0 / 15%)",
- ring: "oklch(0.556 0 0)",
- },
- },
- },
- {
- name: "blue",
- label: "Blue",
- cssVars: {
- light: {
- background: "oklch(1 0 0)",
- foreground: "oklch(0.141 0.005 285.823)",
- card: "oklch(1 0 0)",
- "card-foreground": "oklch(0.141 0.005 285.823)",
- popover: "oklch(1 0 0)",
- "popover-foreground": "oklch(0.141 0.005 285.823)",
- primary: "oklch(0.488 0.243 264.376)",
- "primary-foreground": "oklch(0.97 0.014 254.604)",
- secondary: "oklch(0.967 0.001 286.375)",
- "secondary-foreground": "oklch(0.21 0.006 285.885)",
- muted: "oklch(0.967 0.001 286.375)",
- "muted-foreground": "oklch(0.552 0.016 285.938)",
- accent: "oklch(0.967 0.001 286.375)",
- "accent-foreground": "oklch(0.21 0.006 285.885)",
- destructive: "oklch(0.577 0.245 27.325)",
- border: "oklch(0.92 0.004 286.32)",
- input: "oklch(0.92 0.004 286.32)",
- ring: "oklch(0.708 0 0)",
- },
- dark: {
- background: "oklch(0.141 0.005 285.823)",
- foreground: "oklch(0.985 0 0)",
- card: "oklch(0.21 0.006 285.885)",
- "card-foreground": "oklch(0.985 0 0)",
- popover: "oklch(0.21 0.006 285.885)",
- "popover-foreground": "oklch(0.985 0 0)",
- primary: "oklch(0.488 0.243 264.376)",
- "primary-foreground": "oklch(0.97 0.014 254.604)",
- secondary: "oklch(0.274 0.006 286.033)",
- "secondary-foreground": "oklch(0.985 0 0)",
- muted: "oklch(0.274 0.006 286.033)",
- "muted-foreground": "oklch(0.705 0.015 286.067)",
- accent: "oklch(0.274 0.006 286.033)",
- "accent-foreground": "oklch(0.985 0 0)",
- destructive: "oklch(0.704 0.191 22.216)",
- border: "oklch(1 0 0 / 10%)",
- input: "oklch(1 0 0 / 15%)",
- ring: "oklch(0.556 0 0)",
- },
- },
- },
- {
- name: "green",
- label: "Green",
- cssVars: {
- light: {
- background: "oklch(1 0 0)",
- foreground: "oklch(0.141 0.005 285.823)",
- card: "oklch(1 0 0)",
- "card-foreground": "oklch(0.141 0.005 285.823)",
- popover: "oklch(1 0 0)",
- "popover-foreground": "oklch(0.141 0.005 285.823)",
- primary: "oklch(0.648 0.2 131.684)",
- "primary-foreground": "oklch(0.986 0.031 120.757)",
- secondary: "oklch(0.967 0.001 286.375)",
- "secondary-foreground": "oklch(0.21 0.006 285.885)",
- muted: "oklch(0.967 0.001 286.375)",
- "muted-foreground": "oklch(0.552 0.016 285.938)",
- accent: "oklch(0.967 0.001 286.375)",
- "accent-foreground": "oklch(0.21 0.006 285.885)",
- destructive: "oklch(0.577 0.245 27.325)",
- border: "oklch(0.92 0.004 286.32)",
- input: "oklch(0.92 0.004 286.32)",
- ring: "oklch(0.841 0.238 128.85)",
- },
- dark: {
- background: "oklch(0.141 0.005 285.823)",
- foreground: "oklch(0.985 0 0)",
- card: "oklch(0.21 0.006 285.885)",
- "card-foreground": "oklch(0.985 0 0)",
- popover: "oklch(0.21 0.006 285.885)",
- "popover-foreground": "oklch(0.985 0 0)",
- primary: "oklch(0.648 0.2 131.684)",
- "primary-foreground": "oklch(0.986 0.031 120.757)",
- secondary: "oklch(0.274 0.006 286.033)",
- "secondary-foreground": "oklch(0.985 0 0)",
- muted: "oklch(0.274 0.006 286.033)",
- "muted-foreground": "oklch(0.705 0.015 286.067)",
- accent: "oklch(0.274 0.006 286.033)",
- "accent-foreground": "oklch(0.985 0 0)",
- destructive: "oklch(0.704 0.191 22.216)",
- border: "oklch(1 0 0 / 10%)",
- input: "oklch(1 0 0 / 15%)",
- ring: "oklch(0.405 0.101 131.063)",
- },
- },
- },
- {
- name: "orange",
- label: "Orange",
- cssVars: {
- light: {
- background: "oklch(1 0 0)",
- foreground: "oklch(0.141 0.005 285.823)",
- card: "oklch(1 0 0)",
- "card-foreground": "oklch(0.141 0.005 285.823)",
- popover: "oklch(1 0 0)",
- "popover-foreground": "oklch(0.141 0.005 285.823)",
- primary: "oklch(0.646 0.222 41.116)",
- "primary-foreground": "oklch(0.98 0.016 73.684)",
- secondary: "oklch(0.967 0.001 286.375)",
- "secondary-foreground": "oklch(0.21 0.006 285.885)",
- muted: "oklch(0.967 0.001 286.375)",
- "muted-foreground": "oklch(0.552 0.016 285.938)",
- accent: "oklch(0.967 0.001 286.375)",
- "accent-foreground": "oklch(0.21 0.006 285.885)",
- destructive: "oklch(0.577 0.245 27.325)",
- border: "oklch(0.92 0.004 286.32)",
- input: "oklch(0.92 0.004 286.32)",
- ring: "oklch(0.75 0.183 55.934)",
- },
- dark: {
- background: "oklch(0.141 0.005 285.823)",
- foreground: "oklch(0.985 0 0)",
- card: "oklch(0.21 0.006 285.885)",
- "card-foreground": "oklch(0.985 0 0)",
- popover: "oklch(0.21 0.006 285.885)",
- "popover-foreground": "oklch(0.985 0 0)",
- primary: "oklch(0.705 0.213 47.604)",
- "primary-foreground": "oklch(0.98 0.016 73.684)",
- secondary: "oklch(0.274 0.006 286.033)",
- "secondary-foreground": "oklch(0.985 0 0)",
- muted: "oklch(0.274 0.006 286.033)",
- "muted-foreground": "oklch(0.705 0.015 286.067)",
- accent: "oklch(0.274 0.006 286.033)",
- "accent-foreground": "oklch(0.985 0 0)",
- destructive: "oklch(0.704 0.191 22.216)",
- border: "oklch(1 0 0 / 10%)",
- input: "oklch(1 0 0 / 15%)",
- ring: "oklch(0.408 0.123 38.172)",
- },
- },
- },
- {
- name: "red",
- label: "Red",
- cssVars: {
- light: {
- background: "oklch(1 0 0)",
- foreground: "oklch(0.141 0.005 285.823)",
- card: "oklch(1 0 0)",
- "card-foreground": "oklch(0.141 0.005 285.823)",
- popover: "oklch(1 0 0)",
- "popover-foreground": "oklch(0.141 0.005 285.823)",
- primary: "oklch(0.577 0.245 27.325)",
- "primary-foreground": "oklch(0.971 0.013 17.38)",
- secondary: "oklch(0.967 0.001 286.375)",
- "secondary-foreground": "oklch(0.21 0.006 285.885)",
- muted: "oklch(0.967 0.001 286.375)",
- "muted-foreground": "oklch(0.552 0.016 285.938)",
- accent: "oklch(0.967 0.001 286.375)",
- "accent-foreground": "oklch(0.21 0.006 285.885)",
- destructive: "oklch(0.577 0.245 27.325)",
- border: "oklch(0.92 0.004 286.32)",
- input: "oklch(0.92 0.004 286.32)",
- ring: "oklch(0.704 0.191 22.216)",
- },
- dark: {
- background: "oklch(0.141 0.005 285.823)",
- foreground: "oklch(0.985 0 0)",
- card: "oklch(0.21 0.006 285.885)",
- "card-foreground": "oklch(0.985 0 0)",
- popover: "oklch(0.21 0.006 285.885)",
- "popover-foreground": "oklch(0.985 0 0)",
- primary: "oklch(0.637 0.237 25.331)",
- "primary-foreground": "oklch(0.971 0.013 17.38)",
- secondary: "oklch(0.274 0.006 286.033)",
- "secondary-foreground": "oklch(0.985 0 0)",
- muted: "oklch(0.274 0.006 286.033)",
- "muted-foreground": "oklch(0.705 0.015 286.067)",
- accent: "oklch(0.274 0.006 286.033)",
- "accent-foreground": "oklch(0.985 0 0)",
- destructive: "oklch(0.704 0.191 22.216)",
- border: "oklch(1 0 0 / 10%)",
- input: "oklch(1 0 0 / 15%)",
- ring: "oklch(0.396 0.141 25.723)",
- },
- },
- },
- {
- name: "rose",
- label: "Rose",
- cssVars: {
- light: {
- background: "oklch(1 0 0)",
- foreground: "oklch(0.141 0.005 285.823)",
- card: "oklch(1 0 0)",
- "card-foreground": "oklch(0.141 0.005 285.823)",
- popover: "oklch(1 0 0)",
- "popover-foreground": "oklch(0.141 0.005 285.823)",
- primary: "oklch(0.586 0.253 17.585)",
- "primary-foreground": "oklch(0.969 0.015 12.422)",
- secondary: "oklch(0.967 0.001 286.375)",
- "secondary-foreground": "oklch(0.21 0.006 285.885)",
- muted: "oklch(0.967 0.001 286.375)",
- "muted-foreground": "oklch(0.552 0.016 285.938)",
- accent: "oklch(0.967 0.001 286.375)",
- "accent-foreground": "oklch(0.21 0.006 285.885)",
- destructive: "oklch(0.577 0.245 27.325)",
- border: "oklch(0.92 0.004 286.32)",
- input: "oklch(0.92 0.004 286.32)",
- ring: "oklch(0.712 0.194 13.428)",
- },
- dark: {
- background: "oklch(0.141 0.005 285.823)",
- foreground: "oklch(0.985 0 0)",
- card: "oklch(0.21 0.006 285.885)",
- "card-foreground": "oklch(0.985 0 0)",
- popover: "oklch(0.21 0.006 285.885)",
- "popover-foreground": "oklch(0.985 0 0)",
- primary: "oklch(0.645 0.246 16.439)",
- "primary-foreground": "oklch(0.969 0.015 12.422)",
- secondary: "oklch(0.274 0.006 286.033)",
- "secondary-foreground": "oklch(0.985 0 0)",
- muted: "oklch(0.274 0.006 286.033)",
- "muted-foreground": "oklch(0.705 0.015 286.067)",
- accent: "oklch(0.274 0.006 286.033)",
- "accent-foreground": "oklch(0.985 0 0)",
- destructive: "oklch(0.704 0.191 22.216)",
- border: "oklch(1 0 0 / 10%)",
- input: "oklch(1 0 0 / 15%)",
- ring: "oklch(0.41 0.159 10.272)",
- },
- },
- },
- {
- name: "violet",
- label: "Violet",
- cssVars: {
- light: {
- background: "oklch(1 0 0)",
- foreground: "oklch(0.141 0.005 285.823)",
- card: "oklch(1 0 0)",
- "card-foreground": "oklch(0.141 0.005 285.823)",
- popover: "oklch(1 0 0)",
- "popover-foreground": "oklch(0.141 0.005 285.823)",
- primary: "oklch(0.541 0.281 293.009)",
- "primary-foreground": "oklch(0.969 0.016 293.756)",
- secondary: "oklch(0.967 0.001 286.375)",
- "secondary-foreground": "oklch(0.21 0.006 285.885)",
- muted: "oklch(0.967 0.001 286.375)",
- "muted-foreground": "oklch(0.552 0.016 285.938)",
- accent: "oklch(0.967 0.001 286.375)",
- "accent-foreground": "oklch(0.21 0.006 285.885)",
- destructive: "oklch(0.577 0.245 27.325)",
- border: "oklch(0.92 0.004 286.32)",
- input: "oklch(0.92 0.004 286.32)",
- ring: "oklch(0.702 0.183 293.541)",
- },
- dark: {
- background: "oklch(0.141 0.005 285.823)",
- foreground: "oklch(0.985 0 0)",
- card: "oklch(0.21 0.006 285.885)",
- "card-foreground": "oklch(0.985 0 0)",
- popover: "oklch(0.21 0.006 285.885)",
- "popover-foreground": "oklch(0.985 0 0)",
- primary: "oklch(0.606 0.25 292.717)",
- "primary-foreground": "oklch(0.969 0.016 293.756)",
- secondary: "oklch(0.274 0.006 286.033)",
- "secondary-foreground": "oklch(0.985 0 0)",
- muted: "oklch(0.274 0.006 286.033)",
- "muted-foreground": "oklch(0.705 0.015 286.067)",
- accent: "oklch(0.274 0.006 286.033)",
- "accent-foreground": "oklch(0.985 0 0)",
- destructive: "oklch(0.704 0.191 22.216)",
- border: "oklch(1 0 0 / 10%)",
- input: "oklch(1 0 0 / 15%)",
- ring: "oklch(0.38 0.189 293.745)",
- },
- },
- },
- {
- name: "yellow",
- label: "Yellow",
- cssVars: {
- light: {
- background: "oklch(1 0 0)",
- foreground: "oklch(0.141 0.005 285.823)",
- card: "oklch(1 0 0)",
- "card-foreground": "oklch(0.141 0.005 285.823)",
- popover: "oklch(1 0 0)",
- "popover-foreground": "oklch(0.141 0.005 285.823)",
- primary: "oklch(0.852 0.199 91.936)",
- "primary-foreground": "oklch(0.421 0.095 57.708)",
- secondary: "oklch(0.967 0.001 286.375)",
- "secondary-foreground": "oklch(0.21 0.006 285.885)",
- muted: "oklch(0.967 0.001 286.375)",
- "muted-foreground": "oklch(0.552 0.016 285.938)",
- accent: "oklch(0.967 0.001 286.375)",
- "accent-foreground": "oklch(0.21 0.006 285.885)",
- destructive: "oklch(0.577 0.245 27.325)",
- border: "oklch(0.92 0.004 286.32)",
- input: "oklch(0.92 0.004 286.32)",
- ring: "oklch(0.852 0.199 91.936)",
- },
- dark: {
- background: "oklch(0.141 0.005 285.823)",
- foreground: "oklch(0.985 0 0)",
- card: "oklch(0.21 0.006 285.885)",
- "card-foreground": "oklch(0.985 0 0)",
- popover: "oklch(0.21 0.006 285.885)",
- "popover-foreground": "oklch(0.985 0 0)",
- primary: "oklch(0.795 0.184 86.047)",
- "primary-foreground": "oklch(0.421 0.095 57.708)",
- secondary: "oklch(0.274 0.006 286.033)",
- "secondary-foreground": "oklch(0.985 0 0)",
- muted: "oklch(0.274 0.006 286.033)",
- "muted-foreground": "oklch(0.705 0.015 286.067)",
- accent: "oklch(0.274 0.006 286.033)",
- "accent-foreground": "oklch(0.985 0 0)",
- destructive: "oklch(0.704 0.191 22.216)",
- border: "oklch(1 0 0 / 10%)",
- input: "oklch(1 0 0 / 15%)",
- ring: "oklch(0.421 0.095 57.708)",
- },
- },
- },
- {
- name: "amber",
- label: "Amber",
- cssVars: {
- light: {
- background: "oklch(1 0 0)",
- foreground: "oklch(0.141 0.005 285.823)",
- card: "oklch(1 0 0)",
- "card-foreground": "oklch(0.141 0.005 285.823)",
- popover: "oklch(1 0 0)",
- "popover-foreground": "oklch(0.141 0.005 285.823)",
- primary: "oklch(0.75 0.15 70)",
- "primary-foreground": "oklch(0.15 0.01 70)",
- secondary: "oklch(0.967 0.001 286.375)",
- "secondary-foreground": "oklch(0.21 0.006 285.885)",
- muted: "oklch(0.967 0.001 286.375)",
- "muted-foreground": "oklch(0.552 0.016 285.938)",
- accent: "oklch(0.967 0.001 286.375)",
- "accent-foreground": "oklch(0.21 0.006 285.885)",
- destructive: "oklch(0.577 0.245 27.325)",
- border: "oklch(0.92 0.004 286.32)",
- input: "oklch(0.92 0.004 286.32)",
- ring: "oklch(0.75 0.15 70)",
- },
- dark: {
- background: "oklch(0.141 0.005 285.823)",
- foreground: "oklch(0.985 0 0)",
- card: "oklch(0.21 0.006 285.885)",
- "card-foreground": "oklch(0.985 0 0)",
- popover: "oklch(0.21 0.006 285.885)",
- "popover-foreground": "oklch(0.985 0 0)",
- primary: "oklch(0.85 0.15 70)",
- "primary-foreground": "oklch(0.15 0.01 70)",
- secondary: "oklch(0.274 0.006 286.033)",
- "secondary-foreground": "oklch(0.985 0 0)",
- muted: "oklch(0.274 0.006 286.033)",
- "muted-foreground": "oklch(0.705 0.015 286.067)",
- accent: "oklch(0.274 0.006 286.033)",
- "accent-foreground": "oklch(0.985 0 0)",
- destructive: "oklch(0.704 0.191 22.216)",
- border: "oklch(1 0 0 / 10%)",
- input: "oklch(1 0 0 / 15%)",
- ring: "oklch(0.85 0.15 70)",
- },
- },
- },
- {
- name: "cyan",
- label: "Cyan",
- cssVars: {
- light: {
- background: "oklch(1 0 0)",
- foreground: "oklch(0.141 0.005 285.823)",
- card: "oklch(1 0 0)",
- "card-foreground": "oklch(0.141 0.005 285.823)",
- popover: "oklch(1 0 0)",
- "popover-foreground": "oklch(0.141 0.005 285.823)",
- primary: "oklch(0.55 0.22 200)",
- "primary-foreground": "oklch(0.98 0.01 200)",
- secondary: "oklch(0.967 0.001 286.375)",
- "secondary-foreground": "oklch(0.21 0.006 285.885)",
- muted: "oklch(0.967 0.001 286.375)",
- "muted-foreground": "oklch(0.552 0.016 285.938)",
- accent: "oklch(0.967 0.001 286.375)",
- "accent-foreground": "oklch(0.21 0.006 285.885)",
- destructive: "oklch(0.577 0.245 27.325)",
- border: "oklch(0.92 0.004 286.32)",
- input: "oklch(0.92 0.004 286.32)",
- ring: "oklch(0.55 0.22 200)",
- },
- dark: {
- background: "oklch(0.141 0.005 285.823)",
- foreground: "oklch(0.985 0 0)",
- card: "oklch(0.21 0.006 285.885)",
- "card-foreground": "oklch(0.985 0 0)",
- popover: "oklch(0.21 0.006 285.885)",
- "popover-foreground": "oklch(0.985 0 0)",
- primary: "oklch(0.65 0.22 200)",
- "primary-foreground": "oklch(0.15 0.01 200)",
- secondary: "oklch(0.274 0.006 286.033)",
- "secondary-foreground": "oklch(0.985 0 0)",
- muted: "oklch(0.274 0.006 286.033)",
- "muted-foreground": "oklch(0.705 0.015 286.067)",
- accent: "oklch(0.274 0.006 286.033)",
- "accent-foreground": "oklch(0.985 0 0)",
- destructive: "oklch(0.704 0.191 22.216)",
- border: "oklch(1 0 0 / 10%)",
- input: "oklch(1 0 0 / 15%)",
- ring: "oklch(0.65 0.22 200)",
- },
- },
- },
- {
- name: "emerald",
- label: "Emerald",
- cssVars: {
- light: {
- background: "oklch(1 0 0)",
- foreground: "oklch(0.141 0.005 285.823)",
- card: "oklch(1 0 0)",
- "card-foreground": "oklch(0.141 0.005 285.823)",
- popover: "oklch(1 0 0)",
- "popover-foreground": "oklch(0.141 0.005 285.823)",
- primary: "oklch(0.55 0.18 160)",
- "primary-foreground": "oklch(0.98 0.01 160)",
- secondary: "oklch(0.967 0.001 286.375)",
- "secondary-foreground": "oklch(0.21 0.006 285.885)",
- muted: "oklch(0.967 0.001 286.375)",
- "muted-foreground": "oklch(0.552 0.016 285.938)",
- accent: "oklch(0.967 0.001 286.375)",
- "accent-foreground": "oklch(0.21 0.006 285.885)",
- destructive: "oklch(0.577 0.245 27.325)",
- border: "oklch(0.92 0.004 286.32)",
- input: "oklch(0.92 0.004 286.32)",
- ring: "oklch(0.55 0.18 160)",
- },
- dark: {
- background: "oklch(0.141 0.005 285.823)",
- foreground: "oklch(0.985 0 0)",
- card: "oklch(0.21 0.006 285.885)",
- "card-foreground": "oklch(0.985 0 0)",
- popover: "oklch(0.21 0.006 285.885)",
- "popover-foreground": "oklch(0.985 0 0)",
- primary: "oklch(0.65 0.18 160)",
- "primary-foreground": "oklch(0.15 0.01 160)",
- secondary: "oklch(0.274 0.006 286.033)",
- "secondary-foreground": "oklch(0.985 0 0)",
- muted: "oklch(0.274 0.006 286.033)",
- "muted-foreground": "oklch(0.705 0.015 286.067)",
- accent: "oklch(0.274 0.006 286.033)",
- "accent-foreground": "oklch(0.985 0 0)",
- destructive: "oklch(0.704 0.191 22.216)",
- border: "oklch(1 0 0 / 10%)",
- input: "oklch(1 0 0 / 15%)",
- ring: "oklch(0.65 0.18 160)",
- },
- },
- },
- {
- name: "fuchsia",
- label: "Fuchsia",
- cssVars: {
- light: {
- background: "oklch(1 0 0)",
- foreground: "oklch(0.141 0.005 285.823)",
- card: "oklch(1 0 0)",
- "card-foreground": "oklch(0.141 0.005 285.823)",
- popover: "oklch(1 0 0)",
- "popover-foreground": "oklch(0.141 0.005 285.823)",
- primary: "oklch(0.6 0.25 320)",
- "primary-foreground": "oklch(0.98 0.01 320)",
- secondary: "oklch(0.967 0.001 286.375)",
- "secondary-foreground": "oklch(0.21 0.006 285.885)",
- muted: "oklch(0.967 0.001 286.375)",
- "muted-foreground": "oklch(0.552 0.016 285.938)",
- accent: "oklch(0.967 0.001 286.375)",
- "accent-foreground": "oklch(0.21 0.006 285.885)",
- destructive: "oklch(0.577 0.245 27.325)",
- border: "oklch(0.92 0.004 286.32)",
- input: "oklch(0.92 0.004 286.32)",
- ring: "oklch(0.6 0.25 320)",
- },
- dark: {
- background: "oklch(0.141 0.005 285.823)",
- foreground: "oklch(0.985 0 0)",
- card: "oklch(0.21 0.006 285.885)",
- "card-foreground": "oklch(0.985 0 0)",
- popover: "oklch(0.21 0.006 285.885)",
- "popover-foreground": "oklch(0.985 0 0)",
- primary: "oklch(0.7 0.25 320)",
- "primary-foreground": "oklch(0.15 0.01 320)",
- secondary: "oklch(0.274 0.006 286.033)",
- "secondary-foreground": "oklch(0.985 0 0)",
- muted: "oklch(0.274 0.006 286.033)",
- "muted-foreground": "oklch(0.705 0.015 286.067)",
- accent: "oklch(0.274 0.006 286.033)",
- "accent-foreground": "oklch(0.985 0 0)",
- destructive: "oklch(0.704 0.191 22.216)",
- border: "oklch(1 0 0 / 10%)",
- input: "oklch(1 0 0 / 15%)",
- ring: "oklch(0.7 0.25 320)",
- },
- },
- },
- {
- name: "indigo",
- label: "Indigo",
- cssVars: {
- light: {
- background: "oklch(1 0 0)",
- foreground: "oklch(0.141 0.005 285.823)",
- card: "oklch(1 0 0)",
- "card-foreground": "oklch(0.141 0.005 285.823)",
- popover: "oklch(1 0 0)",
- "popover-foreground": "oklch(0.141 0.005 285.823)",
- primary: "oklch(0.5 0.22 270)",
- "primary-foreground": "oklch(0.98 0.01 270)",
- secondary: "oklch(0.967 0.001 286.375)",
- "secondary-foreground": "oklch(0.21 0.006 285.885)",
- muted: "oklch(0.967 0.001 286.375)",
- "muted-foreground": "oklch(0.552 0.016 285.938)",
- accent: "oklch(0.967 0.001 286.375)",
- "accent-foreground": "oklch(0.21 0.006 285.885)",
- destructive: "oklch(0.577 0.245 27.325)",
- border: "oklch(0.92 0.004 286.32)",
- input: "oklch(0.92 0.004 286.32)",
- ring: "oklch(0.5 0.22 270)",
- },
- dark: {
- background: "oklch(0.141 0.005 285.823)",
- foreground: "oklch(0.985 0 0)",
- card: "oklch(0.21 0.006 285.885)",
- "card-foreground": "oklch(0.985 0 0)",
- popover: "oklch(0.21 0.006 285.885)",
- "popover-foreground": "oklch(0.985 0 0)",
- primary: "oklch(0.6 0.22 270)",
- "primary-foreground": "oklch(0.15 0.01 270)",
- secondary: "oklch(0.274 0.006 286.033)",
- "secondary-foreground": "oklch(0.985 0 0)",
- muted: "oklch(0.274 0.006 286.033)",
- "muted-foreground": "oklch(0.705 0.015 286.067)",
- accent: "oklch(0.274 0.006 286.033)",
- "accent-foreground": "oklch(0.985 0 0)",
- destructive: "oklch(0.704 0.191 22.216)",
- border: "oklch(1 0 0 / 10%)",
- input: "oklch(1 0 0 / 15%)",
- ring: "oklch(0.6 0.22 270)",
- },
- },
- },
- {
- name: "lime",
- label: "Lime",
- cssVars: {
- light: {
- background: "oklch(1 0 0)",
- foreground: "oklch(0.141 0.005 285.823)",
- card: "oklch(1 0 0)",
- "card-foreground": "oklch(0.141 0.005 285.823)",
- popover: "oklch(1 0 0)",
- "popover-foreground": "oklch(0.141 0.005 285.823)",
- primary: "oklch(0.75 0.2 120)",
- "primary-foreground": "oklch(0.2 0.01 120)",
- secondary: "oklch(0.967 0.001 286.375)",
- "secondary-foreground": "oklch(0.21 0.006 285.885)",
- muted: "oklch(0.967 0.001 286.375)",
- "muted-foreground": "oklch(0.552 0.016 285.938)",
- accent: "oklch(0.967 0.001 286.375)",
- "accent-foreground": "oklch(0.21 0.006 285.885)",
- destructive: "oklch(0.577 0.245 27.325)",
- border: "oklch(0.92 0.004 286.32)",
- input: "oklch(0.92 0.004 286.32)",
- ring: "oklch(0.75 0.2 120)",
- },
- dark: {
- background: "oklch(0.141 0.005 285.823)",
- foreground: "oklch(0.985 0 0)",
- card: "oklch(0.21 0.006 285.885)",
- "card-foreground": "oklch(0.985 0 0)",
- popover: "oklch(0.21 0.006 285.885)",
- "popover-foreground": "oklch(0.985 0 0)",
- primary: "oklch(0.8 0.2 120)",
- "primary-foreground": "oklch(0.2 0.01 120)",
- secondary: "oklch(0.274 0.006 286.033)",
- "secondary-foreground": "oklch(0.985 0 0)",
- muted: "oklch(0.274 0.006 286.033)",
- "muted-foreground": "oklch(0.705 0.015 286.067)",
- accent: "oklch(0.274 0.006 286.033)",
- "accent-foreground": "oklch(0.985 0 0)",
- destructive: "oklch(0.704 0.191 22.216)",
- border: "oklch(1 0 0 / 10%)",
- input: "oklch(1 0 0 / 15%)",
- ring: "oklch(0.8 0.2 120)",
- },
- },
- },
- {
- name: "pink",
- label: "Pink",
- cssVars: {
- light: {
- background: "oklch(1 0 0)",
- foreground: "oklch(0.141 0.005 285.823)",
- card: "oklch(1 0 0)",
- "card-foreground": "oklch(0.141 0.005 285.823)",
- popover: "oklch(1 0 0)",
- "popover-foreground": "oklch(0.141 0.005 285.823)",
- primary: "oklch(0.6 0.22 350)",
- "primary-foreground": "oklch(0.98 0.01 350)",
- secondary: "oklch(0.967 0.001 286.375)",
- "secondary-foreground": "oklch(0.21 0.006 285.885)",
- muted: "oklch(0.967 0.001 286.375)",
- "muted-foreground": "oklch(0.552 0.016 285.938)",
- accent: "oklch(0.967 0.001 286.375)",
- "accent-foreground": "oklch(0.21 0.006 285.885)",
- destructive: "oklch(0.577 0.245 27.325)",
- border: "oklch(0.92 0.004 286.32)",
- input: "oklch(0.92 0.004 286.32)",
- ring: "oklch(0.6 0.22 350)",
- },
- dark: {
- background: "oklch(0.141 0.005 285.823)",
- foreground: "oklch(0.985 0 0)",
- card: "oklch(0.21 0.006 285.885)",
- "card-foreground": "oklch(0.985 0 0)",
- popover: "oklch(0.21 0.006 285.885)",
- "popover-foreground": "oklch(0.985 0 0)",
- primary: "oklch(0.7 0.22 350)",
- "primary-foreground": "oklch(0.15 0.01 350)",
- secondary: "oklch(0.274 0.006 286.033)",
- "secondary-foreground": "oklch(0.985 0 0)",
- muted: "oklch(0.274 0.006 286.033)",
- "muted-foreground": "oklch(0.705 0.015 286.067)",
- accent: "oklch(0.274 0.006 286.033)",
- "accent-foreground": "oklch(0.985 0 0)",
- destructive: "oklch(0.704 0.191 22.216)",
- border: "oklch(1 0 0 / 10%)",
- input: "oklch(1 0 0 / 15%)",
- ring: "oklch(0.7 0.22 350)",
- },
- },
- },
- {
- name: "purple",
- label: "Purple",
- cssVars: {
- light: {
- background: "oklch(1 0 0)",
- foreground: "oklch(0.141 0.005 285.823)",
- card: "oklch(1 0 0)",
- "card-foreground": "oklch(0.141 0.005 285.823)",
- popover: "oklch(1 0 0)",
- "popover-foreground": "oklch(0.141 0.005 285.823)",
- primary: "oklch(0.55 0.25 280)",
- "primary-foreground": "oklch(0.98 0.01 280)",
- secondary: "oklch(0.967 0.001 286.375)",
- "secondary-foreground": "oklch(0.21 0.006 285.885)",
- muted: "oklch(0.967 0.001 286.375)",
- "muted-foreground": "oklch(0.552 0.016 285.938)",
- accent: "oklch(0.967 0.001 286.375)",
- "accent-foreground": "oklch(0.21 0.006 285.885)",
- destructive: "oklch(0.577 0.245 27.325)",
- border: "oklch(0.92 0.004 286.32)",
- input: "oklch(0.92 0.004 286.32)",
- ring: "oklch(0.55 0.25 280)",
- },
- dark: {
- background: "oklch(0.141 0.005 285.823)",
- foreground: "oklch(0.985 0 0)",
- card: "oklch(0.21 0.006 285.885)",
- "card-foreground": "oklch(0.985 0 0)",
- popover: "oklch(0.21 0.006 285.885)",
- "popover-foreground": "oklch(0.985 0 0)",
- primary: "oklch(0.65 0.25 280)",
- "primary-foreground": "oklch(0.15 0.01 280)",
- secondary: "oklch(0.274 0.006 286.033)",
- "secondary-foreground": "oklch(0.985 0 0)",
- muted: "oklch(0.274 0.006 286.033)",
- "muted-foreground": "oklch(0.705 0.015 286.067)",
- accent: "oklch(0.274 0.006 286.033)",
- "accent-foreground": "oklch(0.985 0 0)",
- destructive: "oklch(0.704 0.191 22.216)",
- border: "oklch(1 0 0 / 10%)",
- input: "oklch(1 0 0 / 15%)",
- ring: "oklch(0.65 0.25 280)",
- },
- },
- },
- {
- name: "sky",
- label: "Sky",
- cssVars: {
- light: {
- background: "oklch(1 0 0)",
- foreground: "oklch(0.141 0.005 285.823)",
- card: "oklch(1 0 0)",
- "card-foreground": "oklch(0.141 0.005 285.823)",
- popover: "oklch(1 0 0)",
- "popover-foreground": "oklch(0.141 0.005 285.823)",
- primary: "oklch(0.6 0.18 210)",
- "primary-foreground": "oklch(0.98 0.01 210)",
- secondary: "oklch(0.967 0.001 286.375)",
- "secondary-foreground": "oklch(0.21 0.006 285.885)",
- muted: "oklch(0.967 0.001 286.375)",
- "muted-foreground": "oklch(0.552 0.016 285.938)",
- accent: "oklch(0.967 0.001 286.375)",
- "accent-foreground": "oklch(0.21 0.006 285.885)",
- destructive: "oklch(0.577 0.245 27.325)",
- border: "oklch(0.92 0.004 286.32)",
- input: "oklch(0.92 0.004 286.32)",
- ring: "oklch(0.6 0.18 210)",
- },
- dark: {
- background: "oklch(0.141 0.005 285.823)",
- foreground: "oklch(0.985 0 0)",
- card: "oklch(0.21 0.006 285.885)",
- "card-foreground": "oklch(0.985 0 0)",
- popover: "oklch(0.21 0.006 285.885)",
- "popover-foreground": "oklch(0.985 0 0)",
- primary: "oklch(0.7 0.18 210)",
- "primary-foreground": "oklch(0.15 0.01 210)",
- secondary: "oklch(0.274 0.006 286.033)",
- "secondary-foreground": "oklch(0.985 0 0)",
- muted: "oklch(0.274 0.006 286.033)",
- "muted-foreground": "oklch(0.705 0.015 286.067)",
- accent: "oklch(0.274 0.006 286.033)",
- "accent-foreground": "oklch(0.985 0 0)",
- destructive: "oklch(0.704 0.191 22.216)",
- border: "oklch(1 0 0 / 10%)",
- input: "oklch(1 0 0 / 15%)",
- ring: "oklch(0.7 0.18 210)",
- },
- },
- },
- {
- name: "teal",
- label: "Teal",
- cssVars: {
- light: {
- background: "oklch(1 0 0)",
- foreground: "oklch(0.141 0.005 285.823)",
- card: "oklch(1 0 0)",
- "card-foreground": "oklch(0.141 0.005 285.823)",
- popover: "oklch(1 0 0)",
- "popover-foreground": "oklch(0.141 0.005 285.823)",
- primary: "oklch(0.55 0.2 180)",
- "primary-foreground": "oklch(0.98 0.01 180)",
- secondary: "oklch(0.967 0.001 286.375)",
- "secondary-foreground": "oklch(0.21 0.006 285.885)",
- muted: "oklch(0.967 0.001 286.375)",
- "muted-foreground": "oklch(0.552 0.016 285.938)",
- accent: "oklch(0.967 0.001 286.375)",
- "accent-foreground": "oklch(0.21 0.006 285.885)",
- destructive: "oklch(0.577 0.245 27.325)",
- border: "oklch(0.92 0.004 286.32)",
- input: "oklch(0.92 0.004 286.32)",
- ring: "oklch(0.55 0.2 180)",
- },
- dark: {
- background: "oklch(0.141 0.005 285.823)",
- foreground: "oklch(0.985 0 0)",
- card: "oklch(0.21 0.006 285.885)",
- "card-foreground": "oklch(0.985 0 0)",
- popover: "oklch(0.21 0.006 285.885)",
- "popover-foreground": "oklch(0.985 0 0)",
- primary: "oklch(0.65 0.2 180)",
- "primary-foreground": "oklch(0.15 0.01 180)",
- secondary: "oklch(0.274 0.006 286.033)",
- "secondary-foreground": "oklch(0.985 0 0)",
- muted: "oklch(0.274 0.006 286.033)",
- "muted-foreground": "oklch(0.705 0.015 286.067)",
- accent: "oklch(0.274 0.006 286.033)",
- "accent-foreground": "oklch(0.985 0 0)",
- destructive: "oklch(0.704 0.191 22.216)",
- border: "oklch(1 0 0 / 10%)",
- input: "oklch(1 0 0 / 15%)",
- ring: "oklch(0.65 0.2 180)",
- },
- },
- },
+ createTheme("amber", "Amber", primaryColors.amber),
+ createTheme("blue", "Blue", primaryColors.blue),
+ createTheme("cyan", "Cyan", primaryColors.cyan),
+ createTheme("emerald", "Emerald", primaryColors.emerald),
+ createTheme("fuchsia", "Fuchsia", primaryColors.fuchsia),
+ createTheme("green", "Green", primaryColors.green),
+ createTheme("indigo", "Indigo", primaryColors.indigo),
+ createTheme("lime", "Lime", primaryColors.lime),
+ createTheme("neutral", "Neutral", primaryColors.neutral),
+ createTheme("orange", "Orange", primaryColors.orange),
+ createTheme("pink", "Pink", primaryColors.pink),
+ createTheme("purple", "Purple", primaryColors.purple),
+ createTheme("red", "Red", primaryColors.red),
+ createTheme("rose", "Rose", primaryColors.rose),
+ createTheme("sky", "Sky", primaryColors.sky),
+ createTheme("teal", "Teal", primaryColors.teal),
+ createTheme("violet", "Violet", primaryColors.violet),
+ createTheme("yellow", "Yellow", primaryColors.yellow),
].sort((a, b) => a.name.localeCompare(b.name));
export function applyTheme(themeName: string) {