ANSWERED - Chapbook - Conditional display based on theme?

Authoring Twine
1

Twine Version: 2.9.2
Chapbook 2.2.0

Is it possible to set an image to display conditionally based on what theme the user is using? i.e., if the user is in “light mode”, show one image, but if the user switches to “dark mode,” show a different image.

2

There is a built-in variable than you can check.

→ Chapbook: Using the Current Theme in Code

There are 2 variables related to the Dark Theme: browser.darkSystemTheme and browser.darkTheme. Read up on both and decide what’s best for your situation.

You should be able to do something like:

[if browser.darkSystemTheme]
<img src="dark.png">
[else]
<img src="light.png">
[continue]

Without knowing how Chapbook determines the state of the user’s system theme setting, you’ll have to test this out. If, for whatever reason, there is an issue with it returning true or false incorrectly, we can also use standard JavaScript practices to set a Chapbook variable to tell the story which theme is being used. However, I think you should be good with Chapbook’s built-in variables.

It’s been a while since I used Chapbook, but I hope that helps.

4 Likes
3

Oh, dynamite! Thank you very much! I’ll report back.

1 Like
4

This ALMOST works. It does display a different picture based on theme, but Switching Theme doesn’t reload the page, so you would need to force a reload in order to get the updated image.

1 Like