Start Page
Simple.css framework with dark mode
Simple.css classless framework
- version 2.2.1 (May 17th, 2023)
- hue editable variable
- calculated complementary & analogous variables
- primary, secondary & 2 accent colors
- 100 to 900 lightness indice
- html[data-theme='light'] + html[data-theme='dark']
- descriptive variables for light & dark mode
- article & aside as box elements
List of examples
-
Dark mode v0: base layout + simple.css.
-
Dark mode v1: base1 layout + dark-mode1.css.
-
Dark mode v2: base2 layout + dark-mode2.css. This version uses a checkbox input element to toggle the dark mode
-
Dark mode v3: base layout + dark-mode3.css & script3.js. This version uses a JavaScript file to toggle the dark mode. HTML element with data-theme attribute & activate the input element to toggle light & dark mode. Code is: html[data-theme='light'] + html[data-theme='dark'].
-
Dark mode v4: base4 layout + dark-mode4.css & minimal-theme-switcher.js. Javascript to switch from 'auto' to 'light or 'dark' mode. This version uses a JavaScript file to toggle the dark mode. HTML element with data-theme attribute & activate the input element to toggle light & dark mode. Code is: html[data-theme='light'] + html[data-theme='dark'].
-
Dark mode v5: base5 layout + dark-mode5.css & holiday-dark-mode.js.
Others CSS frameworks with dark mode
They all have '@media ( prefers-color-scheme: dark )' that switches with the clients operating systems preference, except Pico & Holiday who adds a user manual switch.
- Ok
- Concrete
- Pico with a icon to toggle light/dark mode & Javascript 'minimal-theme-switcher.js' (prefers-color-scheme: dark + data-theme="light" & data-theme="dark")
- Simple
- Magick
- New
- Holiday with a icon to toggle light/dark mode & Javascript 'holiday-dark-mode.js' (prefers-color-scheme: dark + .holiday-css-light & .holiday-css-dark)
- Silicon