javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(themes): modify the dark themes to use :root for mode-specific styles (#28833)

Browse Source 
Issue number: N/A

---------

## What is the current behavior?
The `system` and `always` dark theme files target the mode-specific
styles by using the following selectors:

```scss
:root {
  @include dark-base-theme();
}

.ios body {
  @include dark-ios-theme();
}

.md body {
  @include dark-md-theme();
}
```

This is an issue because then users **cannot** override the dark theme
by targeting `:root.ios`, they must target the `body`.

## What is the new behavior?
Updates the mode selectors to target the `:root` with the mode-specific
class:

```scss
:root {
  @include dark-base-theme();
}

:root.ios {
  @include dark-ios-theme();
}

:root.md {
  @include dark-md-theme();
}
```

This makes more sense, since we want it to still be global but
mode-specific, and allows users to override it on `:root` if desired.

## Does this introduce a breaking change?

- [ ] Yes
- [x] Maybe
- [ ] No

BREAKING CHANGES:

In previous versions, it was recommended to define the dark theme in the
following way:

```css
@media (prefers-color-scheme: dark) {
  body {
    /* global app variables */
  }

  .ios body {
    /* global ios app variables */
  }

  .md body {
    /* global md app variables */
  }
}
```

In Ionic Framework version 8, the dark theme is being distributed via
css files that can be imported. Below is an example of importing a dark
theme file in Angular:

```css
/* @import '@ionic/angular/css/themes/dark.always.css'; */
/* @import "@ionic/angular/css/themes/dark.class.css"; */
@import "@ionic/angular/css/themes/dark.system.css";
```

By importing the `dark.system.css` file, the dark theme variables will
be defined like the following:

```css
@media (prefers-color-scheme: dark) {
  :root {
    /* global app variables */
  }

  :root.ios {
    /* global ios app variables */
  }

  :root.md {
    /* global md app variables */
  }
}
```

Notice that the dark theme is now applied to the `:root` selector
instead of the `body` selector. The
[`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root)
selector represents the `<html>` element and is identical to the
selector `html`, except that its specificity is higher.

While migrating to include the new dark theme files is unlikely to cause
breaking changes, these new selectors can lead to unexpected overrides
if custom CSS variables are being set on the `body` element. We
recommend updating any instances where global application variables are
set to target the `:root` selector instead.

For more information on the new dark theme files, refer to the [Dark
Mode documentation](https://ionicframework.com/docs/theming/dark-mode).

## Other Information

Dev build: `7.6.2-dev.11705355381.14b22962`
This commit is contained in:
Brandy Carney
2024-01-19 10:48:29 -05:00
committed by GitHub
parent 4fd05b6416
commit a8e1e168ee
3 changed files with 59 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/css/themes/dark.always.scss
View File

@ -4,10 +4,10 @@
@include dark-base-theme();
}
.ios body {
:root.ios {
@include dark-ios-theme();
}
.md body {
:root.md {
@include dark-md-theme();
}

4
core/src/css/themes/dark.system.scss
View File

@ -5,11 +5,11 @@
@include dark-base-theme();
}
.ios body {
:root.ios {
@include dark-ios-theme();
}
.md body {
:root.md {
@include dark-md-theme();
}
}