html/css

Light & Dark Mode In Just 1 Line of CSS 😱

:root { color-scheme: dark light; }

Want your whole page to follow your users’ color scheme preferences? Just add color-scheme to your :root element. When you do this, the operating system will automatically adjust things like form controls, scrollbars, and CSS system colors to match what your users prefer.

When you specify color-scheme: dark light, you’re indicating that

1. The page supports both dark and light color schemes
2. The browser should use the user’s system preference to determine which scheme to apply
3. The order matters—in this case, dark is listed first, suggesting it as the preferred option if both are supported

You could design a webpage without declaring custom color on any elements. Instead, you could declare using CSS system colors. Here is the list of CSS system colors that are compatible with color-scheme:

• ActiveText
• ButtonBorder
• ButtonFace
• ButtonText
• Canvas
• CanvasText
• Field
• FieldText
• GrayText
• Highlight
• HighlightText
• LinkText
• Mark
• MarkText
• SelectedItem
• SelectedItemText
• VisitedText

This is the first step to design minimally and sustainably, and write less damn code. 😉

Create Modal in <noscript> without javascript

<dialog id="modal">
  <h1>Welcome!</h1>
  <p>Click Close or press esc to close modal</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

Then put it in the <noscript> tags. (doesn’t work because there is no trigger, need to find out how to trigger without button. Or maybe its impossible.

Or if you want a button to trigger it,

<button onclick="modal.show()">Show Modal</button>

Notice there’s an onclick attribute with value of modal.show(). This means it will target an id of modal and runs a show() function. Even we didn’t write any JS, but the show() function is still a JavaScript function.

Can;t get this to work….

But archive.org has this:

                                            <noscript>
                  <div class="alert alert-danger alert-dismissable" data-dismiss="alert">
                    <button type="button" class="close" data-dismiss="alert"
                      aria-hidden="true"><span class="iconochive-remove-circle"  aria-hidden="true"></span><span class="icon-label sr-only">remove-circle</span></button>
                    Internet Archive&apos;s in-browser video                    "theater" requires JavaScript to be enabled.
                    It appears your browser does not have it turned on.
                    Please see your browser settings for this feature.
                  </div>
                </noscript>

here rendered

But it doesn’t work. I can’t find anything in the css but they have a really complex labyrinth of code so that doesn’t mean it’s not there. Or maybe it’s done some other way (ibviously not javascript). here is the page https://archive.org/details/youtube-WywEir8Srbk – if you view it with javazcript off there is an alert which is dismissable but it is done without making a separate page and stopping you from seeing the site.