问题
i have built this app https://cvirus.app and build and deployed on browser.
on chrome browser on android phones it renders dark background (as dark theme is being applied by default it seems).
I want to force light theme everywhere no matter what device what browser. how do I do that?
commenting dark colors portins in theme/variables.scss did not work
回答1:
you should comment ios body and md body classes at the theme/variables.scss then it will become light mode.
回答2:
Since version 79 of the Chrome browser, you can choose between CSS prefers-color-sheme media feature values. Ionic respects this media feature and reacts to changes to it.
To change it without changing your OS preference and color theme, you need to open the Rendering panel in the Chrome Dev Tools:
- Open the the Chrome Dev Tools.
- Press Crtl+Shift+P on PC or Cmd+Shift+P on Mac.
- Type "Show rendering" in the Command Palette.
- Press Enter with the option
Drawer | Show renderingselected, which should be already selected.
The Rendering drawer opens. Then on the "Emulate CSS media..." option, select the color scheme you prefer.
回答3:
To resolve this, you have to go to theme/variable.scss at the src folder and locate
@media (prefers-color-scheme: dark)
And change from dark to light. If you have not modified the variable.scss. it should be in line 79. Click to see the screenshot of my own code I hope this helps.
回答4:
In my case, commenting the dark theme in theme/variables.scss works well.
I comment on line 70 @media (prefers-color-scheme: dark) {
Until the end of the file.
Here is my file
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/
/** Ionic CSS Variables **/
:root {
--ion-color-primary : #633A82;
--ion-color-primary-rgb : 99, 58, 130;
--ion-color-primary-contrast : #FFFFFF;
--ion-color-primary-contrast-rgb : 255, 255, 255;
--ion-color-primary-shade : #573372;
--ion-color-primary-tint : #734E8F;
--ion-color-secondary : #72B5B7;
--ion-color-secondary-rgb : 114, 181, 183;
--ion-color-secondary-contrast : #000000;
--ion-color-secondary-contrast-rgb : 0, 0, 0;
--ion-color-secondary-shade : #649FA1;
--ion-color-secondary-tint : #80BCBE;
--ion-color-tertiary : #F1FCFC;
--ion-color-tertiary-rgb : 241, 252, 252;
--ion-color-tertiary-contrast : #000000;
--ion-color-tertiary-contrast-rgb : 0, 0, 0;
--ion-color-tertiary-shade : #D4DEDE;
--ion-color-tertiary-tint : #F2FCFC;
--ion-color-success : #10DC60;
--ion-color-success-rgb : 16, 220, 96;
--ion-color-success-contrast : #FFFFFF;
--ion-color-success-contrast-rgb : 255, 255, 255;
--ion-color-success-shade : #0EC254;
--ion-color-success-tint : #28E070;
--ion-color-warning : #FFCE00;
--ion-color-warning-rgb : 255, 206, 0;
--ion-color-warning-contrast : #FFFFFF;
--ion-color-warning-contrast-rgb : 255, 255, 255;
--ion-color-warning-shade : #E0B500;
--ion-color-warning-tint : #FFD31A;
--ion-color-danger : #F04141;
--ion-color-danger-rgb : 245, 61, 61;
--ion-color-danger-contrast : #FFFFFF;
--ion-color-danger-contrast-rgb : 255, 255, 255;
--ion-color-danger-shade : #D33939;
--ion-color-danger-tint : #F25454;
--ion-color-dark : #222428;
--ion-color-dark-rgb : 34, 34, 34;
--ion-color-dark-contrast : #FFFFFF;
--ion-color-dark-contrast-rgb : 255, 255, 255;
--ion-color-dark-shade : #1E2023;
--ion-color-dark-tint : #383A3E;
--ion-color-medium : #989AA2;
--ion-color-medium-rgb : 152, 154, 162;
--ion-color-medium-contrast : #FFFFFF;
--ion-color-medium-contrast-rgb : 255, 255, 255;
--ion-color-medium-shade : #86888F;
--ion-color-medium-tint : #A2A4AB;
--ion-color-light : #F4F5F8;
--ion-color-light-rgb : 244, 244, 244;
--ion-color-light-contrast : #000000;
--ion-color-light-contrast-rgb : 0, 0, 0;
--ion-color-light-shade : #D7D8DA;
--ion-color-light-tint : #F5F6F9;
}
//@media (prefers-color-scheme: dark) {
// /*
// * Dark Colors
// * -------------------------------------------
// */
//
// body {
// --ion-color-primary: #428cff;
// --ion-color-primary-rgb: 66,140,255;
// --ion-color-primary-contrast: #ffffff;
// --ion-color-primary-contrast-rgb: 255,255,255;
// --ion-color-primary-shade: #3a7be0;
// --ion-color-primary-tint: #5598ff;
//
// --ion-color-secondary: #50c8ff;
// --ion-color-secondary-rgb: 80,200,255;
// --ion-color-secondary-contrast: #ffffff;
// --ion-color-secondary-contrast-rgb: 255,255,255;
// --ion-color-secondary-shade: #46b0e0;
// --ion-color-secondary-tint: #62ceff;
//
// --ion-color-tertiary: #6a64ff;
// --ion-color-tertiary-rgb: 106,100,255;
// --ion-color-tertiary-contrast: #ffffff;
// --ion-color-tertiary-contrast-rgb: 255,255,255;
// --ion-color-tertiary-shade: #5d58e0;
// --ion-color-tertiary-tint: #7974ff;
//
// --ion-color-success: #2fdf75;
// --ion-color-success-rgb: 47,223,117;
// --ion-color-success-contrast: #000000;
// --ion-color-success-contrast-rgb: 0,0,0;
// --ion-color-success-shade: #29c467;
// --ion-color-success-tint: #44e283;
//
// --ion-color-warning: #ffd534;
// --ion-color-warning-rgb: 255,213,52;
// --ion-color-warning-contrast: #000000;
// --ion-color-warning-contrast-rgb: 0,0,0;
// --ion-color-warning-shade: #e0bb2e;
// --ion-color-warning-tint: #ffd948;
//
// --ion-color-danger: #ff4961;
// --ion-color-danger-rgb: 255,73,97;
// --ion-color-danger-contrast: #ffffff;
// --ion-color-danger-contrast-rgb: 255,255,255;
// --ion-color-danger-shade: #e04055;
// --ion-color-danger-tint: #ff5b71;
//
// --ion-color-dark: #f4f5f8;
// --ion-color-dark-rgb: 244,245,248;
// --ion-color-dark-contrast: #000000;
// --ion-color-dark-contrast-rgb: 0,0,0;
// --ion-color-dark-shade: #d7d8da;
// --ion-color-dark-tint: #f5f6f9;
//
// --ion-color-medium: #989aa2;
// --ion-color-medium-rgb: 152,154,162;
// --ion-color-medium-contrast: #000000;
// --ion-color-medium-contrast-rgb: 0,0,0;
// --ion-color-medium-shade: #86888f;
// --ion-color-medium-tint: #a2a4ab;
//
// --ion-color-light: #222428;
// --ion-color-light-rgb: 34,36,40;
// --ion-color-light-contrast: #ffffff;
// --ion-color-light-contrast-rgb: 255,255,255;
// --ion-color-light-shade: #1e2023;
// --ion-color-light-tint: #383a3e;
// }
//
// /*
// * iOS Dark Theme
// * -------------------------------------------
// */
//
// .ios body {
// --ion-background-color: #000000;
// --ion-background-color-rgb: 0,0,0;
//
// --ion-text-color: #ffffff;
// --ion-text-color-rgb: 255,255,255;
//
// --ion-color-step-50: #0d0d0d;
// --ion-color-step-100: #1a1a1a;
// --ion-color-step-150: #262626;
// --ion-color-step-200: #333333;
// --ion-color-step-250: #404040;
// --ion-color-step-300: #4d4d4d;
// --ion-color-step-350: #595959;
// --ion-color-step-400: #666666;
// --ion-color-step-450: #737373;
// --ion-color-step-500: #808080;
// --ion-color-step-550: #8c8c8c;
// --ion-color-step-600: #999999;
// --ion-color-step-650: #a6a6a6;
// --ion-color-step-700: #b3b3b3;
// --ion-color-step-750: #bfbfbf;
// --ion-color-step-800: #cccccc;
// --ion-color-step-850: #d9d9d9;
// --ion-color-step-900: #e6e6e6;
// --ion-color-step-950: #f2f2f2;
//
// --ion-toolbar-background: #0d0d0d;
//
// --ion-item-background: #1c1c1c;
// --ion-item-background-activated: #313131;
// }
//
//
// /*
// * Material Design Dark Theme
// * -------------------------------------------
// */
//
// .md body {
// --ion-background-color: #121212;
// --ion-background-color-rgb: 18,18,18;
//
// --ion-text-color: #ffffff;
// --ion-text-color-rgb: 255,255,255;
//
// --ion-border-color: #222222;
//
// --ion-color-step-50: #1e1e1e;
// --ion-color-step-100: #2a2a2a;
// --ion-color-step-150: #363636;
// --ion-color-step-200: #414141;
// --ion-color-step-250: #4d4d4d;
// --ion-color-step-300: #595959;
// --ion-color-step-350: #656565;
// --ion-color-step-400: #717171;
// --ion-color-step-450: #7d7d7d;
// --ion-color-step-500: #898989;
// --ion-color-step-550: #949494;
// --ion-color-step-600: #a0a0a0;
// --ion-color-step-650: #acacac;
// --ion-color-step-700: #b8b8b8;
// --ion-color-step-750: #c4c4c4;
// --ion-color-step-800: #d0d0d0;
// --ion-color-step-850: #dbdbdb;
// --ion-color-step-900: #e7e7e7;
// --ion-color-step-950: #f3f3f3;
//
// --ion-item-background: #1A1B1E;
// }
//
// ion-title.title-large {
// --color: white;
// }
//}
Hope to help you
回答5:
In ionic 5+ Just rename prefers-color-scheme: dark to prefers-color-scheme: darks Then It will not switch to dark theme no matter what.
回答6:
One way to do this is to force light styles by using media queries. On devices that prefer light, you can supply your dark theme variables, but you need to override @media (prefers-color-scheme: dark) scope with your light theme variables.
One way to do this is to use a mixin for your theme, and include it in both :root scope and @media (prefers-color-scheme: dark).
Conversely, if you want to force dark theme, use a mixin for your theme, and include it in both :root scope and @media (prefers-color-scheme: light).
Note: Ionic (ionic/cli@6.10.0) and SCSS
/**
* {@mixin} - Supplies dark theme variables to the included scope
*/
@mixin eternal-darkness() {
// Dark theme variables...
}
:root {
@include eternal-darkness;
}
@media (prefers-color-scheme: light) {
@include eternal-darkness;
}
来源：https://stackoverflow.com/questions/60804818/ionic-5-forcing-light-theme-for-the-browser-app