More CSS features: light-dark()

Tags:

Providing a dark mode is good form nowadays. I like doing/having that too.

Light mode

Usually, a dark mode is done by switching to a second CSS sheet or having a CSS selector switching between a bright and a dark colour set using JS or the browser preferences. This can lead to some rule repetition:

.light-theme textarea {
    color: black;
    background-color: #8dfece;
}

.dark-theme textarea {
    color: #62b190;
    background-color: black;
}

Dark mode

CSS also has a function to do this color switching on an element without needing to repeat the declaration in a second rule: light-dark(color1, color2) will return color1 if the light environment is preferred by the user and color2 if the dark environment is preferred.

textarea {
    color: light-dark( black, black );
    background-color: light-dark( #8dfece, #62b190 );
}

You still might want to give the user an option to set their preference only for your website, storing that in a cookie. Bootstrap 5 itself has a fairly thorough, live-switching setup for that, but it's also somewhat long. There also is a short JS snippet on Github which is mildly simpler to integrate, but which only does the switching on page load or toggling of the user selection, and not when the user switches their browsers preference.

Nash - notetaking in a single HTML page

Tags:

Nash screenshot

Nash is a quite simple (and nice) document editor in a single-page . It does not handle markdown, but on the upside, it has a convenient enough toolbar to handle formatting the content.

This is not unlike my note taking app , but mine uses a backend to save the files in a central location. Nash uses the "share" and "download" functionalities of the containing browser instead.

Nash sports only a single toolbar, while my app has a top and a bottom toolbat. This is a ggd inspiration to reorganie my toolbars and see if I can reduce them to a single toolbar or at least reorganize the actions.

C64 demo "NINE" , and debugging tools

Tags:

Linus Akesson published an interesting article on a demo by him.

Watch on Youtube

The demo features 9 sprites (hence the name) displayed simultaneously on a C64, hence the name.

There is another video dissecting the demo and how it achieves its "impossible" effect. What impresses me the most is not the dissection but the debugger and scanline visualisation tools shown in the video.

another video

JSON Canvas

Tags:

JSON Canvas looks interesting. It is far from the interactive infinite canvas display that I like and try to get towards with SVG::Drawboard but having an interactive (enough) renderer for simple input data would be nice, especially if I don't have to program it myself.