Skip to content
GitLab

Implement base JS and markup for a theme toggle

Merged Administrator requested to merge github/fork/Andy-set-studio/theme-toggle into main

Created by: Andy-set-studio

This addition adds a markup pattern—radio buttons—and some lightweight JavaScript that gets and sets a user-color-scheme localStorage value based on their state.

This state is then applied in two places:

  1. As a data-user-theme value on the HTML root element
  2. As a checked state on the corresponding radio button control

Every time this state changes, the data is saved in localStorage. When a page is loaded with the apply-theme-setting.min.js script in the <head> before the CSS is loaded, the correct theme via localStorage will be applied.

The default theme is system. The intent of that is that the user’s preference will be honoured.

A browser with dev tools showing the radio buttons and the user-color-scheme attribute on the html root. Arrows and boxes demonstrate the relationship.

I've added a temporary page that features the new HTML controls. This is to hopefully make your lives easier when it comes to applying the CSS.