enchant: ?sidebar, background: $variable

Question

I'm trying to dynamically style my passages (to allow the player to choose different display modes for accessibility), but the following (in a header passage) isn't working:

(enchant: ?sidebar, (background: $BGcolour))

($BGcolour is a string containing a colour hex code, because I also want to be able to save its contents and the save function doesn't like the colour data type)

I specifically want to be able to style the sidebar independently of the passage and story - any advice?

Thanks

Answer 1

Harlowe doesn't formally define it's custom HTML elements (like tw-story, tw-passage, tw-sidebar, etc...) which means it it up to the web-browser to decide what default values are allocated to the CSS properties of those elements. In the case of the tw-sidebar custom HTML element the CSS background-color property of the is assigned a default value of rgba(0, 0, 0, 0) (Transparent Black), or at least it is in Chrome, which results in the background-color assigned to the tw-story element (Black) to bleed through.

If you Inspect the HTML elements generated by your example code, you will a structure like the following..
note: I assigned the $BGcolour variable a value of "#663399".

<tw-enchantment style="background-color: rgb(102, 51, 153); display: block;">
	<tw-sidebar>
		<tw-icon tabindex="0" class="undo" title="Undo" style="visibility: hidden;">↶</tw-icon>
		<tw-icon tabindex="0" class="redo" title="Redo" style="visibility: hidden;">↷</tw-icon>
	</tw-sidebar>
</tw-enchantment>

.. and in theory the background-color of the tw-enchantment element should bleed through to the tw-sidebar but it doesn't.

To fix the "background colour not bleeding through" problem simply adding the following CSS to your project's Story Stylesheet area.

tw-sidebar {
	background-color: inherit;
}