ionic 5 forcing light theme for the browser app

Question

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

Unit

Can you please check is there in your browser dark mode is not enabled as In My device it is in white background and My browser is not in dark mode. – Noumenon

related #63795062 – Deannedeans

Answer 1

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.

Misbeliever

This is the easiest way to do it. – Cerotype

For me it was in theme/global.scss – Carpophagous

this should be marked as the correct answer – Barbarous

This is a horrible answer because now browsers that expect a light theme get the dark theme. – Fractionize

This always sets a dark theme whatsoever, but we want something opposite here – Midrib

Answer 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:

1. Open the the Chrome Dev Tools.
2. Press Crtl+Shift+P on PC or Cmd+Shift+P on Mac.
3. Type "Show rendering" in the Command Palette.
4. Press Enter with the option Drawer | Show rendering selected, which should be already selected.

The Rendering drawer opens. Then on the "Emulate CSS media..." option, select the color scheme you prefer.

Adrienadriena

Answer 3

you should comment ios body and md body classes at the theme/variables.scss then it will become light mode.

Refrigerant

Did anyone try this? For Ionic 5 specially?? I will and then edit this comment – Bongbongo

this one working on ionic v7 – Sidewalk

Answer 4

In ionic 5+ Just rename prefers-color-scheme: dark to prefers-color-scheme: light Then It will not switch to dark theme no matter what.

Carburet

While I did this, I've found that adding light mode as the prefered, my android app goes light, and my ios goes dark, and vice versa if I swap it back. And up until this point I hadn't made any theme changes. So while I made the default to 'light', I then commented out all the iOS CSS entries as per the suggestion by @D_Loki – Backbreaking

Answer 5

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

Leonard

Answer 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/[email protected]) 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;
}

Emlyn

Answer 7

In my web browser, the theme was light. Which is what I wanted.

In the ios emulator, it was dark. To make it light I did this:

In variables.css

@media (prefers-color-scheme: lights) {
 ...
}

Isocracy

it should be light not lights – Butterandeggs

Answer 8

Simply have this tag placed in index.html file

<meta name="color-scheme" content="light dark" />

It works for me! Thanks

Elvia

Please provide more details in your answers. – Butterandeggs