CSS color-scheme selector or media query

Question

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 /> .
Thank you for your help!

Answer 1

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>

CSS color-scheme selector or media query

Question

1 answers

solution1
1 2022-09-25 00:13:40

CSS color-scheme selector or media query

Question

1 answers

solution1 1 2022-09-25 00:13:40

solution1
1 2022-09-25 00:13:40