In my themes/variables.scss
I have two color themes (dark and light):
/* LIGHT COLOR THEMES
========================================= */
/*$colors: (
primary: #ffffff,
secondary: #fafafa,
danger: #f53d3d,
light: #1b1e28,
sliderColor: #fff,
colorIcon: #CCCBDA,
colorIconText: #7F7E96,
category: #fff,
listBackgroundColor: #ffffff,
backgroundColor: #fafafa,
toobarBackground: #ffffff,
toobarButton: #AAB2B7,
toobarText: #FFFFFF
);*/
/* DARK COLOR THEMES
========================================= */
$colors: (
primary: #282C39,
secondary: #1b1e28,
danger: #f53d3d,
sliderColor: #fff,
light: #fff,
colorIcon: #7F7E96,
colorIconText: #7F7E96,
category: #fff,
listBackgroundColor: #1B1E28,
backgroundColor: #282C39,
toobarBackground: #1B1E28,
toobarButton: #D8D8D8,
toobarText: #FFFFFF
);
Right now I can only put one theme in my app. If I want to change the theme, I have to comment the one variable out and the other I have to remove the comments.
How can I using these two themes, change the theme dynamically in the app in typescript?
In every tutorial I see these --ion-color-primary
but I do not have these --ion-color
prepending
Hmm, this seems to be v3 related styles…
This is not how v5(v4) handles theming.
Please review the docs
And the default theme file for new apps.
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/
/** Ionic CSS Variables **/
:root {
/** primary **/
--ion-color-primary: #3880ff;
--ion-color-primary-rgb: 56, 128, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3171e0;
--ion-color-primary-tint: #4c8dff;
/** secondary **/
--ion-color-secondary: #3dc2ff;
--ion-color-secondary-rgb: 61, 194, 255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #36abe0;
--ion-color-secondary-tint: #50c8ff;
This file has been truncated. show original
1 Like
I did:
:root {
--ion-color-primary: #282C39;
--ion-color-secondary: #1b1e28;
--ion-color-danger: #f53d3d;
--ion-color-sliderColor: #fff;
--ion-color-light: #fff;
--ion-color-colorIcon: #7F7E96;
--ion-color-colorIconText: #7F7E96;
--ion-color-category: #fff;
--ion-color-listBackgroundColor: #1B1E28;
--ion-color-backgroundColor: #282C39;
--ion-color-toobarBackground: #1B1E28;
--ion-color-toobarButton: #D8D8D8;
--ion-color-toobarText: #FFFFFF;
}
But I am getting during build:
[10:52:02] sass: node_modules/ionic-angular/themes/ionic.functions.scss, line: 35
The value `` must be a color. If you are setting the value as a map make sure both the base and contrast are
defined as colors. For example: $colors: ( primary: #327eff, secondary: (base: #32db64, contrast: #000), );
L35: @error $error-msg;
OK, I even did:
:root {
--ion-color-primary: #282C39;
--ion-color-primary-rgb: 40,44,57;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #232732;
--ion-color-primary-tint: #3e414d;
--ion-color-secondary: #1b1e28;
--ion-color-secondary-rgb: 27,30,40;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255,255,255;
--ion-color-secondary-shade: #181a23;
--ion-color-secondary-tint: #32353e;
...
}
.ion-color-secondary {
--ion-color-base: var(--ion-color-secondary);
--ion-color-base-rgb: var(--ion-color-secondary-rgb);
--ion-color-contrast: var(--ion-color-secondary-contrast);
--ion-color-contrast-rgb: var(--ion-color-secondary-contrast-rgb);
--ion-color-shade: var(--ion-color-secondary-shade);
--ion-color-tint: var(--ion-color-secondary-tint);
}
.ion-color-primary {
--ion-color-base: var(--ion-color-primary);
--ion-color-base-rgb: var(--ion-color-primary-rgb);
--ion-color-contrast: var(--ion-color-primary-contrast);
--ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb);
--ion-color-shade: var(--ion-color-primary-shade);
--ion-color-tint: var(--ion-color-primary-tint);
}
...
But still, I am getting the error:
[10:52:02] sass: node_modules/ionic-angular/themes/ionic.functions.scss, line: 35
The value `` must be a color. If you are setting the value as a map make sure both the base and contrast are
defined as colors. For example: $colors: ( primary: #327eff, secondary: (base: #32db64, contrast: #000), );
L35: @error $error-msg;