/* * Weitere Farbschemen zur Auswahl (Einstellungen → Farbschema). Jedes Schema setzt dieselben * Basecoat-Variablen wie das Markendesign in theme-bauledger.css – neue Schemen brauchen also * nur einen Hell- und einen Dunkel-Block hier plus einen Eintrag in User.ThemeCatalog. * * Die Klasse setzt das Layout serverseitig auf (kein Aufblitzen); „dark" kommt weiterhin * vom Hell-/Dunkel-Umschalter. html.theme-x schlägt :root, html.theme-x.dark schlägt .dark. */ /* ---------------------------------------------------------------- Graphit (Anthrazit/Orange) */ html.theme-graphit { --background: oklch(0.99 0.003 90); --foreground: oklch(0.24 0.01 60); --card: oklch(1 0 0); --card-foreground: oklch(0.24 0.01 60); --popover: oklch(1 0 0); --popover-foreground: oklch(0.24 0.01 60); --primary: oklch(0.35 0.02 60); /* Anthrazit */ --primary-foreground: oklch(0.98 0.005 90); --secondary: oklch(0.96 0.006 80); --secondary-foreground: oklch(0.32 0.02 60); --muted: oklch(0.96 0.006 80); --muted-foreground: oklch(0.52 0.015 70); --accent: oklch(0.70 0.17 52); /* Baustellen-Orange */ --accent-foreground: oklch(0.24 0.05 52); --destructive: oklch(0.58 0.22 27); --destructive-foreground: oklch(0.98 0.01 27); --border: oklch(0.90 0.006 80); --input: oklch(0.90 0.006 80); --ring: oklch(0.70 0.17 52); --sidebar: oklch(0.97 0.005 80); --sidebar-foreground: oklch(0.24 0.01 60); --sidebar-primary: oklch(0.35 0.02 60); --sidebar-primary-foreground: oklch(0.98 0.005 90); --sidebar-accent: oklch(0.93 0.02 60); --sidebar-accent-foreground: oklch(0.32 0.02 60); --sidebar-border: oklch(0.90 0.006 80); --sidebar-ring: oklch(0.70 0.17 52); --radius: 0.5rem; } html.theme-graphit.dark { --background: oklch(0.20 0.008 60); --foreground: oklch(0.97 0.004 90); --card: oklch(0.25 0.009 60); --card-foreground: oklch(0.97 0.004 90); --popover: oklch(0.25 0.009 60); --popover-foreground: oklch(0.97 0.004 90); --primary: oklch(0.78 0.02 80); --primary-foreground: oklch(0.20 0.008 60); --secondary: oklch(0.31 0.01 60); --secondary-foreground: oklch(0.97 0.004 90); --muted: oklch(0.31 0.01 60); --muted-foreground: oklch(0.72 0.01 75); --accent: oklch(0.74 0.16 52); --accent-foreground: oklch(0.20 0.04 52); --destructive: oklch(0.62 0.21 27); --destructive-foreground: oklch(0.98 0.01 27); --border: oklch(0.35 0.012 60); --input: oklch(0.35 0.012 60); --ring: oklch(0.74 0.16 52); --sidebar: oklch(0.23 0.009 60); --sidebar-foreground: oklch(0.97 0.004 90); --sidebar-primary: oklch(0.74 0.16 52); --sidebar-primary-foreground: oklch(0.20 0.04 52); --sidebar-accent: oklch(0.31 0.01 60); --sidebar-accent-foreground: oklch(0.97 0.004 90); --sidebar-border: oklch(0.35 0.012 60); --sidebar-ring: oklch(0.74 0.16 52); --radius: 0.5rem; } /* ------------------------------------------------------------------- Wald (Tannengrün/Sand) */ html.theme-wald { --background: oklch(0.99 0.005 140); --foreground: oklch(0.24 0.03 155); --card: oklch(1 0 0); --card-foreground: oklch(0.24 0.03 155); --popover: oklch(1 0 0); --popover-foreground: oklch(0.24 0.03 155); --primary: oklch(0.48 0.11 155); /* Tannengrün */ --primary-foreground: oklch(0.98 0.01 140); --secondary: oklch(0.95 0.02 145); --secondary-foreground: oklch(0.33 0.07 155); --muted: oklch(0.96 0.012 145); --muted-foreground: oklch(0.50 0.02 150); --accent: oklch(0.80 0.11 85); /* Sand */ --accent-foreground: oklch(0.28 0.05 85); --destructive: oklch(0.58 0.22 27); --destructive-foreground: oklch(0.98 0.01 27); --border: oklch(0.90 0.015 145); --input: oklch(0.90 0.015 145); --ring: oklch(0.48 0.11 155); --sidebar: oklch(0.97 0.012 145); --sidebar-foreground: oklch(0.24 0.03 155); --sidebar-primary: oklch(0.48 0.11 155); --sidebar-primary-foreground: oklch(0.98 0.01 140); --sidebar-accent: oklch(0.92 0.03 145); --sidebar-accent-foreground: oklch(0.33 0.07 155); --sidebar-border: oklch(0.90 0.015 145); --sidebar-ring: oklch(0.48 0.11 155); --radius: 0.625rem; } html.theme-wald.dark { --background: oklch(0.20 0.03 155); --foreground: oklch(0.97 0.01 140); --card: oklch(0.25 0.035 155); --card-foreground: oklch(0.97 0.01 140); --popover: oklch(0.25 0.035 155); --popover-foreground: oklch(0.97 0.01 140); --primary: oklch(0.66 0.13 155); --primary-foreground: oklch(0.16 0.03 155); --secondary: oklch(0.31 0.035 155); --secondary-foreground: oklch(0.97 0.01 140); --muted: oklch(0.31 0.035 155); --muted-foreground: oklch(0.73 0.02 145); --accent: oklch(0.80 0.11 85); --accent-foreground: oklch(0.22 0.05 85); --destructive: oklch(0.62 0.21 27); --destructive-foreground: oklch(0.98 0.01 27); --border: oklch(0.36 0.03 155); --input: oklch(0.36 0.03 155); --ring: oklch(0.66 0.13 155); --sidebar: oklch(0.23 0.032 155); --sidebar-foreground: oklch(0.97 0.01 140); --sidebar-primary: oklch(0.66 0.13 155); --sidebar-primary-foreground: oklch(0.16 0.03 155); --sidebar-accent: oklch(0.31 0.035 155); --sidebar-accent-foreground: oklch(0.97 0.01 140); --sidebar-border: oklch(0.36 0.03 155); --sidebar-ring: oklch(0.66 0.13 155); --radius: 0.625rem; } /* ------------------------------------------------------------- Kupfer (Warmbraun/Terrakotta) */ html.theme-kupfer { --background: oklch(0.99 0.006 60); --foreground: oklch(0.26 0.03 45); --card: oklch(1 0 0); --card-foreground: oklch(0.26 0.03 45); --popover: oklch(1 0 0); --popover-foreground: oklch(0.26 0.03 45); --primary: oklch(0.53 0.14 45); /* Kupfer */ --primary-foreground: oklch(0.98 0.01 60); --secondary: oklch(0.95 0.02 60); --secondary-foreground: oklch(0.35 0.08 45); --muted: oklch(0.96 0.014 60); --muted-foreground: oklch(0.51 0.025 50); --accent: oklch(0.62 0.09 230); /* Kühles Blau als Gegenpol */ --accent-foreground: oklch(0.98 0.01 230); --destructive: oklch(0.55 0.22 20); --destructive-foreground: oklch(0.98 0.01 20); --border: oklch(0.90 0.018 60); --input: oklch(0.90 0.018 60); --ring: oklch(0.53 0.14 45); --sidebar: oklch(0.97 0.014 60); --sidebar-foreground: oklch(0.26 0.03 45); --sidebar-primary: oklch(0.53 0.14 45); --sidebar-primary-foreground: oklch(0.98 0.01 60); --sidebar-accent: oklch(0.92 0.035 55); --sidebar-accent-foreground: oklch(0.35 0.08 45); --sidebar-border: oklch(0.90 0.018 60); --sidebar-ring: oklch(0.53 0.14 45); --radius: 0.75rem; } html.theme-kupfer.dark { --background: oklch(0.21 0.025 45); --foreground: oklch(0.97 0.01 60); --card: oklch(0.26 0.03 45); --card-foreground: oklch(0.97 0.01 60); --popover: oklch(0.26 0.03 45); --popover-foreground: oklch(0.97 0.01 60); --primary: oklch(0.70 0.14 45); --primary-foreground: oklch(0.18 0.03 45); --secondary: oklch(0.32 0.03 45); --secondary-foreground: oklch(0.97 0.01 60); --muted: oklch(0.32 0.03 45); --muted-foreground: oklch(0.73 0.02 55); --accent: oklch(0.68 0.10 230); --accent-foreground: oklch(0.16 0.03 230); --destructive: oklch(0.62 0.21 20); --destructive-foreground: oklch(0.98 0.01 20); --border: oklch(0.37 0.025 45); --input: oklch(0.37 0.025 45); --ring: oklch(0.70 0.14 45); --sidebar: oklch(0.24 0.028 45); --sidebar-foreground: oklch(0.97 0.01 60); --sidebar-primary: oklch(0.70 0.14 45); --sidebar-primary-foreground: oklch(0.18 0.03 45); --sidebar-accent: oklch(0.32 0.03 45); --sidebar-accent-foreground: oklch(0.97 0.01 60); --sidebar-border: oklch(0.37 0.025 45); --sidebar-ring: oklch(0.70 0.14 45); --radius: 0.75rem; } /* ---------------------------------------------------------------------------- Monokai * Die Editor-Farben aus Sublime/TextMate. Bewusst als Hex statt oklch wie die übrigen * Schemen: Monokai ist über genau diese Werte definiert (#272822, #A6E22E, #F92672, * #66D9EF, #E6DB74) – eine Umrechnung würde die Wiedererkennbarkeit kosten. * * Monokai ist ein Dunkel-Design. Weil jedes Schema hier beide Modi können muss, trägt der * Hell-Modus dieselben Akzente auf hellem Grund; die Palette bleibt erkennbar, ohne dass * heller Text auf hellem Grund entsteht. */ html.theme-monokai { --background: #FAFAF5; --foreground: #272822; --card: #FFFFFF; --card-foreground: #272822; --popover: #FFFFFF; --popover-foreground: #272822; /* Abgedunkeltes Monokai-Grün. Das Original #A6E22E ist als LINKFARBE auf hellem Grund unlesbar (gemessen 1,48:1) – und --primary färbt hier nicht nur Knöpfe, sondern auch Links und Reiter. Auf Dunkel bleibt unten das Original. */ --primary: #45690A; --primary-foreground: #FAFAF5; --secondary: #F0F0E6; --secondary-foreground: #3E3D32; --muted: #F0F0E6; /* Das Kommentargrau #75715E ist als Fließtext zu schwach – hier bewusst abgedunkelt. */ --muted-foreground: #63614F; --accent: #66D9EF; /* Monokai-Cyan */ --accent-foreground: #10343D; --destructive: #E01765; /* Monokai-Pink, für weiße Schrift abgedunkelt */ --destructive-foreground: #FFFFFF; --border: #E2E2D6; --input: #E2E2D6; /* Fokusrahmen muss sichtbar sein – helles Limette auf hellem Grund wäre er nicht. */ --ring: #45690A; --sidebar: #F2F2E8; --sidebar-foreground: #272822; --sidebar-primary: #A6E22E; --sidebar-primary-foreground: #1E1F1A; --sidebar-accent: #E4E4D6; --sidebar-accent-foreground: #3E3D32; --sidebar-border: #E2E2D6; --sidebar-ring: #45690A; --radius: 0.375rem; /* editortypisch knapp */ } html.theme-monokai.dark { --background: #272822; /* das Original */ --foreground: #F8F8F2; --card: #2F302A; --card-foreground: #F8F8F2; --popover: #2F302A; --popover-foreground: #F8F8F2; --primary: #A6E22E; --primary-foreground: #1E1F1A; --secondary: #3E3D32; /* Auswahlfarbe des Editors */ --secondary-foreground: #F8F8F2; --muted: #3E3D32; --muted-foreground: #B5B1A0; /* aufgehelltes Kommentargrau, s. o. */ --accent: #66D9EF; --accent-foreground: #10343D; --destructive: #F92672; /* hier im Original – auf Dunkel gut lesbar */ --destructive-foreground: #2A0512; --border: #49483E; --input: #49483E; --ring: #A6E22E; --sidebar: #22231E; --sidebar-foreground: #F8F8F2; --sidebar-primary: #A6E22E; --sidebar-primary-foreground: #1E1F1A; --sidebar-accent: #3E3D32; --sidebar-accent-foreground: #F8F8F2; --sidebar-border: #49483E; --sidebar-ring: #A6E22E; --radius: 0.375rem; } /* ------------------------------------------------------------------- Orange (#F18D2B) * Klassisches Hell/Dunkel: neutrale Grau-Grundflächen, die Markenfarbe #F18D2B als einziger * Farbakzent. Bewusst kein warmer Unterton in Grund und Rahmen – das ist der Unterschied zu * "Kupfer" und "Graphit", die die Fläche selbst einfärben. * * #F18D2B ist eine Füllfarbe, keine Textfarbe: auf Weiß kommt sie auf 2,5:1. Sie trägt * deshalb Knopfflächen, Ränder und Marker in Originalton, während Links im Hellmodus über * --link einen abgedunkelten Ton derselben Familie bekommen. Im Dunkelmodus ist der * Originalton als Text tragfähig und wird direkt verwendet. */ html.theme-orange { --background: oklch(1 0 0); --foreground: oklch(0.21 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.21 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.21 0 0); --primary: #F18D2B; /* Markenfarbe, unverändert */ --primary-foreground: oklch(0.20 0 0); /* dunkle Schrift – Weiß käme auf 2,5:1 */ /* Nur die Linkfarbe, nicht die Marke: derselbe Orangeton, so weit abgedunkelt, dass er als Fließtext auf Weiß lesbar bleibt. */ --link: #9E5C0B; --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.25 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.50 0 0); --accent: oklch(0.95 0.04 65); /* zarter Orangeschleier für Hover/Marker */ --accent-foreground: oklch(0.30 0.06 55); --destructive: oklch(0.58 0.22 27); --destructive-foreground: oklch(0.99 0 0); --border: oklch(0.92 0 0); --input: oklch(0.92 0 0); --ring: #9E5C0B; /* Fokusrahmen muss auf Weiß sichtbar sein */ --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.21 0 0); --sidebar-primary: #F18D2B; --sidebar-primary-foreground: oklch(0.20 0 0); --sidebar-accent: oklch(0.95 0.04 65); --sidebar-accent-foreground: oklch(0.30 0.06 55); --sidebar-border: oklch(0.92 0 0); --sidebar-ring: #9E5C0B; --radius: 0.5rem; } html.theme-orange.dark { --background: oklch(0.16 0 0); /* neutrales Fast-Schwarz */ --foreground: oklch(0.97 0 0); --card: oklch(0.21 0 0); --card-foreground: oklch(0.97 0 0); --popover: oklch(0.21 0 0); --popover-foreground: oklch(0.97 0 0); --primary: #F18D2B; /* auf Dunkel auch als Text tragfähig */ --primary-foreground: oklch(0.18 0 0); --secondary: oklch(0.27 0 0); --secondary-foreground: oklch(0.97 0 0); --muted: oklch(0.27 0 0); --muted-foreground: oklch(0.72 0 0); --accent: oklch(0.32 0.05 60); --accent-foreground: oklch(0.97 0.01 60); --destructive: oklch(0.62 0.21 25); --destructive-foreground: oklch(0.16 0 0); --border: oklch(0.30 0 0); --input: oklch(0.30 0 0); --ring: #F18D2B; --sidebar: oklch(0.19 0 0); --sidebar-foreground: oklch(0.97 0 0); --sidebar-primary: #F18D2B; --sidebar-primary-foreground: oklch(0.18 0 0); --sidebar-accent: oklch(0.27 0 0); --sidebar-accent-foreground: oklch(0.97 0 0); --sidebar-border: oklch(0.30 0 0); --sidebar-ring: #F18D2B; --radius: 0.5rem; }