/* ════════════════════════════════════════════════════════════════════════ TEMA – Mörkt grått grundtema (dark) + ljust tema (light) Appliceras via data-tema="mork"|"ljust" på ════════════════════════════════════════════════════════════════════════ */ /* ── Mörkt tema (standard) ───────────────────────────────────────────── */ :root, [data-tema="mork"] { color-scheme: dark; /* Bakgrunder */ --bg-grund: #1a1a1e; --bg-yta: #26262c; --bg-yta-hov: #2e2e36; --bg-yta-2: #313139; --bg-inmatning: #1e1e24; /* Text */ --text-prim: #e8e8f0; --text-sek: #9898aa; --text-dov: #666676; /* Accent – mörkt gråblått */ --accent: #4a8fcc; --accent-hov: #5aa0dd; --accent-text: #ffffff; /* Kant */ --kant: #38383f; --kant-stark: #4a4a54; /* Sidebar/header */ --sidebar-bg: #111116; --sidebar-text: #c8c8d8; --sidebar-aktiv: #26262c; --header-bg: #1f1f25; /* Navbar mobil */ --navbar-bg: rgba(26,26,30,0.92); /* Status */ --status-oppen-bg: #3a2e00; --status-oppen-text: #ffd060; --status-pagaende-bg: #0d2a4a; --status-pagaende-text:#7ab8f5; --status-avslutad-bg: #0a2a18; --status-avslutad-text:#5ecb8a; /* Feedback */ --fel-bg: #3a1018; --fel-text: #f87a8a; --ok-bg: #0a2a18; --ok-text: #5ecb8a; /* Skugga */ --skugga: 0 2px 8px rgba(0,0,0,0.5); --skugga-latt: 0 1px 3px rgba(0,0,0,0.4); } /* ── Ljust tema ──────────────────────────────────────────────────────── */ [data-tema="ljust"] { color-scheme: light; --bg-grund: #f0f2f5; --bg-yta: #ffffff; --bg-yta-hov: #f8f9fa; --bg-yta-2: #f1f3f5; --bg-inmatning: #ffffff; --text-prim: #1a1a2e; --text-sek: #555566; --text-dov: #999aaa; --accent: #1a5276; --accent-hov: #1f6390; --accent-text: #ffffff; --kant: #e0e0e8; --kant-stark: #c8c8d4; --sidebar-bg: #1a3a5c; --sidebar-text: rgba(255,255,255,0.82); --sidebar-aktiv: rgba(255,255,255,0.18); --header-bg: #ffffff; --navbar-bg: rgba(255,255,255,0.95); --status-oppen-bg: #fef3cd; --status-oppen-text: #856404; --status-pagaende-bg: #cfe2ff; --status-pagaende-text:#084298; --status-avslutad-bg: #d1e7dd; --status-avslutad-text:#0a3622; --fel-bg: #f8d7da; --fel-text: #842029; --ok-bg: #d1e7dd; --ok-text: #0a3622; --skugga: 0 2px 8px rgba(0,0,0,0.1); --skugga-latt: 0 1px 3px rgba(0,0,0,0.08); } /* ════════════════════════════════════════════════════════════════════════ GLOBAL – applicera variabler på html/body och Bootstrap-komponenter ════════════════════════════════════════════════════════════════════════ */ html, body { background-color: var(--bg-grund); color: var(--text-prim); transition: background-color 0.25s, color 0.25s; } /* Global text-hjälpklasser – tema-styrda */ .text-muted, .text-secondary { color: var(--text-sek) !important; } small { color: var(--text-sek); } /* Bootstrap-overrides */ .card { background-color: var(--bg-yta); border-color: var(--kant); color: var(--text-prim); box-shadow: var(--skugga); } .card-body { color: var(--text-prim); } .form-control, .form-select { background-color: var(--bg-inmatning); border-color: var(--kant); color: var(--text-prim); } .form-control:focus, .form-select:focus { background-color: var(--bg-inmatning); border-color: var(--accent); color: var(--text-prim); box-shadow: 0 0 0 3px rgba(74,143,204,0.2); } .form-control::placeholder { color: var(--text-dov); } .form-label { color: var(--text-prim); } .table { color: var(--text-prim); --bs-table-color: var(--text-prim); --bs-table-bg: var(--bg-yta); --bs-table-hover-bg: var(--bg-yta-hov); --bs-table-hover-color: var(--text-prim); --bs-table-border-color: var(--kant); } .table-light { --bs-table-bg: var(--bg-yta-2); --bs-table-color: var(--text-prim); --bs-table-striped-color: var(--text-prim); --bs-table-active-color: var(--text-prim); --bs-table-hover-color: var(--text-prim); color: var(--text-prim); } .table-responsive { border-color: var(--kant); } .btn-primary { --bs-btn-color: var(--accent-text); --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-color: var(--accent-text); --bs-btn-hover-bg: var(--accent-hov); --bs-btn-hover-border-color: var(--accent-hov); --bs-btn-active-color: var(--accent-text); --bs-btn-active-bg: var(--accent-hov); --bs-btn-disabled-color: var(--accent-text); --bs-btn-disabled-bg: var(--accent); background-color: var(--accent); border-color: var(--accent); color: var(--accent-text) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--accent-hov); border-color: var(--accent-hov); color: var(--accent-text) !important; } .btn-primary svg, .btn-primary span { color: inherit !important; } .btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-color: var(--accent-text); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); color: var(--accent); border-color: var(--accent); } .btn-outline-primary:hover { background-color: var(--accent); color: var(--accent-text) !important; } .btn-outline-secondary { --bs-btn-color: var(--text-sek); --bs-btn-border-color: var(--kant-stark); --bs-btn-hover-color: var(--text-prim); --bs-btn-hover-bg: var(--bg-yta-2); --bs-btn-hover-border-color: var(--kant-stark); color: var(--text-sek); border-color: var(--kant-stark); } .btn-outline-secondary:hover { background-color: var(--bg-yta-2); color: var(--text-prim) !important; } .alert-success { background-color: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-text); } .alert-danger { background-color: var(--fel-bg); color: var(--fel-text); border-color: var(--fel-text); } .alert-info { background-color: var(--bg-yta-2); color: var(--text-sek); border-color: var(--kant); } .badge.bg-warning { background-color: var(--status-oppen-bg) !important; color: var(--status-oppen-text) !important; } .badge.bg-primary { background-color: var(--status-pagaende-bg) !important; color: var(--status-pagaende-text) !important; } .badge.bg-success { background-color: var(--status-avslutad-bg) !important; color: var(--status-avslutad-text) !important; } /* ── Temaknapp ────────────────────────────────────────────────────────── */ .tema-knapp { background: none; border: 1px solid var(--kant-stark); border-radius: 20px; padding: 0.3rem 0.75rem; cursor: pointer; font-size: 0.85rem; color: var(--text-sek); display: flex; align-items: center; gap: 0.4rem; transition: background 0.15s, color 0.15s; min-height: 32px; min-width: auto; } .tema-knapp:hover { background: var(--bg-yta-2); color: var(--text-prim); } /* ════════════════════════════════════════════════════════════════════════ DARK MODE – fullständiga Bootstrap-overrides Bootstrap har hårdkodade färger som förstör dark mode ════════════════════════════════════════════════════════════════════════ */ :root, [data-tema="mork"] { /* Bootstrap CSS-variabler – override */ --bs-body-color: #e8e8f0; --bs-body-bg: #1a1a1e; --bs-secondary-color: #9898aa; --bs-border-color: #38383f; --bs-card-bg: #26262c; --bs-card-border-color: #38383f; --bs-table-color: #e8e8f0; --bs-table-bg: #26262c; --bs-table-border-color: #38383f; --bs-input-bg: #1e1e24; --bs-input-color: #e8e8f0; --bs-input-border-color: #38383f; --bs-link-color: #4a8fcc; --bs-link-hover-color: #5aa0dd; --bs-heading-color: #e8e8f0; --bs-emphasis-color: #f0f0f8; --bs-secondary-bg: #26262c; --bs-tertiary-bg: #313139; --bs-form-select-bg: #1e1e24; } /* Direkta element-overrides för dark mode */ [data-tema="mork"] h1, [data-tema="mork"] h2, [data-tema="mork"] h3, [data-tema="mork"] h4, [data-tema="mork"] h5, [data-tema="mork"] h6 { color: #e8e8f0; } [data-tema="mork"] p, [data-tema="mork"] span, [data-tema="mork"] li, [data-tema="mork"] td, [data-tema="mork"] th, [data-tema="mork"] label, [data-tema="mork"] strong, [data-tema="mork"] small { color: #e8e8f0; } [data-tema="mork"] a { color: #4a8fcc; } [data-tema="mork"] a:hover { color: #5aa0dd; } [data-tema="mork"] .text-muted, [data-tema="mork"] .text-secondary, [data-tema="mork"] small.text-muted, [data-tema="mork"] td .text-muted, [data-tema="mork"] td small { color: #9898aa !important; } [data-tema="mork"] .text-dark { color: #e8e8f0 !important; } [data-tema="mork"] .text-body { color: #e8e8f0 !important; } /* Card */ [data-tema="mork"] .card { background-color: #26262c; border-color: #38383f; color: #e8e8f0; } [data-tema="mork"] .card-header { background-color: #313139; border-color: #38383f; color: #e8e8f0; } [data-tema="mork"] .card-footer { background-color: #313139; border-color: #38383f; color: #9898aa; } /* Form */ [data-tema="mork"] .form-control, [data-tema="mork"] .form-select { background-color: #1e1e24; border-color: #38383f; color: #e8e8f0; } [data-tema="mork"] .form-control:focus, [data-tema="mork"] .form-select:focus { background-color: #1e1e24; color: #e8e8f0; } [data-tema="mork"] .form-control::placeholder { color: #666676; } [data-tema="mork"] .form-label { color: #e8e8f0; font-weight: 600; } [data-tema="mork"] .form-text { color: #9898aa; } [data-tema="mork"] .form-check-label { color: #e8e8f0; } [data-tema="mork"] .input-group-text { background-color: #313139; border-color: #38383f; color: #9898aa; } /* Tabell */ [data-tema="mork"] .table { --bs-table-color: #e8e8f0; --bs-table-bg: #26262c; --bs-table-border-color: #38383f; --bs-table-hover-bg: #2e2e36; color: #e8e8f0; } [data-tema="mork"] .table thead th { color: #9898aa; border-color: #4a4a54; } [data-tema="mork"] .table td, [data-tema="mork"] .table th { border-color: #38383f; color: #e8e8f0; } [data-tema="mork"] .table-light { --bs-table-bg: #313139; color: #e8e8f0; } [data-tema="mork"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.03); color: #e8e8f0; } /* List group */ [data-tema="mork"] .list-group-item { background-color: #26262c; border-color: #38383f; color: #e8e8f0; } /* Modal */ [data-tema="mork"] .modal-content { background-color: #26262c; border-color: #38383f; color: #e8e8f0; } [data-tema="mork"] .modal-header, [data-tema="mork"] .modal-footer { border-color: #38383f; } /* Dropdown */ [data-tema="mork"] .dropdown-menu { background-color: #26262c; border-color: #38383f; } [data-tema="mork"] .dropdown-item { color: #e8e8f0; } [data-tema="mork"] .dropdown-item:hover { background-color: #313139; color: #e8e8f0; } [data-tema="mork"] .dropdown-divider { border-color: #38383f; } /* Alert */ [data-tema="mork"] .alert-secondary { background-color: #313139; border-color: #4a4a54; color: #9898aa; } [data-tema="mork"] .alert-warning { background-color: #3a2e00; border-color: #5a4800; color: #ffd060; } [data-tema="mork"] .alert-primary { background-color: #0d2a4a; border-color: #1a4a7a; color: #7ab8f5; } [data-tema="mork"] .alert-light { background-color: #26262c; border-color: #38383f; color: #e8e8f0; } /* Badge */ [data-tema="mork"] .badge.bg-secondary { background-color: #38383f !important; color: #9898aa !important; } [data-tema="mork"] .badge.bg-light { background-color: #313139 !important; color: #e8e8f0 !important; } [data-tema="mork"] .badge.bg-dark { background-color: #e8e8f0 !important; color: #1a1a1e !important; } /* Nav tabs */ [data-tema="mork"] .nav-tabs { border-color: #38383f; } [data-tema="mork"] .nav-tabs .nav-link { color: #9898aa; } [data-tema="mork"] .nav-tabs .nav-link.active { background-color: #26262c; border-color: #38383f; color: #e8e8f0; } /* HR */ [data-tema="mork"] hr { border-color: #38383f; opacity: 1; } /* Pagination */ [data-tema="mork"] .page-link { background-color: #26262c; border-color: #38383f; color: #4a8fcc; } [data-tema="mork"] .page-item.active .page-link { background-color: #4a8fcc; border-color: #4a8fcc; } [data-tema="mork"] .page-item.disabled .page-link { background-color: #1e1e24; color: #666676; }