ionic-team · sean-perkins · Mar 18, 2024 · Mar 13, 2024 · Mar 13, 2024 · Mar 13, 2024
diff --git a/BREAKING.md b/BREAKING.md
@@ -14,7 +14,7 @@ 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)
-- [Dark Theme](#version-8x-dark-theme)
+- [Dark Mode](#version-8x-dark-mode)
 - [Global Styles](#version-8x-global-styles)
 - [Components](#version-8x-components)
   - [Button](#version-8x-button)
@@ -60,9 +60,9 @@ 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>
+<h2 id="version-8x-dark-mode">Dark Mode</h2>
 
-In previous versions, it was recommended to define the dark theme in the following way:
+In previous versions, it was recommended to define the dark palette in the following way:
 
 ```css
 @media (prefers-color-scheme: dark) {
@@ -80,15 +80,15 @@ In previous versions, it was recommended to define the dark theme in the followi
 }
 ```
 
-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:
+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:
 
 ```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";
+/* @import '@ionic/angular/css/palettes/dark.always.css'; */
+/* @import "@ionic/angular/css/palettes/dark.class.css"; */
+@import "@ionic/angular/css/palettes/dark.system.css";
 ```
 
-By importing the `dark.system.css` file, the dark theme variables will be defined like the following:
+By importing the `dark.system.css` file, the dark palette variables will be defined like the following:
 
 ```css
 @media (prefers-color-scheme: dark) {
@@ -106,11 +106,11 @@ By importing the `dark.system.css` file, the dark theme variables will be define
 }
 ```
 
-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.
+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.
 
-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.
+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.
 
-For more information on the new dark theme files, refer to the [Dark Mode documentation](https://ionicframework.com/docs/theming/dark-mode).
+For more information on the new dark palette files, refer to the [Dark Mode documentation](https://ionicframework.com/docs/theming/dark-mode).
 
 <h2 id="version-8x-global-styles">Global Styles</h2>
 

diff --git a/core/src/css/palettes/dark.always.scss b/core/src/css/palettes/dark.always.scss
@@ -0,0 +1,13 @@
+@import "./dark";
+
+:root {
+  @include dark-base-palette();
+}
+
+:root.ios {
+  @include dark-ios-palette();
+}
+
+:root.md {
+  @include dark-md-palette();
+}
diff --git a/core/src/css/palettes/dark.class.scss b/core/src/css/palettes/dark.class.scss
@@ -0,0 +1,13 @@
+@import "./dark";
+
+.ion-palette-dark {
+  @include dark-base-palette();
+}
+
+.ion-palette-dark.ios {
+  @include dark-ios-palette();
+}
+
+.ion-palette-dark.md {
+  @include dark-md-palette();
+}
diff --git a/core/src/css/themes/dark.scss → core/src/css/palettes/dark.scss b/core/src/css/themes/dark.scss → core/src/css/palettes/dark.scss
@@ -1,61 +1,53 @@
-@mixin dark-base-theme() {
+@mixin dark-base-palette() {
   & {
     --ion-color-primary: #4d8dff;
     --ion-color-primary-rgb: 77, 141, 255;
     --ion-color-primary-contrast: #000000;
     --ion-color-primary-contrast-rgb: 0, 0, 0;
     --ion-color-primary-shade: #447ce0;
     --ion-color-primary-tint: #5f98ff;
-
     --ion-color-secondary: #62bdff;
     --ion-color-secondary-rgb: 98, 189, 255;
     --ion-color-secondary-contrast: #000000;
     --ion-color-secondary-contrast-rgb: 0, 0, 0;
     --ion-color-secondary-shade: #56a6e0;
     --ion-color-secondary-tint: #72c4ff;
-
     --ion-color-tertiary: #8482fb;
     --ion-color-tertiary-rgb: 132, 130, 251;
     --ion-color-tertiary-contrast: #000000;
     --ion-color-tertiary-contrast-rgb: 0, 0, 0;
     --ion-color-tertiary-shade: #7472dd;
     --ion-color-tertiary-tint: #908ffb;
-
     --ion-color-success: #2dd55b;
     --ion-color-success-rgb: 45, 213, 91;
     --ion-color-success-contrast: #000000;
     --ion-color-success-contrast-rgb: 0, 0, 0;
     --ion-color-success-shade: #28bb50;
     --ion-color-success-tint: #42d96b;
-
     --ion-color-warning: #ffce31;
     --ion-color-warning-rgb: 255, 206, 49;
     --ion-color-warning-contrast: #000000;
     --ion-color-warning-contrast-rgb: 0, 0, 0;
     --ion-color-warning-shade: #e0b52b;
     --ion-color-warning-tint: #ffd346;
-
     --ion-color-danger: #f56570;
     --ion-color-danger-rgb: 245, 101, 112;
     --ion-color-danger-contrast: #000000;
     --ion-color-danger-contrast-rgb: 0, 0, 0;
     --ion-color-danger-shade: #d85963;
     --ion-color-danger-tint: #f6747e;
-
     --ion-color-dark: #f4f5f8;
     --ion-color-dark-rgb: 244, 245, 248;
     --ion-color-dark-contrast: #000000;
     --ion-color-dark-contrast-rgb: 0, 0, 0;
     --ion-color-dark-shade: #d7d8da;
     --ion-color-dark-tint: #f5f6f9;
-
     --ion-color-medium: #989aa2;
     --ion-color-medium-rgb: 152, 154, 162;
     --ion-color-medium-contrast: #000000;
     --ion-color-medium-contrast-rgb: 0, 0, 0;
     --ion-color-medium-shade: #86888f;
     --ion-color-medium-tint: #a2a4ab;
-
     --ion-color-light: #222428;
     --ion-color-light-rgb: 34, 36, 40;
     --ion-color-light-contrast: #ffffff;
@@ -65,14 +57,12 @@
   }
 }
 
-@mixin dark-ios-theme() {
+@mixin dark-ios-palette() {
   & {
     --ion-background-color: #000000;
     --ion-background-color-rgb: 0, 0, 0;
-
     --ion-text-color: #ffffff;
     --ion-text-color-rgb: 255, 255, 255;
-
     --ion-background-color-step-50: #0d0d0d;
     --ion-background-color-step-100: #1a1a1a;
     --ion-background-color-step-150: #262626;
@@ -92,7 +82,6 @@
     --ion-background-color-step-850: #d9d9d9;
     --ion-background-color-step-900: #e6e6e6;
     --ion-background-color-step-950: #f2f2f2;
-
     --ion-text-color-step-50: #f2f2f2;
     --ion-text-color-step-100: #e6e6e6;
     --ion-text-color-step-150: #d9d9d9;
@@ -112,7 +101,6 @@
     --ion-text-color-step-850: #262626;
     --ion-text-color-step-900: #1a1a1a;
     --ion-text-color-step-950: #0d0d0d;
-
     --ion-item-background: #000000;
     --ion-card-background: #1c1c1d;
   }
@@ -124,16 +112,13 @@
   }
 }
 
-@mixin dark-md-theme() {
+@mixin dark-md-palette() {
   & {
     --ion-background-color: #121212;
     --ion-background-color-rgb: 18, 18, 18;
-
     --ion-text-color: #ffffff;
     --ion-text-color-rgb: 255, 255, 255;
-
     --ion-border-color: #222222;
-
     --ion-background-color-step-50: #1e1e1e;
     --ion-background-color-step-100: #2a2a2a;
     --ion-background-color-step-150: #363636;
@@ -153,7 +138,6 @@
     --ion-background-color-step-850: #dbdbdb;
     --ion-background-color-step-900: #e7e7e7;
     --ion-background-color-step-950: #f3f3f3;
-
     --ion-text-color-step-50: #f3f3f3;
     --ion-text-color-step-100: #e7e7e7;
     --ion-text-color-step-150: #dbdbdb;
@@ -173,7 +157,6 @@
     --ion-text-color-step-850: #363636;
     --ion-text-color-step-900: #2a2a2a;
     --ion-text-color-step-950: #1e1e1e;
-
     --ion-item-background: #1e1e1e;
     --ion-toolbar-background: #1f1f1f;
     --ion-tab-bar-background: #1f1f1f;

diff --git a/core/src/css/themes/dark.system.scss → core/src/css/palettes/dark.system.scss b/core/src/css/themes/dark.system.scss → core/src/css/palettes/dark.system.scss
@@ -2,14 +2,14 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    @include dark-base-theme();
+    @include dark-base-palette();
   }
 
   :root.ios {
-    @include dark-ios-theme();
+    @include dark-ios-palette();
   }
 
   :root.md {
-    @include dark-md-theme();
+    @include dark-md-palette();
   }
 }
diff --git a/core/src/css/palettes/high-contrast-dark.always.scss b/core/src/css/palettes/high-contrast-dark.always.scss
@@ -0,0 +1,13 @@
+@import "./high-contrast-dark";
+
+:root {
+  @include high-contrast-dark-base-palette();
+}
+
+:root.ios {
+  @include high-contrast-dark-ios-palette();
+}
+
+:root.md {
+  @include high-contrast-dark-md-palette();
+}
diff --git a/core/src/css/palettes/high-contrast-dark.class.scss b/core/src/css/palettes/high-contrast-dark.class.scss
@@ -0,0 +1,13 @@
+@import "./high-contrast-dark";
+
+.ion-palette-high-contrast.ion-palette-dark {
+  @include high-contrast-dark-base-palette();
+}
+
+.ion-palette-high-contrast.ion-palette-dark.ios {
+  @include high-contrast-dark-ios-palette();
+}
+
+.ion-palette-high-contrast.ion-palette-dark.md {
+  @include high-contrast-dark-md-palette();
+}
diff --git a/core/src/css/themes/high-contrast-dark.scss → .../src/css/palettes/high-contrast-dark.scss b/core/src/css/themes/high-contrast-dark.scss → .../src/css/palettes/high-contrast-dark.scss
@@ -93,8 +93,10 @@ $lightest-text-color: $text-color;
 /// as opposed to setting everything in :root
 // so any high contrast dark styles override the standard
 /// contrast dark styles.
-@mixin high-contrast-dark-base-theme() {
+@mixin high-contrast-dark-base-palette() {
   & {
+    --ion-placeholder-opacity: 0.8;
+
     @each $color-name, $value in $colors {
       --ion-color-#{$color-name}: #{map.get($value, base)};
       --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};
@@ -104,27 +106,23 @@ $lightest-text-color: $text-color;
       --ion-color-#{$color-name}-tint: #{map.get($value, tint)};
     }
 
-    --ion-placeholder-opacity: 0.8;
   }
 }
 
-@mixin high-contrast-dark-ios-theme() {
+@mixin high-contrast-dark-ios-palette() {
+  $background-color: #000000;
+
   & {
-    $background-color: #000000;
-
     --ion-background-color: #{$background-color};
     --ion-background-color-rgb: #{color-to-rgb-list($background-color)};
-
     --ion-text-color: #{$text-color};
     --ion-text-color-rgb: #{color-to-rgb-list($text-color)};
-
     --ion-item-background: #000000;
     --ion-card-background: #1c1c1d;
 
     /// Only the item borders should increase in contrast
     /// Borders for elements like toolbars should remain the same
     --ion-item-border-color: var(--ion-background-color-step-400);
-
     --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};
     --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};
     --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};
@@ -144,7 +142,6 @@ $lightest-text-color: $text-color;
     --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};
     --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};
     --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};
-
     --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};
     --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};
     --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};
@@ -176,18 +173,15 @@ $lightest-text-color: $text-color;
   }
 }
 
-@mixin high-contrast-dark-md-theme() {
+@mixin high-contrast-dark-md-palette() {
+  $background-color: #121212;
+
   & {
-    $background-color: #121212;
-
     --ion-background-color: #{$background-color};
     --ion-background-color-rgb: #{color-to-rgb-list($background-color)};
-
     --ion-text-color: #{$text-color};
     --ion-text-color-rgb: #{color-to-rgb-list($text-color)};
-
     --ion-border-color: #222222;
-
     --ion-item-background: #1e1e1e;
     --ion-toolbar-background: #1f1f1f;
     --ion-tab-bar-background: #1f1f1f;
@@ -196,7 +190,6 @@ $lightest-text-color: $text-color;
     /// Only the item borders should increase in contrast
     /// Borders for elements like toolbars should remain the same
     --ion-item-border-color: var(--ion-background-color-step-400);
-
     --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};
     --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};
     --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};
@@ -216,7 +209,6 @@ $lightest-text-color: $text-color;
     --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};
     --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};
     --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};
-
     --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};
     --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};
     --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};

diff --git a/...css/themes/high-contrast-dark.system.scss → ...s/palettes/high-contrast-dark.system.scss b/...css/themes/high-contrast-dark.system.scss → ...s/palettes/high-contrast-dark.system.scss
@@ -2,14 +2,14 @@
 
 @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
   :root {
-    @include high-contrast-dark-base-theme();
+    @include high-contrast-dark-base-palette();
   }
 
   :root.ios {
-    @include high-contrast-dark-ios-theme();
+    @include high-contrast-dark-ios-palette();
   }
 
   :root.md {
-    @include high-contrast-dark-md-theme();
+    @include high-contrast-dark-md-palette();
   }
 }
diff --git a/core/src/css/palettes/high-contrast.always.scss b/core/src/css/palettes/high-contrast.always.scss
@@ -0,0 +1,9 @@
+@import "./high-contrast";
+
+:root {
+  @include high-contrast-light-base-palette();
+}
+
+:root.md {
+  @include high-contrast-light-md-palette();
+}
diff --git a/core/src/css/palettes/high-contrast.class.scss b/core/src/css/palettes/high-contrast.class.scss
@@ -0,0 +1,9 @@
+@import "./high-contrast";
+
+.ion-palette-high-contrast {
+  @include high-contrast-light-base-palette();
+}
+
+.ion-palette-high-contrast.md {
+  @include high-contrast-light-md-palette();
+}