Change the color of table using switch javascript

Hello
How to change the color of table using switch widget?
I'm creating dark mode and i want to change also the color of the table


reactive_crud_main.oml

mvp_badge
MVP
Solution

Hi Jaymer,

On the change of the toggle I would add an "isDarkmode" class to your body element.

document.body.classList.add("isDarkmode");
document.body.classList.remove("isDarkmode");

and then deal with the rest in your css by using css variables:

:root {
/* Set your light mode colors here */
    --color-primary: #1f4788;
    --color-secondary: #1f4788;
}
body.isDarkmode {
/* Set your dark mode oclors here */
    --color-primary: #1f4788;
    --color-secondary: #1f4788;
}

Alternatively you can look into some forge Darkmode components
https://www.outsystems.com/forge/component-overview/8891/dark-light-theme-switcher-example
https://www.outsystems.com/forge/component-overview/9975/simple-dark-mode-react

Solution

I would go with the solution from Eric, but I advise you to use another solution. The way you are doing it's going to be more tricky to work with I think. I have used this forge component as an example of how to do it. And I really liked it. Where you have a file on the resources with the styles and you just need to inject it every time you move to dark mode.

https://www.outsystems.com/forge/component-overview/9975/simple-dark-mode-react

I think it has for every component on OutSystems UI.

Install the demo, to see how to do it. And adapt your javascript :)

I was trying to adapt but it's missing this to be able to publish :(

Kind Regards,

Márcio


mvp_badge
MVP
Solution

Hi Jaymer,

On the change of the toggle I would add an "isDarkmode" class to your body element.

document.body.classList.add("isDarkmode");
document.body.classList.remove("isDarkmode");

and then deal with the rest in your css by using css variables:

:root {
/* Set your light mode colors here */
    --color-primary: #1f4788;
    --color-secondary: #1f4788;
}
body.isDarkmode {
/* Set your dark mode oclors here */
    --color-primary: #1f4788;
    --color-secondary: #1f4788;
}

Alternatively you can look into some forge Darkmode components
https://www.outsystems.com/forge/component-overview/8891/dark-light-theme-switcher-example
https://www.outsystems.com/forge/component-overview/9975/simple-dark-mode-react

Solution

I would go with the solution from Eric, but I advise you to use another solution. The way you are doing it's going to be more tricky to work with I think. I have used this forge component as an example of how to do it. And I really liked it. Where you have a file on the resources with the styles and you just need to inject it every time you move to dark mode.

https://www.outsystems.com/forge/component-overview/9975/simple-dark-mode-react

I think it has for every component on OutSystems UI.

Install the demo, to see how to do it. And adapt your javascript :)

I was trying to adapt but it's missing this to be able to publish :(

Kind Regards,

Márcio


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