UNPKG

@ogasphere/theme-manager

Version:

A reusable theme management package for Next.js and Vite applications

509 lines (492 loc) 18.7 kB
/* Theme Manager - Base Theme Styles */ /* Theme: Default */ .theme-default { --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); --destructive-foreground: 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); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark .theme-default { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.2 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.6801 0.1583 276.9349); --primary-foreground: oklch(0.2077 0.0398 265.7549); --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.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } /* Theme: Claude */ .theme-claude { --background: oklch(0.98 0.01 85); --foreground: oklch(0.15 0.01 85); --card: oklch(0.99 0.01 85); --card-foreground: oklch(0.15 0.01 85); --popover: oklch(0.99 0.01 85); --popover-foreground: oklch(0.15 0.01 85); --primary: oklch(0.45 0.15 85); --primary-foreground: oklch(0.98 0.01 85); --secondary: oklch(0.95 0.01 85); --secondary-foreground: oklch(0.15 0.01 85); --muted: oklch(0.95 0.01 85); --muted-foreground: oklch(0.45 0.01 85); --accent: oklch(0.95 0.01 85); --accent-foreground: oklch(0.15 0.01 85); --destructive: oklch(0.55 0.2 25); --destructive-foreground: oklch(0.98 0.01 85); --border: oklch(0.9 0.01 85); --input: oklch(0.9 0.01 85); --ring: oklch(0.45 0.15 85); --chart-1: oklch(0.45 0.15 85); --chart-2: oklch(0.6 0.12 120); --chart-3: oklch(0.5 0.1 200); --chart-4: oklch(0.7 0.15 60); --chart-5: oklch(0.65 0.12 300); --radius: 0.5rem; --sidebar: oklch(0.97 0.01 85); --sidebar-foreground: oklch(0.15 0.01 85); --sidebar-primary: oklch(0.45 0.15 85); --sidebar-primary-foreground: oklch(0.98 0.01 85); --sidebar-accent: oklch(0.95 0.01 85); --sidebar-accent-foreground: oklch(0.15 0.01 85); --sidebar-border: oklch(0.9 0.01 85); --sidebar-ring: oklch(0.45 0.15 85); } .dark .theme-claude { --background: oklch(0.08 0.01 85); --foreground: oklch(0.95 0.01 85); --card: oklch(0.1 0.01 85); --card-foreground: oklch(0.95 0.01 85); --popover: oklch(0.08 0.01 85); --popover-foreground: oklch(0.95 0.01 85); --primary: oklch(0.65 0.15 85); --primary-foreground: oklch(0.08 0.01 85); --secondary: oklch(0.15 0.01 85); --secondary-foreground: oklch(0.95 0.01 85); --muted: oklch(0.15 0.01 85); --muted-foreground: oklch(0.65 0.01 85); --accent: oklch(0.15 0.01 85); --accent-foreground: oklch(0.95 0.01 85); --destructive: oklch(0.6 0.2 25); --destructive-foreground: oklch(0.95 0.01 85); --border: oklch(0.2 0.01 85); --input: oklch(0.2 0.01 85); --ring: oklch(0.65 0.15 85); --chart-1: oklch(0.65 0.15 85); --chart-2: oklch(0.7 0.12 120); --chart-3: oklch(0.6 0.1 200); --chart-4: oklch(0.75 0.15 60); --chart-5: oklch(0.7 0.12 300); --sidebar: oklch(0.12 0.01 85); --sidebar-foreground: oklch(0.95 0.01 85); --sidebar-primary: oklch(0.65 0.15 85); --sidebar-primary-foreground: oklch(0.08 0.01 85); --sidebar-accent: oklch(0.15 0.01 85); --sidebar-accent-foreground: oklch(0.95 0.01 85); --sidebar-border: oklch(0.2 0.01 85); --sidebar-ring: oklch(0.65 0.15 85); } /* Theme: Modern Minimal */ .theme-modern-minimal { --background: oklch(1 0 0); --foreground: oklch(0.3211 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.3211 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.3211 0 0); --primary: oklch(0.6231 0.188 259.8145); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.967 0.0029 264.5419); --secondary-foreground: oklch(0.4461 0.0263 256.8018); --muted: oklch(0.9846 0.0017 247.8389); --muted-foreground: oklch(0.551 0.0234 264.3637); --accent: oklch(0.9514 0.025 236.8242); --accent-foreground: oklch(0.3791 0.1378 265.5222); --destructive: oklch(0.6368 0.2078 25.3313); --destructive-foreground: oklch(1 0 0); --border: oklch(0.9276 0.0058 264.5313); --input: oklch(0.9276 0.0058 264.5313); --ring: oklch(0.6231 0.188 259.8145); --chart-1: oklch(0.6231 0.188 259.8145); --chart-2: oklch(0.5461 0.2152 262.8809); --chart-3: oklch(0.4882 0.2172 264.3763); --chart-4: oklch(0.4244 0.1809 265.6377); --chart-5: oklch(0.3791 0.1378 265.5222); --radius: 0.375rem; --sidebar: oklch(0.9846 0.0017 247.8389); --sidebar-foreground: oklch(0.3211 0 0); --sidebar-primary: oklch(0.6231 0.188 259.8145); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.9514 0.025 236.8242); --sidebar-accent-foreground: oklch(0.3791 0.1378 265.5222); --sidebar-border: oklch(0.9276 0.0058 264.5313); --sidebar-ring: oklch(0.6231 0.188 259.8145); } .dark .theme-modern-minimal { --background: oklch(0.2046 0 0); --foreground: oklch(0.9219 0 0); --card: oklch(0.2686 0 0); --card-foreground: oklch(0.9219 0 0); --popover: oklch(0.2686 0 0); --popover-foreground: oklch(0.9219 0 0); --primary: oklch(0.6231 0.188 259.8145); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.2686 0 0); --secondary-foreground: oklch(0.9219 0 0); --muted: oklch(0.2393 0 0); --muted-foreground: oklch(0.7155 0 0); --accent: oklch(0.3791 0.1378 265.5222); --accent-foreground: oklch(0.8823 0.0571 254.1284); --destructive: oklch(0.6368 0.2078 25.3313); --destructive-foreground: oklch(1 0 0); --border: oklch(0.3715 0 0); --input: oklch(0.3715 0 0); --ring: oklch(0.6231 0.188 259.8145); --chart-1: oklch(0.7137 0.1434 254.624); --chart-2: oklch(0.6231 0.188 259.8145); --chart-3: oklch(0.5461 0.2152 262.8809); --chart-4: oklch(0.4882 0.2172 264.3763); --chart-5: oklch(0.4244 0.1809 265.6377); --sidebar: oklch(0.2046 0 0); --sidebar-foreground: oklch(0.9219 0 0); --sidebar-primary: oklch(0.6231 0.188 259.8145); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.3791 0.1378 265.5222); --sidebar-accent-foreground: oklch(0.8823 0.0571 254.1284); --sidebar-border: oklch(0.3715 0 0); --sidebar-ring: oklch(0.6231 0.188 259.8145); } /* Theme: Caffeine */ .theme-caffeine { --background: oklch(0.9821 0 0); --foreground: oklch(0.2435 0 0); --card: oklch(0.9911 0 0); --card-foreground: oklch(0.2435 0 0); --popover: oklch(0.9911 0 0); --popover-foreground: oklch(0.2435 0 0); --primary: oklch(0.4341 0.0392 41.9938); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.92 0.0651 74.3695); --secondary-foreground: oklch(0.3499 0.0685 40.8288); --muted: oklch(0.9521 0 0); --muted-foreground: oklch(0.5032 0 0); --accent: oklch(0.931 0 0); --accent-foreground: oklch(0.2435 0 0); --destructive: oklch(0.6271 0.1936 33.339); --destructive-foreground: oklch(1 0 0); --border: oklch(0.8822 0 0); --input: oklch(0.8822 0 0); --ring: oklch(0.4341 0.0392 41.9938); --chart-1: oklch(0.4341 0.0392 41.9938); --chart-2: oklch(0.92 0.0651 74.3695); --chart-3: oklch(0.931 0 0); --chart-4: oklch(0.9367 0.0523 75.5009); --chart-5: oklch(0.4338 0.0437 41.6746); --radius: 0.5rem; --sidebar: oklch(0.9881 0 0); --sidebar-foreground: oklch(0.2645 0 0); --sidebar-primary: oklch(0.325 0 0); --sidebar-primary-foreground: oklch(0.9881 0 0); --sidebar-accent: oklch(0.9761 0 0); --sidebar-accent-foreground: oklch(0.325 0 0); --sidebar-border: oklch(0.9401 0 0); --sidebar-ring: oklch(0.7731 0 0); } .dark .theme-caffeine { --background: oklch(0.1776 0 0); --foreground: oklch(0.9491 0 0); --card: oklch(0.2134 0 0); --card-foreground: oklch(0.9491 0 0); --popover: oklch(0.2134 0 0); --popover-foreground: oklch(0.9491 0 0); --primary: oklch(0.9247 0.0524 66.1732); --primary-foreground: oklch(0.2029 0.024 200.1962); --secondary: oklch(0.3163 0.019 63.6992); --secondary-foreground: oklch(0.9247 0.0524 66.1732); --muted: oklch(0.252 0 0); --muted-foreground: oklch(0.7699 0 0); --accent: oklch(0.285 0 0); --accent-foreground: oklch(0.9491 0 0); --destructive: oklch(0.6271 0.1936 33.339); --destructive-foreground: oklch(1 0 0); --border: oklch(0.2351 0.0115 91.7467); --input: oklch(0.4017 0 0); --ring: oklch(0.9247 0.0524 66.1732); --chart-1: oklch(0.9247 0.0524 66.1732); --chart-2: oklch(0.3163 0.019 63.6992); --chart-3: oklch(0.285 0 0); --chart-4: oklch(0.3481 0.0219 67.0001); --chart-5: oklch(0.9245 0.0533 67.0855); --sidebar: oklch(0.2103 0.0059 285.8852); --sidebar-foreground: oklch(0.9674 0.0013 286.3752); --sidebar-primary: oklch(0.4882 0.2172 264.3763); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.2739 0.0055 286.0326); --sidebar-accent-foreground: oklch(0.9674 0.0013 286.3752); --sidebar-border: oklch(0.2739 0.0055 286.0326); --sidebar-ring: oklch(0.8711 0.0055 286.286); } /* Theme: Supabase */ .theme-supabase { --background: oklch(0.9911 0 0); --foreground: oklch(0.2046 0 0); --card: oklch(0.9911 0 0); --card-foreground: oklch(0.2046 0 0); --popover: oklch(0.9911 0 0); --popover-foreground: oklch(0.4386 0 0); --primary: oklch(0.8348 0.1302 160.908); --primary-foreground: oklch(0.2626 0.0147 166.4589); --secondary: oklch(0.994 0 0); --secondary-foreground: oklch(0.2046 0 0); --muted: oklch(0.9461 0 0); --muted-foreground: oklch(0.2435 0 0); --accent: oklch(0.9461 0 0); --accent-foreground: oklch(0.2435 0 0); --destructive: oklch(0.5523 0.1927 32.7272); --destructive-foreground: oklch(0.9934 0.0032 17.2118); --border: oklch(0.9037 0 0); --input: oklch(0.9731 0 0); --ring: oklch(0.8348 0.1302 160.908); --chart-1: oklch(0.8348 0.1302 160.908); --chart-2: oklch(0.6231 0.188 259.8145); --chart-3: oklch(0.6056 0.2189 292.7172); --chart-4: oklch(0.7686 0.1647 70.0804); --chart-5: oklch(0.6959 0.1491 162.4796); --radius: 0.5rem; --sidebar: oklch(0.9911 0 0); --sidebar-foreground: oklch(0.5452 0 0); --sidebar-primary: oklch(0.8348 0.1302 160.908); --sidebar-primary-foreground: oklch(0.2626 0.0147 166.4589); --sidebar-accent: oklch(0.9461 0 0); --sidebar-accent-foreground: oklch(0.2435 0 0); --sidebar-border: oklch(0.9037 0 0); --sidebar-ring: oklch(0.8348 0.1302 160.908); } .dark .theme-supabase { --background: oklch(0.1822 0 0); --foreground: oklch(0.9288 0.0126 255.5078); --card: oklch(0.2046 0 0); --card-foreground: oklch(0.9288 0.0126 255.5078); --popover: oklch(0.2603 0 0); --popover-foreground: oklch(0.7348 0 0); --primary: oklch(0.4365 0.1044 156.7556); --primary-foreground: oklch(0.9213 0.0135 167.1556); --secondary: oklch(0.2603 0 0); --secondary-foreground: oklch(0.9851 0 0); --muted: oklch(0.2393 0 0); --muted-foreground: oklch(0.7122 0 0); --accent: oklch(0.3132 0 0); --accent-foreground: oklch(0.9851 0 0); --destructive: oklch(0.3123 0.0852 29.7877); --destructive-foreground: oklch(0.9368 0.0045 34.3092); --border: oklch(0.2809 0 0); --input: oklch(0.2603 0 0); --ring: oklch(0.8003 0.1821 151.711); --chart-1: oklch(0.8003 0.1821 151.711); --chart-2: oklch(0.7137 0.1434 254.624); --chart-3: oklch(0.709 0.1592 293.5412); --chart-4: oklch(0.8369 0.1644 84.4286); --chart-5: oklch(0.7845 0.1325 181.912); --sidebar: oklch(0.1822 0 0); --sidebar-foreground: oklch(0.6301 0 0); --sidebar-primary: oklch(0.4365 0.1044 156.7556); --sidebar-primary-foreground: oklch(0.9213 0.0135 167.1556); --sidebar-accent: oklch(0.3132 0 0); --sidebar-accent-foreground: oklch(0.9851 0 0); --sidebar-border: oklch(0.2809 0 0); --sidebar-ring: oklch(0.8003 0.1821 151.711); } /* Theme: Vercel */ .theme-vercel { --background: oklch(0.99 0 0); --foreground: oklch(0 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0 0 0); --popover: oklch(0.99 0 0); --popover-foreground: oklch(0 0 0); --primary: oklch(0 0 0); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.94 0 0); --secondary-foreground: oklch(0 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.44 0 0); --accent: oklch(0.94 0 0); --accent-foreground: oklch(0 0 0); --destructive: oklch(0.63 0.19 23.03); --destructive-foreground: oklch(1 0 0); --border: oklch(0.92 0 0); --input: oklch(0.94 0 0); --ring: oklch(0 0 0); --chart-1: oklch(0.81 0.17 75.35); --chart-2: oklch(0.55 0.22 264.53); --chart-3: oklch(0.72 0 0); --chart-4: oklch(0.92 0 0); --chart-5: oklch(0.56 0 0); --radius: 0.5rem; --sidebar: oklch(0.99 0 0); --sidebar-foreground: oklch(0 0 0); --sidebar-primary: oklch(0 0 0); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.94 0 0); --sidebar-accent-foreground: oklch(0 0 0); --sidebar-border: oklch(0.94 0 0); --sidebar-ring: oklch(0 0 0); } .dark .theme-vercel { --background: oklch(0 0 0); --foreground: oklch(1 0 0); --card: oklch(0.14 0 0); --card-foreground: oklch(1 0 0); --popover: oklch(0.18 0 0); --popover-foreground: oklch(1 0 0); --primary: oklch(1 0 0); --primary-foreground: oklch(0 0 0); --secondary: oklch(0.25 0 0); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.23 0 0); --muted-foreground: oklch(0.72 0 0); --accent: oklch(0.32 0 0); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.69 0.2 23.91); --destructive-foreground: oklch(0 0 0); --border: oklch(0.26 0 0); --input: oklch(0.32 0 0); --ring: oklch(0.72 0 0); --chart-1: oklch(0.81 0.17 75.35); --chart-2: oklch(0.58 0.21 260.84); --chart-3: oklch(0.56 0 0); --chart-4: oklch(0.44 0 0); --chart-5: oklch(0.92 0 0); --sidebar: oklch(0.18 0 0); --sidebar-foreground: oklch(1 0 0); --sidebar-primary: oklch(1 0 0); --sidebar-primary-foreground: oklch(0 0 0); --sidebar-accent: oklch(0.32 0 0); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.32 0 0); --sidebar-ring: oklch(0.72 0 0); } /* Theme: Twitter */ .theme-twitter { --background: oklch(1 0 0); --foreground: oklch(0.1884 0.0128 248.5103); --card: oklch(0.9784 0.0011 197.1387); --card-foreground: oklch(0.1884 0.0128 248.5103); --popover: oklch(1 0 0); --popover-foreground: oklch(0.1884 0.0128 248.5103); --primary: oklch(0.6723 0.1606 244.9955); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.1884 0.0128 248.5103); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.9222 0.0013 286.3737); --muted-foreground: oklch(0.1884 0.0128 248.5103); --accent: oklch(0.9392 0.0166 250.8453); --accent-foreground: oklch(0.6723 0.1606 244.9955); --destructive: oklch(0.6188 0.2376 25.7658); --destructive-foreground: oklch(1 0 0); --border: oklch(0.9317 0.0118 231.6594); --input: oklch(0.9809 0.0025 228.7836); --ring: oklch(0.6818 0.1584 243.354); --chart-1: oklch(0.6723 0.1606 244.9955); --chart-2: oklch(0.6907 0.1554 160.3454); --chart-3: oklch(0.8214 0.16 82.5337); --chart-4: oklch(0.7064 0.1822 151.7125); --chart-5: oklch(0.5919 0.2186 10.5826); --radius: 1.3rem; --sidebar: oklch(0.9784 0.0011 197.1387); --sidebar-foreground: oklch(0.1884 0.0128 248.5103); --sidebar-primary: oklch(0.6723 0.1606 244.9955); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.9392 0.0166 250.8453); --sidebar-accent-foreground: oklch(0.6723 0.1606 244.9955); --sidebar-border: oklch(0.9271 0.0101 238.5177); --sidebar-ring: oklch(0.6818 0.1584 243.354); } .dark .theme-twitter { --background: oklch(0 0 0); --foreground: oklch(0.9328 0.0025 228.7857); --card: oklch(0.2097 0.008 274.5332); --card-foreground: oklch(0.8853 0 0); --popover: oklch(0 0 0); --popover-foreground: oklch(0.9328 0.0025 228.7857); --primary: oklch(0.6692 0.1607 245.011); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.9622 0.0035 219.5331); --secondary-foreground: oklch(0.1884 0.0128 248.5103); --muted: oklch(0.209 0 0); --muted-foreground: oklch(0.5637 0.0078 247.9662); --accent: oklch(0.1928 0.0331 242.5459); --accent-foreground: oklch(0.6692 0.1607 245.011); --destructive: oklch(0.6188 0.2376 25.7658); --destructive-foreground: oklch(1 0 0); --border: oklch(0.2674 0.0047 248.0045); --input: oklch(0.302 0.0288 244.8244); --ring: oklch(0.6818 0.1584 243.354); --chart-1: oklch(0.6723 0.1606 244.9955); --chart-2: oklch(0.6907 0.1554 160.3454); --chart-3: oklch(0.8214 0.16 82.5337); --chart-4: oklch(0.7064 0.1822 151.7125); --chart-5: oklch(0.5919 0.2186 10.5826); --sidebar: oklch(0.2097 0.008 274.5332); --sidebar-foreground: oklch(0.8853 0 0); --sidebar-primary: oklch(0.6818 0.1584 243.354); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.1928 0.0331 242.5459); --sidebar-accent-foreground: oklch(0.6692 0.1607 245.011); --sidebar-border: oklch(0.3795 0.022 240.5943); --sidebar-ring: oklch(0.6818 0.1584 243.354); } /* Note: The theme manager will automatically detect themes from CSS classes matching .theme-{id} */