How to force a dark theme?

Ionic Framework Ionic Vue
1

I don’t want to implement a light version in my app, I only want a dark theme.

The problem is that I can’t set the dark theme to be forced.

I tried to add class="dark" to the body tag at index.html, but when the page loads, it still be light theme:

image
image1920×1080 274 KB

but as soon as I turn on the dark theme on the device itself, it immediately changes:

image
image1920×1080 319 KB

What are the ways to force a dark theme?

Is it possible to automatically activate the dark theme by analogy with mode=“ios”?

2

Try changing the following in public/index.html:

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

// To
<meta name="color-scheme" content="dark" />
1 Like
3

Please let us know if this helped you to achieve the dark mode theme effect you were looking for. @SubMGRru

4

I tried that first thing, but it doesn’t make any difference, the light theme is still shown if the user’s device is using a light theme.

5

Hello, I searched a bit and found the solution !

You need to set the color-scheme to dark (otherwise think like scrollbar will stay white) and also add the class dark to the body

// index.html
<head>
  // ...
  <meta name="color-scheme" content="dark" />
  // ...
</head>

<body class="dark">

Then you just need to follow what is (not perfectly) explained in the documentation (in particular the notice) :

To make it easy to integrate a light/dark theme later, what you can do is comment out the @media (prefers-color-scheme: dark) { (don’t foget to comment the close bracket) and add dark class on body, .ios body and .md body that are inside this media.

// theme/variable.scss

:root {
// ...
}


/*@media (prefers-color-scheme: dark) {*/
  body.dark {
    // ...
  }

  .ios body.dark {
    // ...
  }

  .ios ion-modal { // nothing to change here but keep it (not tested)
    // ...
  }

  // ...
  .md body.dark {
    // ...
  }
/*}*/

If you removed the :root part then you can just comment/remove the media and you don’t need to add the dark class in both index.html and variables.scss. But I personnally like the fact that currently it act like I’m forcing the dark mode (and not remplacing the light one by the dark one) and if I remove the class dark in the index.html then it’ll be light mode again (+ <meta color-scheme /> to modify)

And if you want to have a nice status bar in browser/pwa (on mobile) don’t forget to set the meta theme-color ! (Advanced Theming: Quickly Customize App Colors using CSS | Ionic)

// index.html
<head>
  // ...
  <meta name="theme-color" content="#000000" />

Hope it help :slight_smile:

6

For UX purposes, I would still highly recommend you have a light theme as an option. We thought dark theme would be our default in our app. When we noticed our users were using it in bright daylight, the light mode was the preferred option for better contrast in broad daylight. Something to think about.