forked from BRETT/BRETT
New Themes
This commit is contained in:
+445
-64
@@ -654,6 +654,451 @@
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
[data-theme="sunny-sprout"] {
|
||||
color-scheme: dark;
|
||||
--font-sans: 'Instrument Sans', 'Inter', sans-serif;
|
||||
--font-heading: 'Instrument Sans', 'Inter', sans-serif;
|
||||
--font-serif: 'Source Serif Pro', serif;
|
||||
--font-mono: 'JetBrains Mono', monospace;
|
||||
--radius: 0.75rem;
|
||||
--background: #2D2F28;
|
||||
--foreground: #EEDF86;
|
||||
--card: #373A31;
|
||||
--card-foreground: #EEDF86;
|
||||
--popover: #2D2F28;
|
||||
--popover-foreground: #EEDF86;
|
||||
--primary: #C7CD88;
|
||||
--primary-foreground: #2D2F28;
|
||||
--secondary: #969C87;
|
||||
--secondary-foreground: #FDFBF7;
|
||||
--muted: #3F4238;
|
||||
--muted-foreground: #92886D;
|
||||
--accent: #E7A552;
|
||||
--accent-foreground: #2D2F28;
|
||||
--destructive: #92886D;
|
||||
--destructive-foreground: #EEDF86;
|
||||
--border: #4C5141;
|
||||
--input: #3F4238;
|
||||
--ring: #C7CD88;
|
||||
--chart-1: #C7CD88;
|
||||
--chart-2: #969C87;
|
||||
--chart-3: #E7A552;
|
||||
--chart-4: #EEDF86;
|
||||
--chart-5: #92886D;
|
||||
--sidebar: #242620;
|
||||
--sidebar-foreground: #C7CD88;
|
||||
--sidebar-primary: #C7CD88;
|
||||
--sidebar-primary-foreground: #2D2F28;
|
||||
--sidebar-accent: #969C87;
|
||||
--sidebar-accent-foreground: #FDFBF7;
|
||||
--sidebar-border: #3F4238;
|
||||
--sidebar-ring: #C7CD88;
|
||||
--shadow-color: #000000;
|
||||
--shadow-opacity: 0.4;
|
||||
--shadow-blur: 12px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-offset-x: 0px;
|
||||
--shadow-offset-y: 6px;
|
||||
--shadow-2xs: 0px 6px 12px 0px rgb(0 0 0 / 0.2);
|
||||
--shadow-xs: 0px 6px 12px 0px rgb(0 0 0 / 0.2);
|
||||
--shadow-sm: 0px 6px 12px 0px rgb(0 0 0 / 0.4), 0px 1px 2px -1px rgb(0 0 0 / 0.4);
|
||||
--shadow: 0px 6px 12px 0px rgb(0 0 0 / 0.4), 0px 1px 2px -1px rgb(0 0 0 / 0.4);
|
||||
--shadow-md: 0px 6px 12px 0px rgb(0 0 0 / 0.4), 0px 2px 4px -1px rgb(0 0 0 / 0.4);
|
||||
--shadow-lg: 0px 6px 12px 0px rgb(0 0 0 / 0.4), 0px 4px 6px -1px rgb(0 0 0 / 0.4);
|
||||
--shadow-xl: 0px 6px 12px 0px rgb(0 0 0 / 0.4), 0px 8px 10px -1px rgb(0 0 0 / 0.4);
|
||||
--shadow-2xl: 0px 6px 12px 0px rgb(0 0 0 / 1);
|
||||
--letter-spacing: 0.01em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
[data-theme="sunny-sprout"] body {
|
||||
letter-spacing: var(--letter-spacing);
|
||||
}
|
||||
|
||||
/* Spotify-Theme (tweakcn „Spotify", Dark-Variante):
|
||||
sehr dunkles Graugrün, Spotify-Grün als Primary, dezente Akzente */
|
||||
[data-theme="spotify"] {
|
||||
color-scheme: dark;
|
||||
--font-sans: 'Segoe UI', 'Helvetica Neue', Helvetica, 'Lucida Grande', Arial, Ubuntu, Cantarell, 'Fira Sans', sans-serif;
|
||||
--font-heading: 'Segoe UI', 'Helvetica Neue', Helvetica, 'Lucida Grande', Arial, Ubuntu, Cantarell, 'Fira Sans', sans-serif;
|
||||
--font-serif: Georgia, serif;
|
||||
--font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
--radius: 0.75rem;
|
||||
--background: oklch(0.1606 0.0053 145.3237);
|
||||
--foreground: oklch(0.9500 0.0034 145.5487);
|
||||
--card: oklch(0.2090 0.0074 145.3034);
|
||||
--card-foreground: oklch(0.9500 0.0034 145.5487);
|
||||
--popover: oklch(0.2392 0.0072 145.3463);
|
||||
--popover-foreground: oklch(0.9500 0.0034 145.5487);
|
||||
--primary: oklch(0.7892 0.1803 148.7810);
|
||||
--primary-foreground: oklch(0.1613 0.0088 4.6340);
|
||||
--secondary: oklch(0.2509 0.0081 153.3184);
|
||||
--secondary-foreground: oklch(0.9004 0.0103 145.4890);
|
||||
--muted: oklch(0.2297 0.0083 153.2517);
|
||||
--muted-foreground: oklch(0.6801 0.0199 150.4135);
|
||||
--accent: oklch(0.2816 0.0763 148.8490);
|
||||
--accent-foreground: oklch(0.8494 0.0990 148.7724);
|
||||
--destructive: oklch(0.6789 0.2096 21.9475);
|
||||
--destructive-foreground: oklch(1.0000 0 0);
|
||||
--border: oklch(0.2988 0.0100 151.4948);
|
||||
--input: oklch(0.2988 0.0100 151.4948);
|
||||
--ring: oklch(0.7892 0.1803 148.7810);
|
||||
--chart-1: oklch(0.7892 0.1803 148.7810);
|
||||
--chart-2: oklch(0.8500 0.1550 173.9924);
|
||||
--chart-3: oklch(0.8790 0.1436 123.7404);
|
||||
--chart-4: oklch(0.6899 0.1121 198.6311);
|
||||
--chart-5: oklch(0.9010 0.1081 99.0016);
|
||||
--sidebar: oklch(0.1902 0.0086 153.0805);
|
||||
--sidebar-foreground: oklch(0.9500 0.0034 145.5487);
|
||||
--sidebar-primary: oklch(0.7892 0.1803 148.7810);
|
||||
--sidebar-primary-foreground: oklch(0.1613 0.0088 4.6340);
|
||||
--sidebar-accent: oklch(0.2816 0.0763 148.8490);
|
||||
--sidebar-accent-foreground: oklch(0.8494 0.0990 148.7724);
|
||||
--sidebar-border: oklch(0.2988 0.0100 151.4948);
|
||||
--sidebar-ring: oklch(0.7892 0.1803 148.7810);
|
||||
--shadow-color: #000000;
|
||||
--shadow-opacity: 0.35;
|
||||
--shadow-blur: 16px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-offset-x: 0px;
|
||||
--shadow-offset-y: 4px;
|
||||
--shadow-2xs: 0px 4px 16px 0px hsl(0 0% 0% / 0.17);
|
||||
--shadow-xs: 0px 4px 16px 0px hsl(0 0% 0% / 0.17);
|
||||
--shadow-sm: 0px 4px 16px 0px hsl(0 0% 0% / 0.35), 0px 1px 2px -1px hsl(0 0% 0% / 0.35);
|
||||
--shadow: 0px 4px 16px 0px hsl(0 0% 0% / 0.35), 0px 1px 2px -1px hsl(0 0% 0% / 0.35);
|
||||
--shadow-md: 0px 4px 16px 0px hsl(0 0% 0% / 0.35), 0px 2px 4px -1px hsl(0 0% 0% / 0.35);
|
||||
--shadow-lg: 0px 4px 16px 0px hsl(0 0% 0% / 0.35), 0px 4px 6px -1px hsl(0 0% 0% / 0.35);
|
||||
--shadow-xl: 0px 4px 16px 0px hsl(0 0% 0% / 0.35), 0px 8px 10px -1px hsl(0 0% 0% / 0.35);
|
||||
--shadow-2xl: 0px 4px 16px 0px hsl(0 0% 0% / 0.88);
|
||||
--letter-spacing: 0em;
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
[data-theme="spotify"] body {
|
||||
letter-spacing: var(--letter-spacing);
|
||||
}
|
||||
|
||||
/* Nordic Theme (tweakcn, Dark-Variante):
|
||||
kühles Blaugrau mit ruhigen, kontrastarmen Akzenten */
|
||||
[data-theme="nordic"] {
|
||||
color-scheme: dark;
|
||||
--font-sans: 'Inter', sans-serif;
|
||||
--font-heading: 'Inter', sans-serif;
|
||||
--font-serif: 'Source Serif 4', serif;
|
||||
--font-mono: 'JetBrains Mono', monospace;
|
||||
--radius: 0.6rem;
|
||||
--background: oklch(0.2890 0.0214 265.8475);
|
||||
--foreground: oklch(0.8993 0.0164 262.7493);
|
||||
--card: oklch(0.3244 0.0229 264.1820);
|
||||
--card-foreground: oklch(0.8993 0.0164 262.7493);
|
||||
--popover: oklch(0.2603 0.0179 266.2766);
|
||||
--popover-foreground: oklch(0.8993 0.0164 262.7493);
|
||||
--primary: oklch(0.4157 0.0324 264.1312);
|
||||
--primary-foreground: oklch(0.8993 0.0164 262.7493);
|
||||
--secondary: oklch(0.4157 0.0324 264.1312);
|
||||
--secondary-foreground: oklch(0.8993 0.0164 262.7493);
|
||||
--muted: oklch(0.3555 0.0299 264.0846);
|
||||
--muted-foreground: oklch(0.7008 0.0301 263.3734);
|
||||
--accent: oklch(0.3555 0.0299 264.0846);
|
||||
--accent-foreground: oklch(0.8993 0.0164 262.7493);
|
||||
--destructive: oklch(0.6061 0.1206 15.3419);
|
||||
--destructive-foreground: oklch(0.8993 0.0164 262.7493);
|
||||
--border: oklch(0.3593 0.0223 264.2405);
|
||||
--input: oklch(0.3244 0.0229 264.1820);
|
||||
--ring: oklch(0.4631 0.0209 264.3476);
|
||||
--chart-1: oklch(0.8549 0.0892 84.0933);
|
||||
--chart-2: oklch(0.7683 0.0749 131.0631);
|
||||
--chart-3: oklch(0.6061 0.1206 15.3419);
|
||||
--chart-4: oklch(0.6929 0.0963 38.2407);
|
||||
--chart-5: oklch(0.5944 0.0772 254.0278);
|
||||
--sidebar: oklch(0.2603 0.0179 266.2766);
|
||||
--sidebar-foreground: oklch(0.8993 0.0164 262.7493);
|
||||
--sidebar-primary: oklch(0.3555 0.0299 264.0846);
|
||||
--sidebar-primary-foreground: oklch(0.8993 0.0164 262.7493);
|
||||
--sidebar-accent: oklch(0.3555 0.0299 264.0846);
|
||||
--sidebar-accent-foreground: oklch(0.8993 0.0164 262.7493);
|
||||
--sidebar-border: oklch(0.3555 0.0299 264.0846);
|
||||
--sidebar-ring: oklch(0.3244 0.0229 264.1820);
|
||||
--shadow-color: oklch(0 0 0);
|
||||
--shadow-opacity: 0.1;
|
||||
--shadow-blur: 3px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-offset-x: 0;
|
||||
--shadow-offset-y: 1px;
|
||||
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
||||
--letter-spacing: 0em;
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
[data-theme="nordic"] body {
|
||||
letter-spacing: var(--letter-spacing);
|
||||
}
|
||||
|
||||
/* SS-Theme (tweakcn „ss", Dark-Variante):
|
||||
neutrales Schwarz/Grau ohne Farbakzente */
|
||||
[data-theme="ss"] {
|
||||
color-scheme: dark;
|
||||
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--font-heading: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(0.1450 0 0);
|
||||
--foreground: oklch(0.9850 0 0);
|
||||
--card: oklch(0.2050 0 0);
|
||||
--card-foreground: oklch(0.9850 0 0);
|
||||
--popover: oklch(0.2690 0 0);
|
||||
--popover-foreground: oklch(0.9850 0 0);
|
||||
--primary: oklch(0.9220 0 0);
|
||||
--primary-foreground: oklch(0.2050 0 0);
|
||||
--secondary: oklch(0.2690 0 0);
|
||||
--secondary-foreground: oklch(0.9850 0 0);
|
||||
--muted: oklch(0.2690 0 0);
|
||||
--muted-foreground: oklch(0.7080 0 0);
|
||||
--accent: oklch(0.3710 0 0);
|
||||
--accent-foreground: oklch(0.9850 0 0);
|
||||
--destructive: oklch(0.7040 0.1910 22.2160);
|
||||
--destructive-foreground: oklch(0.9850 0 0);
|
||||
--border: oklch(0.2750 0 0);
|
||||
--input: oklch(0.3250 0 0);
|
||||
--ring: oklch(0.5560 0 0);
|
||||
--chart-1: oklch(0.8100 0.1000 252);
|
||||
--chart-2: oklch(0.6200 0.1900 260);
|
||||
--chart-3: oklch(0.5500 0.2200 263);
|
||||
--chart-4: oklch(0.4900 0.2200 264);
|
||||
--chart-5: oklch(0.4200 0.1800 266);
|
||||
--sidebar: oklch(0.2050 0 0);
|
||||
--sidebar-foreground: oklch(0.9850 0 0);
|
||||
--sidebar-primary: oklch(0.4880 0.2430 264.3760);
|
||||
--sidebar-primary-foreground: oklch(0.9850 0 0);
|
||||
--sidebar-accent: oklch(0.2690 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.9850 0 0);
|
||||
--sidebar-border: oklch(0.2750 0 0);
|
||||
--sidebar-ring: oklch(0.4390 0 0);
|
||||
--shadow-color: oklch(0 0 0);
|
||||
--shadow-opacity: 0.1;
|
||||
--shadow-blur: 3px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-offset-x: 0;
|
||||
--shadow-offset-y: 1px;
|
||||
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
||||
--letter-spacing: 0em;
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
[data-theme="ss"] body {
|
||||
letter-spacing: var(--letter-spacing);
|
||||
}
|
||||
|
||||
/* Amethyst-Haze-Theme (tweakcn, Dark-Variante):
|
||||
dunkles Violett mit lavendelfarbener Primary und rosé Akzenten */
|
||||
[data-theme="amethyst-haze"] {
|
||||
color-scheme: dark;
|
||||
--font-sans: 'Geist', sans-serif;
|
||||
--font-heading: 'Geist', sans-serif;
|
||||
--font-serif: 'Lora', Georgia, serif;
|
||||
--font-mono: 'Fira Code', 'Courier New', monospace;
|
||||
--radius: 0.5rem;
|
||||
--background: #1a1823;
|
||||
--foreground: #e0ddef;
|
||||
--card: #232030;
|
||||
--card-foreground: #e0ddef;
|
||||
--popover: #232030;
|
||||
--popover-foreground: #e0ddef;
|
||||
--primary: #a995c9;
|
||||
--primary-foreground: #1a1823;
|
||||
--secondary: #5a5370;
|
||||
--secondary-foreground: #e0ddef;
|
||||
--muted: #242031;
|
||||
--muted-foreground: #a09aad;
|
||||
--accent: #372e3f;
|
||||
--accent-foreground: #f2b8c6;
|
||||
--destructive: #e57373;
|
||||
--destructive-foreground: #1a1823;
|
||||
--border: #302c40;
|
||||
--input: #413d57;
|
||||
--ring: #655480;
|
||||
--chart-1: #a995c9;
|
||||
--chart-2: #f2b8c6;
|
||||
--chart-3: #77b8a1;
|
||||
--chart-4: #f0c88d;
|
||||
--chart-5: #a0bbe3;
|
||||
--sidebar: #16141e;
|
||||
--sidebar-foreground: #e0ddef;
|
||||
--sidebar-primary: #a995c9;
|
||||
--sidebar-primary-foreground: #1a1823;
|
||||
--sidebar-accent: #372e3f;
|
||||
--sidebar-accent-foreground: #f2b8c6;
|
||||
--sidebar-border: #2a273a;
|
||||
--sidebar-ring: #a995c9;
|
||||
--shadow-color: hsl(0 0% 0%);
|
||||
--shadow-opacity: 0.06;
|
||||
--shadow-blur: 5px;
|
||||
--shadow-spread: 1px;
|
||||
--shadow-offset-x: 1px;
|
||||
--shadow-offset-y: 2px;
|
||||
--shadow-2xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
|
||||
--shadow-xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
|
||||
--shadow-sm: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
|
||||
--shadow: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
|
||||
--shadow-md: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 2px 4px 0px hsl(0 0% 0% / 0.06);
|
||||
--shadow-lg: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 4px 6px 0px hsl(0 0% 0% / 0.06);
|
||||
--shadow-xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 8px 10px 0px hsl(0 0% 0% / 0.06);
|
||||
--shadow-2xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.15);
|
||||
--letter-spacing: 0em;
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
[data-theme="amethyst-haze"] body {
|
||||
letter-spacing: var(--letter-spacing);
|
||||
}
|
||||
|
||||
/* Deep-Wine-Theme (tweakcn „Deep Wine (Final)", Dark-Variante):
|
||||
dunkles Blaugrau mit weinroter Primary */
|
||||
[data-theme="deep-wine"] {
|
||||
color-scheme: dark;
|
||||
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--font-heading: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
--radius: 0.5rem;
|
||||
--background: oklch(0.1608 0.0053 219.8085);
|
||||
--foreground: oklch(0.9011 0.0051 228.8246);
|
||||
--card: oklch(0.2198 0.0060 236.8407);
|
||||
--card-foreground: oklch(0.9011 0.0051 228.8246);
|
||||
--popover: oklch(0.2198 0.0060 236.8407);
|
||||
--popover-foreground: oklch(0.9011 0.0051 228.8246);
|
||||
--primary: oklch(0.5158 0.1252 6.4511);
|
||||
--primary-foreground: oklch(0.9851 0 0);
|
||||
--secondary: oklch(0.2198 0.0060 236.8407);
|
||||
--secondary-foreground: oklch(0.9011 0.0051 228.8246);
|
||||
--muted: oklch(0.1989 0.0051 248.0841);
|
||||
--muted-foreground: oklch(0.5810 0.0047 236.5524);
|
||||
--accent: oklch(0.2412 0.0059 236.7944);
|
||||
--accent-foreground: oklch(0.9011 0.0051 228.8246);
|
||||
--destructive: oklch(0.5010 0.2031 25.0094);
|
||||
--destructive-foreground: oklch(0.9791 0 0);
|
||||
--border: oklch(0.2791 0.0070 248.0795);
|
||||
--input: oklch(0.2585 0.0071 248.1047);
|
||||
--ring: oklch(0.5158 0.1252 6.4511);
|
||||
--chart-1: oklch(0.5158 0.1252 6.4511);
|
||||
--chart-2: oklch(0.6503 0.1704 144.9078);
|
||||
--chart-3: oklch(0.7195 0.1780 55.0907);
|
||||
--chart-4: oklch(0.6210 0.1998 259.8901);
|
||||
--chart-5: oklch(0.6201 0.1591 319.7924);
|
||||
--sidebar: oklch(0.1320 0.0049 226.3894);
|
||||
--sidebar-foreground: oklch(0.9011 0.0051 228.8246);
|
||||
--sidebar-primary: oklch(0.5158 0.1252 6.4511);
|
||||
--sidebar-primary-foreground: oklch(0.9851 0 0);
|
||||
--sidebar-accent: oklch(0.1989 0.0051 248.0841);
|
||||
--sidebar-accent-foreground: oklch(0.9011 0.0051 228.8246);
|
||||
--sidebar-border: oklch(0.2023 0.0061 236.8873);
|
||||
--sidebar-ring: oklch(0.5158 0.1252 6.4511);
|
||||
--shadow-color: oklch(0 0 0);
|
||||
--shadow-opacity: 0.1;
|
||||
--shadow-blur: 3px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-offset-x: 0;
|
||||
--shadow-offset-y: 1px;
|
||||
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
||||
--letter-spacing: 0em;
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
[data-theme="deep-wine"] body {
|
||||
letter-spacing: var(--letter-spacing);
|
||||
}
|
||||
|
||||
/* myClaude-Theme (tweakcn, Dark-Variante):
|
||||
warmes Dunkelgrau mit Claude-Orange und Serif-Schrift */
|
||||
[data-theme="my-claude"] {
|
||||
color-scheme: dark;
|
||||
--font-sans: 'Newsreader', ui-serif, serif;
|
||||
--font-heading: 'Newsreader', ui-serif, serif;
|
||||
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
||||
--radius: 1rem;
|
||||
--background: #151515;
|
||||
--foreground: #ecebe6;
|
||||
--card: #212121;
|
||||
--card-foreground: #ecebe6;
|
||||
--popover: #20201f;
|
||||
--popover-foreground: #ecebe6;
|
||||
--primary: #d97757;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #2d2d2d;
|
||||
--secondary-foreground: #ecebe6;
|
||||
--muted: #212121;
|
||||
--muted-foreground: #a3a29b;
|
||||
--accent: #343434;
|
||||
--accent-foreground: #ecebe6;
|
||||
--destructive: #ef4444;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #292929;
|
||||
--input: #20201f;
|
||||
--ring: #d97757;
|
||||
--chart-1: #6da7ec;
|
||||
--chart-2: #9c87f5;
|
||||
--chart-3: #1a1915;
|
||||
--chart-4: #2f2b48;
|
||||
--chart-5: #b4552d;
|
||||
--sidebar: #151515;
|
||||
--sidebar-foreground: #ecebe6;
|
||||
--sidebar-primary: #d97757;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #343434;
|
||||
--sidebar-accent-foreground: #ecebe6;
|
||||
--sidebar-border: #292929;
|
||||
--sidebar-ring: #d97757;
|
||||
--shadow-color: oklch(0 0 0);
|
||||
--shadow-opacity: 0.1;
|
||||
--shadow-blur: 3px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-offset-x: 0;
|
||||
--shadow-offset-y: 1px;
|
||||
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
||||
--letter-spacing: 0em;
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
[data-theme="my-claude"] body {
|
||||
letter-spacing: var(--letter-spacing);
|
||||
}
|
||||
|
||||
/* Neo-Brutalismus: helle Pastell-Flächen, schwarze 2px-Borders,
|
||||
harte Offset-Schatten, keine Rundungen */
|
||||
|
||||
@@ -689,70 +1134,6 @@
|
||||
--sidebar-ring: oklch(0.22 0.02 60);
|
||||
}
|
||||
|
||||
[data-theme="neo-pink"] {
|
||||
--font-sans: 'Space Grotesk', sans-serif;
|
||||
--font-heading: 'Archivo Black', sans-serif;
|
||||
--radius: 0rem;
|
||||
--background: oklch(0.93 0.07 355);
|
||||
--foreground: oklch(0.25 0.05 340);
|
||||
--card: oklch(0.97 0.04 355);
|
||||
--card-foreground: oklch(0.25 0.05 340);
|
||||
--popover: oklch(0.97 0.04 355);
|
||||
--popover-foreground: oklch(0.25 0.05 340);
|
||||
--primary: oklch(0.85 0.15 200);
|
||||
--primary-foreground: oklch(0.25 0.05 340);
|
||||
--secondary: oklch(0.88 0.08 350);
|
||||
--secondary-foreground: oklch(0.25 0.05 340);
|
||||
--muted: oklch(0.9 0.06 355);
|
||||
--muted-foreground: oklch(0.48 0.07 340);
|
||||
--accent: oklch(0.88 0.17 95);
|
||||
--accent-foreground: oklch(0.25 0.05 340);
|
||||
--destructive: oklch(0.58 0.24 25);
|
||||
--border: oklch(0.25 0.05 340);
|
||||
--input: oklch(0.25 0.05 340);
|
||||
--ring: oklch(0.25 0.05 340);
|
||||
--sidebar: oklch(0.97 0.04 355);
|
||||
--sidebar-foreground: oklch(0.25 0.05 340);
|
||||
--sidebar-primary: oklch(0.85 0.15 200);
|
||||
--sidebar-primary-foreground: oklch(0.25 0.05 340);
|
||||
--sidebar-accent: oklch(0.88 0.08 350);
|
||||
--sidebar-accent-foreground: oklch(0.25 0.05 340);
|
||||
--sidebar-border: oklch(0.25 0.05 340);
|
||||
--sidebar-ring: oklch(0.25 0.05 340);
|
||||
}
|
||||
|
||||
[data-theme="neo-mint"] {
|
||||
--font-sans: 'Space Grotesk', sans-serif;
|
||||
--font-heading: 'Archivo Black', sans-serif;
|
||||
--radius: 0rem;
|
||||
--background: oklch(0.93 0.08 160);
|
||||
--foreground: oklch(0.25 0.05 200);
|
||||
--card: oklch(0.97 0.04 160);
|
||||
--card-foreground: oklch(0.25 0.05 200);
|
||||
--popover: oklch(0.97 0.04 160);
|
||||
--popover-foreground: oklch(0.25 0.05 200);
|
||||
--primary: oklch(0.68 0.2 305);
|
||||
--primary-foreground: oklch(0.98 0.02 300);
|
||||
--secondary: oklch(0.88 0.08 165);
|
||||
--secondary-foreground: oklch(0.25 0.05 200);
|
||||
--muted: oklch(0.89 0.07 160);
|
||||
--muted-foreground: oklch(0.45 0.06 200);
|
||||
--accent: oklch(0.8 0.18 60);
|
||||
--accent-foreground: oklch(0.25 0.05 200);
|
||||
--destructive: oklch(0.58 0.24 25);
|
||||
--border: oklch(0.25 0.05 200);
|
||||
--input: oklch(0.25 0.05 200);
|
||||
--ring: oklch(0.25 0.05 200);
|
||||
--sidebar: oklch(0.97 0.04 160);
|
||||
--sidebar-foreground: oklch(0.25 0.05 200);
|
||||
--sidebar-primary: oklch(0.68 0.2 305);
|
||||
--sidebar-primary-foreground: oklch(0.98 0.02 300);
|
||||
--sidebar-accent: oklch(0.88 0.08 165);
|
||||
--sidebar-accent-foreground: oklch(0.25 0.05 200);
|
||||
--sidebar-border: oklch(0.25 0.05 200);
|
||||
--sidebar-ring: oklch(0.25 0.05 200);
|
||||
}
|
||||
|
||||
/* Brutalist-Regeln für alle neo-* Themes:
|
||||
2px schwarze Borders + harter 4px-Offset-Schatten auf Karten-Elementen,
|
||||
Buttons mit „reingedrückt"-Effekt beim Klick */
|
||||
|
||||
@@ -85,7 +85,8 @@ const parts = computed<Part[]>(() => {
|
||||
<template v-for="(part, index) in parts" :key="index">
|
||||
<template v-if="part.type === 'text'">
|
||||
<template v-for="(segment, segmentIndex) in mentionParts(part.text, mentionUsers)" :key="segmentIndex">
|
||||
<UserHoverCard v-if="segment.user" :user-id="segment.user.id" :user-name="segment.user.name" :user-color="segment.user.color">
|
||||
<span v-if="segment.user && compact" class="rounded-sm bg-accent px-0.5 font-medium text-accent-foreground">{{ segment.text }}</span>
|
||||
<UserHoverCard v-else-if="segment.user" :user-id="segment.user.id" :user-name="segment.user.name" :user-color="segment.user.color">
|
||||
<NuxtLink :to="`/user/${segment.user.id}`" class="rounded-sm bg-accent px-0.5 font-medium text-accent-foreground hover:underline" @click.stop>{{ segment.text }}</NuxtLink>
|
||||
</UserHoverCard>
|
||||
<template v-else>{{ segment.text }}</template>
|
||||
|
||||
@@ -23,9 +23,14 @@ const themes = [
|
||||
{ value: 'clawmorphism', label: 'Clawmorphism' },
|
||||
{ value: 'realmorphism', label: 'Realmorphism' },
|
||||
{ value: 'amber', label: 'Amber' },
|
||||
{ value: 'sunny-sprout', label: 'Sunny Sprout' },
|
||||
{ value: 'spotify', label: 'Spotify' },
|
||||
{ value: 'nordic', label: 'Nordic Theme' },
|
||||
{ value: 'ss', label: 'SS' },
|
||||
{ value: 'amethyst-haze', label: 'Amethyst Haze' },
|
||||
{ value: 'deep-wine', label: 'Deep Wine' },
|
||||
{ value: 'my-claude', label: 'myClaude' },
|
||||
{ value: 'neo', label: 'Neo' },
|
||||
{ value: 'neo-pink', label: 'Neo Pink' },
|
||||
{ value: 'neo-mint', label: 'Neo Mint' },
|
||||
] as const
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
export type ThemeName = 'standard' | 'discord' | 'cyberpunk' | 'spring' | 'terminal' | 'infoseer' | 'homebrew' | 'florense' | 'kawi-green' | 'clonz' | 'clawmorphism' | 'realmorphism' | 'amber' | 'neo' | 'neo-pink' | 'neo-mint'
|
||||
export const THEME_NAMES = ['standard', 'discord', 'cyberpunk', 'spring', 'terminal', 'infoseer', 'homebrew', 'florense', 'kawi-green', 'clonz', 'clawmorphism', 'realmorphism', 'amber', 'sunny-sprout', 'spotify', 'nordic', 'ss', 'amethyst-haze', 'deep-wine', 'my-claude', 'neo'] as const
|
||||
|
||||
export type ThemeName = typeof THEME_NAMES[number]
|
||||
|
||||
export function useTheme() {
|
||||
return useCookie<ThemeName>('color-mode', {
|
||||
const theme = useCookie<ThemeName>('color-mode', {
|
||||
default: () => 'standard',
|
||||
maxAge: 60 * 60 * 24 * 365,
|
||||
sameSite: 'lax',
|
||||
})
|
||||
|
||||
if (!THEME_NAMES.includes(theme.value)) {
|
||||
theme.value = 'standard'
|
||||
}
|
||||
|
||||
return theme
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user