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-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>
.. 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.