This part you don't need to do: "Applied the dark-theme and testy Classes (with Color also set to white, for when it's not in Dark mode I assume):"

The dark-theme class is added to the html by the component automatically. All you need to do is to define a CSS rule, just like you did here:

However, you now need to inspect the element that is not being toggled to dark theme, and see which CSS rule is "over ruling" the one you created. With this, you can then adjust your rule in a way that is hierarchically more specific (you can learn more about this here: https://www.w3schools.com/css/css_specificity.asp).

In theory, you can simply copy the CSS rule that is now being applied, and add ".dark-theme " behind it, to make it immediately more specific than the original.

Hope this helps.  

Hi Jose - I guess I'm not understanding what you're saying :-)  Sorry, I'm not a Front-End expert!

Do you have a sample OML that shows your component working with custom colors (i.e. custom background-color, and custom text color - both that toggle/change colors with your component)?

FYI in my specific case, I have a Container that has a specific background-color, and in Dark Mode I need it to change to a darker shade.  Similarly, the text inside should toggle from a custom dark color, to a lighter color for Dark mode.  I want the background-color and (text) color to be specific colors when it's not in Dark Mode - and in Dark Mode, change to a "readable" color also.

Thanks for any help.

-Taka

Hi Takahito, You can have a look at the component's demo. When you download the component you have the option to download the demo as well.

In the demo you'll find the following CSS example:

In this case, the ".highcharts-color-1 text" lines, are there because OutSystemsUI had their colours specifically defined, so nothing happened when toggling between light and dark theme.

The component adds the CSS class ".dark-theme" to the top element of your HTML, so, whenever you have any specific colours defined, you can make use of that class to change then only when dark mode is turned on.

If, for some reason, you don't want to define the values of the colours of your div with CSS variables, you could do something like this:

.testy{

    background-color: white;

    color: black;

}

.dark-theme .testy{

    background-color: black;

    color: white;

}

This way, when the dark-theme is turned off, you have the div in light background and dark text, and when dark-theme is turned one, you have a dark background and light text.

------

Another approach would be to define the background and text colour using the OutSystemsUI CSS variables. To do so you could use the CSS class .background-neutral-0 and .text-neutral-10, like this:

The advantage of doing it in this way, is that when you toggle the dark-theme on, the component will already do the colour changes automatically, so you don't need to do anything else.

Please take a look at the demo of the component. I can also schedule a meeting with you if you need.

You can also check our YouTube tutorial on the component here: https://youtu.be/-xIwJJQK0WY

Thanks,

José

Hi Takahito Torimoto,

Just to check if you have any updates on this topic :)

As I said previously, if you need, I’m happy to meet with you to try to solve this issue.

Best regards

Hi Jose - I will DM you 

Hi Tousif - your attachment is 0kB

Let me share this once more 

@Tousif Khan I did use your plugin that I downloaded from forge. But I am not able to customize the color according to me. Can you help me?