WeCode
Academy
Tutorials
Web Development
Bootstrap
CSS
HTML
JavaScript
jQuery
Node.js
PHP
React
TypeScript
Programming
C
C#
C++
Go
Java
Python
Rust
Data and Databases
NumPy
Pandas
SQL
Tools
Bash
Git
Projects
Project: A Tiny Shell in C
Project: Bank Account System
Project: Library Management System
Project: Portfolio Page
Project: Quiz App in React
Project: Sales Data Analysis
Project: Server Log Analyser
Project: To-Do REST API
Project: URL Shortener
Project: Word Counter in Four Languages
All tutorials ❯
Paths
References
Practice
Try it editor
Quizzes
How To recipes
Tools
Glossary
My Learning
🌙
Dark mode
Home
›
How To
›
CSS
Create a dark mode with CSS variables
Define colours as variables and swap them with a class or prefers-color-scheme.
Example
html
<style> :root { --bg: #ffffff; --fg: #1f2330; } .dark { --bg: #1f2330; --fg: #f1f3f5; } .page { background: var(--bg); color: var(--fg); padding: 20px; transition: all .3s; } </style> <div class="page" id="p"><p>Toggle the theme:</p><button onclick="document.getElementById('p').classList.toggle('dark')">Dark / light</button></div>
Run ❯
Reset
Open in editor »
More CSS recipes
Center a div horizontally and vertically
Make a sticky header
Create a responsive grid of cards
Style a button with a hover effect
Build a pure CSS tooltip
WeCodeAcademyWeCodeAcademy