1

Is it possible to write a media query or a CSS selector that would only apply when color-scheme is dark.

:root { 
    /*Special CSS variable see: https://twitter.com/diegohaz/status/1529543787311144961*/
    color-scheme: dark;
}

:root {
  --blue-france: #f5f5fe;
}

/* Psudo code, I know it isn't possible to use var in selectors, I just hope there is a way around it in this perticulat usecase. */
:root:where(var(color-scheme)="dark") {
  /* Overwrite default value */
  --blue-france: #1b1b35;
}

/* Alternative psudo code, it works with prefers-color-scheme but not with color-scheme */
@media screen and (color-scheme: dark) {
    :root {
       --blue-france: #1b1b35;
    }
}

I'm open to alternative solutions as long as it doesn't involve JavaScript or setting attributes on the <head /> or <body />.

Marco Bonelli
  • 63,369
  • 21
  • 118
  • 128
Joseph Garrone
  • 1,662
  • 19
  • 20
  • Does this answer your question? [Is it possible to use CSS vars in CSS3 selectors?](https://stackoverflow.com/questions/17951877/is-it-possible-to-use-css-vars-in-css3-selectors) – ATP Sep 24 '22 at 23:11
  • @ATP Thank you for your suggestion, it tells me that no, it isn't possible, at least with selectors but I'm hoping for a suggestion in this very specific use case. – Joseph Garrone Sep 24 '22 at 23:22
  • I don't get what you want. If you mark a selector with `color-scheme: dark`, then what's the point of checking it? You already know its `dark` and you can just add more styles? – kelsny Sep 24 '22 at 23:43
  • I think you're looking for [`@media (prefers-color-scheme: dark)`](https://css-tricks.com/dark-modes-with-css/) – James Long Sep 25 '22 at 00:18
  • @caTS `` is happened dynamically via SSR in the head. The rest of the CSS is static. Sometime the value is 'dark', sometime it's 'light' it depends of the user preference, it's not hard coded. – Joseph Garrone Sep 25 '22 at 00:53
  • @JamesLong thanks you for your suggestion but unfortunately `prefers-color-scheme` is the OS prefered scheme, not the one currently enabled via `:root { color-scheme: dark; }`... – Joseph Garrone Sep 25 '22 at 00:57

1 Answers1

0

From what I understood you are looking for a dark mode without Javascript? Here is this code snippet based on this snippet for Dark Mode WITHOUT Javascript, just pure CSS.

/**
 * VARIABLES
 */

:root {
  --bg: #f8fafc;
  --panel-bg: #FFFFFF;
  --panel-border: #CCCCCC;
  --panel-title: #343f44;
  --panel-text: #54666d;
  --btn: #3eb0ef;
}


/**
 * GENERIC STYLES 
 */

body {
  position: relative;
  height: 100vh;
  padding: 0;
  margin: 0;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 600;
}


/**
 * TOGGLERS 
 */

#toggleMode {
  visibility: hidden;
}

.toggleDark,
.toggleLight {
  cursor: pointer;
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 20px;
}

.toggleDark {
  display: block;
  color: #222;
}

.toggleDark:hover {
  color: blue;
}

.toggleLight {
  display: none;
  color: white;
}

#toggleMode:checked~.toggleDark {
  display: none;
}

#toggleMode:checked~.toggleLight {
  display: block;
}

#container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg);
  z-index: 1;
  padding: 50px 20px;
}

#toggleMode:checked~#container {
  --bg: #020202;
  --panel-bg: #111413;
  --panel-border: #1f2322;
  --panel-title: #8e9294;
  --panel-text: #505456;
  --btn: #2962fe;
  background-color: var(--bg);
}


/**
 * PANEL 
 */

.panel {
  margin-top: 20px;
}

.panel .content h2 {
  margin-top: 20px;
  margin-bottom: 0;
  color: var(--panel-title);
}

.panel .content p {
  margin-top: 10px;
  font-weight: 300;
  color: var(--panel-text);
}

.panel .content button {
  border: 0;
  border-radius: 3px;
  background-color: var(--btn);
  padding: 10px 20px;
  color: white;
  cursor: pointer;
}

.panel .content button:hover {
  opacity: 0.7;
}
<body>
  <input type="checkbox" id="toggleMode">
  <label for="toggleMode" class="toggleDark">Dark Mode</label>
  <label for="toggleMode" class="toggleLight">Light Mode</label>
  <div id="container">
    <div class="panel">
      <div class="content">
        <h2>This is a title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ullamcorper erat quis faucibus pulvinar. Duis vel ex non sem ultricies consectetur. Donec blandit dolor ac libero euismod, sit amet blandit libero scelerisque.</p>
        <button>Read more</button>
      </div>
      <div style="clear:both"></div>
    </div>
  </div>
</body>
Sergio Yael A.
  • 202
  • 1
  • 8