CODEWITHSUNDEEP
javascriptextjs
user14059067
user14059067

Reputation:

Implementing dark theme for my HTML components

I am using ExtJS to create an interface where a dark theme is being implemented. I have managed to apply CSS styling to my main interface components (by directly modifying their css classes) and that on a button click (choice of the theme).

Now the problem is with the dialog windows components that are created at the moment of the click on their respective menu buttons : the CSS classes are created afterhand, and so the dark theme is not applied on them too. My question is : algorithmically speaking, to apply dark theme on these dialog windows do i have to set a global variable to check if the dark theme is enabled (variable set to true) in order for them to change colors ?

Thanks

Upvotes: 0

Views: 259

Answers (1)

mcg1103
mcg1103

Reputation: 688

Are you using the material design theme? There is a built in dark/light mode. It works very well along with changing the colors.

This does not seem to work in the fiddle. I use the code from the example kitchen sink.

extjs-7.3.1/examples/kitchensink/modern/src/controller/Main.js

onDarkModeChange is a method that will change to dark mode. updateMaterialTheme to set the colors.

extjs-7.3.1/modern/theme-material/src/theme/Material.js - these are the built in colors. They come from google's spec for the material design theme.

https://examples.sencha.com/extjs/7.3.0/examples/kitchensink/?modern#all the palette button there is a switch for dark mode.

Upvotes: 2

Related Questions