How to invert SugarCube2's color scheme?

Question

I'm sorry this has multiple questions, but they're all related. I can separate them if necessary. I've done quite a few google searches but have found only partial answer(s).

I'm using SugarCube 2 with tweego, but my understanding of HTML CSS is very rudimentary.

Primary question: What's the best way to simultaneously invert the entire color scheme (for both passages and sidebar) when using SugarCube 2?  Specifically, to change them both from the default white-on-black to black-on-white? Can it be done only by specifying multiple individual, static CSS  settings?

Supplementary question 1: What's the CSS for changing the colors of the error messages?

Supplementary question 2: Is there any way for the reader to change the color sheme dynamically? I.e. to optimize the colors either for daytime reading (black-on-white) or for nighttime reading (white-on-black)?

Background:

I 've learned how to statically reverse the text color scheme for all passages, using CSS in the Story Stylesheet passage, but that leaves the sidebar's colors unchanged and the settings I'm using seem to make the error messages (the ones generated by my programming mistakes) unreadable because their backgrounds are still black (i.e. they're now black text on a black background).

body
{
      background-color: white;
      color: black;
}

I've also learned how to reverse the color scheme for individual sections of the sidebar, but I'm not sure I've managed to find all of the necessary class schemes.

Are all of the CSS classes shown in http://www.motoslave.net/sugarcube/2/docs/#html ? I don't recognize any that'd affect the error messages.

Thanks for whatever help you can provide.

Answer 1

> What's the best way to simultaneously invert the entire color scheme...

The SugarCube 2.x web-site includes a Bleached download link in it's Stylesheet section, the referenced archive file contains a CSS file which can be used to invert the default colour theme.

> What's the CSS for changing the colors of the error messages?

I will assume you mean the error messages shown when there are issues with the syntax of your TwineScript code. eg. forgetting to add a <</link>> end tag for a <<link>> macro.

If you use your web-browser's built-in Web Developer Tools to Inspect the HTML elements generated for such an error you will it has an HTML element structure like the following

<div class="error-view">
	<button class="error-toggle" type="button" tabindex="0" aria-label="Toggle the error view" title="Toggle the error view"></button>
	<span class="error">Error: cannot find a closing tag for macro &lt;&lt;link&gt;&gt;</span>
	<pre class="error-source" aria-hidden="true" hidden="hidden"><code>&lt;&lt;link "Some link"&gt;&gt;…</code></pre>
</div>

... and that the error's default styling is assigned to the .error-view CSS selector. The CSS rules for this selection can be fould in the core.css file referenced in the Built-in Stylesheets section of the documentation.

> Is there any way for the reader to change the color sheme dynamically?

You can use the Setting API to add Theme selection functionality to your project, there is even an example of this within the documentation of the Setting.addList() function.

note: the example assigns a CSS Classname to the html element, which results in CSS selectors like the following, obviously you can change the classnames used in the example.

html.theme-bright-lights {
}

html.theme-charcoal {
}

html.theme-midnight {
}

html.theme-tinsel-city {
}

> Are all of the CSS classes shown in... 

No, that file only includes the default HTML structure of the page, not special use-case ones like Error Message.

Generally Debugging HTML structures like that of the Error Message shouldn't be seen by the end-user, because such errors would of been found during the Author's testing phase.

Comments

Thanks for the suggestions! I'll give them a try.

I've just now spent some time perusing the "Twine Cookbook" at https://twinery.org/cookbook/ and it looks like it includes some additional possibilities, like "Variable Style Styling" at https://twinery.org/cookbook/storystyling/sugarcube/sugarcube_storystyling.html

p.s.

I'd like error messages to always be readable by the player, too. When a game is rather complex, the author might not always manage to test all of its paths, so it's nice if a player can report the details when it has problems.