Skip to content

Commit 761e1b4

Browse files
sean-perkinsliamdebeasi
sean-perkins
and
liamdebeasi
authored
feat: rename dark/high-contrast themes to palettes (#29149)
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Ionic Framework currently plans to offer dark and high contrast "themes" in v8. However this naming nomenclature conflicts with a significant new feature that the team is working on towards v9+. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Migrates previous dark and high contrast "themes" to "palettes" - Updates test infrastructure to import from the new stylesheet locations ## Does this introduce a breaking change? - [x] Yes - [ ] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> Developers that have updated to the Ionic v8 beta and have implemented the dark and high contrast themes, will need to update the import path: ```diff -@import '@ionic/angular/css/themes/dark.always.css'; +@import '@ionic/angular/css/palettes/dark.always.css'; ``` ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Blocked by: #29148. Review that first. Documentation PR: ionic-team/ionic-docs#3521 --------- Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
1 parent 5577d38 commit 761e1b4

22 files changed

+147
-175
lines changed

‎BREAKING.md

+11-11
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
1414
## Version 8.x
1515

1616
- [Browser and Platform Support](#version-8x-browser-platform-support)
17-
- [Dark Theme](#version-8x-dark-theme)
17+
- [Dark Mode](#version-8x-dark-mode)
1818
- [Global Styles](#version-8x-global-styles)
1919
- [Components](#version-8x-components)
2020
- [Button](#version-8x-button)
@@ -60,9 +60,9 @@ This section details the desktop browser, JavaScript framework, and mobile platf
6060
| iOS | 15+ |
6161
| Android | 5.1+ with Chromium 89+ |
6262

63-
<h2 id="version-8x-dark-theme">Dark Theme</h2>
63+
<h2 id="version-8x-dark-mode">Dark Mode</h2>
6464

65-
In previous versions, it was recommended to define the dark theme in the following way:
65+
In previous versions, it was recommended to define the dark palette in the following way:
6666

6767
```css
6868
@media (prefers-color-scheme: dark) {
@@ -80,15 +80,15 @@ In previous versions, it was recommended to define the dark theme in the followi
8080
}
8181
```
8282

83-
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:
83+
In Ionic Framework version 8, the dark palette is being distributed via css files that can be imported. Below is an example of importing a dark palette file in Angular:
8484

8585
```css
86-
/* @import '@ionic/angular/css/themes/dark.always.css'; */
87-
/* @import "@ionic/angular/css/themes/dark.class.css"; */
88-
@import "@ionic/angular/css/themes/dark.system.css";
86+
/* @import '@ionic/angular/css/palettes/dark.always.css'; */
87+
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
88+
@import "@ionic/angular/css/palettes/dark.system.css";
8989
```
9090

91-
By importing the `dark.system.css` file, the dark theme variables will be defined like the following:
91+
By importing the `dark.system.css` file, the dark palette variables will be defined like the following:
9292

9393
```css
9494
@media (prefers-color-scheme: dark) {
@@ -106,11 +106,11 @@ By importing the `dark.system.css` file, the dark theme variables will be define
106106
}
107107
```
108108

109-
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.
109+
Notice that the dark palette 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.
110110

111-
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.
111+
While migrating to include the new dark palette 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.
112112

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

115115
<h2 id="version-8x-global-styles">Global Styles</h2>
116116

‎core/src/css/palettes/dark.always.scss

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import "./dark";
2+
3+
:root {
4+
@include dark-base-palette();
5+
}
6+
7+
:root.ios {
8+
@include dark-ios-palette();
9+
}
10+
11+
:root.md {
12+
@include dark-md-palette();
13+
}

‎core/src/css/palettes/dark.class.scss

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import "./dark";
2+
3+
.ion-palette-dark {
4+
@include dark-base-palette();
5+
}
6+
7+
.ion-palette-dark.ios {
8+
@include dark-ios-palette();
9+
}
10+
11+
.ion-palette-dark.md {
12+
@include dark-md-palette();
13+
}

‎core/src/css/themes/dark.scss ‎core/src/css/palettes/dark.scss

+3-20
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,53 @@
1-
@mixin dark-base-theme() {
1+
@mixin dark-base-palette() {
22
& {
33
--ion-color-primary: #4d8dff;
44
--ion-color-primary-rgb: 77, 141, 255;
55
--ion-color-primary-contrast: #000000;
66
--ion-color-primary-contrast-rgb: 0, 0, 0;
77
--ion-color-primary-shade: #447ce0;
88
--ion-color-primary-tint: #5f98ff;
9-
109
--ion-color-secondary: #62bdff;
1110
--ion-color-secondary-rgb: 98, 189, 255;
1211
--ion-color-secondary-contrast: #000000;
1312
--ion-color-secondary-contrast-rgb: 0, 0, 0;
1413
--ion-color-secondary-shade: #56a6e0;
1514
--ion-color-secondary-tint: #72c4ff;
16-
1715
--ion-color-tertiary: #8482fb;
1816
--ion-color-tertiary-rgb: 132, 130, 251;
1917
--ion-color-tertiary-contrast: #000000;
2018
--ion-color-tertiary-contrast-rgb: 0, 0, 0;
2119
--ion-color-tertiary-shade: #7472dd;
2220
--ion-color-tertiary-tint: #908ffb;
23-
2421
--ion-color-success: #2dd55b;
2522
--ion-color-success-rgb: 45, 213, 91;
2623
--ion-color-success-contrast: #000000;
2724
--ion-color-success-contrast-rgb: 0, 0, 0;
2825
--ion-color-success-shade: #28bb50;
2926
--ion-color-success-tint: #42d96b;
30-
3127
--ion-color-warning: #ffce31;
3228
--ion-color-warning-rgb: 255, 206, 49;
3329
--ion-color-warning-contrast: #000000;
3430
--ion-color-warning-contrast-rgb: 0, 0, 0;
3531
--ion-color-warning-shade: #e0b52b;
3632
--ion-color-warning-tint: #ffd346;
37-
3833
--ion-color-danger: #f56570;
3934
--ion-color-danger-rgb: 245, 101, 112;
4035
--ion-color-danger-contrast: #000000;
4136
--ion-color-danger-contrast-rgb: 0, 0, 0;
4237
--ion-color-danger-shade: #d85963;
4338
--ion-color-danger-tint: #f6747e;
44-
4539
--ion-color-dark: #f4f5f8;
4640
--ion-color-dark-rgb: 244, 245, 248;
4741
--ion-color-dark-contrast: #000000;
4842
--ion-color-dark-contrast-rgb: 0, 0, 0;
4943
--ion-color-dark-shade: #d7d8da;
5044
--ion-color-dark-tint: #f5f6f9;
51-
5245
--ion-color-medium: #989aa2;
5346
--ion-color-medium-rgb: 152, 154, 162;
5447
--ion-color-medium-contrast: #000000;
5548
--ion-color-medium-contrast-rgb: 0, 0, 0;
5649
--ion-color-medium-shade: #86888f;
5750
--ion-color-medium-tint: #a2a4ab;
58-
5951
--ion-color-light: #222428;
6052
--ion-color-light-rgb: 34, 36, 40;
6153
--ion-color-light-contrast: #ffffff;
@@ -65,14 +57,12 @@
6557
}
6658
}
6759

68-
@mixin dark-ios-theme() {
60+
@mixin dark-ios-palette() {
6961
& {
7062
--ion-background-color: #000000;
7163
--ion-background-color-rgb: 0, 0, 0;
72-
7364
--ion-text-color: #ffffff;
7465
--ion-text-color-rgb: 255, 255, 255;
75-
7666
--ion-background-color-step-50: #0d0d0d;
7767
--ion-background-color-step-100: #1a1a1a;
7868
--ion-background-color-step-150: #262626;
@@ -92,7 +82,6 @@
9282
--ion-background-color-step-850: #d9d9d9;
9383
--ion-background-color-step-900: #e6e6e6;
9484
--ion-background-color-step-950: #f2f2f2;
95-
9685
--ion-text-color-step-50: #f2f2f2;
9786
--ion-text-color-step-100: #e6e6e6;
9887
--ion-text-color-step-150: #d9d9d9;
@@ -112,7 +101,6 @@
112101
--ion-text-color-step-850: #262626;
113102
--ion-text-color-step-900: #1a1a1a;
114103
--ion-text-color-step-950: #0d0d0d;
115-
116104
--ion-item-background: #000000;
117105
--ion-card-background: #1c1c1d;
118106
}
@@ -124,16 +112,13 @@
124112
}
125113
}
126114

127-
@mixin dark-md-theme() {
115+
@mixin dark-md-palette() {
128116
& {
129117
--ion-background-color: #121212;
130118
--ion-background-color-rgb: 18, 18, 18;
131-
132119
--ion-text-color: #ffffff;
133120
--ion-text-color-rgb: 255, 255, 255;
134-
135121
--ion-border-color: #222222;
136-
137122
--ion-background-color-step-50: #1e1e1e;
138123
--ion-background-color-step-100: #2a2a2a;
139124
--ion-background-color-step-150: #363636;
@@ -153,7 +138,6 @@
153138
--ion-background-color-step-850: #dbdbdb;
154139
--ion-background-color-step-900: #e7e7e7;
155140
--ion-background-color-step-950: #f3f3f3;
156-
157141
--ion-text-color-step-50: #f3f3f3;
158142
--ion-text-color-step-100: #e7e7e7;
159143
--ion-text-color-step-150: #dbdbdb;
@@ -173,7 +157,6 @@
173157
--ion-text-color-step-850: #363636;
174158
--ion-text-color-step-900: #2a2a2a;
175159
--ion-text-color-step-950: #1e1e1e;
176-
177160
--ion-item-background: #1e1e1e;
178161
--ion-toolbar-background: #1f1f1f;
179162
--ion-tab-bar-background: #1f1f1f;

‎core/src/css/themes/dark.system.scss ‎core/src/css/palettes/dark.system.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22

33
@media (prefers-color-scheme: dark) {
44
:root {
5-
@include dark-base-theme();
5+
@include dark-base-palette();
66
}
77

88
:root.ios {
9-
@include dark-ios-theme();
9+
@include dark-ios-palette();
1010
}
1111

1212
:root.md {
13-
@include dark-md-theme();
13+
@include dark-md-palette();
1414
}
1515
}

‎core/src/css/palettes/high-contrast-dark.always.scss

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import "./high-contrast-dark";
2+
3+
:root {
4+
@include high-contrast-dark-base-palette();
5+
}
6+
7+
:root.ios {
8+
@include high-contrast-dark-ios-palette();
9+
}
10+
11+
:root.md {
12+
@include high-contrast-dark-md-palette();
13+
}

‎core/src/css/palettes/high-contrast-dark.class.scss

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import "./high-contrast-dark";
2+
3+
.ion-palette-high-contrast.ion-palette-dark {
4+
@include high-contrast-dark-base-palette();
5+
}
6+
7+
.ion-palette-high-contrast.ion-palette-dark.ios {
8+
@include high-contrast-dark-ios-palette();
9+
}
10+
11+
.ion-palette-high-contrast.ion-palette-dark.md {
12+
@include high-contrast-dark-md-palette();
13+
}

‎core/src/css/themes/high-contrast-dark.scss ‎core/src/css/palettes/high-contrast-dark.scss

+9-17
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,10 @@ $lightest-text-color: $text-color;
9393
/// as opposed to setting everything in :root
9494
// so any high contrast dark styles override the standard
9595
/// contrast dark styles.
96-
@mixin high-contrast-dark-base-theme() {
96+
@mixin high-contrast-dark-base-palette() {
9797
& {
98+
--ion-placeholder-opacity: 0.8;
99+
98100
@each $color-name, $value in $colors {
99101
--ion-color-#{$color-name}: #{map.get($value, base)};
100102
--ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};
@@ -104,27 +106,23 @@ $lightest-text-color: $text-color;
104106
--ion-color-#{$color-name}-tint: #{map.get($value, tint)};
105107
}
106108

107-
--ion-placeholder-opacity: 0.8;
108109
}
109110
}
110111

111-
@mixin high-contrast-dark-ios-theme() {
112+
@mixin high-contrast-dark-ios-palette() {
113+
$background-color: #000000;
114+
112115
& {
113-
$background-color: #000000;
114-
115116
--ion-background-color: #{$background-color};
116117
--ion-background-color-rgb: #{color-to-rgb-list($background-color)};
117-
118118
--ion-text-color: #{$text-color};
119119
--ion-text-color-rgb: #{color-to-rgb-list($text-color)};
120-
121120
--ion-item-background: #000000;
122121
--ion-card-background: #1c1c1d;
123122

124123
/// Only the item borders should increase in contrast
125124
/// Borders for elements like toolbars should remain the same
126125
--ion-item-border-color: var(--ion-background-color-step-400);
127-
128126
--ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};
129127
--ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};
130128
--ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};
@@ -144,7 +142,6 @@ $lightest-text-color: $text-color;
144142
--ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};
145143
--ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};
146144
--ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};
147-
148145
--ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};
149146
--ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};
150147
--ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};
@@ -176,18 +173,15 @@ $lightest-text-color: $text-color;
176173
}
177174
}
178175

179-
@mixin high-contrast-dark-md-theme() {
176+
@mixin high-contrast-dark-md-palette() {
177+
$background-color: #121212;
178+
180179
& {
181-
$background-color: #121212;
182-
183180
--ion-background-color: #{$background-color};
184181
--ion-background-color-rgb: #{color-to-rgb-list($background-color)};
185-
186182
--ion-text-color: #{$text-color};
187183
--ion-text-color-rgb: #{color-to-rgb-list($text-color)};
188-
189184
--ion-border-color: #222222;
190-
191185
--ion-item-background: #1e1e1e;
192186
--ion-toolbar-background: #1f1f1f;
193187
--ion-tab-bar-background: #1f1f1f;
@@ -196,7 +190,6 @@ $lightest-text-color: $text-color;
196190
/// Only the item borders should increase in contrast
197191
/// Borders for elements like toolbars should remain the same
198192
--ion-item-border-color: var(--ion-background-color-step-400);
199-
200193
--ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};
201194
--ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};
202195
--ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};
@@ -216,7 +209,6 @@ $lightest-text-color: $text-color;
216209
--ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};
217210
--ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};
218211
--ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};
219-
220212
--ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};
221213
--ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};
222214
--ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};

‎core/src/css/themes/high-contrast-dark.system.scss ‎core/src/css/palettes/high-contrast-dark.system.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22

33
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
44
:root {
5-
@include high-contrast-dark-base-theme();
5+
@include high-contrast-dark-base-palette();
66
}
77

88
:root.ios {
9-
@include high-contrast-dark-ios-theme();
9+
@include high-contrast-dark-ios-palette();
1010
}
1111

1212
:root.md {
13-
@include high-contrast-dark-md-theme();
13+
@include high-contrast-dark-md-palette();
1414
}
1515
}

‎core/src/css/palettes/high-contrast.always.scss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@import "./high-contrast";
2+
3+
:root {
4+
@include high-contrast-light-base-palette();
5+
}
6+
7+
:root.md {
8+
@include high-contrast-light-md-palette();
9+
}

‎core/src/css/palettes/high-contrast.class.scss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@import "./high-contrast";
2+
3+
.ion-palette-high-contrast {
4+
@include high-contrast-light-base-palette();
5+
}
6+
7+
.ion-palette-high-contrast.md {
8+
@include high-contrast-light-md-palette();
9+
}

0 commit comments

Comments
 (0)