From 859b5b8093f91b7404d13bda39f7757a1450d189 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Tue, 12 Mar 2024 23:18:56 -0400 Subject: [PATCH 01/10] feat: rename themes to palettes --- docs/theming/dark-mode.md | 94 +++++++------- docs/theming/high-contrast-mode.md | 118 +++++++++--------- docs/theming/themes.md | 6 +- .../always-dark-mode/angular/styles_css.md | 8 +- .../v8/theming/always-dark-mode/demo.html | 2 +- .../always-dark-mode/javascript/index_ts.md | 8 +- .../theming/always-dark-mode/react/app_tsx.md | 8 +- .../theming/always-dark-mode/vue/main_ts.md | 8 +- .../angular/styles_css.md | 4 +- .../always-high-contrast-mode/demo.html | 2 +- .../javascript/index_ts.md | 4 +- .../react/app_tsx.md | 4 +- .../always-high-contrast-mode/vue/main_ts.md | 4 +- .../angular/example_component_html.md | 2 +- .../angular/example_component_ts.md | 26 ++-- .../class-dark-mode/angular/global_css.md | 2 +- .../class-dark-mode/angular/styles_css.md | 8 +- .../v8/theming/class-dark-mode/demo.html | 52 ++++---- .../class-dark-mode/javascript/index_html.md | 30 ++--- .../class-dark-mode/javascript/index_ts.md | 8 +- .../theming/class-dark-mode/react/app_tsx.md | 8 +- .../theming/class-dark-mode/react/main_css.md | 2 +- .../theming/class-dark-mode/react/main_tsx.md | 28 ++--- .../class-dark-mode/theme/variables_css.md | 4 +- .../class-dark-mode/vue/example_vue.md | 36 +++--- .../v8/theming/class-dark-mode/vue/main_ts.md | 8 +- .../angular/example_component_html.md | 6 +- .../angular/example_component_ts.md | 54 ++++---- .../angular/global_css.md | 2 +- .../angular/styles_css.md | 8 +- .../class-high-contrast-mode/demo.html | 56 ++++----- .../javascript/index_html.md | 60 ++++----- .../javascript/index_ts.md | 8 +- .../class-high-contrast-mode/react/app_tsx.md | 8 +- .../react/main_css.md | 2 +- .../react/main_tsx.md | 56 ++++----- .../vue/example_vue.md | 54 ++++---- .../class-high-contrast-mode/vue/main_ts.md | 8 +- .../system-dark-mode/angular/global_css.md | 2 +- .../system-dark-mode/angular/styles_css.md | 8 +- .../v8/theming/system-dark-mode/demo.html | 2 +- .../system-dark-mode/javascript/index_html.md | 2 +- .../system-dark-mode/javascript/index_ts.md | 8 +- .../theming/system-dark-mode/react/app_tsx.md | 8 +- .../system-dark-mode/react/main_css.md | 2 +- .../system-dark-mode/vue/example_vue.md | 2 +- .../theming/system-dark-mode/vue/main_ts.md | 8 +- .../angular/styles_css.md | 8 +- .../system-high-contrast-mode/demo.html | 6 +- .../javascript/index_ts.md | 8 +- .../react/app_tsx.md | 8 +- .../system-high-contrast-mode/vue/main_ts.md | 8 +- 52 files changed, 443 insertions(+), 443 deletions(-) diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md index 9d87c0bd484..2fac5697076 100644 --- a/docs/theming/dark-mode.md +++ b/docs/theming/dark-mode.md @@ -13,43 +13,43 @@ import TabItem from '@theme/TabItem'; /> -Ionic makes it easy to change the themes of your app, including supporting dark color schemes. Dark mode is a display setting that changes all of an app's views to a dark theme. It has system-wide support on iOS and Android, making it highly desirable for developers to add to their apps. +Ionic makes it easy to change the palettes of your app, including supporting dark color schemes. Dark mode is a display setting that changes all of an app's views to a dark palette. It has system-wide support on iOS and Android, making it highly desirable for developers to add to their apps. -## Enabling Dark Theme +## Enabling Dark Palette -There are three provided ways to enable the dark theme in an app: **always**, based on **system** settings, or by using a CSS **class**. +There are three provided ways to enable the dark palette in an app: **always**, based on **system** settings, or by using a CSS **class**. ### Always -The default theme provided with Ionic Framework is a light theme, consisting of a light background and dark text. However, the default theme can be changed to the dark theme by importing the following stylesheet in the appropriate files: +The default palette provided with Ionic Framework is a light palette, consisting of a light background and dark text. However, the default palette can be changed to the dark palette by importing the following stylesheet in the appropriate files: ```css -@import '@ionic/angular/css/themes/dark.always.css'; +@import '@ionic/angular/css/palettes/dark.always.css'; ``` ```ts -import '@ionic/core/css/themes/dark.always.css'; +import '@ionic/core/css/palettes/dark.always.css'; ``` ```tsx -import '@ionic/react/css/themes/dark.always.css'; +import '@ionic/react/css/palettes/dark.always.css'; ``` ```ts -import '@ionic/vue/css/themes/dark.always.css'; +import '@ionic/vue/css/palettes/dark.always.css'; ``` @@ -58,47 +58,47 @@ import '@ionic/vue/css/themes/dark.always.css'; This sets the [application colors](/docs/theming/themes#application-colors) and [stepped colors](/docs/theming/themes#stepped-colors) on the [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector. -The following example will always display the dark theme, regardless of the system settings for dark mode. +The following example will always display the dark palette, regardless of the system settings for dark mode. import AlwaysDarkMode from '@site/static/usage/v8/theming/always-dark-mode/index.md'; :::caution Important -Avoid targeting the `.ios` or `.md` selectors to override the Ionic dark theme, as these classes are added to each component and will take priority over globally defined variables. Instead, we can target the mode-specific classes on the `:root` element. +Avoid targeting the `.ios` or `.md` selectors to override the Ionic dark palette, as these classes are added to each component and will take priority over globally defined variables. Instead, we can target the mode-specific classes on the `:root` element. ::: ### System -The system approach to enable dark mode involves checking the system settings for the user's preferred color scheme. This is the default when starting a new Ionic Framework app. Importing the following stylesheet in the appropriate file will automatically retrieve the user's preference from the system settings and apply the dark theme when dark mode is preferred: +The system approach to enable dark mode involves checking the system settings for the user's preferred color scheme. This is the default when starting a new Ionic Framework app. Importing the following stylesheet in the appropriate file will automatically retrieve the user's preference from the system settings and apply the dark palette when dark mode is preferred: ```css -@import '@ionic/angular/css/themes/dark.system.css'; +@import '@ionic/angular/css/palettes/dark.system.css'; ``` ```ts -import '@ionic/core/css/themes/dark.system.css'; +import '@ionic/core/css/palettes/dark.system.css'; ``` ```tsx -import '@ionic/react/css/themes/dark.system.css'; +import '@ionic/react/css/palettes/dark.system.css'; ``` ```ts -import '@ionic/vue/css/themes/dark.system.css'; +import '@ionic/vue/css/palettes/dark.system.css'; ``` @@ -118,49 +118,49 @@ import SystemDarkMode from '@site/static/usage/v8/theming/system-dark-mode/index :::caution Important -Avoid targeting the `.ios` or `.md` selectors to override the Ionic dark theme, as these classes are added to each component and will take priority over globally defined variables. Instead, we can target the mode-specific classes on the `:root` element. +Avoid targeting the `.ios` or `.md` selectors to override the Ionic dark palette, as these classes are added to each component and will take priority over globally defined variables. Instead, we can target the mode-specific classes on the `:root` element. ::: ### CSS Class -While the previous approaches are excellent for enabling the dark theme through file imports alone, there are scenarios where you may need more control over its application. In cases where you need to apply the dark theme conditionally, such as through a toggle, or if you want to extend the functionality based on system settings, we provide a dark theme class file. This file applies the dark theme when a specific class is added to an app. Importing the following stylesheet into the appropriate file will provide the necessary styles for using the dark theme with the class: +While the previous approaches are excellent for enabling the dark palette through file imports alone, there are scenarios where you may need more control over its application. In cases where you need to apply the dark palette conditionally, such as through a toggle, or if you want to extend the functionality based on system settings, we provide a dark palette class file. This file applies the dark palette when a specific class is added to an app. Importing the following stylesheet into the appropriate file will provide the necessary styles for using the dark palette with the class: ```css -@import '@ionic/angular/css/themes/dark.class.css'; +@import '@ionic/angular/css/palettes/dark.class.css'; ``` ```ts -import '@ionic/core/css/themes/dark.class.css'; +import '@ionic/core/css/palettes/dark.class.css'; ``` ```tsx -import '@ionic/react/css/themes/dark.class.css'; +import '@ionic/react/css/palettes/dark.class.css'; ``` ```ts -import '@ionic/vue/css/themes/dark.class.css'; +import '@ionic/vue/css/palettes/dark.class.css'; ``` -This sets the [application colors](/docs/theming/themes#application-colors) and [stepped colors](/docs/theming/themes#stepped-colors) on the `.ion-theme-dark` selector, which must be applied to the app by the developer. +This sets the [application colors](/docs/theming/themes#application-colors) and [stepped colors](/docs/theming/themes#stepped-colors) on the `.ion-palette-dark` selector, which must be applied to the app by the developer. -The following example combines site settings, system settings, and the toggle to decide when to show dark mode. The site's theme takes precedence over system settings. If your system settings differ from the site's theme when the demo loads, it will use the site's theme. +The following example combines site settings, system settings, and the toggle to decide when to show dark mode. The site's palette takes precedence over system settings. If your system settings differ from the site's palette when the demo loads, it will use the site's palette. :::info Not sure how to change the system settings? Here's how to enable dark mode on [Windows 11](https://support.microsoft.com/en-us/windows/change-colors-in-windows-d26ef4d6-819a-581c-1581-493cfcc005fe) and on [macOS](https://support.apple.com/en-us/HT208976). @@ -171,12 +171,12 @@ import ClassDarkMode from '@site/static/usage/v8/theming/class-dark-mode/index.m :::caution Important -The `.ion-theme-dark` class **must** be added to the `html` element in order to work with the imported dark theme. +The `.ion-palette-dark` class **must** be added to the `html` element in order to work with the imported dark palette. ::: ## Adjusting System UI Components -When developing a dark theme, you may notice that certain system UI components are not adjusting to dark mode properly. To fix this you will need to specify the `color-scheme`. See the browser compatibility for color-scheme for details on cross browser support. +When developing a dark palette, you may notice that certain system UI components are not adjusting to dark mode properly. To fix this you will need to specify the `color-scheme`. See the browser compatibility for color-scheme for details on cross browser support. While you may be mainly using Ionic components instead of only native components, `color-scheme` can also affect aspects of your application such as the scrollbar. In order to use `color-scheme` you will need to add the following HTML to the `head` of your application: @@ -204,24 +204,24 @@ For more information regarding `color-scheme` please see https://web.dev/color-s For developers looking to customize the theme color under the status bar in Safari on iOS 15 or the toolbar in Safari on macOS, see [`theme-color` Meta](./advanced.md#theme-color-meta). ::: -## Ionic Dark Theme +## Ionic Dark Palette -Ionic has a recommended dark theme that can be enabled in three different ways: [always](#always), based on [system](#system) settings, or by using a [CSS class](#css-class). Each of these methods involves importing the dark theme file with the corresponding name. +Ionic has a recommended dark palette that can be enabled in three different ways: [always](#always), based on [system](#system) settings, or by using a [CSS class](#css-class). Each of these methods involves importing the dark palette file with the corresponding name. -The contents of each file are included below for reference. These variables are set by importing the relevant dark theme file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.md) section. +The contents of each file are included below for reference. These variables are set by importing the relevant dark palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.md) section. -The **always** dark theme behaves in the following ways: +The **always** dark palette behaves in the following ways: -1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a dark theme in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher. -2. Setting variables for the dark theme on `ios` devices using the `:root.ios` selector. -3. Setting variables for the dark theme on `md` devices using the `:root.md` selector. +1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a dark palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher. +2. Setting variables for the dark palette on `ios` devices using the `:root.ios` selector. +3. Setting variables for the dark palette on `md` devices using the `:root.md` selector. :::caution -It is important to pay attention to the specificity if you want to override any of the Ionic dark theme variables. For example, because the `--ion-item-background` variable is set for each mode, it cannot be overridden in the `:root` selector. A higher specificity selector, such as `:root.ios`, is required. +It is important to pay attention to the specificity if you want to override any of the Ionic dark palette variables. For example, because the `--ion-item-background` variable is set for each mode, it cannot be overridden in the `:root` selector. A higher specificity selector, such as `:root.ios`, is required. ::: ```css @@ -367,15 +367,15 @@ It is important to pay attention to the specificity if you want to override any -The **system** dark theme behaves in the following ways: +The **system** dark palette behaves in the following ways: -1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a dark theme in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher. -2. Setting variables for the dark theme on `ios` devices using the `:root.ios` selector. -3. Setting variables for the dark theme on `md` devices using the `:root.md` selector. +1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a dark palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher. +2. Setting variables for the dark palette on `ios` devices using the `:root.ios` selector. +3. Setting variables for the dark palette on `md` devices using the `:root.md` selector. 4. Only applies these variables when the [CSS media query for `prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) is `dark`. :::caution -It is important to pay attention to the specificity if you want to override any of the Ionic dark theme variables. For example, because the `--ion-item-background` variable is set for each mode, it cannot be overridden in the `:root` selector. A higher specificity selector, such as `:root.ios`, is required. +It is important to pay attention to the specificity if you want to override any of the Ionic dark palette variables. For example, because the `--ion-item-background` variable is set for each mode, it cannot be overridden in the `:root` selector. A higher specificity selector, such as `:root.ios`, is required. ::: ```css @@ -523,18 +523,18 @@ It is important to pay attention to the specificity if you want to override any -The **class** dark theme behaves in the following ways: +The **class** dark palette behaves in the following ways: -1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a dark theme in the `.ion-theme-dark` selector. The `.ion-theme-dark` class must be added to the `html` element in an app. -2. Setting variables for the dark theme on `ios` devices using the `.ion-theme-dark.ios` selector. -3. Setting variables for the dark theme on `md` devices using the `.ion-theme-dark.md` selector. +1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a dark palette in the `.ion-palette-dark` selector. The `.ion-palette-dark` class must be added to the `html` element in an app. +2. Setting variables for the dark palette on `ios` devices using the `.ion-palette-dark.ios` selector. +3. Setting variables for the dark palette on `md` devices using the `.ion-palette-dark.md` selector. :::caution -It is important to pay attention to the specificity if you want to override any of the Ionic dark theme variables. For example, because the `--ion-item-background` variable is set for each mode, it cannot be overridden in the `.ion-theme-dark` selector. A higher specificity selector, such as `.ion-theme-dark.ios`, is required. +It is important to pay attention to the specificity if you want to override any of the Ionic dark palette variables. For example, because the `--ion-item-background` variable is set for each mode, it cannot be overridden in the `.ion-palette-dark` selector. A higher specificity selector, such as `.ion-palette-dark.ios`, is required. ::: ```css -.ion-theme-dark { +.ion-palette-dark { --ion-color-primary: #4d8dff; --ion-color-primary-rgb: 77, 141, 255; --ion-color-primary-contrast: #000000; @@ -599,7 +599,7 @@ It is important to pay attention to the specificity if you want to override any --ion-color-light-tint: #444444; } -.ion-theme-dark.ios { +.ion-palette-dark.ios { --ion-background-color: #000000; --ion-background-color-rgb: 0, 0, 0; @@ -630,13 +630,13 @@ It is important to pay attention to the specificity if you want to override any --ion-card-background: #1c1c1d; } -.ion-theme-dark.ios ion-modal { +.ion-palette-dark.ios ion-modal { --ion-background-color: var(--ion-color-step-100); --ion-toolbar-background: var(--ion-color-step-150); --ion-toolbar-border-color: var(--ion-color-step-250); } -.ion-theme-dark.md { +.ion-palette-dark.md { --ion-background-color: #121212; --ion-background-color-rgb: 18, 18, 18; diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 20fb1a61629..476a3d18314 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -13,60 +13,60 @@ import TabItem from '@theme/TabItem'; /> -Ionic offers themes with increased contrast for users with low vision. These themes work by amplifying the contrast between foreground content, such as text, and background content, such as UI components. Ionic provides both light and dark variants for achieving high contrast. +Ionic offers palettes with increased contrast for users with low vision. These palettes work by amplifying the contrast between foreground content, such as text, and background content, such as UI components. Ionic provides both light and dark variants for achieving high contrast. ## Overview -The default theme in Ionic provides [Ionic colors](./colors.md) that meet [Level AA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) as defined by Web Content Accessibility Guidelines (WCAG) when used with the appropriate contrast color. The [Ionic colors](./colors.md) in the high contrast theme have been updated to meet [Level AAA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html) when used with the appropriate contrast color. Notably, improvements have been made to the contrast of UI components, including border, text, and background colors. However, it's important to note that within the high contrast theme, priority is given to text legibility. This means that if adjusting the contrast of a UI component against the page background would significantly compromise the contrast between the component's text and its background, the contrast of the UI component background will remain unchanged. +The default palette in Ionic provides [Ionic colors](./colors.md) that meet [Level AA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) as defined by Web Content Accessibility Guidelines (WCAG) when used with the appropriate contrast color. The [Ionic colors](./colors.md) in the high contrast palette have been updated to meet [Level AAA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html) when used with the appropriate contrast color. Notably, improvements have been made to the contrast of UI components, including border, text, and background colors. However, it's important to note that within the high contrast palette, priority is given to text legibility. This means that if adjusting the contrast of a UI component against the page background would significantly compromise the contrast between the component's text and its background, the contrast of the UI component background will remain unchanged. ## Enabling High Contrast Theme -There are three provided ways to enable the high contrast theme in an app: **always**, based on **system** settings, or by using a CSS **class**. +There are three provided ways to enable the high contrast palette in an app: **always**, based on **system** settings, or by using a CSS **class**. ### Always -The high contrast theme can be enabled by importing the following stylesheet in the appropriate files. This approach will enable the high contrast theme regardless of the system settings for contrast preference. +The high contrast palette can be enabled by importing the following stylesheet in the appropriate files. This approach will enable the high contrast palette regardless of the system settings for contrast preference. ```css -@import '@ionic/angular/css/themes/high-contrast.always.css'; // Light theme -// @import '@ionic/angular/css/themes/high-contrast.always.css'; // Dark theme +@import '@ionic/angular/css/palettes/high-contrast.always.css'; // Light palette +// @import '@ionic/angular/css/palettes/high-contrast.always.css'; // Dark palette ``` ```typescript -import '@ionic/core/css/themes/high-contrast.always.css'; // Light theme -// import '@ionic/core/css/themes/high-contrast-dark.always.css'; // Dark theme +import '@ionic/core/css/palettes/high-contrast.always.css'; // Light palette +// import '@ionic/core/css/palettes/high-contrast-dark.always.css'; // Dark palette ``` ```tsx -import '@ionic/react/css/themes/high-contrast.always.css'; // Light theme -// import '@ionic/react/css/themes/high-contrast-dark.always.css'; // Dark theme +import '@ionic/react/css/palettes/high-contrast.always.css'; // Light palette +// import '@ionic/react/css/palettes/high-contrast-dark.always.css'; // Dark palette ``` ```typescript -import '@ionic/vue/css/themes/high-contrast.always.css'; // Light theme -// import '@ionic/vue/css/themes/high-contrast-dark.always.css'; // Dark theme +import '@ionic/vue/css/palettes/high-contrast.always.css'; // Light palette +// import '@ionic/vue/css/palettes/high-contrast-dark.always.css'; // Dark palette ``` -The high contrast dark theme can be applied by importing `high-contrast-dark.always.css` instead of `high-contrast.always.css`. +The high contrast dark palette can be applied by importing `high-contrast-dark.always.css` instead of `high-contrast.always.css`. -The following example will always display the high contrast light theme, regardless of the user's preference for high contrast or dark mode. +The following example will always display the high contrast light palette, regardless of the user's preference for high contrast or dark mode. import AlwaysHighContrastMode from '@site/static/usage/v8/theming/always-high-contrast-mode/index.md'; @@ -74,48 +74,48 @@ import AlwaysHighContrastMode from '@site/static/usage/v8/theming/always-high-co ### System -The system approach to enabling high contrast mode involves checking the system settings for the user's preferred contrast. This is the default when starting a new Ionic Framework app. Importing the following stylesheets in the appropriate file will automatically retrieve the user's preference from the system settings and apply the high contrast theme when high contrast is preferred. +The system approach to enabling high contrast mode involves checking the system settings for the user's preferred contrast. This is the default when starting a new Ionic Framework app. Importing the following stylesheets in the appropriate file will automatically retrieve the user's preference from the system settings and apply the high contrast palette when high contrast is preferred. -The following example shows how to include both the high contrast light theme as well as the high contrast dark theme. The system's dark mode preference will be checked to show either the light or dark variant of the high contrast theme. +The following example shows how to include both the high contrast light palette as well as the high contrast dark palette. The system's dark mode preference will be checked to show either the light or dark variant of the high contrast palette. ```css -@import '@ionic/angular/css/themes/high-contrast.system.css'; -@import '@ionic/angular/css/themes/high-contrast-dark.system.css'; +@import '@ionic/angular/css/palettes/high-contrast.system.css'; +@import '@ionic/angular/css/palettes/high-contrast-dark.system.css'; ``` ```ts -import '@ionic/core/css/themes/high-contrast.system.css'; -import '@ionic/core/css/themes/high-contrast-dark.system.css'; +import '@ionic/core/css/palettes/high-contrast.system.css'; +import '@ionic/core/css/palettes/high-contrast-dark.system.css'; ``` ```tsx -import '@ionic/react/css/themes/high-contrast.system.css'; -import '@ionic/react/css/themes/high-contrast-dark.system.css'; +import '@ionic/react/css/palettes/high-contrast.system.css'; +import '@ionic/react/css/palettes/high-contrast-dark.system.css'; ``` ```ts -import '@ionic/vue/css/themes/high-contrast.system.css'; -import '@ionic/vue/css/themes/high-contrast-dark.system.css'; +import '@ionic/vue/css/palettes/high-contrast.system.css'; +import '@ionic/vue/css/palettes/high-contrast-dark.system.css'; ``` -This approach activates the high contrast theme when the [CSS media query for `prefers-contrast`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) is `more`. The `prefers-contrast` media query is supported by [all modern browsers](https://caniuse.com/?search=prefers-contrast). If support for an older browser is required, we recommend using the [CSS class](#css-class) approach. +This approach activates the high contrast palette when the [CSS media query for `prefers-contrast`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) is `more`. The `prefers-contrast` media query is supported by [all modern browsers](https://caniuse.com/?search=prefers-contrast). If support for an older browser is required, we recommend using the [CSS class](#css-class) approach. The following example uses the system settings to decide when to show high contrast mode. @@ -128,54 +128,54 @@ import SystemHighContrastMode from '@site/static/usage/v8/theming/system-high-co :::caution -The high contrast light theme must be imported after [core.css](../layout/global-stylesheets.md#corecss), and the -high contrast dark theme must be imported after `dark.system.css`. Otherwise, the standard contrast theme will take priority. +The high contrast light palette must be imported after [core.css](../layout/global-stylesheets.md#corecss), and the +high contrast dark palette must be imported after `dark.system.css`. Otherwise, the standard contrast palette will take priority. ::: ### CSS Class -While the previous approaches are excellent for enabling the high contrast theme through file imports alone, there are scenarios where you may need more control over where it is applied. In cases where you need to apply the high contrast theme conditionally, such as through a toggle, or if you want to extend the functionality based on system settings, we provide a high contrast theme class file. This file applies the high contrast theme when a specific class is added to an app. Importing the following stylesheets into the appropriate file will provide the necessary styles for using the high contrast theme with the class: +While the previous approaches are excellent for enabling the high contrast palette through file imports alone, there are scenarios where you may need more control over where it is applied. In cases where you need to apply the high contrast palette conditionally, such as through a toggle, or if you want to extend the functionality based on system settings, we provide a high contrast palette class file. This file applies the high contrast palette when a specific class is added to an app. Importing the following stylesheets into the appropriate file will provide the necessary styles for using the high contrast palette with the class: ```css -@import '@ionic/angular/css/themes/high-contrast.class.css'; -@import '@ionic/angular/css/themes/high-contrast-dark.class.css'; +@import '@ionic/angular/css/palettes/high-contrast.class.css'; +@import '@ionic/angular/css/palettes/high-contrast-dark.class.css'; ``` ```ts -import '@ionic/core/css/themes/high-contrast.class.css'; -import '@ionic/core/css/themes/high-contrast-dark.class.css'; +import '@ionic/core/css/palettes/high-contrast.class.css'; +import '@ionic/core/css/palettes/high-contrast-dark.class.css'; ``` ```tsx -import '@ionic/react/css/themes/high-contrast.class.css'; -import '@ionic/react/css/themes/high-contrast-dark.class.css'; +import '@ionic/react/css/palettes/high-contrast.class.css'; +import '@ionic/react/css/palettes/high-contrast-dark.class.css'; ``` ```ts -import '@ionic/vue/css/themes/high-contrast.class.css'; -import '@ionic/vue/css/themes/high-contrast-dark.class.css'; +import '@ionic/vue/css/palettes/high-contrast.class.css'; +import '@ionic/vue/css/palettes/high-contrast-dark.class.css'; ``` -This approach activates the high contrast theme when the `.ion-theme-high-contrast` class is set on the `html` element. This class must be applied by the developer. This can be combined with the [`.ion-theme-dark` class](./dark-mode.md#css-class) to conditionally apply the high contrast dark theme. +This approach activates the high contrast palette when the `.ion-palette-high-contrast` class is set on the `html` element. This class must be applied by the developer. This can be combined with the [`.ion-palette-dark` class](./dark-mode.md#css-class) to conditionally apply the high contrast dark palette. -The following example combines site settings, system settings, and the toggle to decide when to show high contrast mode. The site's theme takes precedence over system settings. If your system settings differ from the site's theme when the demo loads, it will use the site's theme. +The following example combines site settings, system settings, and the toggle to decide when to show high contrast mode. The site's palette takes precedence over system settings. If your system settings differ from the site's palette when the demo loads, it will use the site's palette. :::info Not sure how to change the system settings? Here's how to enable high contrast mode on [Windows 11](hhttps://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) and on [macOS](https://support.apple.com/guide/mac-help/change-display-settings-for-accessibility-unac089/mac). @@ -186,59 +186,59 @@ import ClassHighContrastMode from '@site/static/usage/v8/theming/class-high-cont :::caution -The high contrast light theme must be imported after [core.css](../layout/global-stylesheets.md#corecss), -and the high contrast dark theme must be imported after `dark.class.css`. Otherwise, the standard contrast theme will take +The high contrast light palette must be imported after [core.css](../layout/global-stylesheets.md#corecss), +and the high contrast dark palette must be imported after `dark.class.css`. Otherwise, the standard contrast palette will take priority. ::: :::caution -The `.ion-theme-high-contrast` class **must** be added to the `html` element in order to work with the imported high contrast theme. +The `.ion-palette-high-contrast` class **must** be added to the `html` element in order to work with the imported high contrast palette. ::: ## Customizing Ionic High Contrast Theme -Ionic has a recommended high contrast theme that can be enabled in three different ways: [always](#always), based on [system](#system) settings, or by using a [CSS class](#css-class). Each of these methods involves importing the high contrast theme file with the corresponding name. +Ionic has a recommended high contrast palette that can be enabled in three different ways: [always](#always), based on [system](#system) settings, or by using a [CSS class](#css-class). Each of these methods involves importing the high contrast palette file with the corresponding name. -The theme variables are set by importing the relevant high contrast theme file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.md) section. +The theme variables are set by importing the relevant high contrast palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the [Themes](themes.md) section. -The following provides details on how to customize the high contrast theme depending on how it was applied in an application. +The following provides details on how to customize the high contrast palette depending on how it was applied in an application. -The **always** high contrast theme can be accessed by importing `high-contrast.always.css` for the light variant and `high-contrast-dark.always.css` for the dark variant. +The **always** high contrast palette can be accessed by importing `high-contrast.always.css` for the light variant and `high-contrast-dark.always.css` for the dark variant. -The **always** high contrast theme behaves in the following ways: +The **always** high contrast palette behaves in the following ways: -1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a high contrast theme in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher. -2. Setting variables for the high contrast theme on `ios` devices using the `:root.ios` selector. -3. Setting variables for the high contrast theme on `md` devices using the `:root.md` selector. +1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a high contrast palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher. +2. Setting variables for the high contrast palette on `ios` devices using the `:root.ios` selector. +3. Setting variables for the high contrast palette on `md` devices using the `:root.md` selector. -The **system** high contrast theme can be accessed by importing `high-contrast.system.css` for the light variant and `high-contrast-dark.system.css` for the dark variant. +The **system** high contrast palette can be accessed by importing `high-contrast.system.css` for the light variant and `high-contrast-dark.system.css` for the dark variant. -The **system** high contrast theme behaves in the following ways: +The **system** high contrast palette behaves in the following ways: -1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a high contrast theme in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher. -2. Setting variables for the high contrast theme on `ios` devices using the `:root.ios` selector. -3. Setting variables for the high contrast theme on `md` devices using the `:root.md` selector. +1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a high contrast palette in the `:root` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector is identical to the selector `html`, except that its [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) is higher. +2. Setting variables for the high contrast palette on `ios` devices using the `:root.ios` selector. +3. Setting variables for the high contrast palette on `md` devices using the `:root.md` selector. 4. Only applies these variables when the [CSS media query for `prefers-contrast`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) is `more`. -The **class** high contrast theme can be accessed by importing `high-contrast.class.css` for the light variant and `high-contrast-dark.class.css` for the dark variant. +The **class** high contrast palette can be accessed by importing `high-contrast.class.css` for the light variant and `high-contrast-dark.class.css` for the dark variant. -The **class** high contrast theme behaves in the following ways: +The **class** high contrast palette behaves in the following ways: -1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a high contrast theme in the `.ion-theme-high-contrast` selector. The `.ion-theme-high-contrast` class must be added to the `html` element in an app. -2. Setting variables for the high contrast theme on `ios` devices using the `.ion-theme-high-contrast.ios` selector. -3. Setting variables for the high contrast theme on `md` devices using the `.ion-theme-high-contrast.md` selector. +1. Sets the [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement a high contrast palette in the `.ion-palette-high-contrast` selector. The `.ion-palette-high-contrast` class must be added to the `html` element in an app. +2. Setting variables for the high contrast palette on `ios` devices using the `.ion-palette-high-contrast.ios` selector. +3. Setting variables for the high contrast palette on `md` devices using the `.ion-palette-high-contrast.md` selector. diff --git a/docs/theming/themes.md b/docs/theming/themes.md index 6d15b3b6872..c69d885aa1d 100644 --- a/docs/theming/themes.md +++ b/docs/theming/themes.md @@ -17,7 +17,7 @@ Ionic provides several global variables that are used throughout components to c ## Application Colors -The application colors are used in multiple places in Ionic. These are useful for easily creating dark themes or themes that match a brand. +The application colors are used in multiple places in Ionic. These are useful for easily creating dark palettes or themes that match a brand. It is important to note that the background and text color variables also require a rgb variable to be set in rgb format. See [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed. @@ -54,11 +54,11 @@ It is important to note that the background and text color variables also requir After exploring different ways to customize the Ionic theme, we found that we couldn't use just one background or text color. In order to imply importance and depth throughout the design, we need to use different shades of the background and text colors. To accommodate this pattern, we created stepped colors. -While updating the background (`--ion-background-color`) and text (`--ion-text-color`) variables will change the look of the app for most components, there are certain Ionic components where it may look off, or broken. This will be more apparent when applying a darker theme. +While updating the background (`--ion-background-color`) and text (`--ion-text-color`) variables will change the look of the app for most components, there are certain Ionic components where it may look off, or broken. This will be more apparent when applying a darker palette. In some components we use a shade darker than the background or lighter than the text. For example, an item heading text may need to be #404040, which is a few shades lighter than our default text color. Meanwhile, the loading component background is a shade darker than white, using #f2f2f2. We use stepped colors in order to define these slight variations. It is important to update the stepped colors when updating the background or text color of an application. -Ionic provides separate step colors for text and background colors so they can be updated separately. This is useful for components that use both text and background stepped colors and allows us to effectively implement the [high contrast theme](./high-contrast-mode). +Ionic provides separate step colors for text and background colors so they can be updated separately. This is useful for components that use both text and background stepped colors and allows us to effectively implement the [high contrast palette](./high-contrast-mode). By default, the Ionic text stepped colors start at the default text color value #000000 and mix with the background color value #ffffff using an increasing percentage. The Ionic background stepped colors start at the default background color value #ffffff and mix with the text color value #000000 using an increasing percentage. The full list of stepped colors is shown in the generator below. diff --git a/static/usage/v8/theming/always-dark-mode/angular/styles_css.md b/static/usage/v8/theming/always-dark-mode/angular/styles_css.md index a2983eb542f..8f15de61b63 100644 --- a/static/usage/v8/theming/always-dark-mode/angular/styles_css.md +++ b/static/usage/v8/theming/always-dark-mode/angular/styles_css.md @@ -27,13 +27,13 @@ @import '@ionic/angular/css/display.css'; /** - * Ionic Dark Theme + * Ionic Dark Palette * ----------------------------------------------------- * For more information, please see: * https://ionicframework.com/docs/theming/dark-mode */ -@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'; */ ``` diff --git a/static/usage/v8/theming/always-dark-mode/demo.html b/static/usage/v8/theming/always-dark-mode/demo.html index a9ccdef3515..30d31d52ffa 100644 --- a/static/usage/v8/theming/always-dark-mode/demo.html +++ b/static/usage/v8/theming/always-dark-mode/demo.html @@ -8,7 +8,7 @@ - + diff --git a/static/usage/v8/theming/always-dark-mode/javascript/index_ts.md b/static/usage/v8/theming/always-dark-mode/javascript/index_ts.md index a060e55840d..bbca989d7af 100644 --- a/static/usage/v8/theming/always-dark-mode/javascript/index_ts.md +++ b/static/usage/v8/theming/always-dark-mode/javascript/index_ts.md @@ -18,15 +18,15 @@ import '@ionic/core/css/flex-utils.css'; import '@ionic/core/css/display.css'; /** - * Ionic Dark Theme + * Ionic Dark Palette * ----------------------------------------------------- * For more information, please see: * https://ionicframework.com/docs/theming/dark-mode */ -import '@ionic/core/css/themes/dark.always.css'; -// import '@ionic/core/css/themes/dark.class.css'; -// import '@ionic/core/css/themes/dark.system.css'; +import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +// import '@ionic/core/css/palettes/dark.system.css'; /* Theme variables */ import './theme/variables.css'; diff --git a/static/usage/v8/theming/always-dark-mode/react/app_tsx.md b/static/usage/v8/theming/always-dark-mode/react/app_tsx.md index 233ae3deb56..ed04b3337a5 100644 --- a/static/usage/v8/theming/always-dark-mode/react/app_tsx.md +++ b/static/usage/v8/theming/always-dark-mode/react/app_tsx.md @@ -19,15 +19,15 @@ import '@ionic/react/css/flex-utils.css'; import '@ionic/react/css/display.css'; /** - * Ionic Dark Theme + * Ionic Dark Palette * ----------------------------------------------------- * For more information, please see: * https://ionicframework.com/docs/theming/dark-mode */ -import '@ionic/react/css/themes/dark.always.css'; -// import '@ionic/react/css/themes/dark.class.css'; -// import '@ionic/react/css/themes/dark.system.css'; +import '@ionic/react/css/palettes/dark.always.css'; +// import '@ionic/react/css/palettes/dark.class.css'; +// import '@ionic/react/css/palettes/dark.system.css'; /* Theme variables */ import './theme/variables.css'; diff --git a/static/usage/v8/theming/always-dark-mode/vue/main_ts.md b/static/usage/v8/theming/always-dark-mode/vue/main_ts.md index ee9cac48753..4b82b084cb7 100644 --- a/static/usage/v8/theming/always-dark-mode/vue/main_ts.md +++ b/static/usage/v8/theming/always-dark-mode/vue/main_ts.md @@ -21,15 +21,15 @@ import '@ionic/vue/css/flex-utils.css'; import '@ionic/vue/css/display.css'; /** - * Ionic Dark Theme + * Ionic Dark Palette * ----------------------------------------------------- * For more information, please see: * https://ionicframework.com/docs/theming/dark-mode */ -import '@ionic/vue/css/themes/dark.always.css'; -// import '@ionic/vue/css/themes/dark.class.css'; -// import '@ionic/vue/css/themes/dark.system.css'; +import '@ionic/vue/css/palettes/dark.always.css'; +// import '@ionic/vue/css/palettes/dark.class.css'; +// import '@ionic/vue/css/palettes/dark.system.css'; /* Theme variables */ import './theme/variables.css'; diff --git a/static/usage/v8/theming/always-high-contrast-mode/angular/styles_css.md b/static/usage/v8/theming/always-high-contrast-mode/angular/styles_css.md index 414ed0c49ce..616b3c7076c 100644 --- a/static/usage/v8/theming/always-high-contrast-mode/angular/styles_css.md +++ b/static/usage/v8/theming/always-high-contrast-mode/angular/styles_css.md @@ -27,11 +27,11 @@ @import '@ionic/angular/css/display.css'; /** - * Ionic High Contrast Theme + * Ionic High Contrast Palette * ----------------------------------------------------- * For more information, please see: * https://ionicframework.com/docs/theming/high-contrast-mode */ -@import '@ionic/angular/css/themes/high-contrast.always.css'; +@import '@ionic/angular/css/palettes/high-contrast.always.css'; ``` diff --git a/static/usage/v8/theming/always-high-contrast-mode/demo.html b/static/usage/v8/theming/always-high-contrast-mode/demo.html index ec74b6c969a..afa98717928 100644 --- a/static/usage/v8/theming/always-high-contrast-mode/demo.html +++ b/static/usage/v8/theming/always-high-contrast-mode/demo.html @@ -10,7 +10,7 @@ diff --git a/static/usage/v8/theming/always-high-contrast-mode/javascript/index_ts.md b/static/usage/v8/theming/always-high-contrast-mode/javascript/index_ts.md index 04a03c25a9c..b394518f50b 100644 --- a/static/usage/v8/theming/always-high-contrast-mode/javascript/index_ts.md +++ b/static/usage/v8/theming/always-high-contrast-mode/javascript/index_ts.md @@ -18,13 +18,13 @@ import '@ionic/core/css/flex-utils.css'; import '@ionic/core/css/display.css'; /** - * Ionic High Contrast Theme + * Ionic High Contrast Palette * ----------------------------------------------------- * For more information, please see: * https://ionicframework.com/docs/theming/high-contrast-mode */ -import '@ionic/core/css/themes/high-contrast.always.css'; +import '@ionic/core/css/palettes/high-contrast.always.css'; defineCustomElements(); ``` diff --git a/static/usage/v8/theming/always-high-contrast-mode/react/app_tsx.md b/static/usage/v8/theming/always-high-contrast-mode/react/app_tsx.md index 1a86e400a69..d9fc3e677fd 100644 --- a/static/usage/v8/theming/always-high-contrast-mode/react/app_tsx.md +++ b/static/usage/v8/theming/always-high-contrast-mode/react/app_tsx.md @@ -19,13 +19,13 @@ import '@ionic/react/css/flex-utils.css'; import '@ionic/react/css/display.css'; /** - * Ionic High Contrast Theme + * Ionic High Contrast Palette * ----------------------------------------------------- * For more information, please see: * https://ionicframework.com/docs/theming/high-contrast-mode */ -import '@ionic/react/css/themes/high-contrast.always.css'; +import '@ionic/react/css/palettes/high-contrast.always.css'; import Example from './main'; diff --git a/static/usage/v8/theming/always-high-contrast-mode/vue/main_ts.md b/static/usage/v8/theming/always-high-contrast-mode/vue/main_ts.md index 1f9b8301773..5c521224bea 100644 --- a/static/usage/v8/theming/always-high-contrast-mode/vue/main_ts.md +++ b/static/usage/v8/theming/always-high-contrast-mode/vue/main_ts.md @@ -21,13 +21,13 @@ import '@ionic/vue/css/flex-utils.css'; import '@ionic/vue/css/display.css'; /** - * Ionic High Contrast Theme + * Ionic High Contrast Palette * ----------------------------------------------------- * For more information, please see: * https://ionicframework.com/docs/theming/high-contrast-mode */ -import '@ionic/vue/css/themes/high-contrast.always.css'; +import '@ionic/vue/css/palettes/high-contrast.always.css'; createApp(App).use(IonicVue).mount('#app'); ``` diff --git a/static/usage/v8/theming/class-dark-mode/angular/example_component_html.md b/static/usage/v8/theming/class-dark-mode/angular/example_component_html.md index 855a77e99a8..dce07804331 100644 --- a/static/usage/v8/theming/class-dark-mode/angular/example_component_html.md +++ b/static/usage/v8/theming/class-dark-mode/angular/example_component_html.md @@ -17,7 +17,7 @@ Appearance - Dark Mode diff --git a/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md index 016569e58fa..3fe6038c370 100644 --- a/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md +++ b/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md @@ -6,34 +6,34 @@ import { Component, OnInit } from '@angular/core'; templateUrl: 'example.component.html', }) export class ExampleComponent implements OnInit { - themeToggle = false; + paletteToggle = false; ngOnInit() { // Use matchMedia to check the user preference const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); - // Initialize the dark theme based on the initial + // Initialize the dark palette based on the initial // value of the prefers-color-scheme media query - this.initializeDarkTheme(prefersDark.matches); + this.initializeDarkPalette(prefersDark.matches); // Listen for changes to the prefers-color-scheme media query - prefersDark.addEventListener('change', (mediaQuery) => this.initializeDarkTheme(mediaQuery.matches)); + prefersDark.addEventListener('change', (mediaQuery) => this.initializeDarkPalette(mediaQuery.matches)); } - // Check/uncheck the toggle and update the theme based on isDark - initializeDarkTheme(isDark) { - this.themeToggle = isDark; - this.toggleDarkTheme(isDark); + // Check/uncheck the toggle and update the palette based on isDark + initializeDarkPalette(isDark) { + this.paletteToggle = isDark; + this.toggleDarkPalette(isDark); } - // Listen for the toggle check/uncheck to toggle the dark theme + // Listen for the toggle check/uncheck to toggle the dark palette toggleChange(ev) { - this.toggleDarkTheme(ev.detail.checked); + this.toggleDarkPalette(ev.detail.checked); } - // Add or remove the "ion-theme-dark" class on the html element - toggleDarkTheme(shouldAdd) { - document.documentElement.classList.toggle('ion-theme-dark', shouldAdd); + // Add or remove the "ion-palette-dark" class on the html element + toggleDarkPalette(shouldAdd) { + document.documentElement.classList.toggle('ion-palette-dark', shouldAdd); } } ``` diff --git a/static/usage/v8/theming/class-dark-mode/angular/global_css.md b/static/usage/v8/theming/class-dark-mode/angular/global_css.md index 83d9fe99158..ac28ad28a5f 100644 --- a/static/usage/v8/theming/class-dark-mode/angular/global_css.md +++ b/static/usage/v8/theming/class-dark-mode/angular/global_css.md @@ -1,5 +1,5 @@ ```css -/* (Optional) This is added to prevent the flashing that happens when toggling between themes */ +/* (Optional) This is added to prevent the flashing that happens when toggling between palettes */ ion-item { --transition: none; } diff --git a/static/usage/v8/theming/class-dark-mode/angular/styles_css.md b/static/usage/v8/theming/class-dark-mode/angular/styles_css.md index cd68c5d4997..bd4b9d3ba5b 100644 --- a/static/usage/v8/theming/class-dark-mode/angular/styles_css.md +++ b/static/usage/v8/theming/class-dark-mode/angular/styles_css.md @@ -27,13 +27,13 @@ @import '@ionic/angular/css/display.css'; /** - * Ionic Dark Theme + * Ionic Dark Palette * ----------------------------------------------------- * For more information, please see: * https://ionicframework.com/docs/theming/dark-mode */ -/* @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'; */ ``` diff --git a/static/usage/v8/theming/class-dark-mode/demo.html b/static/usage/v8/theming/class-dark-mode/demo.html index a9810a5142b..414bfb865a9 100644 --- a/static/usage/v8/theming/class-dark-mode/demo.html +++ b/static/usage/v8/theming/class-dark-mode/demo.html @@ -8,7 +8,7 @@ - + @@ -31,7 +31,7 @@ Appearance - Dark Mode + Dark Mode @@ -65,28 +65,28 @@ diff --git a/static/usage/v8/theming/class-dark-mode/javascript/index_html.md b/static/usage/v8/theming/class-dark-mode/javascript/index_html.md index 3628ba31258..9d453acbb38 100644 --- a/static/usage/v8/theming/class-dark-mode/javascript/index_html.md +++ b/static/usage/v8/theming/class-dark-mode/javascript/index_html.md @@ -17,7 +17,7 @@ Appearance - Dark Mode + Dark Mode @@ -50,28 +50,28 @@