Florian WildeandClaude Opus 5
4ff67c15c2
Deutsche Oberfläche, Hell und Dunkel über next-themes, Navigation mit Rollenfilter und die shadcn-Primitiven, die M1 braucht. Der Farbschema-Knopf kommt ohne Effekt und ohne Zustand aus: welches Symbol gilt, entscheidet die dark-Klasse und damit CSS. next-themes setzt sie schon vor der Hydratation, deshalb blitzt nichts auf — und die React-Compiler-Regel gegen setState im Effekt bleibt eingehalten. Farben als OKLCH, damit Hell und Dunkel dieselbe wahrgenommene Helligkeit halten. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
91 lines
2.5 KiB
CSS
91 lines
2.5 KiB
CSS
@import 'tailwindcss';
|
|
@import 'tw-animate-css';
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/*
|
|
* Farben als OKLCH, damit Hell und Dunkel dieselbe wahrgenommene Helligkeit
|
|
* halten. Die Bereichsfarben kommen aus der Datenbank und werden zur Laufzeit
|
|
* gesetzt, nicht hier.
|
|
*/
|
|
:root {
|
|
--radius: 0.625rem;
|
|
|
|
--hintergrund: oklch(0.99 0.002 250);
|
|
--vordergrund: oklch(0.21 0.02 260);
|
|
--karte: oklch(1 0 0);
|
|
--karte-vordergrund: oklch(0.21 0.02 260);
|
|
--gedaempft: oklch(0.96 0.004 250);
|
|
--gedaempft-vordergrund: oklch(0.5 0.015 260);
|
|
--rand: oklch(0.91 0.006 255);
|
|
--eingabe: oklch(0.91 0.006 255);
|
|
--ring: oklch(0.55 0.16 258);
|
|
|
|
--betont: oklch(0.52 0.17 258);
|
|
--betont-vordergrund: oklch(0.99 0.002 250);
|
|
--gefahr: oklch(0.55 0.21 27);
|
|
--gefahr-vordergrund: oklch(0.99 0.002 250);
|
|
--erfolg: oklch(0.6 0.13 155);
|
|
--warnung: oklch(0.7 0.15 75);
|
|
}
|
|
|
|
.dark {
|
|
--hintergrund: oklch(0.17 0.015 262);
|
|
--vordergrund: oklch(0.95 0.005 250);
|
|
--karte: oklch(0.21 0.018 262);
|
|
--karte-vordergrund: oklch(0.95 0.005 250);
|
|
--gedaempft: oklch(0.26 0.018 262);
|
|
--gedaempft-vordergrund: oklch(0.7 0.015 258);
|
|
--rand: oklch(0.31 0.018 262);
|
|
--eingabe: oklch(0.31 0.018 262);
|
|
--ring: oklch(0.62 0.15 258);
|
|
|
|
--betont: oklch(0.62 0.16 258);
|
|
--betont-vordergrund: oklch(0.17 0.015 262);
|
|
--gefahr: oklch(0.62 0.19 25);
|
|
--gefahr-vordergrund: oklch(0.98 0.002 250);
|
|
--erfolg: oklch(0.68 0.12 155);
|
|
--warnung: oklch(0.78 0.13 75);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-hintergrund: var(--hintergrund);
|
|
--color-vordergrund: var(--vordergrund);
|
|
--color-karte: var(--karte);
|
|
--color-karte-vordergrund: var(--karte-vordergrund);
|
|
--color-gedaempft: var(--gedaempft);
|
|
--color-gedaempft-vordergrund: var(--gedaempft-vordergrund);
|
|
--color-rand: var(--rand);
|
|
--color-eingabe: var(--eingabe);
|
|
--color-ring: var(--ring);
|
|
--color-betont: var(--betont);
|
|
--color-betont-vordergrund: var(--betont-vordergrund);
|
|
--color-gefahr: var(--gefahr);
|
|
--color-gefahr-vordergrund: var(--gefahr-vordergrund);
|
|
--color-erfolg: var(--erfolg);
|
|
--color-warnung: var(--warnung);
|
|
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-rand outline-ring/50;
|
|
}
|
|
|
|
body {
|
|
@apply bg-hintergrund text-vordergrund;
|
|
font-feature-settings:
|
|
'liga' 1,
|
|
'calt' 1;
|
|
}
|
|
|
|
/* Wer mit der Tastatur bedient, muss sehen, wo er ist. */
|
|
:focus-visible {
|
|
@apply outline-ring outline-2 outline-offset-2;
|
|
}
|
|
}
|