note: You didn't actually state this but I am assuming that you have other passages that have been assigned the 'dark' passage tag, and that while the lamp it lit you want it to potentially effect the CSS of every 'dark' passage. Also because your 'dark' styling is "white text on a black background" I will assume you are using something like SugarCube's Bleached stylesheet to alther the default styling of your project.
When viewing a Passage that has been assigned a Passage Tag (like 'dark') the story format's engine will added that tag to the Document Object Model of the current web-page in multiple places, which you can then use as targets of custom CSS.
a. As a member of the data-tags attribute of the: html, body, and .passage elements.
b. As a member of the class attribute of the: body and .passage elements.
You can also use macros like <<removeclass>> and <<addclass>>, and the jQuery <element>.removeClass() function to programatically modify which CSS classes are currently assigned to an element.
1. Initialise the required story variables within your project's StoryInit special passage, I will assume the lamp defaults to off and the battery to 100%.
<<set $lampon to false>>
<<set $battery to 100>>
2. Use the body element's class attribute as the target of your 'dark' related CSS within your project's Story Stylesheet area.
body.dark {
background-color: black;
color: white;
}
note: your existing 'dark' CSS rule may contain more property changes than the above, if so then move those extra changes into the above selector.
3. Turning the lamp on.
The following example use the <<removeclass>> macro to remove the 'dark' class from the body element if there is enough power in the battery, doing this will cause the above CSS rule to no longer effect the current passage while the reader doesn't transition to another passage.
<<link "Light Lamp">>
<<set $lampon to true>>
<<if $battery > 0>>
<<removeclass "body" "dark">>
<</if>>
<</link>>
note: The above link currently only concerns itself with the bare minimum required to cause the current page to change it's styling, you may want to also add code that displays the "lamp is lit" related text to the above link.
4. Conditionally lighting the 'dark' passages visited by the Reader.
The following JavaScript example uses a :passagedisplay event handler to minitor each time the Reader visits a passage, it uses the tags() function to determine if the current passage has been assigned the 'dark' passage tage, it uses the State.variables object to gain access to the current value of $lampon and $battery story variables, and it conditionally uses the jQuery <element>.removeClass() function to remove the 'dark' class from the body element if a lamp with power is on.
$(document).on(':passagedisplay', function (ev) {
var SV = State.variables;
if (tags().includes("dark") && SV.lampon && SV.battery > 0) {
console.log(passage() + ' matched.');
$('body')
.removeClass('dark');
}
});
note: Place the above code within your project's Story Javascript area.
5. Turning the Lamp off.
The following example uses the tags() function to determine if the current passage has been assigned the 'dark' passage tag, and if it does it use the <<addclass>> macro to add the 'dark' class to the body element if the class is missing.
<<link "Extinguish Lamp">>
<<set $lampon to false>>
<<if tags().includes('dark')>>
<<addclass "body" "dark">>
<</if>>
<</link>>