/* ========================================================================== Sarabun Theme System Maps tweakcn theme presets to Bootstrap 5.3 CSS custom properties. Each theme is activated via [data-theme="theme-name"] on or . "basic" = default Bootstrap (no overrides needed). Foreground color variables use WCAG relative luminance to determine contrast: L = 0.2126*R + 0.7152*G + 0.0722*B (linearized sRGB) If L > 0.179 → dark text (#1a1a1a), else → white text (#ffffff) ========================================================================== */ /* -------------------------------------------------------------------------- Basic Theme — Bootstrap defaults, no overrides -------------------------------------------------------------------------- */ [data-theme="basic"] { /* Uses default Bootstrap 5.3 styling — minimal overrides */ --bs-body-bg: #f0f2f5; } /* -------------------------------------------------------------------------- Modern Minimal Clean blue-on-white design with subtle grays primary #3b82f6 L=0.24, secondary #f3f4f6 L=0.90, danger #ef4444 L=0.23 -------------------------------------------------------------------------- */ [data-theme="modern-minimal"] { --bs-primary: #3b82f6; --bs-primary-rgb: 59, 130, 246; --bs-body-bg: #f0f2f5; --bs-body-color: #333333; --bs-secondary: #f3f4f6; --bs-secondary-rgb: 243, 244, 246; --bs-tertiary-bg: #f9fafb; --bs-secondary-color: #6b7280; --bs-danger: #ef4444; --bs-danger-rgb: 239, 68, 68; --bs-border-color: #e5e7eb; --bs-card-bg: #ffffff; --bs-card-color: #333333; --bs-link-color: #3b82f6; --bs-link-hover-color: #2563eb; --bs-border-radius: 0.375rem; --theme-navbar-bg: #3b82f6; --theme-navbar-color: #ffffff; --theme-accent: #e0f2fe; --theme-accent-foreground: #1e3a8a; --theme-ring: #3b82f6; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #e5e7eb; } /* -------------------------------------------------------------------------- Violet Bloom Vibrant purple primary with rounded corners primary #7033ff L=0.13, secondary #edf0f4 L=0.87, danger #e54b4f L=0.22 -------------------------------------------------------------------------- */ [data-theme="violet-bloom"] { --bs-primary: #7033ff; --bs-primary-rgb: 112, 51, 255; --bs-body-bg: #f0f0f5; --bs-body-color: #1a1a2e; --bs-secondary: #edf0f4; --bs-secondary-rgb: 237, 240, 244; --bs-tertiary-bg: #f5f5f5; --bs-secondary-color: #525252; --bs-danger: #e54b4f; --bs-danger-rgb: 229, 75, 79; --bs-border-color: #e7e7ee; --bs-card-bg: #ffffff; --bs-card-color: #1a1a2e; --bs-link-color: #7033ff; --bs-link-hover-color: #5a1fdf; --bs-border-radius: 1.4rem; --theme-navbar-bg: #7033ff; --theme-navbar-color: #ffffff; --theme-accent: #e2ebff; --theme-accent-foreground: #1e69dc; --theme-ring: #000000; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #ebebeb; } /* -------------------------------------------------------------------------- T3 Chat Warm pink/magenta tones primary #a84370 L=0.14, secondary #f1c4e6 L=0.64, danger #ab4347 L=0.13 -------------------------------------------------------------------------- */ [data-theme="t3-chat"] { --bs-primary: #a84370; --bs-primary-rgb: 168, 67, 112; --bs-body-bg: #f5f0f5; --bs-body-color: #501854; --bs-secondary: #f1c4e6; --bs-secondary-rgb: 241, 196, 230; --bs-tertiary-bg: #f6e5f3; --bs-secondary-color: #834588; --bs-danger: #ab4347; --bs-danger-rgb: 171, 67, 71; --bs-border-color: #efbdeb; --bs-card-bg: #ffffff; --bs-card-color: #501854; --bs-link-color: #a84370; --bs-link-hover-color: #8a2f5a; --bs-border-radius: 0.5rem; --theme-navbar-bg: #a84370; --theme-navbar-color: #ffffff; --theme-accent: #f1c4e6; --theme-accent-foreground: #77347c; --theme-ring: #db2777; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #e7c1dc; } /* -------------------------------------------------------------------------- Mocha Mousse Warm earthy brown tones — Pantone Color of the Year 2025 primary #A37764 L=0.22, secondary #BAAB92 L=0.42, danger #1f1a17 L=0.01 -------------------------------------------------------------------------- */ [data-theme="mocha-mousse"] { --bs-primary: #A37764; --bs-primary-rgb: 163, 119, 100; --bs-body-bg: #eeede2; --bs-body-color: #56453F; --bs-secondary: #BAAB92; --bs-secondary-rgb: 186, 171, 146; --bs-tertiary-bg: #E4C7B8; --bs-secondary-color: #8A655A; --bs-danger: #1f1a17; --bs-danger-rgb: 31, 26, 23; --bs-border-color: #BAAB92; --bs-card-bg: #ffffff; --bs-card-color: #56453F; --bs-link-color: #A37764; --bs-link-hover-color: #8a6050; --bs-border-radius: 0.5rem; --theme-navbar-bg: #A37764; --theme-navbar-color: #FFFFFF; --theme-accent: #E4C7B8; --theme-accent-foreground: #56453F; --theme-ring: #A37764; --theme-primary-foreground: #1a1a1a; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #BAAB92; } /* -------------------------------------------------------------------------- Catppuccin Pastel palette with purple primary (Latte variant) primary #8839ef L=0.14, secondary #ccd0da L=0.63, danger #d20f39 L=0.14 success #40a02b L=0.26, info #04a5e5 L=0.33, warning #fe640b L=0.30 -------------------------------------------------------------------------- */ [data-theme="catppuccin"] { --bs-primary: #8839ef; --bs-primary-rgb: 136, 57, 239; --bs-body-bg: #eff1f5; --bs-body-color: #4c4f69; --bs-secondary: #ccd0da; --bs-secondary-rgb: 204, 208, 218; --bs-tertiary-bg: #dce0e8; --bs-secondary-color: #6c6f85; --bs-danger: #d20f39; --bs-danger-rgb: 210, 15, 57; --bs-border-color: #bcc0cc; --bs-card-bg: #ffffff; --bs-card-color: #4c4f69; --bs-link-color: #8839ef; --bs-link-hover-color: #7028d4; --bs-border-radius: 0.35rem; --bs-success: #40a02b; --bs-success-rgb: 64, 160, 43; --bs-info: #04a5e5; --bs-info-rgb: 4, 165, 229; --bs-warning: #fe640b; --bs-warning-rgb: 254, 100, 11; --theme-navbar-bg: #8839ef; --theme-navbar-color: #ffffff; --theme-accent: #04a5e5; --theme-accent-foreground: #ffffff; --theme-ring: #8839ef; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #ffffff; --theme-info-foreground: #ffffff; --theme-input-border: #ccd0da; } /* -------------------------------------------------------------------------- Graphite Neutral gray monochrome theme primary #606060 L=0.12, secondary #e0e0e0 L=0.75, danger #cc3333 L=0.15 -------------------------------------------------------------------------- */ [data-theme="graphite"] { --bs-primary: #606060; --bs-primary-rgb: 96, 96, 96; --bs-body-bg: #ebebeb; --bs-body-color: #333333; --bs-secondary: #e0e0e0; --bs-secondary-rgb: 224, 224, 224; --bs-tertiary-bg: #d9d9d9; --bs-secondary-color: #666666; --bs-danger: #cc3333; --bs-danger-rgb: 204, 51, 51; --bs-border-color: #d0d0d0; --bs-card-bg: #ffffff; --bs-card-color: #333333; --bs-link-color: #606060; --bs-link-hover-color: #404040; --bs-border-radius: 0.35rem; --theme-navbar-bg: #606060; --theme-navbar-color: #ffffff; --theme-accent: #c0c0c0; --theme-accent-foreground: #333333; --theme-ring: #606060; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #e0e0e0; } /* -------------------------------------------------------------------------- Nature Forest greens with warm earthy neutrals primary #2e7d32 L=0.15, secondary #e8f5e9 L=0.88, danger #c62828 L=0.14 success #4caf50 L=0.33 -------------------------------------------------------------------------- */ [data-theme="nature"] { --bs-primary: #2e7d32; --bs-primary-rgb: 46, 125, 50; --bs-body-bg: #f0ede8; --bs-body-color: #3e2723; --bs-secondary: #e8f5e9; --bs-secondary-rgb: 232, 245, 233; --bs-tertiary-bg: #f0e9e0; --bs-secondary-color: #6d4c41; --bs-danger: #c62828; --bs-danger-rgb: 198, 40, 40; --bs-border-color: #e0d6c9; --bs-card-bg: #ffffff; --bs-card-color: #3e2723; --bs-link-color: #2e7d32; --bs-link-hover-color: #1b5e20; --bs-border-radius: 0.5rem; --bs-success: #4caf50; --bs-success-rgb: 76, 175, 80; --theme-navbar-bg: #2e7d32; --theme-navbar-color: #ffffff; --theme-accent: #c8e6c9; --theme-accent-foreground: #1b5e20; --theme-ring: #2e7d32; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #e0d6c9; } /* -------------------------------------------------------------------------- Bold Tech Vibrant violet-purple with indigo accents primary #8b5cf6 L=0.20, secondary #f3f0ff L=0.89, danger #ef4444 L=0.23 -------------------------------------------------------------------------- */ [data-theme="bold-tech"] { --bs-primary: #8b5cf6; --bs-primary-rgb: 139, 92, 246; --bs-body-bg: #f0f0f8; --bs-body-color: #312e81; --bs-secondary: #f3f0ff; --bs-secondary-rgb: 243, 240, 255; --bs-tertiary-bg: #f5f3ff; --bs-secondary-color: #7c3aed; --bs-danger: #ef4444; --bs-danger-rgb: 239, 68, 68; --bs-border-color: #e0e7ff; --bs-card-bg: #ffffff; --bs-card-color: #312e81; --bs-link-color: #8b5cf6; --bs-link-hover-color: #7c3aed; --bs-border-radius: 0.625rem; --theme-navbar-bg: #8b5cf6; --theme-navbar-color: #ffffff; --theme-accent: #dbeafe; --theme-accent-foreground: #1e40af; --theme-ring: #8b5cf6; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #e0e7ff; } /* -------------------------------------------------------------------------- Elegant Luxury Deep red with gold accents on warm neutrals primary #9b2c2c L=0.09, secondary #fdf2d6 L=0.89, danger #991b1b L=0.08 warning #b45309 L=0.16 -------------------------------------------------------------------------- */ [data-theme="elegant-luxury"] { --bs-primary: #9b2c2c; --bs-primary-rgb: 155, 44, 44; --bs-body-bg: #f2efed; --bs-body-color: #1a1a1a; --bs-secondary: #fdf2d6; --bs-secondary-rgb: 253, 242, 214; --bs-tertiary-bg: #f0ebe8; --bs-secondary-color: #57534e; --bs-danger: #991b1b; --bs-danger-rgb: 153, 27, 27; --bs-border-color: #f5e8d2; --bs-card-bg: #ffffff; --bs-card-color: #1a1a1a; --bs-link-color: #9b2c2c; --bs-link-hover-color: #7f1d1d; --bs-border-radius: 0.375rem; --bs-warning: #b45309; --bs-warning-rgb: 180, 83, 9; --theme-navbar-bg: #9b2c2c; --theme-navbar-color: #ffffff; --theme-accent: #fef3c7; --theme-accent-foreground: #7f1d1d; --theme-ring: #9b2c2c; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #ffffff; --theme-info-foreground: #1a1a1a; --theme-input-border: #f5e8d2; } /* -------------------------------------------------------------------------- Supabase Bright green on clean white — developer-friendly primary #72e3ad L=0.62, secondary #fdfdfd L=0.98, danger #ca3214 L=0.15 success #10b981 L=0.36 -------------------------------------------------------------------------- */ [data-theme="supabase"] { --bs-primary: #72e3ad; --bs-primary-rgb: 114, 227, 173; --bs-body-bg: #f0f2f5; --bs-body-color: #171717; --bs-secondary: #fdfdfd; --bs-secondary-rgb: 253, 253, 253; --bs-tertiary-bg: #ededed; --bs-secondary-color: #202020; --bs-danger: #ca3214; --bs-danger-rgb: 202, 50, 20; --bs-border-color: #dfdfdf; --bs-card-bg: #ffffff; --bs-card-color: #171717; --bs-link-color: #10b981; --bs-link-hover-color: #059669; --bs-border-radius: 0.5rem; --bs-success: #10b981; --bs-success-rgb: 16, 185, 129; --theme-navbar-bg: #1e2723; --theme-navbar-color: #72e3ad; --theme-accent: #ededed; --theme-accent-foreground: #202020; --theme-ring: #72e3ad; --theme-primary-foreground: #1e2723; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #dfdfdf; } /* -------------------------------------------------------------------------- Neo Brutalism Bold black borders, primary colors, flat design primary #ff3333 L=0.24, secondary #ffff00 L=0.93, danger #000000 L=0.00 -------------------------------------------------------------------------- */ [data-theme="neo-brutalism"] { --bs-primary: #ff3333; --bs-primary-rgb: 255, 51, 51; --bs-body-bg: #f0f0f0; --bs-body-color: #000000; --bs-secondary: #ffff00; --bs-secondary-rgb: 255, 255, 0; --bs-tertiary-bg: #f0f0f0; --bs-secondary-color: #333333; --bs-danger: #000000; --bs-danger-rgb: 0, 0, 0; --bs-border-color: #000000; --bs-card-bg: #ffffff; --bs-card-color: #000000; --bs-link-color: #ff3333; --bs-link-hover-color: #cc0000; --bs-border-radius: 0px; --bs-border-width: 2px; --theme-navbar-bg: #ff3333; --theme-navbar-color: #ffffff; --theme-accent: #0066ff; --theme-accent-foreground: #ffffff; --theme-ring: #ff3333; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #000000; } /* -------------------------------------------------------------------------- Cyberpunk Neon magenta and cyan on near-white primary #ff00c8 L=0.25, secondary #f0f0ff L=0.88, danger #ff3d00 L=0.25 info #00e5ff L=0.63 -------------------------------------------------------------------------- */ [data-theme="cyberpunk"] { --bs-primary: #ff00c8; --bs-primary-rgb: 255, 0, 200; --bs-body-bg: #f0f0f5; --bs-body-color: #0c0c1d; --bs-secondary: #f0f0ff; --bs-secondary-rgb: 240, 240, 255; --bs-tertiary-bg: #f0f0ff; --bs-secondary-color: #0c0c1d; --bs-danger: #ff3d00; --bs-danger-rgb: 255, 61, 0; --bs-border-color: #dfe6e9; --bs-card-bg: #ffffff; --bs-card-color: #0c0c1d; --bs-link-color: #ff00c8; --bs-link-hover-color: #cc00a0; --bs-border-radius: 0.5rem; --bs-info: #00e5ff; --bs-info-rgb: 0, 229, 255; --theme-navbar-bg: #ff00c8; --theme-navbar-color: #ffffff; --theme-accent: #00ffcc; --theme-accent-foreground: #0c0c1d; --theme-ring: #ff00c8; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #dfe6e9; } /* -------------------------------------------------------------------------- Ocean Breeze Fresh green primary on light blue background primary #22c55e L=0.41, secondary #e0f2fe L=0.87, danger #ef4444 L=0.23 success #10b981 L=0.36 -------------------------------------------------------------------------- */ [data-theme="ocean-breeze"] { --bs-primary: #22c55e; --bs-primary-rgb: 34, 197, 94; --bs-body-bg: #e8f0f8; --bs-body-color: #374151; --bs-secondary: #e0f2fe; --bs-secondary-rgb: 224, 242, 254; --bs-tertiary-bg: #f3f4f6; --bs-secondary-color: #6b7280; --bs-danger: #ef4444; --bs-danger-rgb: 239, 68, 68; --bs-border-color: #e5e7eb; --bs-card-bg: #ffffff; --bs-card-color: #374151; --bs-link-color: #22c55e; --bs-link-hover-color: #16a34a; --bs-border-radius: 0.5rem; --bs-success: #10b981; --bs-success-rgb: 16, 185, 129; --theme-navbar-bg: #22c55e; --theme-navbar-color: #ffffff; --theme-accent: #d1fae5; --theme-accent-foreground: #374151; --theme-ring: #22c55e; --theme-primary-foreground: #1a1a1a; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #e5e7eb; } /* -------------------------------------------------------------------------- Clean Slate Professional indigo on cool slate grays primary #6366f1 L=0.19, secondary #e5e7eb L=0.80, danger #ef4444 L=0.23 -------------------------------------------------------------------------- */ [data-theme="clean-slate"] { --bs-primary: #6366f1; --bs-primary-rgb: 99, 102, 241; --bs-body-bg: #eef0f5; --bs-body-color: #1e293b; --bs-secondary: #e5e7eb; --bs-secondary-rgb: 229, 231, 235; --bs-tertiary-bg: #f3f4f6; --bs-secondary-color: #6b7280; --bs-danger: #ef4444; --bs-danger-rgb: 239, 68, 68; --bs-border-color: #d1d5db; --bs-card-bg: #ffffff; --bs-card-color: #1e293b; --bs-link-color: #6366f1; --bs-link-hover-color: #4f46e5; --bs-border-radius: 0.5rem; --theme-navbar-bg: #6366f1; --theme-navbar-color: #ffffff; --theme-accent: #e0e7ff; --theme-accent-foreground: #374151; --theme-ring: #6366f1; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #d1d5db; } /* -------------------------------------------------------------------------- Caffeine Warm coffee browns on clean white primary #644a40 L=0.08, secondary #ffdfb5 L=0.77, danger #e54d2e L=0.22 -------------------------------------------------------------------------- */ [data-theme="caffeine"] { --bs-primary: #644a40; --bs-primary-rgb: 100, 74, 64; --bs-body-bg: #f0f0f0; --bs-body-color: #202020; --bs-secondary: #ffdfb5; --bs-secondary-rgb: 255, 223, 181; --bs-tertiary-bg: #efefef; --bs-secondary-color: #646464; --bs-danger: #e54d2e; --bs-danger-rgb: 229, 77, 46; --bs-border-color: #d8d8d8; --bs-card-bg: #ffffff; --bs-card-color: #202020; --bs-link-color: #644a40; --bs-link-hover-color: #4e3830; --bs-border-radius: 0.5rem; --theme-navbar-bg: #644a40; --theme-navbar-color: #ffffff; --theme-accent: #e8e8e8; --theme-accent-foreground: #202020; --theme-ring: #644a40; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #d8d8d8; } /* -------------------------------------------------------------------------- Twitter Twitter/X blue on clean white primary #1e9df1 L=0.31, secondary #0f1419 L=0.01, danger #f4212e L=0.21 success #17bf63 L=0.38 -------------------------------------------------------------------------- */ [data-theme="twitter"] { --bs-primary: #1e9df1; --bs-primary-rgb: 30, 157, 241; --bs-body-bg: #eef2f5; --bs-body-color: #0f1419; --bs-secondary: #0f1419; --bs-secondary-rgb: 15, 20, 25; --bs-tertiary-bg: #E5E5E6; --bs-secondary-color: #0f1419; --bs-danger: #f4212e; --bs-danger-rgb: 244, 33, 46; --bs-border-color: #e1eaef; --bs-card-bg: #ffffff; --bs-card-color: #0f1419; --bs-link-color: #1e9df1; --bs-link-hover-color: #1a8cd8; --bs-border-radius: 1.3rem; --bs-success: #17bf63; --bs-success-rgb: 23, 191, 99; --theme-navbar-bg: #1e9df1; --theme-navbar-color: #ffffff; --theme-accent: #E3ECF6; --theme-accent-foreground: #1e9df1; --theme-ring: #1da1f2; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #ffffff; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #e1eaef; } /* -------------------------------------------------------------------------- Cosmic Night Deep purple on pastel lavender primary #6e56cf L=0.14, secondary #e4dfff L=0.76, danger #ff5470 L=0.29 -------------------------------------------------------------------------- */ [data-theme="cosmic-night"] { --bs-primary: #6e56cf; --bs-primary-rgb: 110, 86, 207; --bs-body-bg: #ededf8; --bs-body-color: #2a2a4a; --bs-secondary: #e4dfff; --bs-secondary-rgb: 228, 223, 255; --bs-tertiary-bg: #f0f0fa; --bs-secondary-color: #6c6c8a; --bs-danger: #ff5470; --bs-danger-rgb: 255, 84, 112; --bs-border-color: #e0e0f0; --bs-card-bg: #ffffff; --bs-card-color: #2a2a4a; --bs-link-color: #6e56cf; --bs-link-hover-color: #5a42b5; --bs-border-radius: 0.5rem; --theme-navbar-bg: #6e56cf; --theme-navbar-color: #ffffff; --theme-accent: #d8e6ff; --theme-accent-foreground: #2a2a4a; --theme-ring: #6e56cf; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #e0e0f0; } /* -------------------------------------------------------------------------- Tangerine Bold orange on cool gray primary #e05d38 L=0.24, secondary #f3f4f6 L=0.90, danger #ef4444 L=0.23 -------------------------------------------------------------------------- */ [data-theme="tangerine"] { --bs-primary: #e05d38; --bs-primary-rgb: 224, 93, 56; --bs-body-bg: #e8ebed; --bs-body-color: #333333; --bs-secondary: #f3f4f6; --bs-secondary-rgb: 243, 244, 246; --bs-tertiary-bg: #f9fafb; --bs-secondary-color: #6b7280; --bs-danger: #ef4444; --bs-danger-rgb: 239, 68, 68; --bs-border-color: #dcdfe2; --bs-card-bg: #ffffff; --bs-card-color: #333333; --bs-link-color: #e05d38; --bs-link-hover-color: #c44a28; --bs-border-radius: 0.75rem; --theme-navbar-bg: #e05d38; --theme-navbar-color: #ffffff; --theme-accent: #d6e4f0; --theme-accent-foreground: #1e3a8a; --theme-ring: #e05d38; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #dcdfe2; } /* -------------------------------------------------------------------------- Amethyst Haze Soft purple-rose pastels primary #8a79ab L=0.22, secondary #dfd9ec L=0.71, danger #d95c5c L=0.23 -------------------------------------------------------------------------- */ [data-theme="amethyst-haze"] { --bs-primary: #8a79ab; --bs-primary-rgb: 138, 121, 171; --bs-body-bg: #f0eff5; --bs-body-color: #3d3c4f; --bs-secondary: #dfd9ec; --bs-secondary-rgb: 223, 217, 236; --bs-tertiary-bg: #dcd9e3; --bs-secondary-color: #6b6880; --bs-danger: #d95c5c; --bs-danger-rgb: 217, 92, 92; --bs-border-color: #cec9d9; --bs-card-bg: #ffffff; --bs-card-color: #3d3c4f; --bs-link-color: #8a79ab; --bs-link-hover-color: #6f5f93; --bs-border-radius: 0.5rem; --theme-navbar-bg: #8a79ab; --theme-navbar-color: #f8f7fa; --theme-accent: #e6a5b8; --theme-accent-foreground: #4b2e36; --theme-ring: #8a79ab; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #eae7f0; } /* -------------------------------------------------------------------------- Claude Warm terracotta on cream primary #c96442 L=0.22, secondary #e9e6dc L=0.79, danger #141413 L=0.01 -------------------------------------------------------------------------- */ [data-theme="claude"] { --bs-primary: #c96442; --bs-primary-rgb: 201, 100, 66; --bs-body-bg: #f0efeb; --bs-body-color: #3d3929; --bs-secondary: #e9e6dc; --bs-secondary-rgb: 233, 230, 220; --bs-tertiary-bg: #ede9de; --bs-secondary-color: #83827d; --bs-danger: #141413; --bs-danger-rgb: 20, 20, 19; --bs-border-color: #dad9d4; --bs-card-bg: #ffffff; --bs-card-color: #3d3929; --bs-link-color: #c96442; --bs-link-hover-color: #b05730; --bs-border-radius: 0.5rem; --theme-navbar-bg: #c96442; --theme-navbar-color: #ffffff; --theme-accent: #e9e6dc; --theme-accent-foreground: #28261b; --theme-ring: #c96442; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #b4b2a7; } /* -------------------------------------------------------------------------- Solar Dusk Amber-orange warmth on parchment primary #B45309 L=0.16, secondary #E4C090 L=0.56, danger #991B1B L=0.08 -------------------------------------------------------------------------- */ [data-theme="solar-dusk"] { --bs-primary: #B45309; --bs-primary-rgb: 180, 83, 9; --bs-body-bg: #f0ede6; --bs-body-color: #4A3B33; --bs-secondary: #E4C090; --bs-secondary-rgb: 228, 192, 144; --bs-tertiary-bg: #F1E9DA; --bs-secondary-color: #78716C; --bs-danger: #991B1B; --bs-danger-rgb: 153, 27, 27; --bs-border-color: #E4D9BC; --bs-card-bg: #ffffff; --bs-card-color: #4A3B33; --bs-link-color: #B45309; --bs-link-hover-color: #92400e; --bs-border-radius: 0.3rem; --theme-navbar-bg: #B45309; --theme-navbar-color: #FFFFFF; --theme-accent: #f2daba; --theme-accent-foreground: #57534E; --theme-ring: #B45309; --theme-primary-foreground: #FFFFFF; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #E4D9BC; } /* -------------------------------------------------------------------------- Sunset Horizon Coral-orange gradient feel primary #ff7e5f L=0.37, secondary #ffedea L=0.88, danger #e63946 L=0.20 -------------------------------------------------------------------------- */ [data-theme="sunset-horizon"] { --bs-primary: #ff7e5f; --bs-primary-rgb: 255, 126, 95; --bs-body-bg: #f5f0ed; --bs-body-color: #3d3436; --bs-secondary: #ffedea; --bs-secondary-rgb: 255, 237, 234; --bs-tertiary-bg: #fff0eb; --bs-secondary-color: #78716C; --bs-danger: #e63946; --bs-danger-rgb: 230, 57, 70; --bs-border-color: #ffe0d6; --bs-card-bg: #ffffff; --bs-card-color: #3d3436; --bs-link-color: #ff7e5f; --bs-link-hover-color: #e66a4d; --bs-border-radius: 0.625rem; --theme-navbar-bg: #ff7e5f; --theme-navbar-color: #ffffff; --theme-accent: #feb47b; --theme-accent-foreground: #3d3436; --theme-ring: #ff7e5f; --theme-primary-foreground: #1a1a1a; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #ffe0d6; } /* -------------------------------------------------------------------------- Pastel Dreams Soft violet pastels with large border radius primary #a78bfa L=0.34, secondary #e9d8fd L=0.74, danger #fca5a5 L=0.50 -------------------------------------------------------------------------- */ [data-theme="pastel-dreams"] { --bs-primary: #a78bfa; --bs-primary-rgb: 167, 139, 250; --bs-body-bg: #eeebf5; --bs-body-color: #374151; --bs-secondary: #e9d8fd; --bs-secondary-rgb: 233, 216, 253; --bs-tertiary-bg: #f3e8ff; --bs-secondary-color: #6b7280; --bs-danger: #fca5a5; --bs-danger-rgb: 252, 165, 165; --bs-border-color: #e9d8fd; --bs-card-bg: #ffffff; --bs-card-color: #374151; --bs-link-color: #a78bfa; --bs-link-hover-color: #8b5cf6; --bs-border-radius: 1.5rem; --theme-navbar-bg: #a78bfa; --theme-navbar-color: #ffffff; --theme-accent: #f3e5f5; --theme-accent-foreground: #374151; --theme-ring: #a78bfa; --theme-primary-foreground: #1a1a1a; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #1a1a1a; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #e9d8fd; } /* -------------------------------------------------------------------------- Quantum Rose Hot pink/magenta on blush background primary #e6067a L=0.18, secondary #ffd6ff L=0.77, danger #d13869 L=0.17 -------------------------------------------------------------------------- */ [data-theme="quantum-rose"] { --bs-primary: #e6067a; --bs-primary-rgb: 230, 6, 122; --bs-body-bg: #f5e8f0; --bs-body-color: #91185c; --bs-secondary: #ffd6ff; --bs-secondary-rgb: 255, 214, 255; --bs-tertiary-bg: #ffe3f2; --bs-secondary-color: #c04283; --bs-danger: #d13869; --bs-danger-rgb: 209, 56, 105; --bs-border-color: #ffc7e6; --bs-card-bg: #ffffff; --bs-card-color: #91185c; --bs-link-color: #e6067a; --bs-link-hover-color: #c00566; --bs-border-radius: 0.5rem; --theme-navbar-bg: #e6067a; --theme-navbar-color: #ffffff; --theme-accent: #ffc1e3; --theme-accent-foreground: #91185c; --theme-ring: #e6067a; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #ffd6ff; } /* -------------------------------------------------------------------------- Bubblegum Playful pink, teal, and yellow primary #d04f99 L=0.21, secondary #8acfd1 L=0.55, danger #f96f70 L=0.33 -------------------------------------------------------------------------- */ [data-theme="bubblegum"] { --bs-primary: #d04f99; --bs-primary-rgb: 208, 79, 153; --bs-body-bg: #f0e0e8; --bs-body-color: #5b5b5b; --bs-secondary: #8acfd1; --bs-secondary-rgb: 138, 207, 209; --bs-tertiary-bg: #b2e1eb; --bs-secondary-color: #7a7a7a; --bs-danger: #f96f70; --bs-danger-rgb: 249, 111, 112; --bs-border-color: #d04f99; --bs-card-bg: #ffffff; --bs-card-color: #5b5b5b; --bs-link-color: #d04f99; --bs-link-hover-color: #b83d82; --bs-border-radius: 0.4rem; --theme-navbar-bg: #d04f99; --theme-navbar-color: #ffffff; --theme-accent: #fbe2a7; --theme-accent-foreground: #333333; --theme-ring: #e670ab; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #e4e4e4; } /* -------------------------------------------------------------------------- Claymorphism Soft clay/stone tones with rounded corners and inset shadows primary #6366f1 L=0.19, secondary #d6d3d1 L=0.65, danger #ef4444 L=0.23 -------------------------------------------------------------------------- */ [data-theme="claymorphism"] { --bs-primary: #6366f1; --bs-primary-rgb: 99, 102, 241; --bs-body-bg: #e2e0df; --bs-body-color: #1e293b; --bs-secondary: #d6d3d1; --bs-secondary-rgb: 214, 211, 209; --bs-tertiary-bg: #e7e5e4; --bs-secondary-color: #6b7280; --bs-danger: #ef4444; --bs-danger-rgb: 239, 68, 68; --bs-border-color: #d6d3d1; --bs-card-bg: #ffffff; --bs-card-color: #1e293b; --bs-link-color: #6366f1; --bs-link-hover-color: #4f46e5; --bs-border-radius: 1.25rem; --theme-navbar-bg: #6366f1; --theme-navbar-color: #ffffff; --theme-accent: #f3e5f5; --theme-accent-foreground: #374151; --theme-ring: #6366f1; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #d6d3d1; } /* -------------------------------------------------------------------------- Vintage Paper Sepia-toned warm paper colors primary #a67c52 L=0.23, secondary #e2d8c3 L=0.69, danger #b54a35 L=0.15 -------------------------------------------------------------------------- */ [data-theme="vintage-paper"] { --bs-primary: #a67c52; --bs-primary-rgb: 166, 124, 82; --bs-body-bg: #ede9de; --bs-body-color: #4a3f35; --bs-secondary: #e2d8c3; --bs-secondary-rgb: 226, 216, 195; --bs-tertiary-bg: #ece5d8; --bs-secondary-color: #7d6b56; --bs-danger: #b54a35; --bs-danger-rgb: 181, 74, 53; --bs-border-color: #dbd0ba; --bs-card-bg: #ffffff; --bs-card-color: #4a3f35; --bs-link-color: #a67c52; --bs-link-hover-color: #8d6e4c; --bs-border-radius: 0.25rem; --theme-navbar-bg: #a67c52; --theme-navbar-color: #ffffff; --theme-accent: #d4c8aa; --theme-accent-foreground: #4a3f35; --theme-ring: #a67c52; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #dbd0ba; } /* -------------------------------------------------------------------------- Sage Garden Muted sage green on warm paper primary #7c9082 L=0.26, secondary #ced4bf L=0.64, danger #c73e3a L=0.16 -------------------------------------------------------------------------- */ [data-theme="sage-garden"] { --bs-primary: #7c9082; --bs-primary-rgb: 124, 144, 130; --bs-body-bg: #eeede9; --bs-body-color: #1a1f2e; --bs-secondary: #ced4bf; --bs-secondary-rgb: 206, 212, 191; --bs-tertiary-bg: #e8e6e1; --bs-secondary-color: #6b7280; --bs-danger: #c73e3a; --bs-danger-rgb: 199, 62, 58; --bs-border-color: #e8e6e1; --bs-card-bg: #ffffff; --bs-card-color: #1a1f2e; --bs-link-color: #7c9082; --bs-link-hover-color: #5f7265; --bs-border-radius: 0.35rem; --theme-navbar-bg: #7c9082; --theme-navbar-color: #ffffff; --theme-accent: #bfc9bb; --theme-accent-foreground: #1a1f2e; --theme-ring: #7c9082; --theme-primary-foreground: #ffffff; --theme-secondary-foreground: #1a1a1a; --theme-danger-foreground: #ffffff; --theme-success-foreground: #ffffff; --theme-warning-foreground: #1a1a1a; --theme-info-foreground: #1a1a1a; --theme-input-border: #e8e6e1; } /* ========================================================================== Shared Theme Utilities Apply navbar, buttons, forms styling using theme custom properties ========================================================================== */ /* Navbar theming */ [data-theme]:not([data-theme="basic"]) .navbar { background-color: var(--theme-navbar-bg) !important; color: var(--theme-navbar-color) !important; } [data-theme]:not([data-theme="basic"]) .navbar .navbar-brand, [data-theme]:not([data-theme="basic"]) .navbar .nav-link { color: var(--theme-navbar-color) !important; } [data-theme]:not([data-theme="basic"]) .navbar .nav-link:hover { opacity: 0.85; } /* -------------------------------------------------------------------------- Button theming — explicit property overrides with !important Bootstrap 5.3 .btn uses --bs-btn-* custom properties internally, but Bootstrap's compiled .btn-primary etc. set hardcoded values for those properties. We override both the custom properties AND the explicit CSS properties to guarantee theme colors win regardless of specificity resolution or custom-property inheritance edge cases. -------------------------------------------------------------------------- */ /* --- Primary button --- */ [data-theme]:not([data-theme="basic"]) .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-color: var(--theme-primary-foreground); --bs-btn-hover-bg: var(--bs-link-hover-color); --bs-btn-hover-border-color: var(--bs-link-hover-color); --bs-btn-hover-color: var(--theme-primary-foreground); --bs-btn-active-bg: var(--bs-link-hover-color); --bs-btn-active-border-color: var(--bs-link-hover-color); --bs-btn-active-color: var(--theme-primary-foreground); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--theme-primary-foreground); background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: var(--theme-primary-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-primary:hover { background-color: var(--bs-link-hover-color) !important; border-color: var(--bs-link-hover-color) !important; color: var(--theme-primary-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-primary:active, [data-theme]:not([data-theme="basic"]) .btn-primary.active, [data-theme]:not([data-theme="basic"]) .btn-primary:first-child:active { background-color: var(--bs-link-hover-color) !important; border-color: var(--bs-link-hover-color) !important; color: var(--theme-primary-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-primary:focus-visible { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: var(--theme-primary-foreground) !important; box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.5) !important; } [data-theme]:not([data-theme="basic"]) .btn-primary:disabled, [data-theme]:not([data-theme="basic"]) .btn-primary.disabled { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: var(--theme-primary-foreground) !important; opacity: 0.65; } /* --- Outline primary button --- */ [data-theme]:not([data-theme="basic"]) .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-hover-color: var(--theme-primary-foreground); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-active-color: var(--theme-primary-foreground); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; background-color: transparent !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-primary:hover { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: var(--theme-primary-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-primary:active, [data-theme]:not([data-theme="basic"]) .btn-outline-primary.active, [data-theme]:not([data-theme="basic"]) .btn-outline-primary:first-child:active { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: var(--theme-primary-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-primary:focus-visible { box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.5) !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-primary:disabled, [data-theme]:not([data-theme="basic"]) .btn-outline-primary.disabled { color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; background-color: transparent !important; opacity: 0.65; } /* --- Secondary button --- */ [data-theme]:not([data-theme="basic"]) .btn-secondary { --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-color: var(--theme-secondary-foreground); --bs-btn-hover-color: var(--theme-secondary-foreground); --bs-btn-active-color: var(--theme-secondary-foreground); --bs-btn-disabled-bg: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); --bs-btn-disabled-color: var(--theme-secondary-foreground); background-color: var(--bs-secondary) !important; border-color: var(--bs-secondary) !important; color: var(--theme-secondary-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-secondary:hover { background-color: var(--bs-secondary) !important; border-color: var(--bs-secondary) !important; color: var(--theme-secondary-foreground) !important; filter: brightness(0.92); } [data-theme]:not([data-theme="basic"]) .btn-secondary:active, [data-theme]:not([data-theme="basic"]) .btn-secondary.active, [data-theme]:not([data-theme="basic"]) .btn-secondary:first-child:active { background-color: var(--bs-secondary) !important; border-color: var(--bs-secondary) !important; color: var(--theme-secondary-foreground) !important; filter: brightness(0.88); } [data-theme]:not([data-theme="basic"]) .btn-secondary:focus-visible { box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-rgb), 0.5) !important; } [data-theme]:not([data-theme="basic"]) .btn-secondary:disabled, [data-theme]:not([data-theme="basic"]) .btn-secondary.disabled { background-color: var(--bs-secondary) !important; border-color: var(--bs-secondary) !important; color: var(--theme-secondary-foreground) !important; opacity: 0.65; } /* --- Outline secondary button --- */ [data-theme]:not([data-theme="basic"]) .btn-outline-secondary { --bs-btn-color: var(--theme-secondary-foreground); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-bg: var(--bs-secondary); --bs-btn-hover-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--theme-secondary-foreground); --bs-btn-active-bg: var(--bs-secondary); --bs-btn-active-border-color: var(--bs-secondary); --bs-btn-active-color: var(--theme-secondary-foreground); --bs-btn-disabled-color: var(--theme-secondary-foreground); --bs-btn-disabled-border-color: var(--bs-secondary); color: var(--theme-secondary-foreground) !important; border-color: var(--bs-secondary) !important; background-color: transparent !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-secondary:hover { background-color: var(--bs-secondary) !important; border-color: var(--bs-secondary) !important; color: var(--theme-secondary-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-secondary:active, [data-theme]:not([data-theme="basic"]) .btn-outline-secondary.active, [data-theme]:not([data-theme="basic"]) .btn-outline-secondary:first-child:active { background-color: var(--bs-secondary) !important; border-color: var(--bs-secondary) !important; color: var(--theme-secondary-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-secondary:focus-visible { box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-rgb), 0.5) !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-secondary:disabled, [data-theme]:not([data-theme="basic"]) .btn-outline-secondary.disabled { color: var(--bs-secondary) !important; border-color: var(--bs-secondary) !important; background-color: transparent !important; opacity: 0.65; } /* --- Danger button --- */ [data-theme]:not([data-theme="basic"]) .btn-danger { --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-color: var(--theme-danger-foreground); --bs-btn-hover-color: var(--theme-danger-foreground); --bs-btn-active-color: var(--theme-danger-foreground); --bs-btn-disabled-bg: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); --bs-btn-disabled-color: var(--theme-danger-foreground); background-color: var(--bs-danger) !important; border-color: var(--bs-danger) !important; color: var(--theme-danger-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-danger:hover { background-color: var(--bs-danger) !important; border-color: var(--bs-danger) !important; color: var(--theme-danger-foreground) !important; filter: brightness(0.88); } [data-theme]:not([data-theme="basic"]) .btn-danger:active, [data-theme]:not([data-theme="basic"]) .btn-danger.active, [data-theme]:not([data-theme="basic"]) .btn-danger:first-child:active { background-color: var(--bs-danger) !important; border-color: var(--bs-danger) !important; color: var(--theme-danger-foreground) !important; filter: brightness(0.82); } [data-theme]:not([data-theme="basic"]) .btn-danger:focus-visible { box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.5) !important; } [data-theme]:not([data-theme="basic"]) .btn-danger:disabled, [data-theme]:not([data-theme="basic"]) .btn-danger.disabled { background-color: var(--bs-danger) !important; border-color: var(--bs-danger) !important; color: var(--theme-danger-foreground) !important; opacity: 0.65; } /* --- Outline danger button --- */ [data-theme]:not([data-theme="basic"]) .btn-outline-danger { --bs-btn-color: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger); --bs-btn-hover-color: var(--theme-danger-foreground); --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger); --bs-btn-active-color: var(--theme-danger-foreground); --bs-btn-disabled-color: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); color: var(--bs-danger) !important; border-color: var(--bs-danger) !important; background-color: transparent !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-danger:hover { background-color: var(--bs-danger) !important; border-color: var(--bs-danger) !important; color: var(--theme-danger-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-danger:active, [data-theme]:not([data-theme="basic"]) .btn-outline-danger.active, [data-theme]:not([data-theme="basic"]) .btn-outline-danger:first-child:active { background-color: var(--bs-danger) !important; border-color: var(--bs-danger) !important; color: var(--theme-danger-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-danger:focus-visible { box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.5) !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-danger:disabled, [data-theme]:not([data-theme="basic"]) .btn-outline-danger.disabled { color: var(--bs-danger) !important; border-color: var(--bs-danger) !important; background-color: transparent !important; opacity: 0.65; } /* --- Success button --- */ [data-theme]:not([data-theme="basic"]) .btn-success { --bs-btn-bg: var(--bs-success, #198754); --bs-btn-border-color: var(--bs-success, #198754); --bs-btn-color: var(--theme-success-foreground); --bs-btn-hover-color: var(--theme-success-foreground); --bs-btn-active-color: var(--theme-success-foreground); --bs-btn-disabled-bg: var(--bs-success, #198754); --bs-btn-disabled-border-color: var(--bs-success, #198754); --bs-btn-disabled-color: var(--theme-success-foreground); background-color: var(--bs-success, #198754) !important; border-color: var(--bs-success, #198754) !important; color: var(--theme-success-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-success:hover { background-color: var(--bs-success, #198754) !important; border-color: var(--bs-success, #198754) !important; color: var(--theme-success-foreground) !important; filter: brightness(0.88); } [data-theme]:not([data-theme="basic"]) .btn-success:active, [data-theme]:not([data-theme="basic"]) .btn-success.active, [data-theme]:not([data-theme="basic"]) .btn-success:first-child:active { background-color: var(--bs-success, #198754) !important; border-color: var(--bs-success, #198754) !important; color: var(--theme-success-foreground) !important; filter: brightness(0.82); } [data-theme]:not([data-theme="basic"]) .btn-success:focus-visible { box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb, 25, 135, 84), 0.5) !important; } [data-theme]:not([data-theme="basic"]) .btn-success:disabled, [data-theme]:not([data-theme="basic"]) .btn-success.disabled { background-color: var(--bs-success, #198754) !important; border-color: var(--bs-success, #198754) !important; color: var(--theme-success-foreground) !important; opacity: 0.65; } /* --- Outline success button --- */ [data-theme]:not([data-theme="basic"]) .btn-outline-success { --bs-btn-color: var(--bs-success, #198754); --bs-btn-border-color: var(--bs-success, #198754); --bs-btn-hover-bg: var(--bs-success, #198754); --bs-btn-hover-border-color: var(--bs-success, #198754); --bs-btn-hover-color: var(--theme-success-foreground); --bs-btn-active-bg: var(--bs-success, #198754); --bs-btn-active-border-color: var(--bs-success, #198754); --bs-btn-active-color: var(--theme-success-foreground); --bs-btn-disabled-color: var(--bs-success, #198754); --bs-btn-disabled-border-color: var(--bs-success, #198754); color: var(--bs-success, #198754) !important; border-color: var(--bs-success, #198754) !important; background-color: transparent !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-success:hover { background-color: var(--bs-success, #198754) !important; border-color: var(--bs-success, #198754) !important; color: var(--theme-success-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-success:active, [data-theme]:not([data-theme="basic"]) .btn-outline-success.active, [data-theme]:not([data-theme="basic"]) .btn-outline-success:first-child:active { background-color: var(--bs-success, #198754) !important; border-color: var(--bs-success, #198754) !important; color: var(--theme-success-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-success:focus-visible { box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb, 25, 135, 84), 0.5) !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-success:disabled, [data-theme]:not([data-theme="basic"]) .btn-outline-success.disabled { color: var(--bs-success, #198754) !important; border-color: var(--bs-success, #198754) !important; background-color: transparent !important; opacity: 0.65; } /* --- Warning button --- */ [data-theme]:not([data-theme="basic"]) .btn-warning { --bs-btn-bg: var(--bs-warning, #ffc107); --bs-btn-border-color: var(--bs-warning, #ffc107); --bs-btn-color: var(--theme-warning-foreground); --bs-btn-hover-color: var(--theme-warning-foreground); --bs-btn-active-color: var(--theme-warning-foreground); --bs-btn-disabled-bg: var(--bs-warning, #ffc107); --bs-btn-disabled-border-color: var(--bs-warning, #ffc107); --bs-btn-disabled-color: var(--theme-warning-foreground); background-color: var(--bs-warning, #ffc107) !important; border-color: var(--bs-warning, #ffc107) !important; color: var(--theme-warning-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-warning:hover { background-color: var(--bs-warning, #ffc107) !important; border-color: var(--bs-warning, #ffc107) !important; color: var(--theme-warning-foreground) !important; filter: brightness(0.92); } [data-theme]:not([data-theme="basic"]) .btn-warning:active, [data-theme]:not([data-theme="basic"]) .btn-warning.active, [data-theme]:not([data-theme="basic"]) .btn-warning:first-child:active { background-color: var(--bs-warning, #ffc107) !important; border-color: var(--bs-warning, #ffc107) !important; color: var(--theme-warning-foreground) !important; filter: brightness(0.88); } [data-theme]:not([data-theme="basic"]) .btn-warning:focus-visible { box-shadow: 0 0 0 0.25rem rgba(var(--bs-warning-rgb, 255, 193, 7), 0.5) !important; } [data-theme]:not([data-theme="basic"]) .btn-warning:disabled, [data-theme]:not([data-theme="basic"]) .btn-warning.disabled { background-color: var(--bs-warning, #ffc107) !important; border-color: var(--bs-warning, #ffc107) !important; color: var(--theme-warning-foreground) !important; opacity: 0.65; } /* --- Outline warning button --- */ [data-theme]:not([data-theme="basic"]) .btn-outline-warning { --bs-btn-color: var(--bs-warning, #ffc107); --bs-btn-border-color: var(--bs-warning, #ffc107); --bs-btn-hover-bg: var(--bs-warning, #ffc107); --bs-btn-hover-border-color: var(--bs-warning, #ffc107); --bs-btn-hover-color: var(--theme-warning-foreground); --bs-btn-active-bg: var(--bs-warning, #ffc107); --bs-btn-active-border-color: var(--bs-warning, #ffc107); --bs-btn-active-color: var(--theme-warning-foreground); --bs-btn-disabled-color: var(--bs-warning, #ffc107); --bs-btn-disabled-border-color: var(--bs-warning, #ffc107); color: var(--bs-warning, #ffc107) !important; border-color: var(--bs-warning, #ffc107) !important; background-color: transparent !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-warning:hover { background-color: var(--bs-warning, #ffc107) !important; border-color: var(--bs-warning, #ffc107) !important; color: var(--theme-warning-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-warning:active, [data-theme]:not([data-theme="basic"]) .btn-outline-warning.active, [data-theme]:not([data-theme="basic"]) .btn-outline-warning:first-child:active { background-color: var(--bs-warning, #ffc107) !important; border-color: var(--bs-warning, #ffc107) !important; color: var(--theme-warning-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-warning:focus-visible { box-shadow: 0 0 0 0.25rem rgba(var(--bs-warning-rgb, 255, 193, 7), 0.5) !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-warning:disabled, [data-theme]:not([data-theme="basic"]) .btn-outline-warning.disabled { color: var(--bs-warning, #ffc107) !important; border-color: var(--bs-warning, #ffc107) !important; background-color: transparent !important; opacity: 0.65; } /* --- Info button --- */ [data-theme]:not([data-theme="basic"]) .btn-info { --bs-btn-bg: var(--bs-info, #0dcaf0); --bs-btn-border-color: var(--bs-info, #0dcaf0); --bs-btn-color: var(--theme-info-foreground); --bs-btn-hover-color: var(--theme-info-foreground); --bs-btn-active-color: var(--theme-info-foreground); --bs-btn-disabled-bg: var(--bs-info, #0dcaf0); --bs-btn-disabled-border-color: var(--bs-info, #0dcaf0); --bs-btn-disabled-color: var(--theme-info-foreground); background-color: var(--bs-info, #0dcaf0) !important; border-color: var(--bs-info, #0dcaf0) !important; color: var(--theme-info-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-info:hover { background-color: var(--bs-info, #0dcaf0) !important; border-color: var(--bs-info, #0dcaf0) !important; color: var(--theme-info-foreground) !important; filter: brightness(0.88); } [data-theme]:not([data-theme="basic"]) .btn-info:active, [data-theme]:not([data-theme="basic"]) .btn-info.active, [data-theme]:not([data-theme="basic"]) .btn-info:first-child:active { background-color: var(--bs-info, #0dcaf0) !important; border-color: var(--bs-info, #0dcaf0) !important; color: var(--theme-info-foreground) !important; filter: brightness(0.82); } [data-theme]:not([data-theme="basic"]) .btn-info:focus-visible { box-shadow: 0 0 0 0.25rem rgba(var(--bs-info-rgb, 13, 202, 240), 0.5) !important; } [data-theme]:not([data-theme="basic"]) .btn-info:disabled, [data-theme]:not([data-theme="basic"]) .btn-info.disabled { background-color: var(--bs-info, #0dcaf0) !important; border-color: var(--bs-info, #0dcaf0) !important; color: var(--theme-info-foreground) !important; opacity: 0.65; } /* --- Outline info button --- */ [data-theme]:not([data-theme="basic"]) .btn-outline-info { --bs-btn-color: var(--bs-info, #0dcaf0); --bs-btn-border-color: var(--bs-info, #0dcaf0); --bs-btn-hover-bg: var(--bs-info, #0dcaf0); --bs-btn-hover-border-color: var(--bs-info, #0dcaf0); --bs-btn-hover-color: var(--theme-info-foreground); --bs-btn-active-bg: var(--bs-info, #0dcaf0); --bs-btn-active-border-color: var(--bs-info, #0dcaf0); --bs-btn-active-color: var(--theme-info-foreground); --bs-btn-disabled-color: var(--bs-info, #0dcaf0); --bs-btn-disabled-border-color: var(--bs-info, #0dcaf0); color: var(--bs-info, #0dcaf0) !important; border-color: var(--bs-info, #0dcaf0) !important; background-color: transparent !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-info:hover { background-color: var(--bs-info, #0dcaf0) !important; border-color: var(--bs-info, #0dcaf0) !important; color: var(--theme-info-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-info:active, [data-theme]:not([data-theme="basic"]) .btn-outline-info.active, [data-theme]:not([data-theme="basic"]) .btn-outline-info:first-child:active { background-color: var(--bs-info, #0dcaf0) !important; border-color: var(--bs-info, #0dcaf0) !important; color: var(--theme-info-foreground) !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-info:focus-visible { box-shadow: 0 0 0 0.25rem rgba(var(--bs-info-rgb, 13, 202, 240), 0.5) !important; } [data-theme]:not([data-theme="basic"]) .btn-outline-info:disabled, [data-theme]:not([data-theme="basic"]) .btn-outline-info.disabled { color: var(--bs-info, #0dcaf0) !important; border-color: var(--bs-info, #0dcaf0) !important; background-color: transparent !important; opacity: 0.65; } /* Card theming — always white inside */ [data-theme]:not([data-theme="basic"]) .card { --bs-card-bg: #ffffff; --bs-card-color: var(--bs-card-color); --bs-card-border-color: var(--bs-border-color); background-color: #ffffff !important; } /* Card header — white background with theme border */ [data-theme]:not([data-theme="basic"]) .card-header { background-color: #ffffff !important; border-bottom-color: var(--bs-border-color); color: var(--bs-body-color); } /* Table light header theming — use subtle theme background */ [data-theme]:not([data-theme="basic"]) .table-light { --bs-table-bg: #f8f9fa; --bs-table-color: var(--bs-body-color); } /* Text muted — ensure readable on white card backgrounds */ [data-theme]:not([data-theme="basic"]) .text-muted { color: var(--bs-secondary-color, #6c757d) !important; } /* Dropdown menu theming */ [data-theme]:not([data-theme="basic"]) .dropdown-menu { background-color: #ffffff; border-color: var(--bs-border-color); } [data-theme]:not([data-theme="basic"]) .dropdown-item { color: var(--bs-body-color); } [data-theme]:not([data-theme="basic"]) .dropdown-item:hover, [data-theme]:not([data-theme="basic"]) .dropdown-item:focus { background-color: var(--bs-tertiary-bg, #f8f9fa); color: var(--bs-body-color); } /* Footer theming */ [data-theme]:not([data-theme="basic"]) .footer { background-color: #ffffff; border-top-color: var(--bs-border-color); color: var(--bs-secondary-color, #6c757d); } /* Form control theming */ [data-theme]:not([data-theme="basic"]) .form-control, [data-theme]:not([data-theme="basic"]) .form-select { border-color: var(--theme-input-border, var(--bs-border-color)); } [data-theme]:not([data-theme="basic"]) .form-control:focus, [data-theme]:not([data-theme="basic"]) .form-select:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); } /* Link theming */ [data-theme]:not([data-theme="basic"]) a { color: var(--bs-link-color); } [data-theme]:not([data-theme="basic"]) a:hover { color: var(--bs-link-hover-color); } /* Badge theming */ [data-theme]:not([data-theme="basic"]) .badge.bg-primary { background-color: var(--bs-primary) !important; color: var(--theme-primary-foreground) !important; } /* Focus ring */ [data-theme]:not([data-theme="basic"]) :focus-visible { outline-color: var(--theme-ring, var(--bs-primary)); } /* ── Background Utility Foreground Colors ── */ [data-theme]:not([data-theme="basic"]) .bg-primary { color: var(--theme-primary-foreground, #fff) !important; } [data-theme]:not([data-theme="basic"]) .bg-secondary { color: var(--theme-secondary-foreground, #fff) !important; } [data-theme]:not([data-theme="basic"]) .bg-danger { color: var(--theme-danger-foreground, #fff) !important; } [data-theme]:not([data-theme="basic"]) .bg-success { color: var(--theme-success-foreground, #fff) !important; } [data-theme]:not([data-theme="basic"]) .bg-warning { color: var(--theme-warning-foreground, #212529) !important; } [data-theme]:not([data-theme="basic"]) .bg-info { color: var(--theme-info-foreground, #212529) !important; }