/* ============================================================ * dark-mode.css — pomocwp.pl * Tryb ciemny dla motywu Sandbox (Bootstrap 5.3). * Aktywowany przez atrybut data-bs-theme="dark" na * (przełącznik oparty o Alpine.js — patrz index.html). * * Motyw bazowy definiuje tła sekcji przez klasy pomocnicze * (.bg-light, .bg-white, .bg-soft-primary, .bg-gradient-*), * które mają zaszyte jasne kolory — tutaj je nadpisujemy. * ============================================================ */ [data-bs-theme="dark"] { --pwp-bg: #16171d; /* główne tło strony */ --pwp-surface: #1d1f27; /* karty / sekcje jasne */ --pwp-surface-2: #23262f; /* sekcje "soft-primary" */ --pwp-border: #2c2f3a; --pwp-text: #c9cdd6; --pwp-heading: #f3f4f8; --pwp-muted: #8b90a0; --bs-body-bg: var(--pwp-bg); --bs-body-color: var(--pwp-text); } /* ---- tła stron / sekcji ---- */ [data-bs-theme="dark"] body, [data-bs-theme="dark"] .content-wrapper { background-color: var(--pwp-bg); color: var(--pwp-text); } [data-bs-theme="dark"] .bg-light, [data-bs-theme="dark"] .bg-white { background-color: var(--pwp-bg) !important; } [data-bs-theme="dark"] .bg-soft-primary { background-color: var(--pwp-surface-2) !important; } [data-bs-theme="dark"] .bg-gradient-primary { background: linear-gradient(180deg, var(--pwp-surface-2), rgba(22, 23, 29, 0) 100%) !important; } [data-bs-theme="dark"] .bg-gradient-reverse-primary { background: linear-gradient(0deg, var(--pwp-surface-2), rgba(22, 23, 29, 0) 100%) !important; } /* ---- nawigacja ---- */ [data-bs-theme="dark"] .navbar-collapse-wrapper.bg-white { background-color: var(--pwp-surface) !important; } [data-bs-theme="dark"] .navbar.navbar-light .nav-link, [data-bs-theme="dark"] .offcanvas-body .nav-link { color: var(--pwp-text); } [data-bs-theme="dark"] .navbar.navbar-light .nav-link:hover, [data-bs-theme="dark"] .navbar.navbar-light .nav-link.active { color: var(--bs-primary); } [data-bs-theme="dark"] .offcanvas-nav .offcanvas-body { background-color: var(--pwp-surface); } [data-bs-theme="dark"] .hamburger > span, [data-bs-theme="dark"] .hamburger > span:before, [data-bs-theme="dark"] .hamburger > span:after { background-color: var(--pwp-text); } /* ---- karty ---- */ [data-bs-theme="dark"] .card { background-color: var(--pwp-surface); color: var(--pwp-text); } [data-bs-theme="dark"] .card.bg-soft-primary { background-color: var(--pwp-surface-2) !important; } [data-bs-theme="dark"] .card.shadow-lg { box-shadow: 0 0.25rem 1.75rem rgba(0, 0, 0, 0.55) !important; } [data-bs-theme="dark"] .accordion .card.plain { background-color: transparent; } [data-bs-theme="dark"] .accordion-button:not(.collapsed) { color: var(--bs-primary); } /* ---- typografia ---- */ [data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6, [data-bs-theme="dark"] .display-1, [data-bs-theme="dark"] .display-2, [data-bs-theme="dark"] .display-3, [data-bs-theme="dark"] .display-4, [data-bs-theme="dark"] .counter { color: var(--pwp-heading); } [data-bs-theme="dark"] p, [data-bs-theme="dark"] .lead, [data-bs-theme="dark"] li, [data-bs-theme="dark"] blockquote p, [data-bs-theme="dark"] .blockquote-details .info p { color: var(--pwp-text); } [data-bs-theme="dark"] .blockquote-details .info h5 { color: var(--pwp-heading); } /* ---- formularz kontaktowy ---- */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-floating > .form-control { background-color: var(--pwp-bg); color: var(--pwp-text); } [data-bs-theme="dark"] .form-control:focus { background-color: var(--pwp-bg); color: var(--pwp-text); } [data-bs-theme="dark"] .form-floating > label { color: var(--pwp-muted); } [data-bs-theme="dark"] .form-control::placeholder { color: var(--pwp-muted); } [data-bs-theme="dark"] .form-check-input { background-color: var(--pwp-bg); border-color: var(--pwp-border); } /* ---- przełącznik trybu jasny/ciemny ---- */ .theme-toggle { background: transparent; border: 0; cursor: pointer; color: var(--bs-primary); font-size: 1.25rem; line-height: 1; padding: 0.35rem 0.55rem; display: inline-flex; align-items: center; border-radius: 50%; transition: background-color 0.2s ease, color 0.2s ease; } .theme-toggle:hover { background-color: rgba(var(--bs-primary-rgb), 0.12); } [data-bs-theme="dark"] .theme-toggle { color: #ffd764; } /* pokaż właściwą ikonę zależnie od trybu */ .theme-toggle .icon-moon { display: inline-flex; } .theme-toggle .icon-sun { display: none; } [data-bs-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-bs-theme="dark"] .theme-toggle .icon-sun { display: inline-flex; }