/* Default Theme (Relies on Bootstrap's dark mode via data-bs-theme="dark" on ) */ .theme-default { --bs-body-bg: #121212; /* Darker background */ --bs-body-color: #e0e0e0; } /* Light mode override for default theme */ .theme-default.theme-light { --bs-body-bg: #ffffff; --bs-body-color: #212529; } /* Seabreeze Theme - Dark Version */ .theme-seabreeze { --bs-body-bg: #001714; /* Much darker teal background */ --bs-body-color: #80cbc4; /* Light teal text */ --bs-link-color: #4db6ac; --bs-link-hover-color: #80cbc4; --bs-heading-color: #80cbc4; --bs-border-color: #00695c; --bs-navbar-color: rgba(128, 203, 196, 0.85); --bs-navbar-hover-color: rgba(128, 203, 196, 1); --bs-navbar-active-color: rgba(128, 203, 196, 1); --bs-emphasis-color: #b2dfdb; } /* Seabreeze Theme - Light Version */ .theme-seabreeze.theme-light { --bs-body-bg: #e0f2f1; /* Light teal background */ --bs-body-color: #004d40; /* Dark teal text */ --bs-link-color: #00695c; --bs-link-hover-color: #004d40; --bs-heading-color: #004d40; --bs-border-color: #4db6ac; --bs-navbar-color: rgba(0, 77, 64, 0.85); --bs-navbar-hover-color: rgba(0, 77, 64, 1); --bs-navbar-active-color: rgba(0, 77, 64, 1); --bs-emphasis-color: #00695c; } .theme-seabreeze body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } .theme-seabreeze .navbar { background-color: #00251e !important; /* Darker teal navbar */ } .theme-seabreeze.theme-light .navbar { background-color: #b2dfdb !important; /* Light teal navbar */ } .theme-seabreeze .btn-primary { --bs-btn-bg: #00796b; --bs-btn-border-color: #00796b; --bs-btn-hover-bg: #00897b; --bs-btn-hover-border-color: #00897b; --bs-btn-active-bg: #00897b; --bs-btn-active-border-color: #00897b; } /* Sakura Theme - Dark Version */ .theme-sakura { --bs-body-bg: #1a0a16; /* Much darker pink/purple background */ --bs-body-color: #f8bbd0; /* Light pink text */ --bs-link-color: #f48fb1; --bs-link-hover-color: #f8bbd0; --bs-heading-color: #f48fb1; --bs-border-color: #880e4f; --bs-navbar-color: rgba(248, 187, 208, 0.85); --bs-navbar-hover-color: rgba(248, 187, 208, 1); --bs-navbar-active-color: rgba(248, 187, 208, 1); --bs-emphasis-color: #f8bbd0; } /* Sakura Theme - Light Version */ .theme-sakura.theme-light { --bs-body-bg: #fce4ec; /* Light pink background */ --bs-body-color: #880e4f; /* Dark pink text */ --bs-link-color: #c2185b; --bs-link-hover-color: #880e4f; --bs-heading-color: #880e4f; --bs-border-color: #f48fb1; --bs-navbar-color: rgba(136, 14, 79, 0.85); --bs-navbar-hover-color: rgba(136, 14, 79, 1); --bs-navbar-active-color: rgba(136, 14, 79, 1); --bs-emphasis-color: #c2185b; } .theme-sakura body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } .theme-sakura .navbar { background-color: #4a0928 !important; /* Darker pink navbar */ } .theme-sakura.theme-light .navbar { background-color: #f8bbd0 !important; /* Light pink navbar */ } .theme-sakura .btn-primary { --bs-btn-bg: #c2185b; --bs-btn-border-color: #c2185b; --bs-btn-hover-bg: #e91e63; --bs-btn-hover-border-color: #e91e63; --bs-btn-active-bg: #e91e63; --bs-btn-active-border-color: #e91e63; } /* Matrix Theme (make even darker) */ .theme-matrix { --bs-body-bg: #000000; --bs-body-color: #00ff00; /* Green text */ --bs-link-color: #39ff14; /* Brighter green link */ --bs-link-hover-color: #90ee90; /* Lighter green hover */ --bs-heading-color: #00ff00; --bs-border-color: #003300; --bs-navbar-color: rgba(0, 255, 0, 0.85); --bs-navbar-hover-color: rgba(0, 255, 0, 1); --bs-navbar-active-color: rgba(0, 255, 0, 1); --bs-emphasis-color: #00ff00; } /* Matrix Theme - Light Version */ .theme-matrix.theme-light { --bs-body-bg: #e8f5e8; /* Light green background */ --bs-body-color: #006400; /* Dark green text */ --bs-link-color: #008000; --bs-link-hover-color: #006400; --bs-heading-color: #006400; --bs-border-color: #90ee90; --bs-navbar-color: rgba(0, 100, 0, 0.85); --bs-navbar-hover-color: rgba(0, 100, 0, 1); --bs-navbar-active-color: rgba(0, 100, 0, 1); --bs-emphasis-color: #008000; } .theme-matrix body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } .theme-matrix .navbar { background-color: #050505 !important; border-bottom: 1px solid #003300 !important; } .theme-matrix.theme-light .navbar { background-color: #c8e6c9 !important; border-bottom: 1px solid #90ee90 !important; } .theme-matrix .btn-primary { --bs-btn-color: #000; --bs-btn-bg: #00ff00; --bs-btn-border-color: #00ff00; --bs-btn-hover-bg: #39ff14; --bs-btn-hover-border-color: #39ff14; --bs-btn-active-bg: #90ee90; --bs-btn-active-border-color: #90ee90; } /* Intelligents Theme (make darker) */ .theme-intelligents { /* Dark theme with blue accents */ --bs-body-bg: #0a0a0a; --bs-body-color: #e0e0e0; --bs-link-color: #4fc3f7; /* Light blue */ --bs-link-hover-color: #81d4fa; --bs-heading-color: #ffffff; --bs-border-color: #424242; --bs-primary: #03a9f4; /* Primary blue */ --bs-primary-rgb: 3, 169, 244; --bs-secondary: #6c757d; --bs-secondary-rgb: 108, 117, 125; } /* Intelligents Theme - Light Version */ .theme-intelligents.theme-light { --bs-body-bg: #e3f2fd; --bs-body-color: #0d47a1; --bs-link-color: #0277bd; --bs-link-hover-color: #0d47a1; --bs-heading-color: #0d47a1; --bs-border-color: #90caf9; --bs-primary: #0288d1; --bs-primary-rgb: 2, 136, 209; --bs-secondary: #6c757d; --bs-secondary-rgb: 108, 117, 125; } .theme-intelligents body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } .theme-intelligents .navbar { background-color: #121212 !important; } .theme-intelligents.theme-light .navbar { background-color: #bbdefb !important; } /* Jedi Theme - Dark Version */ .theme-jedi { --bs-body-bg: #050d15; /* Much darker blue-gray */ --bs-body-color: #b3e5fc; /* Light blue text */ --bs-link-color: #4fc3f7; /* Light blue */ --bs-link-hover-color: #81d4fa; --bs-heading-color: #b3e5fc; /* Light blue */ --bs-border-color: #01579b; --bs-navbar-color: rgba(179, 229, 252, 0.85); --bs-navbar-hover-color: rgba(179, 229, 252, 1); --bs-navbar-active-color: rgba(179, 229, 252, 1); --bs-emphasis-color: #b3e5fc; } /* Jedi Theme - Light Version */ .theme-jedi.theme-light { --bs-body-bg: #e1f5fe; --bs-body-color: #01579b; --bs-link-color: #0277bd; --bs-link-hover-color: #01579b; --bs-heading-color: #01579b; --bs-border-color: #81d4fa; --bs-navbar-color: rgba(1, 87, 155, 0.85); --bs-navbar-hover-color: rgba(1, 87, 155, 1); --bs-navbar-active-color: rgba(1, 87, 155, 1); --bs-emphasis-color: #0277bd; } .theme-jedi body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } .theme-jedi .navbar { background-color: #01365e !important; /* Darker blue navbar */ } .theme-jedi.theme-light .navbar { background-color: #b3e5fc !important; /* Light blue navbar */ } .theme-jedi .btn-primary { --bs-btn-bg: #0288d1; --bs-btn-border-color: #0288d1; --bs-btn-hover-bg: #039be5; --bs-btn-hover-border-color: #03a9f4; --bs-btn-active-bg: #03a9f4; --bs-btn-active-border-color: #03a9f4; } /* Sith Theme (make darker) */ .theme-sith { --bs-body-bg: #0a0a0a; --bs-body-color: #e0e0e0; --bs-link-color: #ff5252; /* Red */ --bs-link-hover-color: #ff8a80; --bs-heading-color: #ff1744; /* Brighter Red */ --bs-border-color: #424242; --bs-primary: #d32f2f; /* Primary red */ --bs-primary-rgb: 211, 47, 47; } /* Sith Theme - Light Version */ .theme-sith.theme-light { --bs-body-bg: #ffebee; --bs-body-color: #b71c1c; --bs-link-color: #d32f2f; --bs-link-hover-color: #b71c1c; --bs-heading-color: #b71c1c; --bs-border-color: #ef9a9a; --bs-primary: #c62828; --bs-primary-rgb: 198, 40, 40; } .theme-sith body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } .theme-sith .navbar { background-color: #0f0f0f !important; border-bottom: 1px solid #d32f2f !important; } .theme-sith.theme-light .navbar { background-color: #ffcdd2 !important; border-bottom: 1px solid #ef9a9a !important; } /* Hobbiton Theme - Dark Version */ .theme-hobbiton { --bs-body-bg: #0d1707; /* Much darker forest green */ --bs-body-color: #dcedc8; /* Light green text */ --bs-link-color: #aed581; /* Light green */ --bs-link-hover-color: #c5e1a5; /* Lighter green */ --bs-heading-color: #aed581; /* Light green */ --bs-border-color: #33691e; --bs-navbar-color: rgba(220, 237, 200, 0.85); --bs-navbar-hover-color: rgba(220, 237, 200, 1); --bs-navbar-active-color: rgba(220, 237, 200, 1); --bs-emphasis-color: #dcedc8; } /* Hobbiton Theme - Light Version */ .theme-hobbiton.theme-light { --bs-body-bg: #f1f8e9; --bs-body-color: #33691e; --bs-link-color: #689f38; --bs-link-hover-color: #33691e; --bs-heading-color: #33691e; --bs-border-color: #aed581; --bs-navbar-color: rgba(51, 105, 30, 0.85); --bs-navbar-hover-color: rgba(51, 105, 30, 1); --bs-navbar-active-color: rgba(51, 105, 30, 1); --bs-emphasis-color: #689f38; } .theme-hobbiton body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } .theme-hobbiton .navbar { background-color: #1b3d0e !important; /* Darker green navbar */ } .theme-hobbiton.theme-light .navbar { background-color: #dcedc8 !important; /* Light green navbar */ } .theme-hobbiton .btn-primary { --bs-btn-bg: #689f38; --bs-btn-border-color: #689f38; --bs-btn-hover-bg: #7cb342; --bs-btn-hover-border-color: #7cb342; --bs-btn-active-bg: #7cb342; --bs-btn-active-border-color: #7cb342; } /* Mordor Theme (make darker) */ .theme-mordor { --bs-body-bg: #0d0d0d; /* Darker Gray */ --bs-body-color: #bdbdbd; /* Light Gray Text */ --bs-link-color: #ff9800; /* Orange */ --bs-link-hover-color: #fb8c00; /* Darker Orange */ --bs-heading-color: #e65100; /* Deep Orange */ --bs-border-color: #424242; --bs-primary: #ff5722; /* Deep Orange Primary */ --bs-primary-rgb: 255, 87, 34; } /* Mordor Theme - Light Version */ .theme-mordor.theme-light { --bs-body-bg: #fff3e0; --bs-body-color: #bf360c; --bs-link-color: #f57c00; --bs-link-hover-color: #bf360c; --bs-heading-color: #bf360c; --bs-border-color: #ffcc02; --bs-primary: #e65100; --bs-primary-rgb: 230, 81, 0; } .theme-mordor body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } .theme-mordor .navbar { background-color: #0a0a0a !important; border-bottom: 1px solid #e65100 !important; } .theme-mordor.theme-light .navbar { background-color: #ffcc02 !important; border-bottom: 1px solid #ff9800 !important; } /* Cyberpunk Theme (make darker) */ .theme-cyberpunk { --bs-body-bg: #05050f; /* Much darker blue */ --bs-body-color: #e0e0e0; --bs-link-color: #ff00ff; /* Magenta */ --bs-link-hover-color: #f0f; --bs-heading-color: #00ffff; /* Cyan */ --bs-border-color: #393977; --bs-primary: #ea00d9; /* Pink primary */ --bs-primary-rgb: 234, 0, 217; } /* Cyberpunk Theme - Light Version */ .theme-cyberpunk.theme-light { --bs-body-bg: #f3e5f5; --bs-body-color: #4a148c; --bs-link-color: #7b1fa2; --bs-link-hover-color: #4a148c; --bs-heading-color: #4a148c; --bs-border-color: #ce93d8; --bs-primary: #9c27b0; --bs-primary-rgb: 156, 39, 176; } .theme-cyberpunk body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } .theme-cyberpunk .navbar { background-color: #0a0a1d !important; border-bottom: 1px solid #ff00ff !important; } .theme-cyberpunk.theme-light .navbar { background-color: #e1bee7 !important; border-bottom: 1px solid #ce93d8 !important; } /* Apple Green Theme - Dark Version */ .theme-apple-green { --bs-body-bg: #141803; /* Much darker green-brown */ --bs-body-color: #e6ee9c; /* Light lime */ --bs-link-color: #d4e157; /* Lime */ --bs-link-hover-color: #e6ee9c; /* Lighter lime */ --bs-heading-color: #d4e157; /* Lime */ --bs-border-color: #827717; --bs-navbar-color: rgba(230, 238, 156, 0.85); --bs-navbar-hover-color: rgba(230, 238, 156, 1); --bs-navbar-active-color: rgba(230, 238, 156, 1); --bs-emphasis-color: #e6ee9c; } /* Apple Green Theme - Light Version */ .theme-apple-green.theme-light { --bs-body-bg: #f9fbe7; --bs-body-color: #827717; --bs-link-color: #9e9d24; --bs-link-hover-color: #827717; --bs-heading-color: #827717; --bs-border-color: #d4e157; --bs-navbar-color: rgba(130, 119, 23, 0.85); --bs-navbar-hover-color: rgba(130, 119, 23, 1); --bs-navbar-active-color: rgba(130, 119, 23, 1); --bs-emphasis-color: #9e9d24; } .theme-apple-green body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } .theme-apple-green .navbar { background-color: #4c4408 !important; /* Darker lime navbar */ } .theme-apple-green.theme-light .navbar { background-color: #f0f4c3 !important; /* Light lime navbar */ } .theme-apple-green .btn-primary { --bs-btn-bg: #9e9d24; --bs-btn-border-color: #9e9d24; --bs-btn-hover-bg: #afb42b; --bs-btn-hover-border-color: #afb42b; --bs-btn-active-bg: #afb42b; --bs-btn-active-border-color: #afb42b; } /* Turquoise Theme - Dark Version */ .theme-turquoise { --bs-body-bg: #001a17; /* Much darker teal */ --bs-body-color: #b2dfdb; /* Light teal */ --bs-link-color: #4db6ac; /* Teal */ --bs-link-hover-color: #80cbc4; /* Lighter teal */ --bs-heading-color: #4db6ac; /* Teal */ --bs-border-color: #00695c; --bs-navbar-color: rgba(178, 223, 219, 0.85); --bs-navbar-hover-color: rgba(178, 223, 219, 1); --bs-navbar-active-color: rgba(178, 223, 219, 1); --bs-emphasis-color: #b2dfdb; } /* Turquoise Theme - Light Version */ .theme-turquoise.theme-light { --bs-body-bg: #e0f2f1; --bs-body-color: #004d40; --bs-link-color: #00695c; --bs-link-hover-color: #004d40; --bs-heading-color: #004d40; --bs-border-color: #4db6ac; --bs-navbar-color: rgba(0, 77, 64, 0.85); --bs-navbar-hover-color: rgba(0, 77, 64, 1); --bs-navbar-active-color: rgba(0, 77, 64, 1); --bs-emphasis-color: #00695c; } .theme-turquoise body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } .theme-turquoise .navbar { background-color: #004640 !important; /* Darker teal navbar */ } .theme-turquoise.theme-light .navbar { background-color: #b2dfdb !important; /* Light teal navbar */ } .theme-turquoise .btn-primary { --bs-btn-bg: #00897b; --bs-btn-border-color: #00897b; --bs-btn-hover-bg: #009688; --bs-btn-hover-border-color: #009688; --bs-btn-active-bg: #009688; --bs-btn-active-border-color: #009688; } /* Global theme-aware text color overrides */ .theme-light { --text-primary: #212529 !important; --text-secondary: #495057 !important; --text-muted: #6c757d !important; --bg-primary: #ffffff !important; --bg-secondary: #f8f9fa !important; --bg-card: #ffffff !important; --bg-elev-1: #ffffff !important; --bg-elev-2: #e9ecef !important; --border-color: #dee2e6 !important; } .theme-dark { --text-primary: #e0e0e0 !important; --text-secondary: #cfcfcf !important; --text-muted: #a0a0a0 !important; --bg-primary: #121212 !important; --bg-secondary: #161616 !important; --bg-card: #1b1b1b !important; --bg-elev-1: #181818 !important; --bg-elev-2: #202020 !important; --border-color: #2e2e2e !important; }