Skip to contentGet startedTokensComponents@hackclub/theme@hackclub/tokens@hackclub/css-base@hackclub/components@hackclub/meta GitHub
Site chrome

Theme toggle

Cycles light → system → dark, saves the choice in localStorage (key hc-site-theme, as on hackclub.com) and keeps every toggle on the page in sync. To avoid a flash of the wrong theme, inline themeScript in your <head>.


<hc-theme-toggle>

<hc-theme-toggle></hc-theme-toggle>
<hc-theme-toggle variant="labeled"></hc-theme-toggle>
The JS helpers setTheme(), getThemePreference(), applyTheme() and the hc-theme-change event are exported for custom controls.

API

Attributes

NameTypeDefaultDescription
variant"icon" | "labeled""icon"

CSS parts

NameDescription
button
Next: Polaroid & sticker

The design system behind hackclub.com.
Made with <3 by Lamparter.

Get startedTokensComponents@hackclub/theme@hackclub/tokens@hackclub/css-base@hackclub/components@hackclub/metaWebsiteBrand guideIconshackclub/site