I got it working decently well. Here is how:
In each page’s scss, I set only the layout for my components. No colors. In the html, I always set two classes. One for the layout and one for the color.
Then in my Themes folder, I added two scss files. theme.dark.scss and theme.light.scss.
In my variables.scss I import both files:
My two theme files go as follow:
$rowColor: linear-gradient(to bottom, #30304c 0%, #1a2232 49%, #0e1113 100%);
$rowBorder: thin solid rgba(35, 34, 71, 0.7);
$fadedText: rgba(255, 255, 255, 0.5);
$menuBorder: rgba(128, 128, 128, 0.51);
$sectionHeaderBackground: linear-gradient(90deg, rgb(26, 59, 74) 0%, rgb(28, 32, 51) 20%, rgba(20, 19, 18, 0) 60%);
$tableHeaderBackground: linear-gradient(to bottom, rgba(42,42,51,1) 0%, rgba(20,57,82,1) 51%, rgba(20,19,18,1) 100%);
$tableBorder: thin solid grey;
$tableRowBackground: linear-gradient(to bottom, rgba(72,72,87,1) 0%, rgba(42,78,102,1) 51%, rgba(57,62,92,1) 100%);
My theme.light.scss of course starts with
and contains the same color classes. Only the $variables at the top change from one theme to the other.
You’ll notice that my theme files only specify colors. In my various pages, I could go specify that one of my section header is affected by 2 classes. .sectionHeaderLayout and .sectionHeaderColors
The trick is to switch the class that’s applied at the root of your app so that you are using theme.dark or theme.light. The result is that you’ll switch from using all the color classes from one theme to the other.
My app.html contains:
<ion-nav [root]="rootPage" #content swipeBackEnabled="false" [class]="selectedTheme"></ion-nav>
Then in your app.component.ts, you just have to switch the variable “selectedTheme” to the name of the class you want to apply at the root. So:
this.selectedTheme = "dark-theme";
this.selectedTheme = "light-theme";
this way, you app will switch from on color theme to the other throughout your entire app.
Also important, if you’re using a menu component, you’ll notice in your app.html that the ion-menu is outside the ion-nav tag to which you applied the dynamic theme. The solution is to simply apply the dynamic theme to your menu the same way you applied it to the ion-app:
<ion-menu [class]="selectedTheme" [content]="content">
Let me know if this works for you guys.