Can I restyle error messages?

Question

Error messages appear with black text on a dark red background. This makes them very difficult to read. Is it possible to restyle these?

Answer 1

Please use the Question Tags to start the name and full version number of the Story Format you are using, as answers can vary based on this information. Based on the fact that you mention "dark red" in your question I will assume you are using SugarCube, because Harlowe's error messages are white text on a purple background.

If you use your web-browser's Web Developer tools to Inspect the HTML element structure used to display the error message you will see that it looks something 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: the error message...</span>
	<pre class="error-source" aria-hidden="true" hidden="hidden">
		<code>...example of the passage source code...</code>
	</pre>
</div>

... and that the following CSS is being used to style it.

.error-view {
    background-color: #511;
    border-left: .5em solid #c22;
    display: inline-block;
    margin: .1em;
    max-width: 100%;
    padding: 0 .25em;
    position: relative;
}

.error-view > .error-toggle {
    background-color: transparent;
    border: none;
    line-height: inherit;
    left: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 1.75em;
}

.error-view > .error-toggle:before {
    content: "\e81a";
}

.error-view > .error-toggle.enabled:before {
    content: "\e818";
}

.error-view > .error {
    display: inline-block;
    margin-left: .25em;
}

.error-view > .error-toggle + .error {
    margin-left: 1.5em;
}

.error-view > .error-source[hidden] {
    display: none;
}

.error-view > .error-source:not([hidden]) {
    background-color: rgba(0,0,0,.2);
    display: block;
    margin: 0 0 .25em;
    overflow-x: auto;
    padding: .25em;
}

If all you want to do is change the colour of the background then you can use CSS like the following within your project's Story Stylesheet area you change the parent element's background-color property.

.error-view {
    background-color: lightseagreen;
}

note: you don't have to use the lightseagreen colour keyword in my example, any valid Colour Value will do.

Comments

Error messages appear with black text on a dark red background. This makes them very difficult to read. Is it possible to restyle these?

Also.  See my answer for details about the official Bleached theme (available from SugarCube's website; under Downloads > Stylesheets).  Even if you don't use it directly, it can serve as a guide for color theming SugarCube.

---

Thanks - you are correct I'm using Sugarcube 2.21.0. New to Twine it had never occured to me to right click and use the document inspector! So obvious.

---

Ideally you should upgrade your copy of SugarCube 2 to the latest version, which is currently v2.28.2

 It can be downloaded from the Downloads sextion of the SugarCube 2 web-site, and instructions for installing the upgrade within the Twine 2 application can be found here

Answer 2

As noted by Greyelf, you did not specify which story format you're using.  I'll also assume that you're using SugarCube.

 

Error messages appear with black text on a dark red background. This makes them very difficult to read. Is it possible to restyle these?

SugarCube's default text color is not what you've indicated (text is white by default), so you must have changed the text color to black causing your issue.

Assuming you're attempting to invert the default color scheme, I'd suggest using, or at least looking at, the official Bleached theme (available from SugarCube's website; under Downloads > Stylesheets), which does just that for all of SugarCube's styles.  Even if you decide not to use it, it should still serve as a comprehensive color theming reference.