Menu
In Ionic 3 I could easily apply a dark theme to my app by adding just one line to my variables.scss:
@import "ionic.theme.dark";
Is that still possible in Ionic 4 as simple as that? And if yes, how?
578
Ionic Dark Theme Ionic has a recommended theme for variables to use in order to get a dark mode based on the device running the app. It can be broken down into the following parts: Changing the default Ionic colors for all modes to complement the dark background in the body. dark selector.
The fastest way to change the theme of your Ionic app is to set a new value for primary , since Ionic uses the primary color by default to style most components. Colors can be removed from the map if they aren't being used, but primary should not be removed.
You're probably supporting Dark Mode. Check Settings/Display & Brightness/Dark mode and see if it reflects in your app. My app just starting do this too.
One way to remove the dark theme would be by editing the variables. scss file and removing this style rule: @media (prefers-color-scheme: dark) { ... } That media query is the one that changes all the colors of the CSS custom properties when the users selects the dark theme on the device.
You have to make your own CSS variable. As an example
:root {
.red-theme {
// your colors --ion-color-primary etc
}
}
and use RendererFactory2 for more info you can see on this link
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
