Light mode works in main pane but not in UI bar

Authoring Twine
,
1

Hello, it’s my first time using Twine (2.7.1.0) and Sugarcube (2.36.1).

I’m trying to do a dark/light mode toggle and a separate post re using the API setting helped a lot. It worked yesterday, but when I checked the dark/light mode toggle today (on both the html file itself and the debug version) after trying to edit the Javascript and CSS stylesheet for some other things in the game, while the main body could be switched to light mode, the UI bar remained unchanged for some reason, despite re-doing the css for that. The respective codes are provided below.

Appreciate any help on this. Thank you.

Javascript:

var settingLightHandler = function () {
		if (settings.light) {
				$("html").addClass("light");
		}
		else {
				$("html").removeClass("light");
		}
};

Setting.addToggle("light", {
     label    : "Enable light mode.",
     default  : false,
     onInit   : settingLightHandler,
     onChange : settingLightHandler
});

CSS stylesheet for light mode:

.light body {
  color: black;
  background-color: white;
}

.light a {
 color: #6a1ac6;
  font-weight: bold;
}

.light a:hover {
 color: #00009f;
}

.light #passages button {
  background: #6348d7;
  border: transparent;
}

.light #passages button:hover {
	background: #6d5ba1;
}

.light @media (prefers-color-scheme: light) {
  :root {
    --color-bg: #ffffff;
    --color-fg: #000000;
}

/*********something doesn't work below but I have no idea what*********/

.light #ui-bar-body {
  	color: black;
  	background-color: #d2d3db;
}
  
.light #story-title {
  color: #d2d3db;
}
  
.light #menu ul {
	border: 1px solid #444;
}

.light #menu li a {
	border: 1px solid transparent;
	color: black;
	text-transform: uppercase;
}
  
.light #menu li a:hover {
	background-color: #d2d3db;
	border-color: #eee;
}
  
.light #story-caption button {
    color: black;
    font-weight: bold;
    background-color: transparent;
  	border: 1px solid #444;
	text-transform: uppercase;
}
2

Hi! I copy pasted your code into a new project, and…

I removed the bit above and it worked.
The @media (prefers-color-scheme: light) will override the setting in the JavaScript.
See answer below

1 Like
3

Your @media based rule…

.light @media (prefers-color-scheme: light) {
	:root {
		--color-bg: #ffffff;
		--color-fg: #000000;
	}
}   /* missing */

…doesn’t have a close curly brace } for the outer part of the rule.

This causes the CSS rules that follow it to be invalid.

1 Like
4

Geez I saw that and thought it was a typo. Silly me. Thank you so much.

5

Thank you!