@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #151113; --bg-2: #1e191b; --ink: #f1eaed; --ink-2: #b3a8ad; --line: #352c30; --accent: #e08db8; --accent-ink: #24121b; --ok: #6fcf9f; --danger: #f2a199; color-scheme: dark; } }
:root[data-theme="dark"] { --bg: #151113; --bg-2: #1e191b; --ink: #f1eaed; --ink-2: #b3a8ad; --line: #352c30; --accent: #e08db8; --accent-ink: #24121b; --ok: #6fcf9f; --danger: #f2a199; color-scheme: dark; }
.lp-head { justify-content: space-between; gap: 12px; }
.theme { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); cursor: pointer; padding: 0; }
.theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme .moon { display: none; }
:root[data-theme="dark"] .theme .sun { display: none; }
:root[data-theme="dark"] .theme .moon { display: block; }
:root[data-theme="dark"] img.logo-light { display: none; }
:root[data-theme="dark"] img.logo-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme .sun { display: none; } :root:not([data-theme="light"]) .theme .moon { display: block; } :root:not([data-theme="light"]) img.logo-light { display: none; } :root:not([data-theme="light"]) img.logo-dark { display: block; } }