https://www.bram.us/2023/10/09/the-future-of-css-easy-light-dark-mode-color-switching-with-light-dark/ Skip to content Bram.us A rather geeky/technical weblog, est. 2001, by Bramus * Blog + Blog + All Posts + Original Content + Elsewhere * Speaking & Training * About * RSS + RSS + All Posts + Original Content Only + Elsewhere Only * + Back The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark() October 9, 2023October 9, 2023 Leave a comment on The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark() [css-light-dark] To change a color based on whether Light Mode or Dark Mode used, you'd typically use a prefers-color-scheme Media Query. To make things easier, CSS now comes with a utility function named light-dark (). The function accepts two color values as its arguments. Based on which color scheme you are actively using, it will output the first or the second argument. ~ Responding to Light or Dark Mode To change a color value - or any other value for that matter - based on Light Mode or Dark Mode being used, you'd typically use a prefers-color-scheme Media Query to change the value of a Custom Property: :root { --text-color: #333; /* Value for Light Mode */ } @media (prefers-color-scheme: dark) { --text-color: #ccc; /* Value for Dark Mode */ } When implementing Dark Mode, you typically end up with a bunch of duplicated CSS variables that set the values for each mode. The rest of your CSS then uses these custom properties for the actual declarations. body { color: var(--text-color); } ~ Responding to Light or Dark Mode with light-dark() A new addition to the CSS Color Module Level 5 Specification is the light-dark() function. The function accepts two color values as its arguments. Based on which color scheme you are actively using, it will output the first or the second color argument. light-dark(, ); As per spec: This function computes to the computed value of the first color, if the used color scheme is light or unknown, or to the computed value of the second color, if the used color scheme is dark. The used color scheme is not only based on the users Light/Dark Mode setting, but also on the value of the color-scheme property. This similar to how System Colors get computed. The color-scheme property allows an element to indicate which color schemes it is designed to be rendered with. These values are negotiated with the user's preferences, resulting in a used color scheme [...]. That means, for light-dark() to work, you must also include a color-scheme declaration. :root { color-scheme: light dark; } :root { --text-color: light-dark(#333, #ccc); /* In Light Mode = return 1st value. In Dark Mode = return 2nd value. */ } Because color-scheme is taken into account, that also means that you can override its value per element, to force it into a certain mode: .dark { color-scheme: dark; /* light-dark() on this element and its children will always return dark */ } If this light-dark() seems familiar: Chromium internally sports a -internal-light-dark() which I wrote about before. Based on this functionality, the proposal was made within the CSS Working Group to expose a similar function to authors. The result is light-dark(). Unlike -internal-light-dark() which is for any type of value, light-dark() can only be used for colors. ~ # Browser Support Although this post was originally published in October 2023, the section below is constantly being updated. Last update: October 09, 2023. Here is an up-to-date list of browser support for the CSS :has() selector: Chromium (Blink) No support Firefox (Gecko) Supported in Firefox 120. Safari (WebKit) No support The pen embedded below will indicate if the browser you are currently using supports CSS light-dark() or not: See the Pen CSS light-dark() Support test by Bramus (@bramus) on CodePen. To stay up-to-date regarding browser support, you can follow these tracking issues: * Chromium/Blink: Issue #1490618 -- Assigned (Open) * Firefox/Gecko: Issue #1856999 -- RESOLVED FIXED * Safari/WebKit: Issue #262914 -- NEW ~ # Demo If your browser supports light-dark(), the demo below will show a few
s labeled .auto that respond to Light/Dark mode being toggled. The
s with the class .light or .dark are forced into their proper mode. See the Pen light-dark() Demo by Bramus (@bramus) on CodePen. ~ # Spread the word To help spread the contents of this post, feel free to retweet its announcement [DEL:tweet:DEL][INS:post:INS]/[DEL:toot:DEL][INS:post :INS]: To change a color based on Light Mode or Dark Mode, you'd typically use a `prefers-color-scheme` Media Query. To make things easier, CSS now comes with a `light-dark()` utility function. Read https://t.co/uzcTGPo8dY to get to know the details. Browser Support: Firefox 120. pic.twitter.com/1rmGkKy2yl -- Bramus (@bramus) October 9, 2023 ~ Like what you see? Want to stay in the loop? Here's how: * Follow @bramus on Twitter * Follow @bramus on Mastodon * Follow @bramusblog on Twitter * Follow bram.us using RSS Posted byBramus!October 9, 2023October 9, 2023Posted inOriginal ContentTags: color, css, dark mode Published by Bramus! Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more ...) View more posts Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License Post navigation Previous Post Previous post: LearnWithJason: CSS-Only Scroll-Driven Animation Leave a comment Cancel reply Your email address will not be published. Required fields are marked * [ ] [ ] [ ] [ ] Comment * [ ] Name * [ ] Email * [ ] Website [ ] [Post Comment] [ ] [ ] [ ] [ ] [ ] [ ] [ ] D[ ] This site uses Akismet to reduce spam. Learn how your comment data is processed. About Bram.us Bram.us is the technical/geeky weblog of Bramus Van Damme, a Freelance Web Developer from Belgium. Main topics are web related technologies (CSS, JS, PHP, ...), along with other geeky things (robots, space, ...) and personal interests (cartography, music, movies, ...). More ... Stay up-to-date To follow bram.us you can: * Subscribe to bram.us via RSS * Follow @bramusblog on Twitter * Give bram.us a like on Facebook Next to his ramblings here, you may also follow @bramus himself on Twitter or on Mastodon. Archives Archives [Select Month ] Search Search for: [ ] [Search] Bram.us, Proudly powered by WordPress.