CSS Customisation on Player's End

Hello! I’ve been able to solve most of my problems just looking through the forums, but not this time. Apologies if I just missed it, and for the weird title. I’m looking to create a way for players to customise the story’s appearance – specifically the text sizes.

I tried two different ways of doing it before I gave up and decided to ask for help:

1.) I had <<click "Biggest">><<addclass "html" "biggesttext">><</click>> and in the CSS had html.biggesttext { font-size: 22px; }. This worked, but when I added more options and put in the <<removeclass>> functions, it broke down for a reason that I still am not entirely sure about? And in later trials I could not replicate my success even without the <<removeclass>>, so I really have no idea what I did?

2.) I had tried to do variables in my css. For example: passage { font-size: var(--size) } and set up different variables like #biggest {--size:22px;}. This would be my preferred method, because I’d also like to implement a dark/light mode, and could do something similar with the colours. However, I couldn’t quite figure out how to link an ID in the css to an ID in Sugarcube.

Any help would be really appreciated. (And I’m really sorry if this has been asked a lot before - I really do try to search through other people’s questions first!)

As per usual for me, I was overthinking it. For anyone else who wanted to achieve the same thing:

<<link "Biggest Text">><<script>>document.body.style.fontSize = "20px";<</script>><</link>> worked well for the text, and for my light/dark mode: <<link "Light Mode">><<script>>document.body.style.backgroundColor = "#ededed";document.body.style.color = "#212121"<</script>><</link>>

2 Likes