<story><title>Dark mode in a website with CSS</title><url>https://tombrow.com/dark-mode-website-css</url></story><parent_chain><item><author>fastball</author><text>Is there anything which allows user choice (i.e. state) that doesn&amp;#x27;t involve JS?</text></item><item><author>JDiculous</author><text>The problem is that this doesn&amp;#x27;t let the user toggle dark mode on&amp;#x2F;off.&lt;p&gt;If you want the user to be able to toggle dark mode on your site without changing their Operating System preferences, then you&amp;#x27;ll need to implement your dark theme as a class (eg. body.theme-dark) since there&amp;#x27;s no way to dynamically set the media query.&lt;p&gt;&lt;pre&gt;&lt;code&gt;  const darkMode = window.matchMedia(&amp;#x27;(prefers-color-scheme: dark)&amp;#x27;)
  if (darkMode) {
    document.body.classList.add(&amp;#x27;theme-dark&amp;#x27;)
  }
&lt;/code&gt;&lt;/pre&gt;
If you have to write your dark theme CSS as a separate class, then there&amp;#x27;s no sense in duplicating that logic inside the media query and having to override it when the user toggles it. So I ended up using that Javascript instead of putting the styles in the media query.&lt;p&gt;It&amp;#x27;s a shame, I would&amp;#x27;ve preferred a pure HTML&amp;#x2F;CSS solution.</text></item></parent_chain><comment><author>RobertKerans</author><text>Checkbox + CSS custom properties for the colours&amp;#x2F;font weights etc . Checkbox checked, adjust the variable values.&lt;p&gt;There&amp;#x27;s normally a little more to it than that, but there shouldn&amp;#x27;t ever be _much_ more, custom properties are fully dynamic</text></comment>
<story><title>Dark mode in a website with CSS</title><url>https://tombrow.com/dark-mode-website-css</url></story><parent_chain><item><author>fastball</author><text>Is there anything which allows user choice (i.e. state) that doesn&amp;#x27;t involve JS?</text></item><item><author>JDiculous</author><text>The problem is that this doesn&amp;#x27;t let the user toggle dark mode on&amp;#x2F;off.&lt;p&gt;If you want the user to be able to toggle dark mode on your site without changing their Operating System preferences, then you&amp;#x27;ll need to implement your dark theme as a class (eg. body.theme-dark) since there&amp;#x27;s no way to dynamically set the media query.&lt;p&gt;&lt;pre&gt;&lt;code&gt;  const darkMode = window.matchMedia(&amp;#x27;(prefers-color-scheme: dark)&amp;#x27;)
  if (darkMode) {
    document.body.classList.add(&amp;#x27;theme-dark&amp;#x27;)
  }
&lt;/code&gt;&lt;/pre&gt;
If you have to write your dark theme CSS as a separate class, then there&amp;#x27;s no sense in duplicating that logic inside the media query and having to override it when the user toggles it. So I ended up using that Javascript instead of putting the styles in the media query.&lt;p&gt;It&amp;#x27;s a shame, I would&amp;#x27;ve preferred a pure HTML&amp;#x2F;CSS solution.</text></item></parent_chain><comment><author>agret</author><text>Yes, although doing things without JS is old school web. I think you&amp;#x27;d be hard pressed to find any clients that don&amp;#x27;t support JS in this era.&lt;p&gt;Anyway, to accomplish this you would split your styles into seperate CSS files and then have a drop-down that does an HTTP POST&amp;#x2F;GET to a server side script that will then set a cookie on your browser with your preferred choice.&lt;p&gt;Each time a request comes in from the client you just check that cookie for which style they want and then change the HTML that&amp;#x27;s sent to include a different stylesheet.</text></comment>