Theme Manager Component and runJS not working in Chrome

Wappler General
1

I usually use chrome to test my development and went to use the theme manager component and it wasn’t working. I figured I was using it correctly since it’s not a very complex component so I tried the page in Safari and the theme manager worked as expected.

I also noticed that none of my custom javascript functions that I use runJS for were working so I wrote a simple function to show an alert when changing a select input to test. It doesn’t work in Chrome, but works in Safari.

Chrome you can see the theme stays light even though I have the theme manager component set to Dark. You can see the errors in the console when I change the select input. The alert doesn’t popup.
Screenshot 2024-01-17 at 11.06.33 AM

chrome

Everything works as expected in Safari. (the errors you see in safari are just map files)

safari

My chrome is the latest version 120.0.6099.234 (Official Build) (arm64) and Safari Version 17.2.1 (18617.1.17.11.12, 18617)

2

In my experience, when I have troubles with Chrome not displaying correctly it is a browser caching problem and clearing the browser cache generally fixes it. Maybe that could be the problem for you as well if you haven’t done that yet.

3

Thanks @brad, I tried that as well, didn’t work.

4

Please provide a link to your page where we can check this.

5

@Teodor it’s on my local computer. I’ll try and put something on a public server when I get a chance tomorrow.

6

Check the local storage as in

image
image1731×770 223 KB

7

Thanks for the reply @ben. Nothing in storage for theme.

Screenshot 2024-01-18 at 5.33.17 AM
Screenshot 2024-01-18 at 5.33.17 AM3436×604 138 KB

Does runJS and theme manager component run fine for you in Chrome?

8

If you are not intending to use the Theme Switch to change the theme as shown in

Then add the theme to the <html> tag as in

<html lang="en" data-bs-theme="dark">

For more, see

9

Yes, that is how I discovered runJS wasn’t working in chrome. When the theme manager component didn’t work, I was going to write custom js function to set the data-bs-theme attribute to dark or light. Both runJS and Theme manager component work as expected in Safari. I’m storing the color mode as a user preference stored in the mysql users table, not in local storage.

1 Like