Dark mode different image?

Wappler General Need Help
61

Well
Now I have the Mac set with light mode
After deleting the cache I enter the address of the page in Safari and the result is correctly in light mode
But the image and text of the variable are those of the Dark mode
If I choose (with the swicht) the dark mode the page is the dark one and it remains even later (image and variable text ok)
If I choose the light mode (with the swicht) the page is correctly light, the image is correct, but the variable is incorrect
If I choose the automatic mode, the page is light but incorrect variable image and text

In practice, the variable does not change
Now check your suggestion

62

Well, the variable is always calculated from the javascript functionā€¦
You can ignore the value of variable in case that the theme is dark or lightā€¦
Then, the picture is defined in the conditional regions.
It check which theme from the three (light/dark/auto) is selected and it renders the correct picture.
And of course only one condition can be treu and one picture will be rendered

63

Simplifying, now it behaves like this

  • always empty variable, if it is not attributed by default:
    -Light mode -> view and image ok
    -Dark mode -> View and image ok
    -Automatic mode -> OK View but no image

But I think that if the variable is always nothing, it is difficult to work

64

Iā€™m sure because it works for meā€¦
I think that by making all these changes, somewhere you have a wrong code or left a piece of code that doesnā€™t workā€¦

So, now that you know what we need to do, I suggest you to start a new (test) page and bind the correct elements through the UI to be sure that the code of your page is correct
And when you copy/paste code just make sure it is correct

65

Ok I try and let you know

1 Like
66

I did not manage to make the code work correctly.
Maybe it doesnā€™t work with different browsers and operating systems
Therefore at the moment I give us up
I have therefore been looking for another way, apparently much simpler, but with a defect to correct.
After eliminating any reference from the page, I inserted the following code as an image:

<picture> <source srcset="assets/images/Logo_dark_350.png" media="(prefers-color-scheme: dark)" /> <img src="assets/images/Logo_350.png" /> </picture>

It works perfectly when the device changes the setting of the theme, but only to the settings of the device, not to the Wappler theme selector

Now I check if somehow it is possible to make it working even with the Wappler selector

67

Good to hear that you make it work!

  1. You mean that it works on browser but not inside wappler?

  2. Or you mean that a user cannot change the theme on the browser by the theme switch?

If the second is happening maybe we can fix it by setting the current (selected) theme in a variable and use the variableā€™s value for the pictureā€™s source

68

With this solution, the procedure is completely different.
In practice, even with the page in use, if you change the setting of the theme on the device, the images are automatically displayed.

1 case Dark device set
Dark Image Correct
Automatic Image Correct
Light image not correct

2 Light device set set
Light Image correct
Automatic Image Correct
Dark image not correct

The automatic mode is always correct
The problem that remains is that the images do not change correctly when changing selection with Wapplerā€™s switch

69

Maybe here the solution

70

You really donā€™t need to write any complex code to detect the current theme.

The current theme is just available as data under the theme manager and you can use it in a conditional region to switch elements.

1 Like
71

Thanks George
If I understood well then, do I just have to create two different images and condition their visibility with two condition regions that compare the status of the Theme Manager?

72

Thanks George
But so the correct image view only works for dark mode and light mode
It does not work for automatic mode

73

I already mention that but @Marzio needs to find a solution for the case of ā€œautoā€ themeā€¦
In this case he is trying to get the userā€™s device prefers-color-scheme so he can assign the according pictureā€¦

1 Like
74

I see that the theme manager data settings indeed stays on ā€œautoā€ when the auto mode is on and doesnā€™t reflect the current selection. @patrick should fix this.

2 Likes
76

Ok thanks everyone
Pending any improvements for the moment the automatic mode

77

With regard to the Wappler Switch Theme, for a perfect result there would still be two or three points

  • to be able to increase the size of the icon
  • be able to add a text first (example ā€œModeā€)
  • How to manage the switch in a vertical menu (smartphone)
78

The first problem solved:
#ThemeSwitch {
font-size: 1.5em
}

79

bump

1 Like