fix(themes): modify the dark themes to use :root for mode-specific st…

…yles (#28833) 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`
ionic-team · Jan 19, 2024 · a8e1e16 · a8e1e16
1 parent 4fd05b6
commit a8e1e16
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 6 deletions.
diff --git a/BREAKING.md b/BREAKING.md
@@ -14,7 +14,8 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 ## Version 8.x
 
 - [Browser and Platform Support](#version-8x-browser-platform-support)
-- [Global Styles](#global-styles)
+- [Dark Theme](#version-8x-dark-theme)
+- [Global Styles](#version-8x-global-styles)
 - [Components](#version-8x-components)
   - [Button](#version-8x-button)
   - [Content](#version-8x-content)
@@ -47,6 +48,58 @@ This section details the desktop browser, JavaScript framework, and mobile platf
 | iOS      | 15+                    |
 | Android  | 5.1+ with Chromium 89+ |
 
+<h2 id="version-8x-dark-theme">Dark Theme</h2>
+
+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).
+
 <h2 id="version-8x-global-styles">Global Styles</h2>
 
 The `core.css` file has been updated to set the text color on the `body` element:
@@ -89,4 +142,4 @@ This allows components to inherit the color properly when used outside of Ionic
 
 - `ion-picker` and `ion-picker-column` have been renamed to `ion-picker-legacy` and `ion-picker-legacy-column`, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period.
   - Only the component names have been changed. Usages such as `ion-picker` or `IonPicker` should be changed to `ion-picker-legacy` and `IonPickerLegacy`, respectively.
-  - Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages. 
+  - Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages.
diff --git a/core/src/css/themes/dark.always.scss b/core/src/css/themes/dark.always.scss
@@ -4,10 +4,10 @@
   @include dark-base-theme();
 }
 
-.ios body {
+:root.ios {
   @include dark-ios-theme();
 }
 
-.md body {
+:root.md {
   @include dark-md-theme();
 }
diff --git a/core/src/css/themes/dark.system.scss b/core/src/css/themes/dark.system.scss
@@ -5,11 +5,11 @@
     @include dark-base-theme();
   }
 
-  .ios body {
+  :root.ios {
     @include dark-ios-theme();
   }
 
-  .md body {
+  :root.md {
     @include dark-md-theme();
   }
 }