Toggle Dark Mode using DIVLESS Pure CSS

Coming from the perspective of having to write .html documentation within a workplace sharepoint environment which disallows javascript by default, I was tasked with "Oh, and add a button to toggle dark mode, thanks!"

This, on top of "Valid and Accessible Semantic HTML" wording in our policy documents which the boss equates with "Even a single DIV is laziness" made things a bit tricky to say the least.

@media (prefers-color-scheme: dark)

As a counter-point I suggested instead of a toggle we just style the page to match the light/dark system preference of each user with a media query. The response was "Okay start with that, but still put the toggle in." Great, I created more work for myself by trying to create less.

I already noted that I'd need CSS variables and a checkbox input / label method to control Light/Dark mode, but :checked ~ * would still only affect elements coming after the input, making the background style hard to toggle.

My first solution was to use a generic DIV positioned absolutely underneath everything, which worked until the boss spotted it and said to get rid of it. The one point of relief is they're fine with modern HTML/CSS being used as long as the compatibility support coverage is over 90% of browsers.

:has() to the rescue!

When I first saw this CSS syntax proposed for targeting the parent element back before it was implemented I wasn't sure what it'd be useful for. Now coming across it once more while I searched for solutions I thought, "Why not try it on BODY?"

It worked immediately and I kicked myself for not trying it sooner! Here's the relevant CSS I ended up with:

      * { /* LIGHT mode */
        --tcolor: #000;
        --bgcolor: #FFF;
        --lcontent: "DARK";
        --bgimage: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(255,255,255,0.75);
        --alink:blue;
        --avisited:purple;
      }
      body:has(#d:checked), body:has(#d:checked) * { /* DARK mode */
        --tcolor: #FFF;
        --bgcolor: #000;
        --lcontent: "LIGHT";
        --bgimage: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(0,0,0,0.75);
        --alink:lightblue;
        --avisited:#8467D7;
      }
@media (prefers-color-scheme: dark) {
      * { /* DARK mode */
        --tcolor: #FFF;
        --bgcolor: #000;
        --lcontent: "LIGHT";
        --bgimage: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(0,0,0,0.75);
        --alink:lightblue;
        --avisited:#8467D7;
      }
      body:has(#d:checked), body:has(#d:checked) * { /* LIGHT mode */
        --tcolor: #000;
        --bgcolor: #FFF;
        --lcontent: "DARK";
        --bgimage: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(255,255,255,0.75);
        --alink:blue;
        --avisited:purple;
      }
}
      body { /* base element under control of mode */
        color:var(--tcolor); /* match text color to mode */
        background-image:var(--bgimage); /* match opacity overlay to mode */
        background-repeat: no-repeat no-repeat, space no-repeat;
        background-size:auto 100vh;
        margin:-1ex;
      }
      label[for="d"]::after {content: var(--lcontent);} /* DARK or LIGHT text */
      section{ /* main interaction area */
        margin:0 auto;
        background-color:var(--sbgcolor);
        padding:1ex;
        padding-top:0;
        height:fit-content;
        max-height:96.2vh;
        overflow-y:scroll;
        scrollbar-color:rgba(128,128,128,0.5) var(--sbgcolor);
      }
      li:nth-of-type(even){ /* subtle horizontal lines */
        background-color:rgba(128,128,128,0.1);
      }
      summary:hover,summary:focus-visible,a:hover,a:focus-visible { /* match mouseover or     */
        background-color:var(--bgcolor);                            /* keyboard focus to mode */
      }
      a:link {color: var(--alink)}       /* match link     */
      a:visited {color: var(--avisited)} /* colors to mode */

I did one cheat using rgba(128,128,128,0.5) to keep the SECTION scrollbar-color neutral.

The end result (uninhibited by sharepoint) looks like this.

As a bonus here's the schema data structure of that page as added manually using attributes, another task I was given sans-javascript.

Now I just need to figure out how to trigger those audio sounds without javascript!?

Feel free to comment on your own experience working in limited environments, what worked and what didn't!

The above is the detailed content of Toggle Dark Mode using DIVLESS Pure CSS. For more information, please follow other related articles on the PHP Chinese website!