Simple Mild-Darkish Mode Coloration Switching with light-dark() – Bram.us

To alter a coloration primarily based on whether or not Mild Mode or Darkish Mode used, you’d sometimes use a prefers-color-scheme
Media Question. To make issues simpler, CSS now comes with a utility operate named light-dark()
. The operate accepts two coloration values as its arguments. Based mostly on which coloration scheme you’re actively utilizing, it’s going to output the primary or the second argument.
~
Responding to Mild or Darkish Mode
To alter a coloration worth – or another worth for that matter – primarily based on Mild Mode or Darkish Mode getting used, you’d sometimes use a prefers-color-scheme
Media Question to alter the worth of a Customized Property:
:root {
--text-color: #333; /* Worth for Mild Mode */
}
@media (prefers-color-scheme: darkish) {
--text-color: #ccc; /* Worth for Darkish Mode */
}
When implementing Dark Mode, you sometimes find yourself with a bunch of duplicated CSS variables that set the values for every mode. The remainder of your CSS then makes use of these customized properties for the precise declarations.
physique {
coloration: var(--text-color);
}
~
Responding to Mild or Darkish Mode with light-dark()
A brand new addition to the CSS Color Module Level 5 Specification is the light-dark()
operate. The operate accepts two coloration values as its arguments. Based mostly on which coloration scheme you’re actively utilizing, it’s going to output the primary or the second coloration argument.
light-dark(<coloration>, <coloration>);
As per spec:
This operate computes to the computed worth of the primary coloration, if the used coloration scheme is
gentle
or unknown, or to the computed worth of the second coloration, if the used coloration scheme isdarkish
.
The used coloration scheme will not be solely primarily based on the customers Mild/Darkish Mode setting, but in addition on the worth of the color-scheme
property. This much like how System Colors get computed.
The
color-scheme
property permits a component to point which coloration schemes it’s designed to be rendered with. These values are negotiated with the consumer’s preferences, leading to a used coloration scheme […].
Meaning, for light-dark()
to work, you should additionally embrace a color-scheme
declaration.
:root {
color-scheme: gentle darkish;
}
:root {
--text-color: light-dark(#333, #ccc); /* In Mild Mode = return 1st worth. In Darkish Mode = return 2nd worth. */
}
As a result of color-scheme
is taken under consideration, that additionally means that you could override its worth per factor, to power it right into a sure mode:
.darkish {
color-scheme: darkish; /* light-dark() on this factor and its kids will all the time return darkish */
}
???? If this light-dark()
appears acquainted: Chromium internally sports activities a -internal-light-dark()
which I wrote about before. Based mostly on this performance, the proposal was made within the CSS Working Group to reveal an analogous operate to authors. The result’s light-dark()
.
In contrast to -internal-light-dark()
which is for any kind of worth, light-dark()
can solely be used for colours.
~
# Browser Help
???? Though this put up was initially revealed in October 2023, the part beneath is consistently being up to date. Final replace: October 09, 2023.
Right here is an up-to-date record of browser help for the CSS :has()
selector:
- Chromium (Blink)
-
❌ No help
- Firefox (Gecko)
-
✅ Supported in Firefox 120.
- Safari (WebKit)
-
❌ No help
The pen embedded beneath will point out if the browser you’re at present utilizing helps CSS light-dark()
or not:
See the Pen
CSS light-dark() Support test by Bramus (@bramus)
on CodePen.
To remain up-to-date relating to browser help, you’ll be able to observe these monitoring points:
~
# Demo
In case your browser helps light-dark()
, the demo beneath will present a number of <div>
s labeled .auto
that reply to Mild/Darkish mode being toggled. The <div>
s with the category .gentle
or .darkish
are pressured into their correct mode.
See the Pen
light-dark() Demo by Bramus (@bramus)
on CodePen.
~
# Unfold the phrase
To assist unfold the contents of this put up, be happy to retweet its announcement tweet/toot:
To alter a coloration primarily based on Mild Mode or Darkish Mode, you’d sometimes use a `prefers-color-scheme` Media Question.
To make issues simpler, CSS now comes with a `light-dark()` utility operate.
Learn https://t.co/uzcTGPo8dY to get to know the main points.
Browser Help: Firefox 120. pic.twitter.com/1rmGkKy2yl
— Bramus (@bramus) October 9, 2023
~
???? Like what you see? Wish to keep within the loop? Here is how: