How to create a simple light-dark mode in Hype Apps

Tips & Tricks
1

I recently posted a short video tutorial on my YouTube channel demonstrating how to implement a simple dark-mode in Hype apps with minimal overhead. This method utilizes two CSS filter effects (i.e., invert & hue-rotate) and is achieved with a modest amount of JS/CSS.

Video_thumbnail
Video_thumbnail1920×1080 122 KB

You can find this video on my YouTube channel here: How to create a simple light-dark mode in Hype Apps - YouTube

The code example mentioned in this video is:
ModeSwitcher.hype.zip (261.9 KB)

12 Likes
2

Hi, thanks for the solution. I added a transition-duration in the CSS code and it looks quite nice, but I get the issue is that it works only in one direction (light>dark). After the second click the transition doesn't work. Do you have any suggestion how to fix that?

TIA,
Nicky
Screenshot 2024-05-18 at 14.00.04

3

I can't see any obvious cause for this from the code snippet you posted, but just in case there is something else going on, you should post a full Hype project file.

4

Here is the full project file. It includes a minor edit including where transition lines were added to the CSS. The strange thing is that in Light mode, the behaviour is correct. However, in Dark mode, the transition doesn't play during the colour inversion, but when resizing the window, you can see the transition applies to the background size and the toggle button position.

ModeSwitcher_Edit_1.hype.zip (178.5 KB)

5

I think I understand your problem now.

You want to run the dark-mode class to switch modes and then run it backwards to reverse the effect. I'm not sure you can do that. You may need to have a separate class for each direction.

1 Like
6 
<style>
	
	.dark-mode {
	filter: invert(1) hue-rotate(180deg);
	transition-duration: 1000ms;
	transition-timing-function: ease-in-out;
	}

	.excludeFromModeSwitch {
	filter: invert(0);
	}
	
	.light-mode {
	filter: invert(0) ;
	transition-duration: 1000ms;
	transition-timing-function: ease-in-out;
	}

	.excludeFromModeSwitch {
	filter: invert(0);
	}
	
</style>

--

While we are using new class in the code we can also optimise the code and get rid of all the if conditions.

//get elements in scene 
const elementsInScene  =  document.querySelectorAll(".HYPE_element");

 
var currentMode  = hypeDocument.customData.mode  
var nextMode  = hypeDocument.customData.mode ==  "light-mode" ? "dark-mode" : "light-mode";
 
elementsInScene.forEach(function(element) {
	element.classList.add(nextMode);
	element.classList.remove(currentMode);
	});
hypeDocument.customData.mode = nextMode;
5 Likes
7

Thank you for the solution. Now the transition works properly both ways. The only issue left is the relocation of the background and the button while resizing the window. I am not very skilled at creating code, but it would be great if I could get help blocking this function for the position and size unaffected and work just on colors.
Thanks again!

8

In Hype, you don't need any additional "code" to create a document that is centered and scales proportionately (without any element shifts). Hype can do that natively.

Simply group everything in a scene into a scene container and configure that container with the flexible layout panel like this:

FlexibleLayout

Here is the original demo file configured that way:
ModeSwitcherwSceneContainer.hype.zip (264.3 KB)

1 Like