0 votes
by (120 points)
I currently have most of the game in a black background with white text, but I want a character to offer the player the option to "light up" the game. After they click that option/passage, the game would flip colors to have a white background with black text. I'm not worried about changing the entire game, since the color scheme only flips once the player is locked into a specific ending.

Is there a way to do this in Harlowe? All I'm finding is Sugarcube.


1 Answer

0 votes
by (300 points)

Yes! There's a couple of different ways you could do this. Both ways are generally simple to implement.

The first way is the (enchant:) macro. If you've used it before you may know that it can change selected text based on its content or hook name. In Harlowe 2.0 and onward, you can use the following code

(enchant:?Page, (color:#000000) + (background:#ffffff))

to change the page and text color easily. This can also be manipulated by (if:) statements, since it's a macro, and is very useful when combined with the "header" tag! However, fair warning: (enchant:) is the nemesis of (live:) for the most part, and will refresh (causing the screen to flash) every time the live command activates.

The solution to this is the second method: a bit of CSS. Back in September 2015, Grayelf created a piece of javascript that would change a passage tag into a CSS class, allowing passages to be formatted via their tags. (source: CSS-Based Tag Styling) The version of the code that will work in 2.0 is a little different from the original, which is what I have below.

Paste this in your header passage:

(print: "<script>$('tw-story').removeClass(\)</script>")
(if: (passage:)'s tags's length > 0)[
(print: "<script>$('tw-story').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")

And add this to story stylesheet (bottom-left menu, but you probably knew that)

html {
	background-color: #FFFFFF;

html.XXX {
	background-color: Beige;

XXX should be the passage tag in all passages you want to format.

I hope this helps! 

by (154k points)

> The version of the code that will work in 2.0 is a little different from the original

This comment near the end of that Basic Harlowe Passage Tag Based Styling thread explains how to modify my original Harlowe 1.x answer to work with the Harlowe 2.x story format. Basically for 2.x:

1. You don't need the code in the header tagged special passage.

2. You need to change the format of the CSS selectors.

Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.