font switcher

[Rich-Harris]

WIP. Need a better icon, and some of the variables could probably use more tweaking

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
kit-svelte-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 25, 2024 6:54pm
learn-svelte-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 25, 2024 6:54pm
omnisite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 25, 2024 6:54pm
svelte-5-preview	🔄 Building (Inspect)	Visit Preview	💬 Add feedback	Oct 25, 2024 6:54pm
svelte-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 25, 2024 6:54pm

[Rich-Harris]

(also system-ui probably isn't the best sans option)

[kvetoslavnovak]

Shouldn't the toggle icon be reversed? When we're on the serif font page, the switcher should display the sans-serif icon, and when we're on the sans-serif page, it should show the serif icon. But I see the same 'reverse psychology' is used for the dark/light theme button as well! :-)

EDIT:
I did some researche:
The toggle button generally works best when it displays the option it will change to, not the current setting. This approach aligns with most user interface conventions and helps users anticipate the action. For instance, if you're in light mode, the button would show a moon icon (dark mode), indicating that pressing it will switch to dark mode. This “show the next option” style can feel intuitive because it’s a clear cue about what will happen next.

The reverse—showing the current setting—can sometimes feel confusing because users might assume that’s the state they’re switching to, not the one they’re already in. That said, there are successful apps using both approaches, especially when aiming for a “live preview” feel (e.g., showing the current style applied to the icon itself).

In short, showing the next option tends to be more widely understood, though some user preferences and app styles may favor the current-state display.

It really is like the old analog console or wall toggle buttons, you press the option that you want to happen.

[Rich-Harris]

good point! #718