feat: simplify theme toggle to light/dark with current-view icon#83
Merged
Conversation
## What
Remove the three-state `light` → `dark` → `system` cycle from the theme toggle. The button now flips between `light` and `dark` only, and the icon reflects the currently displayed view (moon when dark, sun when light) rather than the stored preference. Touched files: `_includes/head.html` (boot script no longer special-cases the string `"system"`), `assets/js/theme.js` (cycle dropped, `updateButtons` driven by current view, accessible labels describe the next action), and `_includes/nav.html` / `_layouts/aggregate_default.html` / `_layouts/author_default.html` (static `fa-desktop` fallback replaced with `fa-moon-o`).
## Why
The `system` state was a third click in a cycle that most users would never need, and the desktop icon did not convey anything meaningful about the current page appearance. Showing the icon of the current view (and labelling the button with the action it performs) is more discoverable. The OS preference is still honored on first visit and whenever no explicit choice has been stored, so the "follow system" behavior is preserved without occupying a slot in the cycle.
## Notes
- Users with a legacy `localStorage.theme === "system"` value are treated as having no preference. Their next click cleanly overwrites the slot with `"light"` or `"dark"` — no migration script needed, no data wipe.
- The static `fa-moon-o` in nav/layout markup is a JS-disabled fallback only. Once `theme.js` runs (synchronously after DOM ready), the icon is corrected to match the actual displayed theme on every page.
- `aria-label` / `title` now describe the action ("Switch to light theme") rather than the state, since the icon already communicates state. Screen reader users get the verb; sighted users get the glyph.
- `_layouts/aggregate_default.html` and `_layouts/author_default.html` still inline their own nav rather than using `_includes/nav.html`. Pre-existing duplication carried forward; unchanged by this PR.
Signed-off-by: jmeridth <jmeridth@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Remove the three-state
light→dark→systemcycle from the theme toggle. The button now flips betweenlightanddarkonly, and the icon reflects the currently displayed view (moon when dark, sun when light) rather than the stored preference. Touched files:_includes/head.html(boot script no longer special-cases the string"system"),assets/js/theme.js(cycle dropped,updateButtonsdriven by current view, accessible labels describe the next action), and_includes/nav.html/_layouts/aggregate_default.html/_layouts/author_default.html(staticfa-desktopfallback replaced withfa-moon-o).Why
The
systemstate was a third click in a cycle that most users would never need, and the desktop icon did not convey anything meaningful about the current page appearance. Showing the icon of the current view (and labelling the button with the action it performs) is more discoverable. The OS preference is still honored on first visit and whenever no explicit choice has been stored, so the "follow system" behavior is preserved without occupying a slot in the cycle.Notes
localStorage.theme === "system"value are treated as having no preference. Their next click cleanly overwrites the slot with"light"or"dark"— no migration script needed, no data wipe.fa-moon-oin nav/layout markup is a JS-disabled fallback only. Oncetheme.jsruns (synchronously after DOM ready), the icon is corrected to match the actual displayed theme on every page.aria-label/titlenow describe the action ("Switch to light theme") rather than the state, since the icon already communicates state. Screen reader users get the verb; sighted users get the glyph._layouts/aggregate_default.htmland_layouts/author_default.htmlstill inline their own nav rather than using_includes/nav.html. Pre-existing duplication carried forward; unchanged by this PR.Testing
Verified locally with
bundle exec jekyll serve --livereload:data-themeon<html>and swaps the icon in the same render.localStorage.getItem('theme')returns"light"or"dark"; refresh keeps the chosen theme.localStorage.removeItem('theme')+ refresh follows OSprefers-color-schemeand shows the matching icon.matchMediachange listener)."system"value:localStorage.setItem('theme','system')+ refresh behaves as if no preference is stored; next click cleanly overwrites with"light"or"dark".bundle exec jekyll buildsucceeds; grep of_site/forfa-desktop,cycleTheme, and the literal string"system"in_site/assets/js/theme.jsand_site/index.htmlreturns nothing.Screenshots
Dark
Light