/* SmartAdmin Dark Theme Override * Load after SmartAdmin / Bootstrap CSS * Activate with: or * Goals: * - no blue accents in dark mode * - keep existing green tones from the light theme * - no pure white backgrounds * - all bright panels/fields/dialogs darkened * - stronger contrast between layers using dark gray steps */ :root { --sa-bg: #111111; --sa-bg-1: #171717; --sa-bg-2: #1d1d1d; --sa-bg-3: #232323; --sa-bg-4: #292929; --sa-bg-5: #2f2f2f; --sa-border: #3a3a3a; --sa-border-soft: #303030; --sa-border-strong: #464646; --sa-text: #c7d1c7; --sa-text-soft: #b5bdb5; --sa-text-muted: #9ba39b; --sa-text-faint: #878787; --sa-heading: #d5dfd5; --sa-link: #6fa06f; --sa-link-hover: #7eae7e; --sa-input-bg: #181818; --sa-input-bg-focus: #202020; --sa-input-border: #3d3d3d; --sa-placeholder: #848c84; --sa-selection-bg: #2a342a; --sa-selection-text: #c7d1c7; --sa-hover-green: #213021; --sa-hover-green-2: #273827; --sa-hover-border: #355335; --sa-shadow: rgba(0,0,0,.45); --sa-overlay: rgba(0,0,0,.55); } :root[data-theme="dark"], body[data-theme="dark"] { color-scheme: dark; } html[data-theme="dark"], body[data-theme="dark"], body[data-theme="dark"] body, body[data-theme="dark"] #main, body[data-theme="dark"] #content, body[data-theme="dark"] #extr-page, body[data-theme="dark"] .page-content, body[data-theme="dark"] .page-wrapper, body[data-theme="dark"] .container, body[data-theme="dark"] .container-fluid { background: var(--sa-bg) !important; color: var(--sa-text) !important; } html[data-theme="dark"] ::selection, body[data-theme="dark"] ::selection { background: var(--sa-selection-bg) !important; color: var(--sa-selection-text) !important; } body[data-theme="dark"] a, body[data-theme="dark"] a:visited { color: var(--sa-link); } body[data-theme="dark"] a:hover, body[data-theme="dark"] a:focus, body[data-theme="dark"] .text-primary, body[data-theme="dark"] .txt-color-blue, body[data-theme="dark"] .txt-color-blueDark, body[data-theme="dark"] .txt-color-teal, body[data-theme="dark"] .txt-color-pinkDark { color: var(--sa-link-hover) !important; } body[data-theme="dark"] h1, body[data-theme="dark"] h2, body[data-theme="dark"] h3, body[data-theme="dark"] h4, body[data-theme="dark"] h5, body[data-theme="dark"] h6, body[data-theme="dark"] strong, body[data-theme="dark"] b, body[data-theme="dark"] legend, body[data-theme="dark"] .jarviswidget > header h2, body[data-theme="dark"] .panel-title, body[data-theme="dark"] .modal-title, body[data-theme="dark"] .ui-dialog-title { color: var(--sa-heading) !important; } body[data-theme="dark"] small, body[data-theme="dark"] .note, body[data-theme="dark"] .help-block, body[data-theme="dark"] .text-muted, body[data-theme="dark"] .muted, body[data-theme="dark"] .text-color, body[data-theme="dark"] .txt-color-darken, body[data-theme="dark"] .txt-color-darken a { color: var(--sa-text-muted) !important; } /* Header / ribbon / top areas */ body[data-theme="dark"] #header, body[data-theme="dark"] .header, body[data-theme="dark"] .navbar, body[data-theme="dark"] .page-header, body[data-theme="dark"] #logo-group, body[data-theme="dark"] #ribbon, body[data-theme="dark"] #smart-fixed-ribbon + span, body[data-theme="dark"] .ribbon-button-alignment, body[data-theme="dark"] .ajax-dropdown, body[data-theme="dark"] .ajax-notifications, body[data-theme="dark"] .search-mobile .header-search, body[data-theme="dark"] .inbox-nav-bar, body[data-theme="dark"] .inbox-info-bar, body[data-theme="dark"] .page-footer { background: var(--sa-bg-2) !important; border-color: var(--sa-border) !important; color: var(--sa-text) !important; } body[data-theme="dark"] .navbar .navbar-brand, body[data-theme="dark"] .navbar .nav-link, body[data-theme="dark"] .header-dropdown-list > li > .dropdown-toggle, body[data-theme="dark"] .header-search > input, body[data-theme="dark"] #ribbon .breadcrumb, body[data-theme="dark"] #ribbon .breadcrumb a, body[data-theme="dark"] #ribbon .breadcrumb li:last-child { color: var(--sa-text) !important; } /* Sidebar */ body[data-theme="dark"] #left-panel, body[data-theme="dark"] .page-sidebar, body[data-theme="dark"] .sidebar, body[data-theme="dark"] nav ul ul, body[data-theme="dark"] .minifyme, body[data-theme="dark"] .login-info, body[data-theme="dark"] .login-info span, body[data-theme="dark"] .menu-on-top aside#left-panel, body[data-theme="dark"] aside, body[data-theme="dark"] nav { background: var(--sa-bg-1) !important; border-color: var(--sa-border-soft) !important; color: var(--sa-text) !important; } body[data-theme="dark"] nav ul li a, body[data-theme="dark"] .login-info a, body[data-theme="dark"] .page-sidebar .nav > li > a, body[data-theme="dark"] .sidebar .nav-link { color: var(--sa-text-soft) !important; } body[data-theme="dark"] nav ul li a:hover, body[data-theme="dark"] nav ul li.open > a, body[data-theme="dark"] nav ul li.active > a, body[data-theme="dark"] .sidebar .nav-link:hover, body[data-theme="dark"] .sidebar .nav-link.active, body[data-theme="dark"] .page-sidebar .nav > li.active > a { background: var(--sa-hover-green) !important; color: var(--sa-heading) !important; border-color: var(--sa-hover-border) !important; } /* Main surfaces */ body[data-theme="dark"] .jarviswidget, body[data-theme="dark"] .jarviswidget > div, body[data-theme="dark"] .jarviswidget .widget-body, body[data-theme="dark"] .jarviswidget .widget-body-toolbar, body[data-theme="dark"] .panel, body[data-theme="dark"] .panel-body, body[data-theme="dark"] .panel-footer, body[data-theme="dark"] .well, body[data-theme="dark"] .well-light, body[data-theme="dark"] .card, body[data-theme="dark"] .card-body, body[data-theme="dark"] .superbox-show, body[data-theme="dark"] .searchable-container .searchable-item, body[data-theme="dark"] .timeline-seperator-text, body[data-theme="dark"] .profile-link, body[data-theme="dark"] .result-body, body[data-theme="dark"] .search-result, body[data-theme="dark"] .todo, body[data-theme="dark"] .todo > li, body[data-theme="dark"] .widget-body.no-padding, body[data-theme="dark"] .show-stat-microcharts, body[data-theme="dark"] .bootstrap-duallistbox-container .box1, body[data-theme="dark"] .bootstrap-duallistbox-container .box2, body[data-theme="dark"] .fc-widget-content, body[data-theme="dark"] .fc-widget-header, body[data-theme="dark"] .fc-event, body[data-theme="dark"] .fc-view-container, body[data-theme="dark"] .dashboard-widget, body[data-theme="dark"] .panel-default > .panel-heading { background: var(--sa-bg-3) !important; color: var(--sa-text) !important; border-color: var(--sa-border) !important; box-shadow: 0 2px 10px var(--sa-shadow); } body[data-theme="dark"] .jarviswidget header, body[data-theme="dark"] .panel-heading, body[data-theme="dark"] .card-header, body[data-theme="dark"] .widget-toolbar, body[data-theme="dark"] .widget-toolbar > .btn, body[data-theme="dark"] .widget-toolbar > .btn-group, body[data-theme="dark"] .widget-toolbar > .smart-form, body[data-theme="dark"] .widget-toolbar > .label { border-color: var(--sa-border-soft) !important; color: var(--sa-text) !important; } body[data-theme="dark"] .jarviswidget > header, body[data-theme="dark"] .jarviswidget-color-darken > header, body[data-theme="dark"] .jarviswidget-color-blueDark > header, body[data-theme="dark"] .jarviswidget-color-greenDark > header { background: linear-gradient(to bottom, #2a2a2a, #202020) !important; border-color: var(--sa-border) !important; color: var(--sa-heading) !important; } /* Keep existing green states from the original theme */ body[data-theme="dark"] .btn-primary, body[data-theme="dark"] .smart-form .button-primary, body[data-theme="dark"] .pagination > .active > a, body[data-theme="dark"] .pagination > .active > span, body[data-theme="dark"] .fc-state-active, body[data-theme="dark"] .ui-state-active, body[data-theme="dark"] .ui-tabs .ui-tabs-nav li.ui-tabs-active, body[data-theme="dark"] .label-primary, body[data-theme="dark"] .badge-primary, body[data-theme="dark"] .btn-success, body[data-theme="dark"] .label-success, body[data-theme="dark"] .badge-success, body[data-theme="dark"] .progress-bar-success, body[data-theme="dark"] .bg-color-greenLight, body[data-theme="dark"] .bg-color-green, body[data-theme="dark"] .bg-color-greenDark { background-image: none !important; background: linear-gradient(to bottom, #356e35, #306430) !important; border-color: #2c5b2c !important; color: #d5dfd5 !important; } body[data-theme="dark"] .btn-primary:hover, body[data-theme="dark"] .btn-primary:focus, body[data-theme="dark"] .btn-primary:active, body[data-theme="dark"] .open > .dropdown-toggle.btn-primary, body[data-theme="dark"] .btn-success:hover, body[data-theme="dark"] .btn-success:focus, body[data-theme="dark"] .btn-success:active, body[data-theme="dark"] .label-success:hover, body[data-theme="dark"] .badge-success:hover { background-image: none !important; background: linear-gradient(to bottom, #356e35, #2e5f2e) !important; border-color: #285328 !important; color: #dbe6db !important; } /* Generic hover states: no brown */ body[data-theme="dark"] .btn:hover, body[data-theme="dark"] .btn:focus, body[data-theme="dark"] .btn:active, body[data-theme="dark"] .open > .dropdown-toggle.btn, body[data-theme="dark"] .pagination > li > a:hover, body[data-theme="dark"] .pagination > li > span:hover, body[data-theme="dark"] .fc-button:hover, body[data-theme="dark"] .ui-button:hover, body[data-theme="dark"] .DTTT_button:hover, body[data-theme="dark"] .ColVis_Button:hover, body[data-theme="dark"] .dropdown-menu > li > a:hover, body[data-theme="dark"] .dropdown-menu > li > a:focus, body[data-theme="dark"] ul.ColVis_collection li:hover, body[data-theme="dark"] .tt-suggestion:hover, body[data-theme="dark"] .tt-suggestion.tt-cursor, body[data-theme="dark"] .chosen-results li.highlighted, body[data-theme="dark"] .ui-menu .ui-menu-item:hover, body[data-theme="dark"] .ui-menu .ui-state-focus, body[data-theme="dark"] .datepicker table tr td:hover, body[data-theme="dark"] .daterangepicker td.available:hover, body[data-theme="dark"] .fc-day:hover, body[data-theme="dark"] .md-editor .md-controls .md-control:hover, body[data-theme="dark"] .md-editor .btn:hover, body[data-theme="dark"] .note-toolbar .btn:hover, body[data-theme="dark"] .result-body:hover, body[data-theme="dark"] .profile-link:hover, body[data-theme="dark"] .todo > li:hover, body[data-theme="dark"] .search-result:hover, body[data-theme="dark"] .inbox-table > tbody > tr:hover > td, body[data-theme="dark"] .chat-users li:hover, body[data-theme="dark"] .tree ul ul li:hover, body[data-theme="dark"] .tree li.parent_li > span:hover, body[data-theme="dark"] .tree li.parent_li > span:hover + ul li span, body[data-theme="dark"] .nav > li > a:hover, body[data-theme="dark"] .nav > li > a:focus, body[data-theme="dark"] .dropdown-item:hover { background: var(--sa-hover-green) !important; color: var(--sa-heading) !important; border-color: var(--sa-hover-border) !important; } /* Inputs and all bright field backgrounds */ body[data-theme="dark"] .form-control, body[data-theme="dark"] input, body[data-theme="dark"] select, body[data-theme="dark"] textarea, body[data-theme="dark"] .input-group-addon, body[data-theme="dark"] .input-group-text, body[data-theme="dark"] .bootstrap-tagsinput, body[data-theme="dark"] .tokenfield, body[data-theme="dark"] .md-editor > textarea, body[data-theme="dark"] .smart-form input, body[data-theme="dark"] .smart-form select, body[data-theme="dark"] .smart-form textarea, body[data-theme="dark"] .smart-form .select select, body[data-theme="dark"] .smart-form .input input, body[data-theme="dark"] .smart-form .textarea textarea, body[data-theme="dark"] .smart-form .icon-append, body[data-theme="dark"] .smart-form .icon-prepend, body[data-theme="dark"] .smart-form .select i, body[data-theme="dark"] .uneditable-input, body[data-theme="dark"] .select2-container .select2-choice, body[data-theme="dark"] .select2-container .select2-choices, body[data-theme="dark"] .select2-drop, body[data-theme="dark"] .select2-drop-active, body[data-theme="dark"] .select2-search input, body[data-theme="dark"] .select2-results, body[data-theme="dark"] .select2-container-multi .select2-choices, body[data-theme="dark"] .chosen-container-single .chosen-single, body[data-theme="dark"] .chosen-container-multi .chosen-choices, body[data-theme="dark"] .chosen-container .chosen-drop, body[data-theme="dark"] .chosen-search input[type="text"], body[data-theme="dark"] .note-editor, body[data-theme="dark"] .note-editable, body[data-theme="dark"] .wysihtml5-sandbox, body[data-theme="dark"] .select, body[data-theme="dark"] option, body[data-theme="dark"] optgroup, body[data-theme="dark"] .ui-widget-content input, body[data-theme="dark"] .ui-widget-content select, body[data-theme="dark"] .ui-widget-content textarea { background: var(--sa-input-bg) !important; color: var(--sa-text) !important; border-color: var(--sa-input-border) !important; } body[data-theme="dark"] .form-control:focus, body[data-theme="dark"] input:focus, body[data-theme="dark"] select:focus, body[data-theme="dark"] textarea:focus, body[data-theme="dark"] .select2-search input:focus, body[data-theme="dark"] .chosen-search input[type="text"]:focus, body[data-theme="dark"] .smart-form input:focus, body[data-theme="dark"] .smart-form select:focus, body[data-theme="dark"] .smart-form textarea:focus { background: var(--sa-input-bg-focus) !important; border-color: #4a5f4a !important; color: var(--sa-heading) !important; } body[data-theme="dark"] .form-control::placeholder, body[data-theme="dark"] input::placeholder, body[data-theme="dark"] textarea::placeholder { color: var(--sa-placeholder) !important; } body[data-theme="dark"] .select2-results .select2-highlighted, body[data-theme="dark"] .select2-results .select2-result-selectable:hover, body[data-theme="dark"] .select2-results .select2-result-label:hover, body[data-theme="dark"] .chosen-container .chosen-results li.highlighted, body[data-theme="dark"] .ui-autocomplete .ui-state-focus { background: var(--sa-hover-green) !important; color: var(--sa-heading) !important; } body[data-theme="dark"] .select2-container .select2-choice .select2-arrow, body[data-theme="dark"] .chosen-container-single .chosen-single div, body[data-theme="dark"] .select2-container-multi .select2-choices .select2-search-choice { background: var(--sa-bg-4) !important; border-color: var(--sa-border) !important; color: var(--sa-text-muted) !important; } /* Dialogs / modals / menus */ body[data-theme="dark"] .modal, body[data-theme="dark"] .modal-dialog, body[data-theme="dark"] .modal-content, body[data-theme="dark"] .modal-header, body[data-theme="dark"] .modal-body, body[data-theme="dark"] .modal-footer, body[data-theme="dark"] .ui-dialog, body[data-theme="dark"] .ui-dialog .ui-dialog-content, body[data-theme="dark"] .MessageBoxContainer, body[data-theme="dark"] .ui-widget-content, body[data-theme="dark"] .ui-widget, body[data-theme="dark"] .ui-chatbox, body[data-theme="dark"] .ui-chatbox-content, body[data-theme="dark"] .dropdown-menu, body[data-theme="dark"] .open > .dropdown-menu, body[data-theme="dark"] .dropdown-menu-large, body[data-theme="dark"] .context-menu-list, body[data-theme="dark"] .popover, body[data-theme="dark"] .ui-menu, body[data-theme="dark"] .fc-popover, body[data-theme="dark"] .datepicker, body[data-theme="dark"] .daterangepicker, body[data-theme="dark"] .bootstrap-timepicker-widget, body[data-theme="dark"] .popover-content, body[data-theme="dark"] .popover-title, body[data-theme="dark"] .tooltip-inner, body[data-theme="dark"] .ui-datepicker, body[data-theme="dark"] .ui-datepicker-calendar, body[data-theme="dark"] .chat-body, body[data-theme="dark"] .notification-body, body[data-theme="dark"] .custom-scroll, body[data-theme="dark"] .todo-template-list, body[data-theme="dark"] #todo_template_list, body[data-theme="dark"] [id="todo_template_list"] { background: var(--sa-bg-3) !important; border-color: var(--sa-border-strong) !important; color: var(--sa-text) !important; } body[data-theme="dark"] .modal-backdrop, body[data-theme="dark"] .ui-widget-overlay { background: var(--sa-overlay) !important; } /* Keep SmartAdmin dialog title bar gradient */ body[data-theme="dark"] .ui-dialog .ui-dialog-titlebar { color: var(--sa-heading) !important; border-color: var(--sa-border) !important; } body[data-theme="dark"] .modal-footer, body[data-theme="dark"] .jarviswidget > footer, body[data-theme="dark"] .ui-dialog .ui-dialog-buttonpane, body[data-theme="dark"] .panel-footer, body[data-theme="dark"] .widget-footer { background: var(--sa-bg-2) !important; border-top-color: var(--sa-border) !important; } /* Tabs */ body[data-theme="dark"] .nav-tabs, body[data-theme="dark"] .jarviswidget header .nav-tabs, body[data-theme="dark"] .nav-pills, body[data-theme="dark"] .ui-tabs .ui-tabs-nav, body[data-theme="dark"] .tab-content, body[data-theme="dark"] .tab-pane, body[data-theme="dark"] .ui-tabs-panel { border-color: var(--sa-border) !important; } body[data-theme="dark"] .ui-tabs .ui-tabs-nav, body[data-theme="dark"] .nav-tabs, body[data-theme="dark"] .jarviswidget header .nav-tabs { background: var(--sa-bg-2) !important; } body[data-theme="dark"] .ui-tabs .ui-tabs-nav li, body[data-theme="dark"] .nav-tabs > li, body[data-theme="dark"] .jarviswidget header .nav-tabs > li, body[data-theme="dark"] .ui-tabs .ui-tabs-nav li.ui-state-default, body[data-theme="dark"] .ui-tabs .ui-tabs-nav li:not(.ui-tabs-active) { background: var(--sa-bg-4) !important; border-color: var(--sa-border) !important; } body[data-theme="dark"] .ui-tabs .ui-tabs-nav li.ui-tabs-active, body[data-theme="dark"] .nav-tabs > li.active, body[data-theme="dark"] .jarviswidget header .nav-tabs > li.active { background: #356e35 !important; border-color: #2c5b2c !important; } body[data-theme="dark"] .ui-tabs .ui-tabs-nav li a:hover, body[data-theme="dark"] .nav-tabs > li > a:hover, body[data-theme="dark"] .ui-tabs .ui-tabs-nav li.ui-state-hover { background: var(--sa-hover-green) !important; border-color: var(--sa-hover-border) !important; } body[data-theme="dark"] .ui-tabs-anchor { color: inherit !important; } /* Tables */ body[data-theme="dark"] table, body[data-theme="dark"] .table, body[data-theme="dark"] .table-responsive, body[data-theme="dark"] .table-bordered, body[data-theme="dark"] .table-striped, body[data-theme="dark"] .dataTable, body[data-theme="dark"] .dataTables_wrapper, body[data-theme="dark"] .dataTables_wrapper .dt-toolbar, body[data-theme="dark"] .dataTables_wrapper .dataTables_paginate, body[data-theme="dark"] .dataTables_wrapper .dataTables_length, body[data-theme="dark"] .dataTables_wrapper .dataTables_filter, body[data-theme="dark"] .dataTables_wrapper .dataTables_info, body[data-theme="dark"] .dataTables_wrapper .table-footer, body[data-theme="dark"] .DTTT_collection { color: var(--sa-text) !important; } body[data-theme="dark"] .table > thead > tr > th, body[data-theme="dark"] .table > thead > tr > td, body[data-theme="dark"] .dataTables_wrapper .dt-toolbar, body[data-theme="dark"] .table thead th { background: var(--sa-bg-4) !important; border-color: var(--sa-border) !important; color: var(--sa-heading) !important; } body[data-theme="dark"] .table > tbody > tr > td, body[data-theme="dark"] .table > tbody > tr > th, body[data-theme="dark"] .table > tfoot > tr > td, body[data-theme="dark"] .table > tfoot > tr > th, body[data-theme="dark"] .table-bordered > thead > tr > th, body[data-theme="dark"] .table-bordered > tbody > tr > td, body[data-theme="dark"] .table-bordered > tbody > tr > th, body[data-theme="dark"] .dataTable tbody tr, body[data-theme="dark"] .dataTable tbody td { background: var(--sa-bg-3) !important; border-color: var(--sa-border-soft) !important; color: var(--sa-text) !important; } body[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td, body[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > th, body[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background: #202020 !important; } body[data-theme="dark"] .table-hover > tbody > tr:hover, body[data-theme="dark"] .table-hover > tbody > tr:hover > td, body[data-theme="dark"] .table-hover > tbody > tr:hover > th, body[data-theme="dark"] .dataTable tbody tr:hover { background: rgba(53,110,53,.10) !important; } /* Pagination / labels / badges */ body[data-theme="dark"] .pagination > li > a, body[data-theme="dark"] .pagination > li > span, body[data-theme="dark"] .badge, body[data-theme="dark"] .label, body[data-theme="dark"] .alert, body[data-theme="dark"] .thumbnail, body[data-theme="dark"] .list-group-item, body[data-theme="dark"] .media, body[data-theme="dark"] .media-body, body[data-theme="dark"] .list-group, body[data-theme="dark"] .list-group-item-heading, body[data-theme="dark"] .list-group-item-text { background-color: var(--sa-bg-3) !important; border-color: var(--sa-border) !important; color: var(--sa-text) !important; } body[data-theme="dark"] .badge-warning, body[data-theme="dark"] .label-warning, body[data-theme="dark"] .alert-warning { background: #4f5d39 !important; border-color: #5f7044 !important; color: #d8e1c7 !important; } body[data-theme="dark"] .badge-danger, body[data-theme="dark"] .label-danger, body[data-theme="dark"] .alert-danger { background: #6a4040 !important; border-color: #7a4b4b !important; color: #d9c1c1 !important; } body[data-theme="dark"] .badge-info, body[data-theme="dark"] .label-info, body[data-theme="dark"] .alert-info { background: #3d4840 !important; border-color: #4b584f !important; color: #c7d3ca !important; } /* Progress */ body[data-theme="dark"] .progress, body[data-theme="dark"] .progress-striped { background: var(--sa-bg-2) !important; border-color: var(--sa-border) !important; } body[data-theme="dark"] .progress-bar, body[data-theme="dark"] .progress-bar-primary { background: linear-gradient(to bottom, #356e35, #306430) !important; } /* Todo template specific */ body[data-theme="dark"] .todo-template-item { background: var(--sa-bg-4) !important; color: var(--sa-text) !important; border-color: var(--sa-border) !important; } body[data-theme="dark"] .todo-template-item:hover { background: var(--sa-bg-5) !important; border-color: var(--sa-border-strong) !important; } body[data-theme="dark"] .todo-template-item.active { background: #223022 !important; border-color: #356e35 !important; } body[data-theme="dark"] .todo-template-item .meta, body[data-theme="dark"] .todo-template-empty { color: var(--sa-text-muted) !important; } body[data-theme="dark"] .todo-template-toggle { background: var(--sa-bg-3) !important; border-color: var(--sa-border) !important; color: var(--sa-text-muted) !important; } body[data-theme="dark"] .todo-template-toggle:hover { background: var(--sa-hover-green) !important; border-color: var(--sa-hover-border) !important; color: var(--sa-heading) !important; } body[data-theme="dark"] .todo-template-items-preview { background: transparent !important; border-top-color: var(--sa-border) !important; } /* jQuery UI / datepicker */ body[data-theme="dark"] .ui-widget, body[data-theme="dark"] .ui-widget input, body[data-theme="dark"] .ui-widget select, body[data-theme="dark"] .ui-widget textarea, body[data-theme="dark"] .ui-widget button, body[data-theme="dark"] .ui-state-default, body[data-theme="dark"] .ui-widget-content .ui-state-default, body[data-theme="dark"] .ui-widget-header .ui-state-default, body[data-theme="dark"] .ui-datepicker-calendar td, body[data-theme="dark"] .ui-datepicker-calendar th { color: var(--sa-text) !important; } body[data-theme="dark"] .ui-state-default, body[data-theme="dark"] .ui-widget-content .ui-state-default, body[data-theme="dark"] .ui-widget-header .ui-state-default, body[data-theme="dark"] .datepicker table tr td, body[data-theme="dark"] .daterangepicker td, body[data-theme="dark"] .daterangepicker th { background: var(--sa-bg-4) !important; border-color: var(--sa-border-soft) !important; } /* Context menu */ body[data-theme="dark"] .context-menu-item, body[data-theme="dark"] .context-menu-icon, body[data-theme="dark"] .context-menu-list, body[data-theme="dark"] .context-menu-input { color: var(--sa-text) !important; } body[data-theme="dark"] .context-menu-item.context-menu-hover { background: var(--sa-hover-green) !important; color: var(--sa-heading) !important; } /* Login / lock screen */ body[data-theme="dark"] .lockscreen, body[data-theme="dark"] .lockscreen .well, body[data-theme="dark"] .lockscreen .popover, body[data-theme="dark"] .login-desc-box-l, body[data-theme="dark"] .login-desc-box-r, body[data-theme="dark"] .login-form, body[data-theme="dark"] .login-form .well { background: var(--sa-bg-3) !important; color: var(--sa-text) !important; border-color: var(--sa-border) !important; } /* Remove bright utility backgrounds */ body[data-theme="dark"] .bg-light, body[data-theme="dark"] .bg-white, body[data-theme="dark"] .white, body[data-theme="dark"] .bg-color-white, body[data-theme="dark"] .txt-color-white, body[data-theme="dark"] .fc-state-default, body[data-theme="dark"] .fc-unthemed .fc-popover .fc-header, body[data-theme="dark"] .bootstrap-timepicker-widget table td a, body[data-theme="dark"] .popover-title, body[data-theme="dark"] .thumbnail, body[data-theme="dark"] .img-thumbnail, body[data-theme="dark"] .fileinput-preview, body[data-theme="dark"] .dropzone, body[data-theme="dark"] .dropzone .dz-preview, body[data-theme="dark"] .dropzone .dz-message, body[data-theme="dark"] .note-editor .note-toolbar, body[data-theme="dark"] .note-statusbar, body[data-theme="dark"] .CodeMirror, body[data-theme="dark"] .CodeMirror-gutters, body[data-theme="dark"] .editable-container, body[data-theme="dark"] .editableform, body[data-theme="dark"] .editable-input, body[data-theme="dark"] .editable-buttons, body[data-theme="dark"] .wysihtml5-toolbar, body[data-theme="dark"] .wysihtml5-toolbar .btn { background: var(--sa-bg-3) !important; border-color: var(--sa-border) !important; color: var(--sa-text) !important; } /* Scrollbars */ @supports selector(::-webkit-scrollbar) { body[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } body[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--sa-bg-2); } body[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #353535; border: 2px solid var(--sa-bg-2); border-radius: 10px; } body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #414141; } } /* Focus */ body[data-theme="dark"] :focus { outline: 2px solid rgba(53,110,53,.45); outline-offset: 2px; } /* ------------------------------------------------------------------ Additional dark corrections ------------------------------------------------------------------ */ body[data-theme="dark"] .select2-container .select2-choice, body[data-theme="dark"] .select2-selection, body[data-theme="dark"] .select2-selection--single, body[data-theme="dark"] .select2-selection--multiple, body[data-theme="dark"] .select2-container--default .select2-selection--single, body[data-theme="dark"] .select2-container--default .select2-selection--multiple, body[data-theme="dark"] .select2-container--classic .select2-selection--single, body[data-theme="dark"] .select2-container--classic .select2-selection--multiple { background: var(--sa-input-bg) !important; background-image: none !important; border-color: var(--sa-input-border) !important; color: var(--sa-text) !important; box-shadow: none !important; } body[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered, body[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered, body[data-theme="dark"] .select2-container--classic .select2-selection--single .select2-selection__rendered, body[data-theme="dark"] .select2-container--classic .select2-selection--multiple .select2-selection__rendered, body[data-theme="dark"] .select2-selection__choice, body[data-theme="dark"] .select2-selection__placeholder { color: var(--sa-text) !important; } body[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow, body[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__arrow, body[data-theme="dark"] .select2-container--classic .select2-selection--single .select2-selection__arrow, body[data-theme="dark"] .select2-container--classic .select2-selection--multiple .select2-selection__arrow, body[data-theme="dark"] .select2-container .select2-choice .select2-arrow { background: var(--sa-bg-4) !important; background-image: none !important; border-left-color: var(--sa-border) !important; color: var(--sa-text-muted) !important; } body[data-theme="dark"] .ui-tabs .ui-tabs-nav li a, body[data-theme="dark"] .ui-tabs .ui-tabs-nav li.ui-state-default a, body[data-theme="dark"] .ui-tabs .ui-tabs-nav li:not(.ui-tabs-active) a, body[data-theme="dark"] .nav-tabs > li > a { background: var(--sa-bg-4) !important; border-color: var(--sa-border) !important; color: var(--sa-text) !important; } body[data-theme="dark"] .ui-tabs .ui-tabs-nav li a:hover, body[data-theme="dark"] .ui-tabs .ui-tabs-nav li.ui-state-hover a, body[data-theme="dark"] .nav-tabs > li > a:hover { background: var(--sa-hover-green) !important; border-color: var(--sa-hover-border) !important; color: var(--sa-heading) !important; } body[data-theme="dark"] .ui-tabs .ui-tabs-nav li.ui-tabs-active a, body[data-theme="dark"] .nav-tabs > li.active > a, body[data-theme="dark"] .nav-tabs > li.active > a:hover, body[data-theme="dark"] .nav-tabs > li.active > a:focus { background: #356e35 !important; border-color: #2c5b2c !important; color: var(--sa-heading) !important; } body[data-theme="dark"] .dataTables_wrapper .dt-toolbar-footer, body[data-theme="dark"] .dt-toolbar-footer, body[data-theme="dark"] div.dt-toolbar-footer { background: var(--sa-bg-2) !important; border-color: var(--sa-border) !important; color: var(--sa-text) !important; } body[data-theme="dark"] .smart-form fieldset, body[data-theme="dark"] fieldset, body[data-theme="dark"] .smart-form .fieldset { background: var(--sa-bg-2) !important; border-color: var(--sa-border) !important; color: var(--sa-text) !important; } body[data-theme="dark"] #myGantt, body[data-theme="dark"] #myGantt *, body[data-theme="dark"] my-gantt, body[data-theme="dark"] my-gantt *, body[data-theme="dark"] .myGantt, body[data-theme="dark"] .myGantt * { --background-color: var(--sa-bg-2); --surface-color: var(--sa-bg-3); --card-color: var(--sa-bg-3); --panel-color: var(--sa-bg-2); --border-color: var(--sa-border); --text-color: var(--sa-text); --text-muted-color: var(--sa-text-muted); background-color: transparent !important; color: var(--sa-text) !important; border-color: var(--sa-border) !important; } body[data-theme="dark"] #myGantt, body[data-theme="dark"] my-gantt, body[data-theme="dark"] .myGantt { background: var(--sa-bg-2) !important; } /* ------------------------------------------------------------------ Final text + button corrections ------------------------------------------------------------------ */ :root[data-theme="dark"], body[data-theme="dark"] { --sa-text: #fff; --sa-text-soft: #fff; --sa-text-muted: #fff; --sa-text-faint: #fff; --sa-heading: #fff; --sa-selection-text: #fff; --sa-placeholder: #fff; } body[data-theme="dark"], body[data-theme="dark"] p, body[data-theme="dark"] span, body[data-theme="dark"] div, body[data-theme="dark"] li, body[data-theme="dark"] td, body[data-theme="dark"] th, body[data-theme="dark"] label, body[data-theme="dark"] small, body[data-theme="dark"] strong, body[data-theme="dark"] b, body[data-theme="dark"] em, body[data-theme="dark"] i, body[data-theme="dark"] h1, body[data-theme="dark"] h2, body[data-theme="dark"] h3, body[data-theme="dark"] h4, body[data-theme="dark"] h5, body[data-theme="dark"] h6, body[data-theme="dark"] legend, body[data-theme="dark"] .note, body[data-theme="dark"] .help-block, body[data-theme="dark"] .text-muted, body[data-theme="dark"] .muted, body[data-theme="dark"] .meta, body[data-theme="dark"] .breadcrumb, body[data-theme="dark"] .badge, body[data-theme="dark"] .label, body[data-theme="dark"] .jarviswidget > header h2, body[data-theme="dark"] .panel-title, body[data-theme="dark"] .modal-title, body[data-theme="dark"] .ui-dialog-title, body[data-theme="dark"] .ui-tabs-anchor, body[data-theme="dark"] .select2-results, body[data-theme="dark"] .select2-results__option, body[data-theme="dark"] .select2-selection__rendered, body[data-theme="dark"] .select2-search__field, body[data-theme="dark"] .select2-chosen, body[data-theme="dark"] .select2-choice, body[data-theme="dark"] input, body[data-theme="dark"] textarea, body[data-theme="dark"] select, body[data-theme="dark"] button { color: #fff !important; } body[data-theme="dark"] input::placeholder, body[data-theme="dark"] textarea::placeholder, body[data-theme="dark"] .select2-search__field::placeholder { color: #fff !important; opacity: .85; } body[data-theme="dark"] .btn-default, body[data-theme="dark"] .btn-default:visited, body[data-theme="dark"] .smart-form .button, body[data-theme="dark"] .bootstrap-timepicker-widget table td a, body[data-theme="dark"] .wysihtml5-toolbar .btn, body[data-theme="dark"] .editable-buttons .btn { background-image: none !important; background: var(--sa-bg-4) !important; border-color: var(--sa-border-strong) !important; color: #fff !important; text-shadow: none !important; box-shadow: none !important; } body[data-theme="dark"] .btn-default:hover, body[data-theme="dark"] .btn-default:focus, body[data-theme="dark"] .btn-default:active, body[data-theme="dark"] .open > .dropdown-toggle.btn-default, body[data-theme="dark"] .smart-form .button:hover, body[data-theme="dark"] .smart-form .button:focus, body[data-theme="dark"] .smart-form .button:active, body[data-theme="dark"] .wysihtml5-toolbar .btn:hover, body[data-theme="dark"] .editable-buttons .btn:hover { background: #213021 !important; border-color: #355335 !important; color: #fff !important; } body[data-theme="dark"] .btn-default.disabled, body[data-theme="dark"] .btn-default[disabled], body[data-theme="dark"] fieldset[disabled] .btn-default { background: #242424 !important; border-color: #3a3a3a !important; color: #fff !important; opacity: .7; } /* ------------------------------------------------------------------ User requested dark-theme adjustments (targeted only) ------------------------------------------------------------------ */ /* Header buttons: keep buttons as-is, but make text/icons readable */ body[data-theme="dark"] .btn-header.transparent > :first-child > a, body[data-theme="dark"] .btn-header.transparent > div > a, body[data-theme="dark"] .btn-header.transparent a, body[data-theme="dark"] .btn-header.transparent button, body[data-theme="dark"] .btn-header.transparent .btn, body[data-theme="dark"] .btn-header.transparent > :first-child > a i, body[data-theme="dark"] .btn-header.transparent > div > a i { color: #111 !important; } /* Tear calendar in dark mode */ body[data-theme="dark"] .tear-calendar { color: #d7dde3 !important; } body[data-theme="dark"] .tear-calendar .binding { background: #8e3a3a !important; box-shadow: 0 1px 0 rgba(0,0,0,.35), 0 6px 10px rgba(0,0,0,.28) !important; } body[data-theme="dark"] .tear-calendar .ring { background: #b7c0c7 !important; box-shadow: inset 0 0 0 2px rgba(0,0,0,.22), inset 0 0 6px rgba(0,0,0,.28) !important; } body[data-theme="dark"] .tear-calendar .sheet { background: #252525 !important; border-top-color: rgba(255,255,255,.16) !important; box-shadow: 0 6px 14px rgba(0,0,0,.30) !important; } body[data-theme="dark"] .tear-calendar .weekday, body[data-theme="dark"] .tear-calendar .month, body[data-theme="dark"] .tear-calendar .year { color: #b8c0c8 !important; } body[data-theme="dark"] .tear-calendar .day_neu { color: #f2f4f6 !important; } body[data-theme="dark"] .tear-calendar .sheet::after { background: radial-gradient(closest-corner at 100% 100%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%) !important; } /* myGantt: keep semantic colors visible in dark mode */ body[data-theme="dark"] #myGantt { --bg: #1a1a1a; --track: #2b2f34; --month-bg: #33383e; --month-fg: #eceff2; --week-bg: #2a2f35; --week-fg: #e2e7ec; --day-fg: #edf1f4; --weekend: #2f7f89; background: var(--bg) !important; } body[data-theme="dark"] #myGantt .month-span, body[data-theme="dark"] #myGantt .week-span, body[data-theme="dark"] #myGantt .day { border: 1px solid #565656 !important; } body[data-theme="dark"] #myGantt .month-span { background: var(--month-bg) !important; color: var(--month-fg) !important; } body[data-theme="dark"] #myGantt .week-span { background: var(--week-bg) !important; color: var(--week-fg) !important; } body[data-theme="dark"] #myGantt .day { background: var(--track) !important; color: var(--day-fg) !important; } body[data-theme="dark"] #myGantt .day.weekend { background: var(--weekend) !important; color: #eaf8fb !important; border-color: #46939c !important; } body[data-theme="dark"] #myGantt .ampel, body[data-theme="dark"] #myGantt .ampel.rot, body[data-theme="dark"] #myGantt .ampel.red, body[data-theme="dark"] #myGantt [class*="ampel-"] { border: 1px solid rgba(255,255,255,.08) !important; } body[data-theme="dark"] #myGantt .ampel.rot, body[data-theme="dark"] #myGantt .ampel.red, body[data-theme="dark"] #myGantt [class*="ampel-red"], body[data-theme="dark"] #myGantt [class*="ampel_rot"], body[data-theme="dark"] #myGantt [data-status="rot"], body[data-theme="dark"] #myGantt [data-color="rot"] { background: #8f4343 !important; } body[data-theme="dark"] #myGantt .ampel.gelb, body[data-theme="dark"] #myGantt .ampel.yellow, body[data-theme="dark"] #myGantt [class*="ampel-yellow"], body[data-theme="dark"] #myGantt [class*="ampel_gelb"], body[data-theme="dark"] #myGantt [data-status="gelb"], body[data-theme="dark"] #myGantt [data-color="gelb"] { background: #9a8340 !important; } body[data-theme="dark"] #myGantt .ampel.lila, body[data-theme="dark"] #myGantt .ampel.violett, body[data-theme="dark"] #myGantt .ampel.purple, body[data-theme="dark"] #myGantt [class*="ampel-purple"], body[data-theme="dark"] #myGantt [class*="ampel_lila"], body[data-theme="dark"] #myGantt [data-status="lila"], body[data-theme="dark"] #myGantt [data-color="lila"] { background: #73508f !important; } body[data-theme="dark"] #myGantt .ampel.gruen, body[data-theme="dark"] #myGantt .ampel.green, body[data-theme="dark"] #myGantt [class*="ampel-green"], body[data-theme="dark"] #myGantt [class*="ampel_gruen"], body[data-theme="dark"] #myGantt [data-status="gruen"], body[data-theme="dark"] #myGantt [data-color="gruen"] { background: #4f8650 !important; } /* Fix: myGantt Ampel-Farben dürfen im Dark Theme nicht schwarz/transparant überschrieben werden */ body[data-theme="dark"] #myGantt .row-ampel > *, body[data-theme="dark"] #myGantt .ampel, body[data-theme="dark"] #myGantt .ampel *, body[data-theme="dark"] #myGantt [class*="ampel-"] { background-image: none !important; color: inherit !important; } body[data-theme="dark"] #myGantt .ampel.rot, body[data-theme="dark"] #myGantt .ampel.red, body[data-theme="dark"] #myGantt [class*="ampel-red"], body[data-theme="dark"] #myGantt [class*="ampel_rot"], body[data-theme="dark"] #myGantt [data-status="rot"], body[data-theme="dark"] #myGantt [data-color="rot"] { background-color: #8f4343 !important; } body[data-theme="dark"] #myGantt .ampel.gelb, body[data-theme="dark"] #myGantt .ampel.yellow, body[data-theme="dark"] #myGantt [class*="ampel-yellow"], body[data-theme="dark"] #myGantt [class*="ampel_gelb"], body[data-theme="dark"] #myGantt [data-status="gelb"], body[data-theme="dark"] #myGantt [data-color="gelb"] { background-color: #9a8340 !important; } body[data-theme="dark"] #myGantt .ampel.lila, body[data-theme="dark"] #myGantt .ampel.violett, body[data-theme="dark"] #myGantt .ampel.purple, body[data-theme="dark"] #myGantt [class*="ampel-purple"], body[data-theme="dark"] #myGantt [class*="ampel_lila"], body[data-theme="dark"] #myGantt [data-status="lila"], body[data-theme="dark"] #myGantt [data-color="lila"] { background-color: #73508f !important; } body[data-theme="dark"] #myGantt .ampel.gruen, body[data-theme="dark"] #myGantt .ampel.green, body[data-theme="dark"] #myGantt [class*="ampel-green"], body[data-theme="dark"] #myGantt [class*="ampel_gruen"], body[data-theme="dark"] #myGantt [data-status="gruen"], body[data-theme="dark"] #myGantt [data-color="gruen"] { background-color: #4f8650 !important; } /* Fix: Inline-Ampel-Farben im myGantt dürfen im Dark Theme nicht überschrieben werden */ body[data-theme="dark"] #myGantt .ampel[style*="background: rgb(239, 60, 28)"], body[data-theme="dark"] #myGantt .ampel[style*="background-color: rgb(239, 60, 28)"] { background: rgb(239, 60, 28) !important; background-color: rgb(239, 60, 28) !important; } body[data-theme="dark"] #myGantt .ampel[style*="background: rgb(255, 205, 0)"], body[data-theme="dark"] #myGantt .ampel[style*="background-color: rgb(255, 205, 0)"], body[data-theme="dark"] #myGantt .ampel[style*="background: rgb(255,205,0)"], body[data-theme="dark"] #myGantt .ampel[style*="background-color: rgb(255,205,0)"] { background: rgb(255, 205, 0) !important; background-color: rgb(255, 205, 0) !important; } body[data-theme="dark"] #myGantt .ampel[style*="background: rgb(180, 120, 255)"], body[data-theme="dark"] #myGantt .ampel[style*="background-color: rgb(180, 120, 255)"], body[data-theme="dark"] #myGantt .ampel[style*="background: rgb(180,120,255)"], body[data-theme="dark"] #myGantt .ampel[style*="background-color: rgb(180,120,255)"] { background: rgb(180, 120, 255) !important; background-color: rgb(180, 120, 255) !important; } body[data-theme="dark"] #myGantt .ampel[style*="background: rgb(76, 175, 80)"], body[data-theme="dark"] #myGantt .ampel[style*="background-color: rgb(76, 175, 80)"], body[data-theme="dark"] #myGantt .ampel[style*="background: rgb(76,175,80)"], body[data-theme="dark"] #myGantt .ampel[style*="background-color: rgb(76,175,80)"] { background: rgb(76, 175, 80) !important; background-color: rgb(76, 175, 80) !important; } /* Fix: zusätzliche Inline-Ampel-Farben im myGantt erhalten */ body[data-theme="dark"] #myGantt .ampel[style*="background: rgb(28, 126, 0)"], body[data-theme="dark"] #myGantt .ampel[style*="background-color: rgb(28, 126, 0)"], body[data-theme="dark"] #myGantt .ampel[style*="background: rgb(28,126,0)"], body[data-theme="dark"] #myGantt .ampel[style*="background-color: rgb(28,126,0)"] { background: rgb(28, 126, 0) !important; background-color: rgb(28, 126, 0) !important; } body[data-theme="dark"] #myGantt .ampel[style*="background: rgb(252, 159, 0)"], body[data-theme="dark"] #myGantt .ampel[style*="background-color: rgb(252, 159, 0)"], body[data-theme="dark"] #myGantt .ampel[style*="background: rgb(252,159,0)"], body[data-theme="dark"] #myGantt .ampel[style*="background-color: rgb(252,159,0)"] { background: rgb(252, 159, 0) !important; background-color: rgb(252, 159, 0) !important; } body[data-theme="dark"] #myGantt .ampel[style*="background: rgb(159, 0, 240)"], body[data-theme="dark"] #myGantt .ampel[style*="background-color: rgb(159, 0, 240)"], body[data-theme="dark"] #myGantt .ampel[style*="background: rgb(159,0,240)"], body[data-theme="dark"] #myGantt .ampel[style*="background-color: rgb(159,0,240)"] { background: rgb(159, 0, 240) !important; background-color: rgb(159, 0, 240) !important; } /* Ergänzung: Header nur Buttons/Icons schwarz, normale Header-Texte unverändert */ body[data-theme="dark"] #header .btn-header a, body[data-theme="dark"] #header .btn-header button, body[data-theme="dark"] #header .btn-header .btn, body[data-theme="dark"] #header .btn-header a i, body[data-theme="dark"] #header .btn-header button i, body[data-theme="dark"] .header .btn-header a, body[data-theme="dark"] .header .btn-header button, body[data-theme="dark"] .header .btn-header .btn, body[data-theme="dark"] .header .btn-header a i, body[data-theme="dark"] .header .btn-header button i, body[data-theme="dark"] .page-header .btn-header a, body[data-theme="dark"] .page-header .btn-header button, body[data-theme="dark"] .page-header .btn-header .btn, body[data-theme="dark"] .page-header .btn-header a i, body[data-theme="dark"] .page-header .btn-header button i { color: #000 !important; } /* Gewünschte dunklere Ticket-Zeilen */ body[data-theme="dark"] .eit_ticket_zeile_yellow { background-color: rgb(97, 73, 15) !important; } body[data-theme="dark"] .eit_ticket_zeile_red { background-color: rgb(52, 28, 28) !important; } /* status links im Dark Theme ohne hellen Hintergrund */ body[data-theme="dark"] .status .links { background: transparent !important; background-color: transparent !important; } /* Badge-Farben im Dark Mode beibehalten */ .badge.bg-color-orange { background-color: #c79121 !important; } .badge.bg-color-red { background-color: #a90329 !important; } .badge.bg-color-Light, .badge.bg-color-light, .badge.bg-color-lighten { background-color: #d5e7ec !important; color: #333 !important; } .badge.bg-color-redLight { background-color: #a65858 !important; } /* Alle SmartAdmin Badge bg-color-* Klassen im Dark Mode in Ursprungsfarbe behalten */ body[data-theme="dark"] .badge.bg-color-blue { background-color: #57889c !important; } body[data-theme="dark"] .badge.bg-color-blueLight { background-color: #92a2a8 !important; } body[data-theme="dark"] .badge.bg-color-blueDark { background-color: #4c4f53 !important; } body[data-theme="dark"] .badge.bg-color-green { background-color: #356e35 !important; } body[data-theme="dark"] .badge.bg-color-greenLight { background-color: #71843f !important; } body[data-theme="dark"] .badge.bg-color-greenDark { background-color: #496949 !important; } body[data-theme="dark"] .badge.bg-color-red { background-color: #a90329 !important; } body[data-theme="dark"] .badge.bg-color-yellow { background-color: #b09b5b !important; } body[data-theme="dark"] .badge.bg-color-orange { background-color: #c79121 !important; } body[data-theme="dark"] .badge.bg-color-orangeDark { background-color: #a57225 !important; } body[data-theme="dark"] .badge.bg-color-pink { background-color: #ac5287 !important; } body[data-theme="dark"] .badge.bg-color-pinkDark { background-color: #a8829f !important; } body[data-theme="dark"] .badge.bg-color-purple { background-color: #6e587a !important; } body[data-theme="dark"] .badge.bg-color-darken { background-color: #404040 !important; } body[data-theme="dark"] .badge.bg-color-lighten { background-color: #d5e7ec !important; color: #333 !important; } body[data-theme="dark"] .badge.bg-color-white { background-color: #fff !important; color: #333 !important; } body[data-theme="dark"] .badge.bg-color-grayDark { background-color: #525252 !important; } body[data-theme="dark"] .badge.bg-color-magenta { background-color: #6e3671 !important; } body[data-theme="dark"] .badge.bg-color-teal { background-color: #568a89 !important; } body[data-theme="dark"] .badge.bg-color-redLight { background-color: #a65858 !important; } body[data-theme="dark"] .badge.bg-color-Light { background-color: #d5e7ec !important; color: #333 !important; } /* Activity dropdown: helle Header-Buttons im Dark Theme mit schwarzer Schrift/Icon */ body[data-theme="dark"] .activity-dropdown .btn, body[data-theme="dark"] .activity-dropdown i, body[data-theme="dark"] .activity-dropdown .btn *, body[data-theme="dark"] .activity-dropdown button, body[data-theme="dark"] .activity-dropdown button *, body[data-theme="dark"] .activity-dropdown .dropdown-toggle, body[data-theme="dark"] .activity-dropdown .dropdown-toggle * { color: #000 !important; }