changing background color on the fly

Question

body {
background-color: white;
color: darkgrey;
font-family: Futura,Impact,Helvetica,sans-serif;
font-size: 125%;
}

a {
color: red;
}
a:hover {
color: crimson;
text-decoration: none;
border-bottom: 4px solid crimson;
}

.forest {
background-color: Beige;
color: cornflowerblue;
font-size: 200%;
}

.desert {
background-color: LimeGreen;
color: cornflowerblue;
font-size: 200%;
}

.land {
background-color: Black;
color: cornflowerblue;
font-size: 200%;
}

.ocean {
  background-color: Blue;
}

Starting with the CSS stylesheet above, I would like to be able to change the background color of certain areas on the fly, when the player clicks a link.  For example, if the player is in a location tagged "forest" (which starts with a Beige backgroundColor) and clicks an element of text displayed as "green forest" the appearance of all similarly tagged pages should immediately and everafter be changed to a Green Background.

I am working in Twine 2, Sugarcube 2.28.2

I done a lot of research on this question already (with google) and the closest I've come is this line of code

<<linkreplace "Change Color">> 
   <<script>> 
		document.body.style.backgroundColor = "Green"; 		
	<</script>>	
<</linkreplace>>

Which applies the change immediately, but also globally (rather than being tag specific). Also, this seems to change the colors of the edges of the window, rather than the background behind the text itself.

Answer 1

When you view a Passage that has been assigned a Passage Tag (like forest) the SugarCube engine adds that tagname to a number of the HTML elements within the structure of the current page.

a. Member of the data-tags attribute of the html, body, and div.passage elements.
b. Member of the class attribute of the body and div.passage elements.

The above information is important because it explains why currently your class-name based CSS selectors (like .forest and .desert) are being applied to two elements (body and div.passage) in the current page's structure instead of just one (body) and this can cause interesting side-effects.

The simplest way to get arround this issue is to make your class-name based CSS selectors more specific, and you can do that by adding the body element-name to them like so.

body.forest {
	background-color: Beige;
	color: cornflowerblue;
	font-size: 200%;
}

body.desert {
	background-color: LimeGreen;
	color: cornflowerblue;
	font-size: 200%;
}

... which forces them to be applied only to the body element only.

Comments

See also this section of the SugarCube documentation.

---

I'm embarassed to admit how many dozens of tries it took for me to get this right, but finally working. I hope the learning curve for CSS/twine levels off... (Still working in Sugarcube/Twine 2)

body {background-color: var(--mybodyColor);}

body[data-tags~="forest"] {   background-color:  var(--myColor); }

body.ocean {background-color: Blue; }

<<button "push me">>
<<script>>
document.body.style.setProperty('--myColor','#FF0000');
<</script>>
<</button>>

This is button test

[[go|newlocation]]