/* * Dark Theme for Paper Dashboard PRO - V1.3.0 * Activated by adding class "dark-theme" to * Uses native CSS nesting (Baseline 2023 — no build tooling required). */ /* ─── Dark theme toggle button (outside dark-theme scope) ───────────── */ #darkThemeToggle { background: none; border: none; cursor: pointer; font-size: 18px; padding: 10px 12px; line-height: 1; transition: color 0.2s; margin: 16px 0; &:hover { opacity: 0.75; } } /* ─── Everything scoped to dark mode ────────────────────────────────── */ body.dark-theme { /* ── CSS custom properties ───────────────────────────────────── */ --dt-bg: #1a1a2e; --dt-bg-alt: #16213e; --dt-bg-card: #0f3460; --dt-surface: #1e2a45; --dt-surface-alt: #253354; --dt-border: rgba(255,255,255,0.1); --dt-text: #e0e0e0; --dt-text-muted: #a0aec0; --dt-text-heading: #ffffff; --dt-link: #68B3C8; --dt-input-bg: #1e2a45; --dt-input-border: #3a4a6b; --dt-danger: #a22b32; /* Exposed for JS to read via getComputedStyle (see dark-theme.js) */ --dt-chart-label-color: #a0a8bb; --dt-chart-grid-color: rgba(255,255,255,0.08); /* ── Base ─────────────────────────────────────────────────────── */ background-color: var(--dt-bg); color: var(--dt-text); & #darkThemeToggle { color: var(--dt-text); } & .wrapper { background-color: var(--dt-bg); } /* ── Misc text ────────────────────────────────────────────────── */ & h1, & h2, & h3, & h4, & h5, & h6 { &:not([class*="text-"]) { color: var(--dt-text-heading); } } & p, & span, & small { &:not([class*="text-"]) { color: inherit; } } & a:not(.btn) { color: var(--dt-link); &:hover { color: #9dd4e8; } } & hr { border-top-color: var(--dt-border); } & .text-muted { color: var(--dt-text-muted) !important; } & .validation-text, & .field-validation-error span { color: var(--dt-danger) !important; } /* paper-dashboard.css sets strong { color: #484541 } — near-black */ & strong { color: var(--dt-text-heading); } /* ── Main panel ───────────────────────────────────────────────── */ & .main-panel { background-color: var(--dt-bg-alt); & > .footer { border-top-color: var(--dt-border); } } /* ── Sidebar ──────────────────────────────────────────────────── */ & .sidebar, & .off-canvas-sidebar { background-color: #0d1b2a; & .sidebar-wrapper { box-shadow: inset -1px 0px 0px 0px rgba(255,255,255,0.1); background-color: #0d1b2a; & > .nav { & li > a { color: var(--dt-text-muted); } & li:hover > a { color: var(--dt-text-heading); background-color: rgba(255,255,255,0.07); } & li.active > a { color: var(--dt-link); } } /* Active-item right-pointing triangle arrow heads */ & li.active > a:not([data-toggle="collapse"]) { &::before { border-right-color: var(--dt-bg-alt) !important; } &::after { border-right-color: var(--dt-bg-alt) !important; } } } & .logo { box-shadow: inset -1px 0px 0px 0px rgba(255,255,255,0.1); background-color: #0d1b2a; /* Strip white canvas so logo sits cleanly on dark background */ & img { background-color: transparent; } & .simple-text { color: var(--dt-text-heading); } & p { color: var(--dt-text); } } & .nav .divider { background-color: rgba(255,255,255,0.12); } & .user { border-bottom-color: var(--dt-border); & .info a { color: var(--dt-text); } & .photo { border-color: rgba(255,255,255,0.2); } } } /* sidebar-mini hover variant for active arrow */ & .sidebar-mini .sidebar:hover .sidebar-wrapper > .nav li.active > a:not([data-toggle="collapse"]) { &::before { border-right-color: var(--dt-bg-alt) !important; } &::after { border-right-color: var(--dt-bg-alt) !important; } } /* ── Navbar ───────────────────────────────────────────────────── */ & .navbar.navbar-default { background-color: var(--dt-bg-alt); border-bottom: 1px solid var(--dt-border); } & .navbar { & .navbar-nav > li > a { &:not([class*="text-"]) { color: var(--dt-text); } &:hover { color: var(--dt-text-heading); } & i { &:not([class*="text-"]) { color: var(--dt-text-muted); } } } & .navbar-brand { color: var(--dt-text); } & .navbar-toggle .icon-bar { color: var(--dt-text); } & .navbar-nav .open .dropdown-menu { background-color: var(--dt-surface); border-color: var(--dt-border); & > li > a { color: var(--dt-text); &:hover { background-color: var(--dt-surface-alt); color: var(--dt-text-heading); } } } } /* Navbar dropdown arrow heads */ & .navbar-nav > li > .dropdown-menu { &::before { border-bottom-color: var(--dt-border) !important; } &::after { border-bottom-color: var(--dt-surface) !important; } } /* ── Cards ────────────────────────────────────────────────────── */ /* .card-plain is transparent by design in paper-dashboard */ & .card-plain { background-color: transparent !important; box-shadow: none !important; border-color: transparent !important; & .card-content, & .card-header { padding-left: 0; padding-right: 0; } } & .card:not(.card-plain) { background-color: var(--dt-surface); border-color: var(--dt-border); box-shadow: 0 2px 12px rgba(0,0,0,0.4); & .header { border-bottom-color: var(--dt-border); } & .footer { border-top-color: var(--dt-border); color: var(--dt-text-muted); } } & .card { & .header .title, & .card-header .card-title, & .card-content .card-title { color: var(--dt-text-heading); } & .header .category, & .footer .legend, & .category, & .description, & .stats, & small { color: var(--dt-text-muted) !important; } & .content, & .card-content, & .card-body { color: var(--dt-text); } & p { color: var(--dt-text); } & label { color: var(--dt-text); } & legend { color: var(--dt-text); } /* * Exclude FullCalendar event elements — they carry inline colour set * by the event source; color: inherit !important on .fc-event children * (below) takes precedence over this rule. */ & span:not(.badge):not(.label):not(.fa) { color: var(--dt-text); } & .card-link { color: var(--dt-link) !important; &:hover, &:focus { color: #9dd4e8 !important; } } } & .card-stats .icon-big i { color: var(--dt-text-muted); } /* ── Tables ───────────────────────────────────────────────────── */ & .table { color: var(--dt-text); & tr { &.bg-red, &.bg-orange, &.bg-yellow, &.bg-green { color: initial; } } & > thead > tr > th { border-bottom-color: var(--dt-border); color: var(--dt-text-muted); } & > tbody > tr > td, & > tbody > tr > th, & > tfoot > tr > td { border-top-color: var(--dt-border); } & > tbody > tr.active > td, & > tbody > tr:hover.success > td { background-color: rgba(122,194,154,0.15); } & .table { background-color: var(--dt-surface); color: inherit; } &.ShowInfo { & thead tr th { color: var(--dt-text-heading); } } } & .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.04); } & .table-hover > tbody > tr:hover { background-color: rgba(255,255,255,0.07); } /* ── Forms / inputs ───────────────────────────────────────────── */ & .form-control { background-color: var(--dt-input-bg); border-color: var(--dt-input-border); color: var(--dt-text); &:focus { background-color: var(--dt-input-bg); border-color: var(--dt-link); color: var(--dt-text-heading); box-shadow: none; /* paper-dashboard.css flips addon back to #FFFFFF on focus — block it */ & + .input-group-addon, & ~ .input-group-addon { background-color: var(--dt-surface-alt) !important; border-color: var(--dt-link) !important; color: var(--dt-text-muted) !important; } } &::placeholder { color: var(--dt-text-muted); } } & .form-group label { color: var(--dt-text-muted); } & .input-group-addon { background-color: var(--dt-surface-alt); border-color: var(--dt-input-border); color: var(--dt-text-muted); } & .has-success .form-control { border-color: #7AC29A; } & .has-error .form-control { border-color: #EB5E28; } /* ── Dropdowns ────────────────────────────────────────────────── */ & .dropdown-menu { background-color: var(--dt-surface); border-color: var(--dt-border); box-shadow: 0 4px 20px rgba(0,0,0,0.5); /* Up-pointing arrow */ &::before { border-bottom-color: var(--dt-border) !important; } &::after { border-bottom-color: var(--dt-surface) !important; } & > li > a { color: var(--dt-text); &:hover, &:focus { background-color: var(--dt-surface-alt); color: var(--dt-text-heading); } } & .divider { background-color: var(--dt-border); } } /* Dropup — down-pointing arrow */ & .dropup .dropdown-menu, & .dropdown-menu.bootstrap-datetimepicker-widget.top { &::before { border-top-color: var(--dt-border) !important; } &::after { border-top-color: var(--dt-surface) !important; } } /* ── Panels / wells / list-groups ─────────────────────────────── */ & .panel { background-color: var(--dt-surface); border-color: var(--dt-border); } & .panel-heading { background-color: var(--dt-surface-alt); border-bottom-color: var(--dt-border); color: var(--dt-text-heading); } & .panel-body { color: var(--dt-text); } & .well { background-color: var(--dt-surface); border-color: var(--dt-border); color: var(--dt-text); } & .list-group-item { background-color: var(--dt-surface); border-color: var(--dt-border); color: var(--dt-text); &:hover, &:focus { background-color: var(--dt-surface-alt); color: var(--dt-text-heading); } &.active, &.active:hover { background-color: var(--dt-link); border-color: var(--dt-link); color: #fff; } } /* ── Modals ───────────────────────────────────────────────────── */ & .modal-content { background-color: var(--dt-surface); border-color: var(--dt-border); color: var(--dt-text); } & .modal-header { border-bottom-color: var(--dt-border); & .modal-title, & .bootstrap-dialog-title { color: var(--dt-text-heading); } & .close { color: var(--dt-text-heading); opacity: 0.3; &:hover { opacity: 0.6; } } } & .modal-footer { border-top-color: var(--dt-border); } & .modal-backdrop { background-color: #000; } /* ── Bootstrap dialog ─────────────────────────────────────────── */ & .bootstrap-dialog { & .modal-content { background-color: var(--dt-surface); } & .modal-header { background-color: var(--dt-surface-alt); } } /* ── Alerts ───────────────────────────────────────────────────── */ & .alert { border-color: transparent; & .close { color: var(--dt-text-heading); } } & .alert-info { background-color: #142a36; color: #bce5f3; border: 1px solid rgba(157, 212, 232, 0.15); } & .alert-success { background-color: #162a2b; color: #beeade; border: 1px solid rgba(165, 219, 191, 0.15); } & .alert-warning { background-color: #2b271d; color: #ffe09e; border: 1px solid rgba(247, 208, 126, 0.15); } & .alert-danger { background-color: #2c1f1f; color: #ffb59b; border: 1px solid rgba(245, 153, 122, 0.15); } /* ── Badges / labels ──────────────────────────────────────────── */ & .badge, & .label { &:not([class*="text-"]) { color: #fff; } } /* ── Breadcrumb ───────────────────────────────────────────────── */ & .breadcrumb { background-color: var(--dt-surface); color: var(--dt-text-muted); & > li + li::before { color: var(--dt-text-muted); } & > .active { color: var(--dt-text); } } /* ── Pagination ───────────────────────────────────────────────── */ & .pagination { & > li > a, & > li > span { background-color: var(--dt-surface); border-color: var(--dt-border); color: var(--dt-link); } & > li > a:hover { background-color: var(--dt-surface-alt); color: var(--dt-text-heading); } & > .active > a, & > .active > span { background-color: var(--dt-link); border-color: var(--dt-link); color: #fff; } & > .disabled > a, & > .disabled > span { background-color: var(--dt-surface); border-color: var(--dt-border); color: var(--dt-text-muted); } } /* ── Tabs ─────────────────────────────────────────────────────── */ & .nav-tabs { border-bottom-color: var(--dt-border); & > li > a { color: var(--dt-text-muted); border-color: transparent; &:hover { border-color: var(--dt-border); color: var(--dt-text-heading); } } & > li.active > a, & > li.active > a:hover, & > li.active > a:focus { border-color: var(--dt-border); border-bottom-color: var(--dt-surface); color: var(--dt-text-heading); } & > li.active ::after { border-bottom: none; } & > li.active ::before { border-bottom-color: var(--dt-border) !important; } } & .nav-tabs-navigation { border-bottom-color: var(--dt-border); } /* ── Sweetalert2 ──────────────────────────────────────────────── */ & .swal2-popup { background-color: var(--dt-surface); color: var(--dt-text-heading); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5); & .swal2-title, & .swal2-content { color: var(--dt-text-heading); } & .swal2-icon.swal2-question { border-color: rgba(157, 212, 232, 0.4); & .swal2-icon-text { color: #9dd4e8; } } & .btn-success, & .swal2-confirm { background-color: #5b9e7b; } & .btn-secondary { background-color: #5e7a85; } & .btn-warning { background-color: #cca043; } & .btn-info { background-color: #5295ab; } } & .swal2-container.swal2-shown { background-color: rgba(0, 0, 0, 0.6) !important; } /* ── Select2 — default theme ──────────────────────────────────── */ & .select2-container--default { & .select2-selection--single, & .select2-selection--multiple { background-color: var(--dt-input-bg); border-color: var(--dt-input-border); color: var(--dt-text); } & .select2-selection--single .select2-selection__rendered { color: var(--dt-text); } & .select2-selection--single .select2-selection__arrow b { border-top-color: var(--dt-text-muted); } & .select2-selection--multiple .select2-selection__choice { background-color: var(--dt-surface-alt); border-color: var(--dt-border); color: var(--dt-text); } & .select2-results__option { color: var(--dt-text); background-color: transparent; } & .select2-results__option--highlighted[aria-selected] { background-color: var(--dt-surface-alt) !important; color: var(--dt-text-heading) !important; } & .select2-results__option[aria-selected=true] { background-color: rgba(104,179,200,0.18) !important; color: var(--dt-text) !important; } } /* ── Select2 — Bootstrap 3 theme ─────────────────────────────── */ & .select2-container--bootstrap { & .select2-selection { background-color: var(--dt-input-bg) !important; border-color: var(--dt-input-border) !important; color: var(--dt-text) !important; box-shadow: none !important; } & .select2-selection--single { & .select2-selection__rendered { color: var(--dt-text) !important; } & .select2-selection__placeholder { color: var(--dt-text-muted) !important; } & .select2-selection__arrow b { border-top-color: var(--dt-text-muted) !important; } } &.select2-container--open .select2-selection .select2-selection__arrow b { border-bottom-color: var(--dt-text-muted) !important; } & .select2-selection--multiple { & .select2-selection__choice { background-color: var(--dt-surface-alt) !important; border-color: var(--dt-border) !important; color: var(--dt-text) !important; } & .select2-selection__rendered { color: var(--dt-text) !important; } & .select2-search__field { color: var(--dt-text) !important; } } &.select2-container--focus .select2-selection, &.select2-container--open .select2-selection { border-color: var(--dt-link) !important; box-shadow: none !important; } & .select2-dropdown { background-color: var(--dt-surface) !important; border-color: var(--dt-input-border) !important; color: var(--dt-text) !important; } & .select2-search--dropdown .select2-search__field { background-color: var(--dt-input-bg) !important; border-color: var(--dt-input-border) !important; color: var(--dt-text) !important; box-shadow: none !important; } & .select2-results__option { color: var(--dt-text); background-color: transparent; } & .select2-results__option--highlighted[aria-selected] { background-color: var(--dt-surface-alt) !important; color: var(--dt-text-heading) !important; } & .select2-results__option[aria-selected=true] { background-color: rgba(104,179,200,0.18) !important; color: var(--dt-text) !important; } & .select2-results__group { color: var(--dt-text-muted) !important; } & .select2-results__option[aria-disabled=true] { color: var(--dt-text-muted) !important; } } /* Shared dropdown panel (both themes) */ & .select2-dropdown { background-color: var(--dt-surface) !important; border-color: var(--dt-input-border) !important; color: var(--dt-text) !important; } /* ── DataTables ───────────────────────────────────────────────── */ & .dataTables_wrapper { & .dataTables_filter input, & .dataTables_length select { background-color: var(--dt-input-bg); border-color: var(--dt-input-border); color: var(--dt-text); } & .dataTables_info { color: var(--dt-text-muted) !important; } & .dataTables_paginate .paginate_button { color: var(--dt-text-muted) !important; &:hover { background: var(--dt-surface-alt) !important; color: var(--dt-text-heading) !important; } &.current { background: var(--dt-link) !important; color: #fff !important; border-color: var(--dt-link) !important; } } } /* ── DataTables Fixed Columns (DTFC) ──────────────────────────── */ /* * fixedColumns.bootstrap.css hardcodes background-color: white. * Use a solid colour (not transparent) so underlying scrolling rows * do not bleed through the fixed column. */ & table.DTFC_Cloned tr { background-color: var(--dt-bg-alt) !important; &.odd, &:nth-of-type(odd) { background-color: color-mix(in srgb, var(--dt-bg-alt) 96%, white) !important; } &:hover { background-color: color-mix(in srgb, var(--dt-bg-alt) 93%, white) !important; } } & div.DTFC_LeftHeadWrapper table, & div.DTFC_RightHeadWrapper table { background-color: var(--dt-bg-alt) !important; } & div.DTFC_LeftBodyWrapper, & div.DTFC_RightBodyWrapper { background-color: var(--dt-bg-alt) !important; } & div.DTFC_LeftFootWrapper table, & div.DTFC_RightFootWrapper table { background-color: var(--dt-bg-alt) !important; } & div.DTFC_Blocker { background-color: var(--dt-bg-alt) !important; } /* ── btn-default ──────────────────────────────────────────────── */ & .btn-default { background-color: var(--dt-surface-alt); border-color: var(--dt-input-border); color: var(--dt-text); &:hover, &:focus, &:active { background-color: var(--dt-surface); border-color: var(--dt-link); color: var(--dt-text-heading); } /* Active state — Dan/Teden/Mesec toggle group */ &.active { background-color: var(--dt-link) !important; border-color: var(--dt-link) !important; color: #fff !important; box-shadow: none; } } & .open > .dropdown-toggle.btn-default { background-color: var(--dt-surface); border-color: var(--dt-link); color: var(--dt-text-heading); } & .btn-group > .btn-default.active { background-color: var(--dt-link) !important; border-color: var(--dt-link) !important; color: #fff !important; } /* ── Input group buttons ──────────────────────────────────────── */ & .input-group-btn { & .btn-default:not(.btn-fill) { border-color: var(--dt-input-border); } & > .btn { background-color: var(--dt-surface-alt); border-color: var(--dt-input-border); color: var(--dt-text-muted); &:hover { background-color: var(--dt-surface); color: var(--dt-text-heading); } } } /* ── Bootstrap datetimepicker popup ───────────────────────────── */ & .bootstrap-datetimepicker-widget.dropdown-menu { background-color: var(--dt-surface); border-color: var(--dt-border); color: var(--dt-text); &.bottom { &::before { border-bottom-color: var(--dt-border); } &::after { border-bottom-color: var(--dt-surface); } } & table { & thead { & tr:first-child th { &:hover span, &.picker-switch:hover { background: var(--dt-surface-alt); } } & th { &.picker-switch { color: var(--dt-text-heading); } &.prev span, &.next span { color: var(--dt-text-muted); } &.dow { color: var(--dt-text-muted); border-bottom-color: var(--dt-border); } &.disabled, &.disabled:hover { color: var(--dt-text-muted); } } } & td { &.day > div { color: var(--dt-text); } &.day:hover > div, &.hour:hover > div, &.minute:hover > div, &.second:hover > div { background: var(--dt-surface-alt); color: var(--dt-text-heading); } &.old > div, &.new > div { color: var(--dt-text-muted); } &.today > div::before { border-bottom-color: var(--dt-link); } &.active > div, &.active:hover > div { background-color: var(--dt-link); color: #fff; } &.disabled > div, &.disabled:hover > div { color: var(--dt-text-muted); } & span { color: var(--dt-text); &:hover { background: var(--dt-surface-alt); color: var(--dt-text-heading); } &.active { background-color: var(--dt-link); color: #fff; } &.old, &.disabled, &.disabled:hover { color: var(--dt-text-muted); } } } } & .timepicker-hour, & .timepicker-minute, & .timepicker-second { color: var(--dt-text-heading); } } /* ── Chartist tooltip ─────────────────────────────────────────── */ & .chartist-tooltip { background-color: var(--dt-surface-alt); border: 1px solid var(--dt-border); color: var(--dt-text); &::before { border-top-color: var(--dt-surface-alt); } } /* ── FullCalendar ─────────────────────────────────────────────── */ & .fc-unthemed { & th, & td, & thead, & tbody, & .fc-divider, & .fc-row, & .fc-content, & .fc-popover, & .fc-list-view, & .fc-list-heading td { border-color: var(--dt-border); } & .fc-popover { background-color: var(--dt-surface); border-color: var(--dt-border); & .fc-header { background: var(--dt-surface-alt); color: var(--dt-text-heading); & .fc-close { color: var(--dt-text-muted); } } } /* Today highlight — replace jarring yellow with subtle teal tint */ & .fc-today { background: rgba(104, 179, 200, 0.15) !important; } & td.fc-day, & td.fc-day-top { background-color: transparent; color: var(--dt-text); } & .fc-head-container { background-color: var(--dt-surface-alt); border-color: var(--dt-border); } & .fc-nonbusiness { background: rgba(0,0,0,0.2); } } & .fc td.fc-today { background: rgba(104, 179, 200, 0.15) !important; } & .fc-day-number, & .fc-week-number { color: var(--dt-text-muted); } & .fc th.fc-day-header { background-color: var(--dt-surface-alt); color: var(--dt-text-muted); border-color: var(--dt-border); } & .fc-toolbar { & h2 { color: var(--dt-text-heading); } & .fc-button { background-color: var(--dt-surface-alt); background-image: none; border-color: var(--dt-border); color: var(--dt-text); text-shadow: none; box-shadow: none; &:hover { background-color: var(--dt-surface); color: var(--dt-text-heading); } &.fc-state-active, &.fc-state-down { background-color: var(--dt-link); border-color: var(--dt-link); color: #fff; } &.fc-state-disabled { background-color: var(--dt-surface); color: var(--dt-text-muted); opacity: 0.6; } } } /* * Event defaults — only soften the border; never override text color * because fc-event carries inline color set by the event source. */ & .fc-event { border-color: rgba(255,255,255,0.15); } & .fc-event-dot { border-color: rgba(255,255,255,0.15); } /* * Explicitly unset any inherited color on event content children * so the inline style on the element takes full control. */ & .fc-event .fc-content, & .fc-event .fc-time, & .fc-event .fc-time span, & .fc-event .fc-title { color: inherit !important; } /* List view */ & .fc-list-heading-main, & .fc-list-heading-alt { color: var(--dt-text-muted); } & .fc-list-item { color: var(--dt-text); &:hover td { background-color: var(--dt-surface-alt); } } /* ── Scrollbar — perfect-scrollbar ────────────────────────────── */ & .ps__thumb-y, & .ps__thumb-x { background-color: rgba(255,255,255,0.2); } /* ── Scrollbar — native (webkit + firefox) ────────────────────── */ & ::-webkit-scrollbar { width: 8px; height: 8px; } & ::-webkit-scrollbar-track { background: var(--dt-bg-alt); } & ::-webkit-scrollbar-thumb { background-color: var(--dt-surface-alt); border-radius: 4px; border: 2px solid var(--dt-bg-alt); &:hover { background-color: var(--dt-text-muted); } } & * { scrollbar-color: var(--dt-surface-alt) var(--dt-bg-alt); scrollbar-width: thin; } /* ── Vis.js ────────────────────────────────────────────────────── */ & .vis-network { background-color: #fff; position: relative; &::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; mix-blend-mode: difference; pointer-events: none; z-index: 10; } & .vis-label { color: #000; } } }