From 4b229627e0df55df2cd0dd515d4a4f36ca5ec0b7 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 15 Jan 2024 16:48:42 -0500 Subject: [PATCH 1/3] fix(themes): modify the always and system dark theme to use :root for modes --- core/src/css/themes/dark.always.scss | 4 ++-- core/src/css/themes/dark.system.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/core/src/css/themes/dark.always.scss b/core/src/css/themes/dark.always.scss index 54debf2a310..237b6267e64 100644 --- 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 index 36dadb96618..b55779f467c 100644 --- 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(); } } From 2ef2be1d6f3ff3807382242d172c3c533baf9dae Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 18 Jan 2024 17:37:58 -0500 Subject: [PATCH 2/3] docs(breaking): include breaking changes for dark theme files --- BREAKING.md | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 55 insertions(+), 2 deletions(-) diff --git a/BREAKING.md b/BREAKING.md index 7dac6531bf3..29738ffff34 100644 --- 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) @@ -46,6 +47,58 @@ This section details the desktop browser, JavaScript framework, and mobile platf | iOS | 15+ | | Android | 5.1+ with Chromium 89+ | +

Dark Theme

+ +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 selectors 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` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) is identical to the `html` selector, 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` or `html` element instead. + +For more information on the new dark theme files, refer to the [Dark Mode documentation](https://ionicframework.com/docs/theming/dark-mode). +

Global Styles

The `core.css` file has been updated to set the text color on the `body` element: @@ -84,4 +137,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. From 3a7a0e47ceecd29e08af5937cb8ddb30dd71ece9 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 19 Jan 2024 10:19:21 -0500 Subject: [PATCH 3/3] docs(breaking): minor updates --- BREAKING.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/BREAKING.md b/BREAKING.md index 29738ffff34..c5cbfc668ba 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -75,7 +75,7 @@ In Ionic Framework version 8, the dark theme is being distributed via css files @import "@ionic/angular/css/themes/dark.system.css"; ``` -By importing the `dark.system.css` file, the dark theme selectors will be defined like the following: +By importing the `dark.system.css` file, the dark theme variables will be defined like the following: ```css @media (prefers-color-scheme: dark) { @@ -93,9 +93,9 @@ By importing the `dark.system.css` file, the dark theme selectors will be define } ``` -Notice that the dark theme is now applied to the `:root` selector instead of the `body` selector. The [`:root` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) is identical to the `html` selector, except that its specificity is higher. +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 `` 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` or `html` element instead. +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).