feat: Dark theme

[sachingargtech]

Doing dark theme right is hard, especially the details. For example, the ‘toggle’ border when disabled. Similar issues with alerts, popovers etc…

Changing themes and colors is now much easier in Ionic4 and we have seen some really good samples and examples posted by other developers and even Ionic team members with dark themes, and toggling between dark and light themes. We have tried to combine some of these into our apps to get a dark theme, but it is hard to get all the details right.

Are there any plans for default dark theme colors in Ionic? Now that the OS has its own dark theme, it will be even better to pick the same iOS/Android default dark colors instead using just another shade of gray.

[liamdebeasi]

Hi there,

Ionic does ship with a "dark" color palette. For most components, you can do color="dark" as a property on the component. Does this address your use case?

Thanks!

[brandyscarney]

We don't have plans to add a dark theme at the moment, but it is something that could easily be done in the starters. We have a dark theme added in the conference app, and plans to include a "toggle" to switch between light and dark theme there. It wouldn't be too much more to have it added to the starters.

https://github.com/ionic-team/ionic-conference-app/blob/master/src/theme/variables.scss#L198-L243

[sachingargtech]

@liamdebeasi This is more about application wide dark mode. Similar to what @mhartington described here: https://ionicframework.com/blog/hot-take-dark-mode/

@brandyscarney A lot more needs to be done to make it truly complete. Like we also need to swap the 'dark' and 'light' colors or just use a different set of colors for all colors including primary, secondary etc... to match whatever colors iOS13 and Android10 are defaulting to in their native dark themes.

There are issues with borders of some controls like toggles as described above, and also with borders and background colors of alerts, popovers, action-sheets when trying to make everything dark. Currently they just 'blend' in too much with the content dark background - almost invisible.

Having a toggle in the sidebar to let user switch between light and dark themes will be great. Bulk of the users are not going to be on the latest OS release for a long time, and some may want to change settings per app.

A lot of it can be implemented at the application level and we have been trying to implement this by modifying the theme/variables.scss. But not everything can be fixed there. Moreover it seems like something that will help all Ionic applications.

[brandyscarney]

A lot more needs to be done to make it truly complete. Like we also need to swap the 'dark' and 'light' colors or just use a different set of colors for all colors including primary, secondary etc... to match whatever colors iOS13 and Android10 are defaulting to in their native dark themes.

@sachingarg05 Why would we swap the dark and light colors? You may still have use for a light color or a dark color on a dark theme. You can override the colors though if desired, it would look like the following:

@media (prefers-color-scheme: dark) {
  :root {
    --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;
  }
}

These colors are meant to be customized, but they don't match either iOS or Android by default. The primary color is the Ionic blue.

There are issues with borders of some controls like toggles as described above, and also with borders and background colors of alerts, popovers, action-sheets when trying to make everything dark. Currently they just 'blend' in too much with the content dark background - almost invisible.

If there are any specific issues with dark theme variables not working to override specific components we can fix it but we need to have issues reported to track this. I recently fixed this issue regarding the overlay background color: #18658

Here's how I see our dark theme in MD mode:

I don't see it blending here, but if there are specific cases where it does we can look into it.

The way the defaults for dark theme work is by looking at the default light color. For example, alert's background uses #f9f9f9 in ios light theme. So we look at what "step" color of the background is closest to that, as documented here: https://ionicframework.com/docs/theming/advanced#stepped-colors

The closest is step 50, so we use the --ion-color-step-50 for the alert background. If using dark mode, it would be whatever you set in your theme file, such as:

  --ion-color-step-50: #232323;
  --ion-color-step-100: #2e2e2e;
  --ion-color-step-150: #3a3a3a;
  --ion-color-step-200: #454545;
  --ion-color-step-250: #515151;
  --ion-color-step-300: #5d5d5d;
  --ion-color-step-350: #686868;
  --ion-color-step-400: #747474;
  --ion-color-step-450: #7f7f7f;
  --ion-color-step-500: #8b8b8b;
  --ion-color-step-550: #979797;
  --ion-color-step-600: #a2a2a2;
  --ion-color-step-650: #aeaeae;
  --ion-color-step-700: #b9b9b9;
  --ion-color-step-750: #c5c5c5;
  --ion-color-step-800: #d1d1d1;
  --ion-color-step-850: #dcdcdc;
  --ion-color-step-900: #e8e8e8;
  --ion-color-step-950: #f3f3f3;

These can be manipulated to use lighter or darker colors or have more variation, or you can use our generator here that uses the same formula as we do for the light colors: https://ionicframework.com/docs/theming/advanced#generate-stepped-color-variables

[brandyscarney]

In the case of the toggle, it is using the proper colors between light and dark, but the box-shadow isn't updated for dark theme. Notice the difference (top one using a box shadow that is light):

Here's light theme if the box-shadow was the same:

[sachingargtech]

Thanks, I understand this better now. Looks like some of our issues can be resolved by fixing our --ion-color-step values. We had just copied the step values from someone's sample code and the step-50 was less than our chosen background gray.

Will report any specific issues that we can't resolve using variables.scss and step colors. I do feel that the variables.scss in "Ionic start" templates should include a dark theme section, even if its commented out by default.

For toggle shadow color, can this be fixed by us in our application - in variables.scss or a parameter when creating the toggle? Or do you plan to change the shadows for toggle (and other components) to use one of the step color values?

[sachingargtech]

By swapping the dark and light colors, I meant that in light theme - light is the low-contrast color (closest to background color) and dark is the high-contrast color (opposite of background color).

If we only change background color to dark, then a light becomes the high contrast color and dark becomes the low contrast color.

So in our apps in dark theme, we would want light buttons to look 'dark' and the dark buttons to look light. To maintain same contrast effect as they did in light theme. I understand that we can fix this in our app by changing the colors in media-query in theme/variables.scss.

[brandyscarney]

Ah, okay! Yeah, if the stepped colors aren't set to a gradient going from the background -> text color it will look off by default.

Will report any specific issues that we can't resolve using variables.scss and step colors. I do feel that the variables.scss in "Ionic start" templates should include a dark theme section, even if its commented out by default.

I agree with this, but I'd like to work through fixing some of the bugs and making sure all of the defaults are good before we add it so that it doesn't need several iterations.

For toggle shadow color, can this be fixed by us in our application - in variables.scss or a parameter when creating the toggle? Or do you plan to change the shadows for toggle (and other components) to use one of the step color values?

I believe it would need to be updated in Ionic. The box-shadow uses a value of:

0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1)

So it needs to be something like:

0 3px 12px rgba(var(--ion-text-color-rgb, 0, 0, 0), .16), 0 3px 1px rgba(var(--ion-text-color-rgb, 0, 0, 0), .1)

This would make the box shadow use the RGB text color variable by default with a fallback of 0, 0, 0.

By swapping the dark and light colors, I meant that in light theme - light is the low-contrast color (closest to background color) and dark is the high-contrast color (opposite of background color).

This makes sense. I'm not sure if it should be something we provide by default but I can definitely see the use case for it.

[brandyscarney]

Actually, after revisiting iOS 13's styles, it seems they keep the toggle icon the same color in dark mode:

This may be a case where we need to individually compare components against native.