/* Tryb ciemny (html[data-theme="dark"]): przełącznik słońce/księżyc w nagłówku, domyślnie wg ustawienia systemu.
Zasada jak w makiecie: ciemnieją tło, tekst, linie i karty; kolorowe kafle, baner, zdjęcia produktów, czarne menu,
granatowa stopka i mapa paczkomatów zostają jasne. Reguły z kolorami na sztywno z theme.css są w dark-auto.css
(generuje tools/dark-css.py). Wyłączenie: usuń require inc/dark.php z functions.php. */
html { color-scheme: light; }
/* --------------------------------------------------------------------------
4 WYBRANE WERSJE KOLORYSTYCZNE DARKMODE (ZMERGOWANY MIKSER)
1. g-krem : 1. Grafit · Krem (G1) [Gemini: baza #1c, krem #f1]
2. c-grafit : 2. Grafit (C1) [Claude: baza #1f, krem #f1]
3. s-krem : 3. Stal · Piasek (G7) [Gemini: baza #15, piasek #f3, błękit #68]
4. c-stal-krem : 4. Stal · Krem (C9) [Claude: baza #10, krem #f1, złoto #fd]
-------------------------------------------------------------------------- */
/* Domyślny fallback: Grafit · Krem */
html[data-theme="dark"] {
color-scheme: dark;
--c-bg: #1c1d22;
--c-paper: #25262c;
--c-hover: #2d2f37;
--c-line: #383a44;
--c-ink: #f1e9d2;
--c-muted: #a8a394;
--c-on-ink: #1c1d22;
--c-dk-acc: #fdda58;
}
/* 1. Grafit · Krem (G1) */
html[data-theme="dark"][data-dark="g-krem"] {
color-scheme: dark;
--c-bg: #1c1d22;
--c-paper: #25262c;
--c-hover: #2d2f37;
--c-line: #383a44;
--c-ink: #f1e9d2;
--c-muted: #a8a394;
--c-on-ink: #1c1d22;
--c-dk-acc: #fdda58;
}
/* 2. Grafit (C1) */
html[data-theme="dark"][data-dark="c-grafit"],
html[data-theme="dark"][data-dkc="c-grafit"] {
color-scheme: dark;
--c-bg: #1f1f24;
--c-paper: #28282e;
--c-hover: #303037;
--c-line: #3a3a42;
--c-ink: #f1e9d2;
--c-muted: #a9a496;
--c-on-ink: #1f1f24;
--c-dk-acc: #fdda58;
}
/* 3. Stal · Piasek (G7) */
html[data-theme="dark"][data-dark="s-krem"] {
color-scheme: dark;
--c-bg: #151a20;
--c-paper: #1e242d;
--c-hover: #272f3a;
--c-line: #333f4e;
--c-ink: #f3eee4;
--c-muted: #9eabb8;
--c-on-ink: #151a20;
--c-dk-acc: #68b5fb;
}
/* 4. Stal · Krem (C9) */
html[data-theme="dark"][data-dark="c-stal-krem"],
html[data-theme="dark"][data-dkc="c-stal-krem"] {
color-scheme: dark;
--c-bg: #101418;
--c-paper: #181e24;
--c-hover: #212932;
--c-line: #2c3743;
--c-ink: #f1e9d2;
--c-muted: #a3a69c;
--c-on-ink: #101418;
--c-dk-acc: #fdda58;
}
/* Przypisanie zmiennych motywu */
html[data-theme="dark"] {
--wp--preset--color--base: var(--c-bg);
--wp--preset--color--ink: var(--c-ink);
--wp--preset--color--muted: var(--c-muted);
--wp--preset--color--line: var(--c-line);
}
html[data-theme="dark"] :focus-visible {
outline-color: var(--c-dk-acc, var(--c-red));
}
/* Typografia w trybie ciemnym: eliminacja irradiacji / halacji, miękkie wygładzanie i oddech */
html[data-theme="dark"] body {
background: var(--c-bg);
color: var(--c-ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
letter-spacing: .012em;
}
html[data-theme="dark"] :is(h1, h2, h3, h4, .wp-block-post-title) {
letter-spacing: 0;
}
html[data-theme="dark"] :is(p, li, td, th, label, small) {
line-height: 1.6;
}
/* Teksty na kolorowych tłach zostają ciemne i czytelne */
html[data-theme="dark"] :is(.czc-buybox .wc-block-components-product-price, .czc-order-bacs-note, .czc-dash-short.is-promo, .czc-reset-card__badge) {
--c-ink: #111111;
--c-muted: #3a3a3a;
color: #111111 !important;
}
/* Jasne zdjęcia produktów: subtelnie stonowane, by nie biły białym blaskiem na ciemnym tle */
html[data-theme="dark"] :is(.czc-card .wc-block-components-product-image, .czc-pk-i, .woocommerce-product-gallery__image, .czc-b-item img, .czc-sb-top img, .czc-sugg img, .czc-sum__prod img, .czc-co .wc-block-components-order-summary-item__image > img) {
filter: brightness(.92) contrast(1.02);
}
/* Tło --c-tile pod tekstem (hover listy, plakietki, karta w koncie) → ciemne tło wersji */
html[data-theme="dark"] :is(.czc-sb-top a:hover, .czc-sizes a:hover, .czc-badge-status.is-refunded, .czc-badge-status.is-default, .czc-dash-hero) {
background: var(--c-hover);
}
/* Pasek na telefonie */
@media (max-width: 700px) {
html[data-theme="dark"] .czc-bar { background: #111111; color: #ffffff; }
}
/* Mini dok / wyspa w trybie ciemnym: pasek zostaje czarny (#111111) z czytelnym tekstem */
html[data-theme="dark"] {
--mb-bg: #111111;
--mb-fg: #ffffff;
--mb-link: rgba(255, 255, 255, .82);
--mb-bd: var(--c-line, #383a44);
--mb-dim: rgba(255, 255, 255, .55);
}
html[data-theme="dark"] :is(.mn-dock-bar, .mn-dock-command) {
--dk-fg: #ffffff;
--dk-sep: rgba(255, 255, 255, .2);
--dk-dim: rgba(255, 255, 255, .6);
background: #111111 !important;
color: #ffffff !important;
}
html[data-theme="dark"] .mn-dock-bar.mn-boxed {
border: 1px solid var(--c-line, #383a44);
border-top: 0;
}
html[data-theme="dark"] .mn-dock-bar :is(.mn-dk-qlinks a, .mn-dk-drawer-btn, .mn-dk-a, .mn-dk-sf input) {
color: #ffffff !important;
}
html[data-theme="dark"] .mn-dock-bar .mn-dk-qlinks a.mn-pr {
color: var(--c-dk-acc, #fdda58) !important;
}
html[data-theme="dark"] .mn-dock-command .mn-dk-c .mn-n {
background: #111111 !important;
color: #ffffff !important;
}
html[data-theme="dark"] :is(.mn-island, .mn-mi-pill) {
background: #111111 !important;
color: #ffffff !important;
border-color: var(--c-line, #383a44) !important;
}
/* elementy, które zostają jasne: wracają do jasnego zestawu zmiennych */
html[data-theme="dark"] :is(.czc-menubar, .czc-hero-wrap, .czc-hero, .czc-ban, .czc-sh, .czc-pk, .czc-cuis a, .czc-catlist a:hover, .czc-catnav a:hover, .czc-catnav a[aria-current], #widget-modal, .czc-footer) {
--wp--preset--color--base: #ffffff;
--wp--preset--color--ink: #111111;
--wp--preset--color--muted: #6b6b6b;
--wp--preset--color--line: #e3e3e3;
--c-ink: #111111;
--c-muted: #6b6b6b;
--c-line: #e3e3e3;
--c-bg: #ffffff;
--c-paper: #ffffff;
--c-hover: #fafafc;
--c-on-ink: #ffffff;
}
html[data-theme="dark"] :is(.czc-hero-wrap, .czc-ban, .czc-sh, .czc-pk, #widget-modal) { color: var(--c-ink); }
html[data-theme="dark"] :is(.czc-cuis a, .czc-catlist a:hover, .czc-catnav a:hover, .czc-catnav a[aria-current]) { color: var(--c-ink); }
html[data-theme="dark"] .czc-cuis a:hover { color: var(--c-on-ink); }
/* logo w nagłówku i mini pasku: czarny napis → jasny, czerwień zostaje */
html[data-theme="dark"] :is(.czc-logo, .czc-mini-logo) img { filter: invert(1) hue-rotate(180deg); }
/* pola formularzy, w tym blokowa kasa i koszyk Woo */
html[data-theme="dark"] :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], .wp-block-search__input) {
background-color: var(--c-paper); color: var(--c-ink); border-color: var(--c-line);
}
html[data-theme="dark"] .czc-co :is(input, select, textarea):not([type="checkbox"], [type="radio"]) { border-color: var(--c-ink) !important; }
html[data-theme="dark"] ::placeholder { color: var(--c-muted); }
html[data-theme="dark"] .wc-block-components-text-input label,
html[data-theme="dark"] .wc-blocks-components-select__label,
html[data-theme="dark"] .wc-block-components-combobox .wc-block-components-combobox-control label { color: var(--c-muted) !important; }
html[data-theme="dark"] .wc-blocks-components-select__select option { background: var(--c-paper); color: var(--c-ink); }
html[data-theme="dark"] .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
html[data-theme="dark"] .wc-block-components-radio-control__input { background-color: var(--c-paper); border-color: var(--c-ink); }
html[data-theme="dark"] .wc-block-components-radio-control__input:checked::before { background: var(--c-ink); }
html[data-theme="dark"] .wc-block-components-checkbox__mark { fill: var(--c-ink); }
/* panele Woo z białym tłem w ich własnych arkuszach */
html[data-theme="dark"] :is(.wc-block-components-drawer, .wc-block-mini-cart__drawer .components-modal__frame, .wc-block-components-panel, .wc-block-components-notice-banner, .wc-block-components-totals-coupon__form, .wc-block-components-order-summary, .wc-block-checkout__sidebar, .wc-block-components-sidebar, .wc-block-components-express-payment, .wc-block-components-address-card, .wc-block-components-checkout-step) { background-color: transparent; color: var(--c-ink); }
html[data-theme="dark"] :is(.wc-block-components-drawer, .wc-block-mini-cart__drawer .components-modal__frame) { background-color: var(--c-paper); }
html[data-theme="dark"] .wc-block-components-notice-banner { background-color: var(--c-paper); border-color: var(--c-line); }
html[data-theme="dark"] .wc-block-components-notice-banner > svg { fill: var(--c-ink); }
html[data-theme="dark"] :is(.wc-block-components-radio-control__option, .wc-block-components-radio-control__label, .wc-block-components-radio-control__secondary-label, .wc-block-components-radio-control__description, .wc-block-components-totals-item__label, .wc-block-components-totals-item__value, .wc-block-components-product-metadata, .wc-block-components-formatted-money-amount) { color: inherit; }
html[data-theme="dark"] .wc-block-components-loading-mask::after,
html[data-theme="dark"] .wc-block-components-skeleton__element { background-color: var(--c-hover); }
html[data-theme="dark"] .woocommerce-info, html[data-theme="dark"] .woocommerce-message { background: var(--c-paper); color: var(--c-ink); }
html[data-theme="dark"] .woocommerce table.shop_table, html[data-theme="dark"] .woocommerce table.shop_table :is(td, th) { color: var(--c-ink); border-color: var(--c-line); }
/* przycisk „+” na kafelku zostaje biały na jasnym zdjęciu */
html[data-theme="dark"] .czc-card .wc-block-components-product-image { --c-ink: #111111; --c-on-ink: #ffffff; --c-paper: #ffffff; }
/* przełącznik motywu w nagłówku ukryty (przełączanie w mikserze) */
.czc-theme-tgl { display: none !important; }
/* Zmienne narzędzia uwag (mikser.css :root, przycisk „Zgłoś błąd” i jego okna) w trybie ciemnym */
html[data-theme="dark"] { --bg: var(--c-bg); --paper: var(--c-paper); --on-ink: var(--c-on-ink); }
/* konto.css: przycisk w alercie ma tło #111 na sztywno, w ciemnym odwracamy jak inne główne przyciski */
html[data-theme="dark"] .ac-alert .ac-btn { background: var(--c-ink); color: var(--c-on-ink); }