/* * Тёмная тема Citywoman. * Переключается автоматически по настройке устройства (prefers-color-scheme). * Ручной выбор: атрибут data-theme="light|dark" на (ставит скрипт из functions.php). */ :root { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --wp--preset--color--base: #17121A; --wp--preset--color--contrast: #F5EEF3; --wp--preset--color--text: #E9E1E7; --wp--preset--color--accent-1: #DB2777; --wp--preset--color--accent-2: #231923; --wp--preset--color--accent-3: #F9A8D4; --wp--preset--color--accent-4: #BDB2BA; --wp--preset--color--accent-5: #4A2A3E; --wp--preset--color--accent-6: #2E2430; --wp--preset--color--surface-alt: #1D161F; --wp--preset--color--inverse: #2A2030; --wp--preset--color--on-inverse: #FFFFFF; --wp--preset--color--logo: #F472B6; --wp--preset--shadow--photo: 0 24px 48px rgba(0, 0, 0, 0.45); --wp--preset--shadow--card: 0 20px 40px rgba(0, 0, 0, 0.35); } } :root[data-theme="dark"] { color-scheme: dark; --wp--preset--color--base: #17121A; --wp--preset--color--contrast: #F5EEF3; --wp--preset--color--text: #E9E1E7; --wp--preset--color--accent-1: #DB2777; --wp--preset--color--accent-2: #231923; --wp--preset--color--accent-3: #F9A8D4; --wp--preset--color--accent-4: #BDB2BA; --wp--preset--color--accent-5: #4A2A3E; --wp--preset--color--accent-6: #2E2430; --wp--preset--color--surface-alt: #1D161F; --wp--preset--color--inverse: #2A2030; --wp--preset--color--on-inverse: #FFFFFF; --wp--preset--color--logo: #F472B6; --wp--preset--shadow--photo: 0 24px 48px rgba(0, 0, 0, 0.45); --wp--preset--shadow--card: 0 20px 40px rgba(0, 0, 0, 0.35); } /* Фото чуть приглушаем в тёмной теме, чтобы не «били» по глазам */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :where(.wp-block-image, .wp-block-post-featured-image, .wp-block-cover) img { filter: brightness(0.92); } } :root[data-theme="dark"] :where(.wp-block-image, .wp-block-post-featured-image, .wp-block-cover) img { filter: brightness(0.92); } /* Переключатель темы: [data-cw-theme="auto|light|dark"] — активная кнопка */ [data-cw-theme][aria-pressed="true"] { background: var(--wp--preset--color--inverse); color: var(--wp--preset--color--on-inverse); }