Dark Mode Toggle with CSS Variables & LocalStorage (Vanilla JS)

A lightweight, accessible dark mode toggle built with pure CSS custom properties, vanilla JavaScript and localStorage - no frameworks needed. It detects the user's OS color-scheme preference on first load (prefers-color-scheme) and remembers their choice afterwards. Copy the HTML, CSS and JS below and drop it into any project.

Category

Bootstrap 3.0
img binocular Views: 13
Creation date 2026
Author snippetdeveloperr

Associated Tags

dark mode css variables vanilla javascript localstorage prefers-color-scheme toggle theme switcher accessibility modern css no framework

Related snippets :

jquery datatable column filter select
jquery datatable column filter select


change the cursor pointer css
change the cursor pointer css


Bootstrap Grid Css
Bootstrap Grid Css


css responsive tabs example
css responsive tabs example