100
Views
11
Comments
Solved
Toggle dark theme using CSS and JS

Hello all! I have been following this solution https://www.outsystems.com/forums/discussion/57091/theme-outsystems-web-11/ to try and create a checkbox that switches the colors in my CSS sheet using a JS function.

I got to the point of adding the JS, but I am confused on how it grabs the "checkbox" I've created. 

Specifically, I have the checkbox and the CSS with the [data-theme = "dark"] defined, but I don't fully understand how to link that logic to the JS provided.


Thank you in advance!

Champion
Solution

Your Welcome

Let me know if you are able to fix this,

meanwhile, I'll also check

Champion

Hello 

We have a Forge Component Available Which We can use to Switch from Light theme to Dark Theme

Have a look to this - 


Check Here - https://www.outsystems.com/forge/component-overview/8695/reactive-outsystemsui-dark-mode

This is the Demo Link - https://jose-proenca.outsystemscloud.com/InstantDarkThemeDemo/

And to Know How We use JavaScript In OutSystems, how we select Id, how widget can be use,

Check this - 

https://www.outsystems.com/training/courses/200/javascript-in-outsystems/

https://www.outsystems.com/training/courses/44/master-class-on-javascript-and-jquery/


I hope this helps.

Thanks

Hi Khan! Thank you for the response. 


I have gone ahead and reviewed the material provided, and implemented the suggested Dark Theme. It works very nicely, with one caveat that I'd like some assistance on. I added the functionality to save the dark theme option locally as a client variable. I made sure that the client variable is named "IsDarkThemeActive" just like in the InstantDarkTheme_TH module. However, after some testing with the debugger and dev. tools, it looks like it's just ignoring it. 


In other words, when I refresh the page, the theme resets to light theme, but my client variable remains "true". I'm not sure if I connected the JS properly to the client variable, so I am attaching the JS script here for reference.


Any assistance is appreciated!


Champion

Hello it is working perfectly at my end

you don't have to do any thing extra, just create a client variable - IsActiveDarkMode(type Boolean, Default value = False),

Then you have to  use it on your button on which you are switching your Dark Theme And Light Theme

On your If Widget Condition Check - "IsActiveDarkMode"

True will give Dark Them False Will Return light Theme ( Change it according to requirement)

Please check this For more information - 

https://www.youtube.com/watch?v=-xIwJJQK0WY

I hope it helps

There is nothing wrong with JS working perfectly fine

That is precisely what I have as well, since I followed the video the first time. The issue is when the page is on dark mode, and you hit refresh, it goes back to light mode. The client variable, however, stays in dark mode, creating a discrepancy. 
This is what I am trying to fix. 

Champion

If you could help me with oml, I can check for error, because as 

Client variable in your module have no relation with the client variable that is present in InstantDarkTheme_TH module, your client variable is just to change the button label or icon.

Here is the OML. Like I said, there aren't any real errors, it just mismatches the icon to what's actually getting updated on the screen. In other words, if you have dark theme on, refresh the page, and then look at the icon at the top, it will be mismatched. 
Which makes me wonder how I'm going to make it so the theme option saves to a user in the DB so it can just load from that variable, if I can't get it to work with a client variable. 
Thank you for the help!

OML.oml
Champion

What I did over here I have declarer my button on Layout Top menu,

But as I have checked You have your button in your Main block

and on main block as I have checked you have not called JavaScript,

Try using button on Layout Top Menu Where You have called your JS in Require Script

instead of in main block, I am not sure if this will work on not, but atleast give it a try,

Since I am getting exception error on my browser when I try to publish your application,

and it is also asking for dependencies 

one more thing try setting default value of client variable to false

Hi Khan!  I see now that what you said is true. I did put it in the *Menu* block instead of the one with the JS Script. However, I tried 3 things: 
1. Moving the button to the Layout Top Menu (where JS is)
2. Adding the JS to the *menu* block
3. setting the default value of the client variable to False.


Doing the first 2 had no effect, while doing the 3rd actually made it a bit worse, since now the default will be the *sun* icon, even when the default mode is light mode, which is not the desired outcome. 
I saw that yours works exactly as intended, even after refreshing the page, and I am struggling to see what the difference between ours is. 

Thank you once again for the help.

Champion
Solution

Your Welcome

Let me know if you are able to fix this,

meanwhile, I'll also check

Hello Tousif andVinicius,

Why after using this forge I am getting an error.and theme is not changing to dark or light.


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.