Dark mode and light mode in Dashboard

[Abhishek_Tirkey]

I wanted to achieve a Dark Mode and a Light Mode in my Dashboard.

[vnamboodheri]

Hello @Abhishek_Tirkey,

Thank you for your question. 
I'd like to recommend to bring more details and context to your initial inquiry. 

Could you share the approach you have tried to implement Dark Mode and Light Mode in your dashboard?

It also helps to have screenshot(s) to better understand what you are trying to do in your process. 

This will increase your chances to receive meaningful help from other Community members. 

Regards,
Vivek N
Community Moderation Team.

[Velkumar · Accepted solution]

Hi @Abhishek_Tirkey 

You can achieve using Custom CSS

Example :

CSS Code to change background color

.darkMode{
    background-color : black !important
}

.lightMode{
    background-color : white !important
}

 Based on toggle button state pass custom CSS class name to container. By this way you can achieve dark or light mode

Expression :

if (toogle === true){
    Output = 'darkMode';
} else {
     Output = 'lightMode';
}

Bindings :

Result :

/VR

[Abhishek_Tirkey]

Hi, @Velkumar , Thanks for the response 
I could not able to bind state with toggle
I am unable to locate toggle .

[Velkumar]

@Abhishek_Tirkey  Have you created toggle input for your expression ?

[Abhishek_Tirkey]

I missed to take a toggle input.
Thank you @Velkumar . I have achieved to get the desired output.