Jonny Barnes
e9d8f4c74b
Replace the single-icon popover with a dropdown of radio inputs with a compact two-button toggle (light/dark), inspired by vale.rocks' design: clicking an icon forces that theme, clicking the active icon again returns to following the system preference. Keeps the existing light-dark() colour-scheme mechanism and view-transition wipe animation, and reuses the project's existing Fluent UI sun/moon icons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fn4aNjE3ofpDM78F4qmdCV
92 lines
1.8 KiB
CSS
92 lines
1.8 KiB
CSS
@layer components {
|
|
#theme-selector {
|
|
display: flex;
|
|
justify-self: start;
|
|
align-items: center;
|
|
gap: .25rem;
|
|
padding: .25rem;
|
|
border-radius: 999px;
|
|
background-color: color-mix(in oklch, var(--clr-border) 40%, transparent);
|
|
|
|
button {
|
|
display: grid;
|
|
place-items: center;
|
|
appearance: none;
|
|
border: none;
|
|
border-radius: 999px;
|
|
padding: .375rem;
|
|
background: transparent;
|
|
color: inherit;
|
|
transition: background-color .2s, color .2s;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid var(--clr-text);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
svg {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
fill: currentcolor;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
&:hover {
|
|
background-color: color-mix(in oklch, var(--clr-border) 70%, transparent);
|
|
}
|
|
|
|
&[aria-pressed="true"]:hover {
|
|
background-color: var(--clr-text);
|
|
}
|
|
}
|
|
|
|
&[aria-pressed="true"] {
|
|
background-color: var(--clr-text);
|
|
color: var(--clr-background);
|
|
}
|
|
}
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
::view-transition-group(changing-theme) {
|
|
animation-duration: 1.25s;
|
|
}
|
|
|
|
::view-transition-new(changing-theme),
|
|
::view-transition-old(changing-theme) {
|
|
mix-blend-mode: normal;
|
|
}
|
|
|
|
::view-transition-new(changing-theme) {
|
|
animation-name: reveal;
|
|
}
|
|
|
|
::view-transition-old(changing-theme) {
|
|
animation: none;
|
|
}
|
|
|
|
@keyframes reveal {
|
|
from {
|
|
clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);
|
|
}
|
|
|
|
to {
|
|
clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);
|
|
}
|
|
}
|
|
}
|