vaibhavgehani

onChange(event) {
    let darkMode = window.matchMedia("(prefers-color-scheme: dark)");
    darkMode.addListener(this.colorChange);
    event.detail.checked?document.body.setAttribute('theme', 'dark'):document.body.setAttribute('theme', 'light')
}

vaibhavgehani

colorChange(DarkValue) {
    if (DarkValue.matches) {
      document.body.setAttribute('theme', 'dark');
    } else {
      document.body.setAttribute('theme', 'light');
    }
  }

vaibhavgehani

 body[data-theme="dark"]{
      ....
    }
    .ios body[data-theme="dark"] {
      ...
    }
    .md body[data-theme="dark"]{
      ...
    }
    @media (prefers-color-scheme: dark) {

vaibhavgehani

 body[theme="dark"]{
      ....
    }
    .ios body[theme="dark"] {
      ...
    }
    .md body[theme="dark"]{
      ...
    }
    @media (prefers-color-scheme: dark) {

vaibhavgehani

 body[theme="dark"]{
      //dark color css here for browsers and android
    }
    .ios body[theme="dark"] {
      //dark color css here for ios
    }
    .md body[theme="dark"] {
      //Material Design Dark Theme
    }
    @media (prefers-color-scheme: dark) {

vaibhavgehani

body[theme=dark]{
      --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;

vaibhavgehani

body[theme=dark]{
      --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;

vaibhavgehani

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA

vaibhavgehani

import React from 'react';
import ReactDOM from 'react-dom';

// Ionic 4 styles
import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';

import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

vaibhavgehani

import React from 'react';
import ReactDOM from 'react-dom';

// Ionic 5 styles
import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';

import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';