<story><title>The Future of CSS: Easy Light-Dark Mode Color Switching with Light-Dark()</title><url>https://www.bram.us/2023/10/09/the-future-of-css-easy-light-dark-mode-color-switching-with-light-dark/</url></story><parent_chain><item><author>jjcm</author><text>I&amp;#x27;ve done a LOT of dark mode work, to the point where I&amp;#x27;d consider myself an expert here[1].&lt;p&gt;I&amp;#x27;m not a fan of this. This solves one tiny aspect of the larger problem in a non-scalable way that will inevitably lead to bloat and inflexibility. It&amp;#x27;s a really a naive approach that hasn&amp;#x27;t taken into account design at scale, nor the future of where design is heading.&lt;p&gt;Typically when doing theming, you have two axes - a visual mode axis (i.e. light&amp;#x2F;dark&amp;#x2F;high contrast&amp;#x2F;colorblind modes&amp;#x2F;etc) and a theme axis (i.e. docs&amp;#x2F;sheets&amp;#x2F;slides, each with a different brand color). While this does solve an aspect of the visual mode axis, as soon as you add either a new theme or a visual accessibility mode, you&amp;#x27;ll be forced to refactor. I see that as codesmell.&lt;p&gt;I also don&amp;#x27;t think this helps drive a better future of theming support. If we think about the future of theming, what we see today is a convergence of design patterns. Nearly everyone is doing theming at scale in at least roughly the same way (a semantic token layer that points to different primitive colors depending on the theme), and the differences between implementations continues to diminish over time. The convergence of patterns is a good thing - it means more code can be shared.&lt;p&gt;If you wanted to actually solve theming, what you should work for is not a constrained helper function like light-dark(), but instead a shared token schema. Today nearly every company has their own token schema and different ways of naming things in the semantic token layer. If we had a shard language here, not only would it be trivial to add light&amp;#x2F;dark theming (just redefine a few variables that are already provided for you), code could be shared between sites and inherit the theming&amp;#x2F;branding.&lt;p&gt;[1] Most recently leading Figma&amp;#x27;s dark mode stream, and currently leading their variables feature work to enable others to easily do light&amp;#x2F;dark&amp;#x2F;etc. I&amp;#x27;ve consulted with 50+ enterprise tier companies on their theming. Also contributed to the W3C design token proposal for theme&amp;#x2F;mode support: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;design-tokens&amp;#x2F;community-group&amp;#x2F;issues&amp;#x2F;210&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;design-tokens&amp;#x2F;community-group&amp;#x2F;issues&amp;#x2F;210&lt;/a&gt;. Previously worked on Jira&amp;#x27;s dark mode + a few other projects.</text></item></parent_chain><comment><author>bramus</author><text>(Hi, author of the post&amp;#x2F;article here)&lt;p&gt;&amp;gt; This solves one tiny aspect of the larger problem in a non-scalable way that will inevitably lead to bloat and inflexibility. It&amp;#x27;s a really a naive approach that hasn&amp;#x27;t taken into account design at scale, nor the future of where design is heading.&lt;p&gt;Note that `light-dark()` isn’t the end goal here. As discussed within the CSS WG, the end goal is to have a generic function `schemed-value()` to give you what you want.&lt;p&gt;I realize this wasn’t included in the post, so I’ve added a new section to the post with this information: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;www.bram.us&amp;#x2F;2023&amp;#x2F;10&amp;#x2F;09&amp;#x2F;the-future-of-css-easy-light-dark-mode-color-switching-with-light-dark&amp;#x2F;#schemed-value&quot; rel=&quot;nofollow noreferrer&quot;&gt;https:&amp;#x2F;&amp;#x2F;www.bram.us&amp;#x2F;2023&amp;#x2F;10&amp;#x2F;09&amp;#x2F;the-future-of-css-easy-light-...&lt;/a&gt;&lt;p&gt;I hope this addresses your concern. If not, feel free to let me (or the CSS WG for that matter) know.</text></comment>
<story><title>The Future of CSS: Easy Light-Dark Mode Color Switching with Light-Dark()</title><url>https://www.bram.us/2023/10/09/the-future-of-css-easy-light-dark-mode-color-switching-with-light-dark/</url></story><parent_chain><item><author>jjcm</author><text>I&amp;#x27;ve done a LOT of dark mode work, to the point where I&amp;#x27;d consider myself an expert here[1].&lt;p&gt;I&amp;#x27;m not a fan of this. This solves one tiny aspect of the larger problem in a non-scalable way that will inevitably lead to bloat and inflexibility. It&amp;#x27;s a really a naive approach that hasn&amp;#x27;t taken into account design at scale, nor the future of where design is heading.&lt;p&gt;Typically when doing theming, you have two axes - a visual mode axis (i.e. light&amp;#x2F;dark&amp;#x2F;high contrast&amp;#x2F;colorblind modes&amp;#x2F;etc) and a theme axis (i.e. docs&amp;#x2F;sheets&amp;#x2F;slides, each with a different brand color). While this does solve an aspect of the visual mode axis, as soon as you add either a new theme or a visual accessibility mode, you&amp;#x27;ll be forced to refactor. I see that as codesmell.&lt;p&gt;I also don&amp;#x27;t think this helps drive a better future of theming support. If we think about the future of theming, what we see today is a convergence of design patterns. Nearly everyone is doing theming at scale in at least roughly the same way (a semantic token layer that points to different primitive colors depending on the theme), and the differences between implementations continues to diminish over time. The convergence of patterns is a good thing - it means more code can be shared.&lt;p&gt;If you wanted to actually solve theming, what you should work for is not a constrained helper function like light-dark(), but instead a shared token schema. Today nearly every company has their own token schema and different ways of naming things in the semantic token layer. If we had a shard language here, not only would it be trivial to add light&amp;#x2F;dark theming (just redefine a few variables that are already provided for you), code could be shared between sites and inherit the theming&amp;#x2F;branding.&lt;p&gt;[1] Most recently leading Figma&amp;#x27;s dark mode stream, and currently leading their variables feature work to enable others to easily do light&amp;#x2F;dark&amp;#x2F;etc. I&amp;#x27;ve consulted with 50+ enterprise tier companies on their theming. Also contributed to the W3C design token proposal for theme&amp;#x2F;mode support: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;design-tokens&amp;#x2F;community-group&amp;#x2F;issues&amp;#x2F;210&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;design-tokens&amp;#x2F;community-group&amp;#x2F;issues&amp;#x2F;210&lt;/a&gt;. Previously worked on Jira&amp;#x27;s dark mode + a few other projects.</text></item></parent_chain><comment><author>jjcm</author><text>FWIW, I added a comment here around a simple but more flexible proposal, that allows for easy light&amp;#x2F;dark theming via this approach, but would at least scale (and would allow for color-scheme&amp;#x27;s custom identifier support to be useful): &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;w3c&amp;#x2F;csswg-drafts&amp;#x2F;issues&amp;#x2F;7561#issuecomment-1754069460&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;w3c&amp;#x2F;csswg-drafts&amp;#x2F;issues&amp;#x2F;7561#issuecomment...&lt;/a&gt;</text></comment>