/* * Lamina admin colour themes. Each theme is selected by data-theme="" on ; the matching * data-bs-theme="dark|light" drives Bootstrap's base mode so component dark-mode rules still apply. * "dark" and "light" are Bootstrap built-ins and need no rules here. * * Palettes are pure CSS-variable overrides (buildless, no vendored Bootswatch CSS). Each theme sets * the core --bs-* surface/text/accent variables (which cascade to cards, modals, inputs, tables, * list groups, …) plus the few compiled components that don't read them: .btn-primary and the two * header navbars. */ /* Shared: small colour swatch shown next to each theme in the selector. */ .theme-swatch { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; border: 1px solid rgba(128, 128, 128, .5); vertical-align: -2px; margin-right: .5rem; } /* ============================ Nord (nordtheme.com) ============================ */ [data-theme="nord"] { --bs-body-bg: #2E3440; --bs-body-bg-rgb: 46, 52, 64; --bs-body-color: #ECEFF4; --bs-body-color-rgb: 236, 239, 244; --bs-emphasis-color: #ECEFF4; --bs-secondary-bg: #3B4252; --bs-tertiary-bg: #434C5E; --bs-border-color: #4C566A; --bs-border-color-translucent: rgba(76, 86, 106, .65); --bs-primary: #88C0D0; --bs-primary-rgb: 136, 192, 208; --bs-link-color: #88C0D0; --bs-link-color-rgb: 136, 192, 208; --bs-link-hover-color: #8FBCBB; --bs-heading-color: #ECEFF4; } [data-theme="nord"] .btn-primary { --bs-btn-bg: #5E81AC; --bs-btn-border-color: #5E81AC; --bs-btn-color: #ECEFF4; --bs-btn-hover-bg: #81A1C1; --bs-btn-hover-border-color: #81A1C1; --bs-btn-hover-color: #2E3440; --bs-btn-active-bg: #88C0D0; --bs-btn-active-border-color: #88C0D0; --bs-btn-active-color: #2E3440; } [data-theme="nord"] .navbar.bg-primary { background-color: #3B4252 !important; } [data-theme="nord"] .navbar.bg-secondary { background-color: #434C5E !important; } /* ============================ Slate ============================ */ [data-theme="slate"] { --bs-body-bg: #272B30; --bs-body-bg-rgb: 39, 43, 48; --bs-body-color: #C8C8C8; --bs-body-color-rgb: 200, 200, 200; --bs-emphasis-color: #fff; --bs-secondary-bg: #32383E; --bs-tertiary-bg: #3A4149; --bs-border-color: #1C1E22; --bs-border-color-translucent: rgba(28, 30, 34, .8); --bs-primary: #5BC0DE; --bs-primary-rgb: 91, 192, 222; --bs-link-color: #5BC0DE; --bs-link-color-rgb: 91, 192, 222; --bs-link-hover-color: #8AD4E9; --bs-heading-color: #fff; } [data-theme="slate"] .btn-primary { --bs-btn-bg: #7A8288; --bs-btn-border-color: #62686D; --bs-btn-color: #fff; --bs-btn-hover-bg: #62686D; --bs-btn-hover-border-color: #62686D; } [data-theme="slate"] .navbar.bg-primary { background-color: #3A4149 !important; } [data-theme="slate"] .navbar.bg-secondary { background-color: #272B30 !important; } /* ============================ Solar (Solarized dark) ============================ */ [data-theme="solar"] { --bs-body-bg: #002B36; --bs-body-bg-rgb: 0, 43, 54; --bs-body-color: #93A1A1; --bs-body-color-rgb: 147, 161, 161; --bs-emphasis-color: #FDF6E3; --bs-secondary-bg: #073642; --bs-tertiary-bg: #0A4351; --bs-border-color: #094B5A; --bs-border-color-translucent: rgba(9, 75, 90, .8); --bs-primary: #268BD2; --bs-primary-rgb: 38, 139, 210; --bs-link-color: #2AA198; --bs-link-color-rgb: 42, 161, 152; --bs-link-hover-color: #859900; --bs-heading-color: #FDF6E3; } [data-theme="solar"] .btn-primary { --bs-btn-bg: #B58900; --bs-btn-border-color: #B58900; --bs-btn-color: #002B36; --bs-btn-hover-bg: #cb9a00; --bs-btn-hover-border-color: #cb9a00; --bs-btn-hover-color: #002B36; } [data-theme="solar"] .navbar.bg-primary { background-color: #073642 !important; } [data-theme="solar"] .navbar.bg-secondary { background-color: #002B36 !important; } /* ============================ Superhero ============================ */ [data-theme="superhero"] { --bs-body-bg: #2B3E50; --bs-body-bg-rgb: 43, 62, 80; --bs-body-color: #EBEBEB; --bs-body-color-rgb: 235, 235, 235; --bs-emphasis-color: #fff; --bs-secondary-bg: #4E5D6C; --bs-tertiary-bg: #3B4D5E; --bs-border-color: #4E5D6C; --bs-border-color-translucent: rgba(78, 93, 108, .8); --bs-primary: #DF691B; --bs-primary-rgb: 223, 105, 27; --bs-link-color: #5CB85C; --bs-link-color-rgb: 92, 184, 92; --bs-link-hover-color: #4CAE4C; --bs-heading-color: #fff; } [data-theme="superhero"] .btn-primary { --bs-btn-bg: #DF691B; --bs-btn-border-color: #DF691B; --bs-btn-color: #fff; --bs-btn-hover-bg: #c75e18; --bs-btn-hover-border-color: #c75e18; } [data-theme="superhero"] .navbar.bg-primary { background-color: #4E5D6C !important; } [data-theme="superhero"] .navbar.bg-secondary { background-color: #2B3E50 !important; } /* ============================ Darkly ============================ */ [data-theme="darkly"] { --bs-body-bg: #222222; --bs-body-bg-rgb: 34, 34, 34; --bs-body-color: #E0E0E0; --bs-body-color-rgb: 224, 224, 224; --bs-emphasis-color: #fff; --bs-secondary-bg: #303030; --bs-tertiary-bg: #3A3A3A; --bs-border-color: #444444; --bs-border-color-translucent: rgba(68, 68, 68, .8); --bs-primary: #00BC8C; --bs-primary-rgb: 0, 188, 140; --bs-link-color: #00BC8C; --bs-link-color-rgb: 0, 188, 140; --bs-link-hover-color: #00efb2; --bs-heading-color: #fff; } [data-theme="darkly"] .btn-primary { --bs-btn-bg: #00BC8C; --bs-btn-border-color: #00BC8C; --bs-btn-color: #fff; --bs-btn-hover-bg: #00a47b; --bs-btn-hover-border-color: #00a47b; } [data-theme="darkly"] .navbar.bg-primary { background-color: #303030 !important; } [data-theme="darkly"] .navbar.bg-secondary { background-color: #222222 !important; } /* ============================ Cyborg ============================ */ [data-theme="cyborg"] { --bs-body-bg: #060606; --bs-body-bg-rgb: 6, 6, 6; --bs-body-color: #ADAFAE; --bs-body-color-rgb: 173, 175, 174; --bs-emphasis-color: #fff; --bs-secondary-bg: #181818; --bs-tertiary-bg: #222222; --bs-border-color: #282828; --bs-border-color-translucent: rgba(40, 40, 40, .8); --bs-primary: #2A9FD6; --bs-primary-rgb: 42, 159, 214; --bs-link-color: #2A9FD6; --bs-link-color-rgb: 42, 159, 214; --bs-link-hover-color: #56b5e0; --bs-heading-color: #fff; } [data-theme="cyborg"] .btn-primary { --bs-btn-bg: #2A9FD6; --bs-btn-border-color: #2A9FD6; --bs-btn-color: #fff; --bs-btn-hover-bg: #2384b3; --bs-btn-hover-border-color: #2384b3; } [data-theme="cyborg"] .navbar.bg-primary { background-color: #181818 !important; } [data-theme="cyborg"] .navbar.bg-secondary { background-color: #060606 !important; } /* ============================ Vapor ============================ */ [data-theme="vapor"] { --bs-body-bg: #1A0933; --bs-body-bg-rgb: 26, 9, 51; --bs-body-color: #EBEBEB; --bs-body-color-rgb: 235, 235, 235; --bs-emphasis-color: #fff; --bs-secondary-bg: #2A1A4A; --bs-tertiary-bg: #36215F; --bs-border-color: #44218A; --bs-border-color-translucent: rgba(68, 33, 138, .8); --bs-primary: #EA39B8; --bs-primary-rgb: 234, 57, 184; --bs-link-color: #44D7B6; --bs-link-color-rgb: 68, 215, 182; --bs-link-hover-color: #6fe3c9; --bs-heading-color: #fff; } [data-theme="vapor"] .btn-primary { --bs-btn-bg: #EA39B8; --bs-btn-border-color: #EA39B8; --bs-btn-color: #fff; --bs-btn-hover-bg: #c92f9e; --bs-btn-hover-border-color: #c92f9e; } [data-theme="vapor"] .navbar.bg-primary { background-color: #2A1A4A !important; } [data-theme="vapor"] .navbar.bg-secondary { background-color: #1A0933 !important; } /* ============================ Flatly (light) ============================ */ [data-theme="flatly"] { --bs-body-bg: #FFFFFF; --bs-body-bg-rgb: 255, 255, 255; --bs-body-color: #2C3E50; --bs-body-color-rgb: 44, 62, 80; --bs-emphasis-color: #2C3E50; --bs-secondary-bg: #ECF0F1; --bs-tertiary-bg: #E2E6E7; --bs-border-color: #DEE2E6; --bs-border-color-translucent: rgba(222, 226, 230, .9); --bs-primary: #18BC9C; --bs-primary-rgb: 24, 188, 156; --bs-link-color: #18BC9C; --bs-link-color-rgb: 24, 188, 156; --bs-link-hover-color: #128f76; --bs-heading-color: #2C3E50; } [data-theme="flatly"] .btn-primary { --bs-btn-bg: #2C3E50; --bs-btn-border-color: #2C3E50; --bs-btn-color: #fff; --bs-btn-hover-bg: #1f2d3a; --bs-btn-hover-border-color: #1f2d3a; } [data-theme="flatly"] .navbar.bg-primary { background-color: #2C3E50 !important; } [data-theme="flatly"] .navbar.bg-secondary { background-color: #18BC9C !important; }