.theme-toggle {
--fab-size: 48px;
--fab-edge: max(16px, calc(env(safe-area-inset-right) + 12px));
--fab-bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
position: fixed;
z-index: 180;
right: var(--fab-edge);
bottom: var(--fab-bottom);
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
}
.theme-toggle-button {
box-sizing: border-box;
display: inline-flex;
width: var(--fab-size) !important;
height: var(--fab-size) !important;
min-width: var(--fab-size) !important;
min-height: var(--fab-size) !important;
max-width: var(--fab-size) !important;
max-height: var(--fab-size) !important;
align-items: center;
justify-content: center;
padding: 0 !important;
margin: 0;
border: 1px solid transparent;
border-radius: 999px;
-webkit-backdrop-filter: blur(18px) saturate(1.15);
backdrop-filter: blur(18px) saturate(1.15);
box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 16%, transparent);
pointer-events: auto;
cursor: pointer;
transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
position: relative;
}
.theme-toggle-button:active { transform: scale(.96); }
.theme-toggle-button::before,
.theme-toggle-button::after { content: none !important; display: none !important; }
.theme-toggle-button [data-theme-toggle-label] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.theme-toggle-button .theme-icon {
display: none;
width: 22px;
height: 22px;
flex: 0 0 auto;
stroke: currentColor;
}
html[data-skin="kage"] .theme-toggle-button {
background: #ffffff;
border-color: color-mix(in srgb, #0a0a0a 14%, transparent);
color: #0a0a0a;
box-shadow: 0 12px 28px color-mix(in srgb, #0a0a0a 14%, transparent);
}
html[data-skin="kage"] .theme-toggle-button .theme-icon--sun { display: block; }
html[data-skin="nocturne"] .theme-toggle-button {
background: #0a0a0a;
border-color: color-mix(in srgb, #ffffff 18%, transparent);
color: #ffffff;
box-shadow: 0 12px 28px color-mix(in srgb, #000000 45%, transparent);
}
html[data-skin="nocturne"] .theme-toggle-button .theme-icon--moon { display: block; }
html[data-theme-mode="auto"] .theme-toggle-button .theme-icon--sun,
html[data-theme-mode="auto"] .theme-toggle-button .theme-icon--moon { display: none !important; }
html[data-theme-mode="auto"] .theme-toggle-button .theme-icon--auto { display: block; }
html[data-theme-mode="auto"][data-skin="kage"] .theme-toggle-button {
background: #ffffff;
color: #0a0a0a;
}
html[data-theme-mode="auto"][data-skin="nocturne"] .theme-toggle-button {
background: #0a0a0a;
color: #ffffff;
}
.theme-toggle-button:hover,
.theme-toggle-button:focus-visible {
border-color: var(--action);
}
@media (max-width: 560px) {
.theme-toggle {
--fab-edge: max(12px, calc(env(safe-area-inset-right) + 8px));
--fab-bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
right: var(--fab-edge);
bottom: var(--fab-bottom);
}
}
@media (prefers-reduced-transparency: reduce) {
.theme-toggle-button {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
html {
background-color: var(--paper);
}