Create a dark theme

[lukaslueg]

The current default CSS is basically a "light" theme. It would be nice to have a corresponding "dark theme", while still allowing the presentation layer (read: the browser, not only the user of the library) to choose.

[peter-lyons-kehl]

Alternatively, could you make the macro_text text area black on white = same as the instructions' text on the right? Then the whole page https://lukaslueg.github.io/macro_railroad_wasm_demo would work in Firefox with "Invert" mode of https://addons.mozilla.org/en-US/firefox/addon/dark-background-light-text (https://github.com/m-khvoinitsky/dark-background-light-text-extension).

For now in Firefox:

• install https://github.com/m-khvoinitsky/dark-background-light-text-extension (the best white-on-dark I've found over years)
• install https://addons.mozilla.org/en-US/firefox/addon/styl-us
• in Stylus, enter a style:

/* ==UserStyle==
@name           lukaslueg.github.io - 2022-05-20, 10:46:44 a.m.
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */

@-moz-document url-prefix("https://lukaslueg.github.io/macro_railroad_wasm_demo/") {
    textarea#macro_text {
        background-color: white !important;
        color: black !important;
    }
}

That makes the macro code editor black-on-white, and then Dark Background Light Text inverts the whole page.