W3.CSS Dark Mode
W3.CSS can use an optional dark mode based on CSS variables.
Add the w3-dark-mode class to the
<body> element or to a container.
Explicit color classes keep their own colors.
Note
W3.CSS dark mode is a version 6 feature.
Version 6 is now in final beta, and is expected to be released in November 2026.
Basic Dark Mode
This example shows W3.CSS dark mode.
Example
<body class="w3-container w3-dark-mode">
<h2>Dark Mode</h2>
<p>This page uses W3.CSS dark mode.</p>
</body>
Try It Yourself »
Toggle Dark Mode
Click the button to switch between light and dark mode.
Example
<body class="w3-container w3-dark-mode">
<h2>Dark Mode</h2>
<p>This page uses W3.CSS dark mode.</p>
<button class="w3-button w3-black" onclick="darkMode()">Toggle Dark Mode</button>
<script>
function darkMode() {
document.body.classList.toggle("w3-dark-mode");
}
</script>
</body>
Try It Yourself »
The classList.toggle() method adds or removes the w3-dark-mode class.
Dark Mode Containers
The following examples use w3-dark-mode on the body, except for the sidebar-only example.
Example
<div class="w3-container">
<h2>Container</h2>
<p>A normal container follows dark mode.</p>
</div>
<div class="w3-panel w3-card">
<h3>Panel</h3>
<p>Panels and cards follow dark mode.</p>
</div>
Try It Yourself »
Note
Containers, panels, and cards follow the surrounding dark-mode colors.
These classes do not themselves assign a background color.
Dark Mode Tables
Dark mode changes table surfaces, stripes, borders, and hover colors.
Example
<h3>Striped Table</h3>
<table class="w3-table w3-striped w3-bordered">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr><td>Alfreds</td><td>Germany</td></tr>
<tr><td>Berglunds</td><td>Sweden</td></tr>
<tr><td>Island Trading</td><td>UK</td></tr>
</table>
<h3>Table All with Hover</h3>
<table class="w3-table-all w3-hoverable">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr><td>Alfreds</td><td>Germany</td></tr>
<tr><td>Berglunds</td><td>Sweden</td></tr>
<tr><td>Island Trading</td><td>UK</td></tr>
</table>
Try It Yourself »
Dark Mode Forms
Example
<input class="w3-input" type="text" placeholder="Your name">
<select class="w3-select">
<option>Choose an option</option>
<option>One</option>
<option>Two</option>
</select>
<button class="w3-button w3-border">Submit</button>
Try It Yourself »
Dark Mode Dropdown
Example
<div class="w3-dropdown-hover">
<button class="w3-button w3-border">Hover Me</button>
<div class="w3-dropdown-content w3-bar-block w3-card">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
Try It Yourself »
Dark Sidebar and Page
Example
<div class="w3-sidebar w3-bar-block w3-card" style="width:200px">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">News</a>
<a href="#" class="w3-bar-item w3-button">Contact</a>
</div>
<div style="margin-left:220px">
<h2>Page Content</h2>
<p>The sidebar and page use dark mode.</p>
</div>
Try It Yourself »
Dark Sidebar
Only the sidebar uses dark mode:
Example
<div class="w3-dark-mode w3-sidebar w3-bar-block w3-card" style="width:200px">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">News</a>
<a href="#" class="w3-bar-item w3-button">Contact</a>
</div>
<div style="margin-left:220px">
<h2>Page Content</h2>
<p>Only the sidebar uses dark mode.</p>
</div>
Try It Yourself »
Dark Mode Modal
Example
<button onclick="document.getElementById('demo').style.display='block'" class="w3-button w3-border">Open Modal</button>
<div id="demo" class="w3-modal">
<div class="w3-modal-content w3-card">
<div class="w3-container">
<span onclick="document.getElementById('demo').style.display='none'" class="w3-button w3-display-topright">×</span>
<h2>Dark Modal</h2><p>The modal surface follows dark mode.</p>
</div>
</div>
</div>
Try It Yourself »
Dark Mode with Explicit Colors
Example
<div class="w3-panel w3-blue"><p>w3-blue stays blue</p></div>
<div class="w3-panel w3-red"><p>w3-red stays red</p></div>
<div class="w3-panel w3-white"><p>w3-white stays white</p></div>
<div class="w3-panel w3-black"><p>w3-black stays black</p></div>
Try It Yourself »
W3.CSS Dark Mode Notes
User Preferences and Explicit Colors
W3.CSS separates semantic colors from user-selected colors.
W3.CSS dark mode changes semantic/default colors using variables:
.w3-dark-mode {
--w3-page-bg: #121212;
--w3-page-text: #eee;
...
}
But explicit color classes such as:
.w3-blue
.w3-red
.w3-white
.w3-black
.w3-text-blue
.w3-text-red
Is not changed by dark mode.
The Reason
The reason for this behaviour is:
If a programmer writes w3-blue, he is asking for blue.
Dark mode should not silently turn that into another color.
W3.CSS color utilities use rules like:
.w3-blue {
color: #fff !important;
background-color: #2196F3 !important;
}
.w3-text-blue {
color: #2196F3 !important;
}
!important is appropriate for these
explicit color classes because they represent a deliberate choice.
A dark-mode rule should therefore not override it.
W3.CSS Designed Hierarchy
1. Normal/default styling:
body {
color: var(--w3-page-text);
background-color: var(--w3-page-bg);
}
2. Dark-mode preference:
.w3-dark-mode {
--w3-page-text: #eee;
--w3-page-bg: #121212;
}
3. Explicit author color:
<div class="w3-blue">
The explicit w3-blue wins.
User Preferences
W3.CSS did consider automatic dark mode with:
@media (prefers-color-scheme: dark) {
...
}
But, we went for class-based dark mode:
<body class="w3-dark-mode">
This way prefers-color-scheme is something a developer could choose to use
rather than W3.CSS automatically forcing it.
Forced Mode
forced-colors:active is different from ordinary dark mode: it represents accessibility/user-selected
palettes such as Windows Contrast Themes.
Note
The user's accessibility color choices should take precedence over the author's colors.
The Three Different Consepts
Using W3.CSS includes 3 different concepts:
| Consept | Description |
| Normal dark mode | Framework changes semantic/default colors. |
| W3.CSS color classes | Author's deliberate !important choice wins. |
| Forced colors / contrast themes | User's accessibility preference should win over author colors. |
Note
Dark mode should not redefine what explicit color classes mean.
Forced Dark Mode
Forced dark mode means the user has selected dark mode in the operating system or in the browser.
This will not override CSS colors.
W3.CSS contains:
.w3-red {
color: #fff !important;
background-color: #f44336 !important;
}
Because of !important, the browser will not replace that red background.
Preferred Color Schemes
prefers-color-scheme: dark is primarily a signal to the website:
@media (prefers-color-scheme: dark) {
/* The website can choose what to change */
}
If W3.CSS does nothing with prefers-color-scheme, selecting OS dark mode
won't automatically turn a normal W3.CSS page dark.
Fored Colors
Forced colors, such as Windows Contrast Themes is another feature that is much stronger:
@media (forced-colors: active) {
...
}
Here the browser may override author colors even colors declared with !important — because accessibility preferences take priority. For example, the browser can replace:
background-color: #f44336 !important;with a system-defined color.
Conclusion
Because of the W3.CSS design:
.w3-dark-mode should change default/semantic colors, but explicit classes
such as .w3-red, .w3-blue, and .w3-white should retain
their colors.
The user's accessibility-enforced colors is a separate layer and should be allowed to override W3.CSS.
| User setting | What can happen to .w3-red |
|---|---|
| OS light mode | Red |
| OS dark mode | Still red |
prefers-color-scheme:dark |
Still red unless W3.CSS responds to it |
.w3-dark-mode |
Should remain red because it is an explicit color |
| Windows forced colors | Browser may replace the red |
