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