/* * theme.css * DaisyUI custom theme for bickel.be * Primary colour: purple. Two variants: "bickel" (light) and "bickel-dark". * Applied via data-theme attribute on element. * Dark mode is toggled by switching between the two themes. * * We define both the new DaisyUI v5-style --color-* variables (used by our * own CSS) AND the old DaisyUI v4-style --b1/--p/--fallback-* variables * (used internally by the DaisyUI CDN components like table-zebra, btn etc.). */ [data-theme="bickel"] { /* ---- New-style variables (our own CSS) ---- */ --color-base-100: oklch(98% 0.005 290); --color-base-200: oklch(94% 0.01 290); --color-base-300: oklch(88% 0.015 290); --color-base-content: oklch(20% 0.02 290); --color-primary: oklch(52% 0.22 290); --color-primary-content: oklch(98% 0.01 290); --color-secondary: oklch(60% 0.17 290); --color-secondary-content: oklch(98% 0.01 290); --color-accent: oklch(68% 0.12 290); --color-accent-content: oklch(98% 0.01 290); --color-neutral: oklch(40% 0.05 290); --color-neutral-content: oklch(95% 0.01 290); --color-info: oklch(65% 0.15 220); --color-success: oklch(60% 0.18 150); --color-warning: oklch(75% 0.2 60); --color-error: oklch(58% 0.22 25); --rounded-box: 0.5rem; --rounded-btn: 0.375rem; --rounded-badge: 1rem; --animation-btn: 0.2s; --tab-border: 1px; /* ---- DaisyUI v4 oklch component variables (used by CDN components) ---- */ --b1: 98% 0.005 290; --b2: 94% 0.01 290; --b3: 88% 0.015 290; --bc: 20% 0.02 290; --p: 52% 0.22 290; --pc: 98% 0.01 290; --s: 60% 0.17 290; --sc: 98% 0.01 290; --a: 68% 0.12 290; --ac: 98% 0.01 290; --n: 40% 0.05 290; --nc: 95% 0.01 290; --su: 60% 0.18 150; --wa: 75% 0.2 60; --er: 58% 0.22 25; /* ---- DaisyUI v4 hex fallbacks (override the global :root fallbacks) ---- */ --fallback-b1: #f7f4ff; --fallback-b2: #ebe6f8; --fallback-b3: #d8d2ee; --fallback-bc: #1e1a28; --fallback-p: #5c38d0; --fallback-pc: #f4f0ff; --fallback-s: #7a4fc0; --fallback-sc: #f4f0ff; --fallback-a: #8868b0; --fallback-ac: #f4f0ff; /* Ensure html element has correct background (overrides DaisyUI's :root fallback) */ background-color: oklch(98% 0.005 290); color-scheme: light; } [data-theme="bickel-dark"] { /* ---- New-style variables (our own CSS) ---- */ --color-base-100: oklch(18% 0.03 290); --color-base-200: oklch(14% 0.025 290); --color-base-300: oklch(11% 0.02 290); --color-base-content: oklch(88% 0.02 290); --color-primary: oklch(68% 0.26 290); --color-primary-content: oklch(98% 0.01 290); --color-secondary: oklch(74% 0.18 290); --color-secondary-content: oklch(98% 0.01 290); --color-accent: oklch(79% 0.11 290); --color-accent-content: oklch(20% 0.02 290); --color-neutral: oklch(30% 0.05 290); --color-neutral-content: oklch(88% 0.02 290); --color-info: oklch(65% 0.15 220); --color-success: oklch(60% 0.18 150); --color-warning: oklch(75% 0.2 60); --color-error: oklch(60% 0.22 25); --rounded-box: 0.5rem; --rounded-btn: 0.375rem; --rounded-badge: 1rem; --animation-btn: 0.2s; --tab-border: 1px; /* ---- DaisyUI v4 oklch component variables (used by CDN components) ---- */ --b1: 18% 0.03 290; --b2: 14% 0.025 290; --b3: 11% 0.02 290; --bc: 88% 0.02 290; --p: 68% 0.26 290; --pc: 98% 0.01 290; --s: 74% 0.18 290; --sc: 98% 0.01 290; --a: 79% 0.11 290; --ac: 20% 0.02 290; --n: 30% 0.05 290; --nc: 88% 0.02 290; --su: 60% 0.18 150; --wa: 75% 0.2 60; --er: 60% 0.22 25; /* ---- DaisyUI v4 hex fallbacks (override the global :root fallbacks) ---- */ --fallback-b1: #1e1a2e; --fallback-b2: #17132a; --fallback-b3: #0f0d22; --fallback-bc: #d6ceec; --fallback-p: #7855d6; --fallback-pc: #f0eeff; --fallback-s: #9070cc; --fallback-sc: #f0eeff; --fallback-a: #a090c0; --fallback-ac: #1e1a28; /* Ensure html element has correct background (overrides DaisyUI's :root fallback) */ background-color: oklch(18% 0.03 290); color-scheme: dark; }