fix(themes): modify the dark themes to use :root for mode-specific styles #28833
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
brandyscarney
requested review from
a team and
liamdebeasi
and removed request for
a team
liamdebeasi
approved these changes
Jan 19, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue number: N/A
What is the current behavior?
The
systemandalwaysdark theme files target the mode-specific styles by using the following selectors:This is an issue because then users cannot override the dark theme by targeting
:root.ios, they must target thebody.What is the new behavior?
Updates the mode selectors to target the
:rootwith the mode-specific class:This makes more sense, since we want it to still be global but mode-specific, and allows users to override it on
:rootif desired.Does this introduce a breaking change?
BREAKING CHANGES:
In previous versions, it was recommended to define the dark theme in the following way:
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:
By importing the
dark.system.cssfile, the dark theme variables will be defined like the following:Notice that the dark theme is now applied to the
:rootselector instead of thebodyselector. The:rootselector represents the<html>element and is identical to the selectorhtml, 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
bodyelement. We recommend updating any instances where global application variables are set to target the:rootselector instead.For more information on the new dark theme files, refer to the Dark Mode documentation.
Other Information
Dev build:
7.6.2-dev.11705355381.14b22962