diff --git a/cspell-wordlist.txt b/cspell-wordlist.txt index b9f8543eff6..0889274c70b 100644 --- a/cspell-wordlist.txt +++ b/cspell-wordlist.txt @@ -12,6 +12,7 @@ Swiper Udemy Vetur Wistia +WCAG actionsheet fabs diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md index bd004502f50..fdd9feb7edb 100644 --- a/docs/theming/dark-mode.md +++ b/docs/theming/dark-mode.md @@ -19,7 +19,7 @@ Ionic makes it easy to change the themes of your app, including supporting dark ## Enabling Dark Theme -There are three provided ways to enable the dark theme in an app: **always**, based on **system** settings, or by using a **class**. +There are three provided ways to enable the dark theme in an app: **always**, based on **system** settings, or by using a CSS **class**. ### Always @@ -107,7 +107,7 @@ import '@ionic/vue/css/themes/dark.system.css'; -This sets the [application colors](/docs/theming/themes#application-colors) and [stepped colors](/docs/theming/themes#stepped-colors) when the [CSS media query for `prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) is `dark`. The `prefers-color-scheme` media query is supported by [all modern browsers](https://caniuse.com/#feat=prefers-color-scheme). If support for older browser is required, we recommend using the [class](#class) approach. +This sets the [application colors](/docs/theming/themes#application-colors) and [stepped colors](/docs/theming/themes#stepped-colors) when the [CSS media query for `prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) is `dark`. The `prefers-color-scheme` media query is supported by [all modern browsers](https://caniuse.com/#feat=prefers-color-scheme). If support for 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 dark mode. @@ -123,7 +123,7 @@ import SystemDarkMode from '@site/static/usage/v8/theming/system-dark-mode/index 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. ::: -### Class +### 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: @@ -208,7 +208,7 @@ For developers looking to customize the theme color under the status bar in Safa ## Ionic Dark Theme -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 [class](#class). Each of these methods involves importing the dark theme file with the corresponding name. +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. 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. diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md new file mode 100644 index 00000000000..20fb1a61629 --- /dev/null +++ b/docs/theming/high-contrast-mode.md @@ -0,0 +1,245 @@ +--- +title: Hide Contrast Mode +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + High Contrast Mode to Increase Color Contrast + + + +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. + +## 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. + +## 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**. + +### 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. + + + + + +```css +@import '@ionic/angular/css/themes/high-contrast.always.css'; // Light theme +// @import '@ionic/angular/css/themes/high-contrast.always.css'; // Dark theme +``` + + + + +```typescript +import '@ionic/core/css/themes/high-contrast.always.css'; // Light theme +// import '@ionic/core/css/themes/high-contrast-dark.always.css'; // Dark theme +``` + + + + +```tsx +import '@ionic/react/css/themes/high-contrast.always.css'; // Light theme +// import '@ionic/react/css/themes/high-contrast-dark.always.css'; // Dark theme +``` + + + + +```typescript +import '@ionic/vue/css/themes/high-contrast.always.css'; // Light theme +// import '@ionic/vue/css/themes/high-contrast-dark.always.css'; // Dark theme +``` + + + + + +The high contrast dark theme 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. + +import AlwaysHighContrastMode from '@site/static/usage/v8/theming/always-high-contrast-mode/index.md'; + + + +### 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 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. + + + + + +```css +@import '@ionic/angular/css/themes/high-contrast.system.css'; +@import '@ionic/angular/css/themes/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'; +``` + + + + +```tsx +import '@ionic/react/css/themes/high-contrast.system.css'; +import '@ionic/react/css/themes/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'; +``` + + + + + +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. + +The following example uses the system settings to decide when to show high contrast mode. + +:::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). +::: + +import SystemHighContrastMode from '@site/static/usage/v8/theming/system-high-contrast-mode/index.md'; + + + +:::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. +::: + +### 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: + + + + + +```css +@import '@ionic/angular/css/themes/high-contrast.class.css'; +@import '@ionic/angular/css/themes/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'; +``` + + + + +```tsx +import '@ionic/react/css/themes/high-contrast.class.css'; +import '@ionic/react/css/themes/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'; +``` + + + + + +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. + +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. + +:::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). +::: + +import ClassHighContrastMode from '@site/static/usage/v8/theming/class-high-contrast-mode/index.md'; + + + +:::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 +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. +::: + +## 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. + +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 following provides details on how to customize the high contrast theme 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 theme 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. + + + + + +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 theme 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. +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 theme 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. + + + + diff --git a/sidebars.js b/sidebars.js index bda920ddc64..fc7327499f5 100644 --- a/sidebars.js +++ b/sidebars.js @@ -57,6 +57,7 @@ module.exports = { 'theming/colors', 'theming/themes', 'theming/dark-mode', + 'theming/high-contrast-mode', 'theming/advanced', 'theming/color-generator', ], diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json index 59ddfbfb456..fe141e80860 100644 --- a/static/code/stackblitz/v8/angular/package.json +++ b/static/code/stackblitz/v8/angular/package.json @@ -1,7 +1,7 @@ { "dependencies": { - "@ionic/angular": "7.6.2-dev.11705355381.14b22962", - "@ionic/core": "7.6.2-dev.11705355381.14b22962", + "@ionic/angular": "7.6.7-dev.11707162903.1706e75f", + "@ionic/core": "7.6.7-dev.11707162903.1706e75f", "@angular/platform-browser-dynamic": "17.0.4" } } diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json index 161edec67e0..34a97c08dd8 100644 --- a/static/code/stackblitz/v8/html/package.json +++ b/static/code/stackblitz/v8/html/package.json @@ -1,5 +1,5 @@ { "dependencies": { - "@ionic/core": "7.6.2-dev.11705355381.14b22962" + "@ionic/core": "7.6.7-dev.11707162903.1706e75f" } } diff --git a/static/code/stackblitz/v8/react/package-lock.json b/static/code/stackblitz/v8/react/package-lock.json index 0602a81f632..dda79644117 100644 --- a/static/code/stackblitz/v8/react/package-lock.json +++ b/static/code/stackblitz/v8/react/package-lock.json @@ -8,8 +8,8 @@ "name": "vite-react-typescript", "version": "0.1.0", "dependencies": { - "@ionic/react": "7.6.2-dev.11705355381.14b22962", - "@ionic/react-router": "7.6.2-dev.11705355381.14b22962", + "@ionic/react": "7.6.7-dev.11707162903.1706e75f", + "@ionic/react-router": "7.6.7-dev.11707162903.1706e75f", "@types/node": "^20.0.0", "@types/react": "^18.0.9", "@types/react-dom": "^18.0.4", @@ -683,21 +683,21 @@ } }, "node_modules/@ionic/core": { - "version": "7.6.2-dev.11705355381.14b22962", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.2-dev.11705355381.14b22962.tgz", - "integrity": "sha512-/Vdrgyq8aFr68KaNrChuejCUGppj+IbwR1CmZm9/S0+w12mtCyVM5+6VVq9CLAVi0YG7m2AK2S5ENtK+hv4Ljw==", + "version": "7.6.7-dev.11707162903.1706e75f", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.7-dev.11707162903.1706e75f.tgz", + "integrity": "sha512-Sij/W0wq6vv+1nrIZoqBcnF3H1vggE4pky/tZU2PxuF8lZXredxg9/zEiWCUt7ApHLYBK945IRZ6ZsVJr/scPw==", "dependencies": { - "@stencil/core": "^4.8.2", - "ionicons": "^7.2.1", + "@stencil/core": "^4.10.0", + "ionicons": "^7.2.2", "tslib": "^2.1.0" } }, "node_modules/@ionic/react": { - "version": "7.6.2-dev.11705355381.14b22962", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.2-dev.11705355381.14b22962.tgz", - "integrity": "sha512-sX2BIPGAZPuiyyCkVfOQHTVS1uZrbSBYlkB4sZ8OsosFNvF7cS+lPn74lsmGvFiBEPjk93Un/o86fR2uIfvGvg==", + "version": "7.6.7-dev.11707162903.1706e75f", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.7-dev.11707162903.1706e75f.tgz", + "integrity": "sha512-ZDOwhyYC2TbfBy4OugJ3TbMN4D6z6JAKh//PpYPElSx7UIfI2FNAHdUv9hRjB2vLzVdEZT49FkEELnF6OJCjCQ==", "dependencies": { - "@ionic/core": "7.6.2-dev.11705355381.14b22962", + "@ionic/core": "7.6.7-dev.11707162903.1706e75f", "ionicons": "^7.0.0", "tslib": "*" }, @@ -707,11 +707,11 @@ } }, "node_modules/@ionic/react-router": { - "version": "7.6.2-dev.11705355381.14b22962", - "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.6.2-dev.11705355381.14b22962.tgz", - "integrity": "sha512-06UgqqhgPUV55ekLOWvafEWjXeMXTsmQAnFoGntqTPXeWWeMd9zO4B4DD6grRozkjlpxzP/2N4nzBkP7jCVAVA==", + "version": "7.6.7-dev.11707162903.1706e75f", + "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.6.7-dev.11707162903.1706e75f.tgz", + "integrity": "sha512-q/rbD9rbvnPcSfIrkqLZUpRHI+KYpU16zZdSZ6bast17UkYhyPmpkDsv5Gk4enbybwf8SiEodogkKkHiUsc53A==", "dependencies": { - "@ionic/react": "7.6.2-dev.11705355381.14b22962", + "@ionic/react": "7.6.7-dev.11707162903.1706e75f", "tslib": "*" }, "peerDependencies": { @@ -765,9 +765,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.9.1.tgz", - "integrity": "sha512-FB3vQR2xbX8RkiKdvBRj6jAe2VunKgB4U5hWSbpdcg/GhZrwOhsEgkGUGa8hGm9bgEUpIu16in1zFqziPyBEFw==", + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.1.tgz", + "integrity": "sha512-l7UUCEV+4Yr1i6BL2DGSQPAzM3x/V4Fx9n9Z0/gdAgX11I25xY0MnH5jbQ69ug6ms/8KUV6SouS1R7MjjM/JnQ==", "bin": { "stencil": "bin/stencil" }, @@ -1918,31 +1918,31 @@ "optional": true }, "@ionic/core": { - "version": "7.6.2-dev.11705355381.14b22962", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.2-dev.11705355381.14b22962.tgz", - "integrity": "sha512-/Vdrgyq8aFr68KaNrChuejCUGppj+IbwR1CmZm9/S0+w12mtCyVM5+6VVq9CLAVi0YG7m2AK2S5ENtK+hv4Ljw==", + "version": "7.6.7-dev.11707162903.1706e75f", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.7-dev.11707162903.1706e75f.tgz", + "integrity": "sha512-Sij/W0wq6vv+1nrIZoqBcnF3H1vggE4pky/tZU2PxuF8lZXredxg9/zEiWCUt7ApHLYBK945IRZ6ZsVJr/scPw==", "requires": { - "@stencil/core": "^4.8.2", - "ionicons": "^7.2.1", + "@stencil/core": "^4.10.0", + "ionicons": "^7.2.2", "tslib": "^2.1.0" } }, "@ionic/react": { - "version": "7.6.2-dev.11705355381.14b22962", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.2-dev.11705355381.14b22962.tgz", - "integrity": "sha512-sX2BIPGAZPuiyyCkVfOQHTVS1uZrbSBYlkB4sZ8OsosFNvF7cS+lPn74lsmGvFiBEPjk93Un/o86fR2uIfvGvg==", + "version": "7.6.7-dev.11707162903.1706e75f", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.7-dev.11707162903.1706e75f.tgz", + "integrity": "sha512-ZDOwhyYC2TbfBy4OugJ3TbMN4D6z6JAKh//PpYPElSx7UIfI2FNAHdUv9hRjB2vLzVdEZT49FkEELnF6OJCjCQ==", "requires": { - "@ionic/core": "7.6.2-dev.11705355381.14b22962", + "@ionic/core": "7.6.7-dev.11707162903.1706e75f", "ionicons": "^7.0.0", "tslib": "*" } }, "@ionic/react-router": { - "version": "7.6.2-dev.11705355381.14b22962", - "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.6.2-dev.11705355381.14b22962.tgz", - "integrity": "sha512-06UgqqhgPUV55ekLOWvafEWjXeMXTsmQAnFoGntqTPXeWWeMd9zO4B4DD6grRozkjlpxzP/2N4nzBkP7jCVAVA==", + "version": "7.6.7-dev.11707162903.1706e75f", + "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.6.7-dev.11707162903.1706e75f.tgz", + "integrity": "sha512-q/rbD9rbvnPcSfIrkqLZUpRHI+KYpU16zZdSZ6bast17UkYhyPmpkDsv5Gk4enbybwf8SiEodogkKkHiUsc53A==", "requires": { - "@ionic/react": "7.6.2-dev.11705355381.14b22962", + "@ionic/react": "7.6.7-dev.11707162903.1706e75f", "tslib": "*" } }, @@ -1981,9 +1981,9 @@ } }, "@stencil/core": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.9.1.tgz", - "integrity": "sha512-FB3vQR2xbX8RkiKdvBRj6jAe2VunKgB4U5hWSbpdcg/GhZrwOhsEgkGUGa8hGm9bgEUpIu16in1zFqziPyBEFw==" + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.1.tgz", + "integrity": "sha512-l7UUCEV+4Yr1i6BL2DGSQPAzM3x/V4Fx9n9Z0/gdAgX11I25xY0MnH5jbQ69ug6ms/8KUV6SouS1R7MjjM/JnQ==" }, "@types/babel__core": { "version": "7.20.4", diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json index 413146cac02..145cfc21cc4 100644 --- a/static/code/stackblitz/v8/react/package.json +++ b/static/code/stackblitz/v8/react/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { - "@ionic/react": "7.6.2-dev.11705355381.14b22962", - "@ionic/react-router": "7.6.2-dev.11705355381.14b22962", + "@ionic/react": "7.6.7-dev.11707162903.1706e75f", + "@ionic/react-router": "7.6.7-dev.11707162903.1706e75f", "@types/node": "^20.0.0", "@types/react": "^18.0.9", "@types/react-dom": "^18.0.4", diff --git a/static/code/stackblitz/v8/vue/package-lock.json b/static/code/stackblitz/v8/vue/package-lock.json index b35443c69b5..3806c96ca72 100644 --- a/static/code/stackblitz/v8/vue/package-lock.json +++ b/static/code/stackblitz/v8/vue/package-lock.json @@ -8,8 +8,8 @@ "name": "vite-vue-starter", "version": "0.0.0", "dependencies": { - "@ionic/vue": "7.6.2-dev.11705355381.14b22962", - "@ionic/vue-router": "7.6.2-dev.11705355381.14b22962", + "@ionic/vue": "7.6.7-dev.11707162903.1706e75f", + "@ionic/vue-router": "7.6.7-dev.11707162903.1706e75f", "vue": "^3.2.25", "vue-router": "4.2.5" }, @@ -384,30 +384,30 @@ } }, "node_modules/@ionic/core": { - "version": "7.6.2-dev.11705355381.14b22962", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.2-dev.11705355381.14b22962.tgz", - "integrity": "sha512-/Vdrgyq8aFr68KaNrChuejCUGppj+IbwR1CmZm9/S0+w12mtCyVM5+6VVq9CLAVi0YG7m2AK2S5ENtK+hv4Ljw==", + "version": "7.6.7-dev.11707162903.1706e75f", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.7-dev.11707162903.1706e75f.tgz", + "integrity": "sha512-Sij/W0wq6vv+1nrIZoqBcnF3H1vggE4pky/tZU2PxuF8lZXredxg9/zEiWCUt7ApHLYBK945IRZ6ZsVJr/scPw==", "dependencies": { - "@stencil/core": "^4.8.2", - "ionicons": "^7.2.1", + "@stencil/core": "^4.10.0", + "ionicons": "^7.2.2", "tslib": "^2.1.0" } }, "node_modules/@ionic/vue": { - "version": "7.6.2-dev.11705355381.14b22962", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.2-dev.11705355381.14b22962.tgz", - "integrity": "sha512-HCd2FBTBG3DZaYsuFMFWR54mNXNMSS4SUyxk1f6TCGu/2KlcAvyh2mWxn7DJkSNcrqhNIEB2hxwt4fjDsqVygQ==", + "version": "7.6.7-dev.11707162903.1706e75f", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.7-dev.11707162903.1706e75f.tgz", + "integrity": "sha512-fzqX13uM5vaT5xwBr9sWWo9NNMm3llWSNfLv3ZuDNxMxqiRUXEtbw051SiWu3g76XSqsmOpn17m9xa6J72756Q==", "dependencies": { - "@ionic/core": "7.6.2-dev.11705355381.14b22962", + "@ionic/core": "7.6.7-dev.11707162903.1706e75f", "ionicons": "^7.0.0" } }, "node_modules/@ionic/vue-router": { - "version": "7.6.2-dev.11705355381.14b22962", - "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.6.2-dev.11705355381.14b22962.tgz", - "integrity": "sha512-OE61CIPDYlI1Q3tK9+iqHgJn77uMP8lXkyCGonzn9OwqwgqQlzRjp70qYx4Jtfgeo7pNuHkRwYGzBHjDvPh+gA==", + "version": "7.6.7-dev.11707162903.1706e75f", + "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.6.7-dev.11707162903.1706e75f.tgz", + "integrity": "sha512-XZ3It6klM8/aJ+gTaNn36JWZU2+nUqQjsjQ8kwrK85jD0f9CY7tn8RXbyP0dmVjmp8miRbHcqN/DEbQtUsQC3Q==", "dependencies": { - "@ionic/vue": "7.6.2-dev.11705355381.14b22962" + "@ionic/vue": "7.6.7-dev.11707162903.1706e75f" } }, "node_modules/@jridgewell/sourcemap-codec": { @@ -416,9 +416,9 @@ "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" }, "node_modules/@stencil/core": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.9.1.tgz", - "integrity": "sha512-FB3vQR2xbX8RkiKdvBRj6jAe2VunKgB4U5hWSbpdcg/GhZrwOhsEgkGUGa8hGm9bgEUpIu16in1zFqziPyBEFw==", + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.1.tgz", + "integrity": "sha512-l7UUCEV+4Yr1i6BL2DGSQPAzM3x/V4Fx9n9Z0/gdAgX11I25xY0MnH5jbQ69ug6ms/8KUV6SouS1R7MjjM/JnQ==", "bin": { "stencil": "bin/stencil" }, @@ -1145,30 +1145,30 @@ "optional": true }, "@ionic/core": { - "version": "7.6.2-dev.11705355381.14b22962", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.2-dev.11705355381.14b22962.tgz", - "integrity": "sha512-/Vdrgyq8aFr68KaNrChuejCUGppj+IbwR1CmZm9/S0+w12mtCyVM5+6VVq9CLAVi0YG7m2AK2S5ENtK+hv4Ljw==", + "version": "7.6.7-dev.11707162903.1706e75f", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.7-dev.11707162903.1706e75f.tgz", + "integrity": "sha512-Sij/W0wq6vv+1nrIZoqBcnF3H1vggE4pky/tZU2PxuF8lZXredxg9/zEiWCUt7ApHLYBK945IRZ6ZsVJr/scPw==", "requires": { - "@stencil/core": "^4.8.2", - "ionicons": "^7.2.1", + "@stencil/core": "^4.10.0", + "ionicons": "^7.2.2", "tslib": "^2.1.0" } }, "@ionic/vue": { - "version": "7.6.2-dev.11705355381.14b22962", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.2-dev.11705355381.14b22962.tgz", - "integrity": "sha512-HCd2FBTBG3DZaYsuFMFWR54mNXNMSS4SUyxk1f6TCGu/2KlcAvyh2mWxn7DJkSNcrqhNIEB2hxwt4fjDsqVygQ==", + "version": "7.6.7-dev.11707162903.1706e75f", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.7-dev.11707162903.1706e75f.tgz", + "integrity": "sha512-fzqX13uM5vaT5xwBr9sWWo9NNMm3llWSNfLv3ZuDNxMxqiRUXEtbw051SiWu3g76XSqsmOpn17m9xa6J72756Q==", "requires": { - "@ionic/core": "7.6.2-dev.11705355381.14b22962", + "@ionic/core": "7.6.7-dev.11707162903.1706e75f", "ionicons": "^7.0.0" } }, "@ionic/vue-router": { - "version": "7.6.2-dev.11705355381.14b22962", - "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.6.2-dev.11705355381.14b22962.tgz", - "integrity": "sha512-OE61CIPDYlI1Q3tK9+iqHgJn77uMP8lXkyCGonzn9OwqwgqQlzRjp70qYx4Jtfgeo7pNuHkRwYGzBHjDvPh+gA==", + "version": "7.6.7-dev.11707162903.1706e75f", + "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.6.7-dev.11707162903.1706e75f.tgz", + "integrity": "sha512-XZ3It6klM8/aJ+gTaNn36JWZU2+nUqQjsjQ8kwrK85jD0f9CY7tn8RXbyP0dmVjmp8miRbHcqN/DEbQtUsQC3Q==", "requires": { - "@ionic/vue": "7.6.2-dev.11705355381.14b22962" + "@ionic/vue": "7.6.7-dev.11707162903.1706e75f" } }, "@jridgewell/sourcemap-codec": { @@ -1177,9 +1177,9 @@ "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" }, "@stencil/core": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.9.1.tgz", - "integrity": "sha512-FB3vQR2xbX8RkiKdvBRj6jAe2VunKgB4U5hWSbpdcg/GhZrwOhsEgkGUGa8hGm9bgEUpIu16in1zFqziPyBEFw==" + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.1.tgz", + "integrity": "sha512-l7UUCEV+4Yr1i6BL2DGSQPAzM3x/V4Fx9n9Z0/gdAgX11I25xY0MnH5jbQ69ug6ms/8KUV6SouS1R7MjjM/JnQ==" }, "@vitejs/plugin-vue": { "version": "4.5.1", diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json index 9ae9b56723f..e1d24ef71c1 100644 --- a/static/code/stackblitz/v8/vue/package.json +++ b/static/code/stackblitz/v8/vue/package.json @@ -8,8 +8,8 @@ "preview": "vite preview" }, "dependencies": { - "@ionic/vue": "7.6.2-dev.11705355381.14b22962", - "@ionic/vue-router": "7.6.2-dev.11705355381.14b22962", + "@ionic/vue": "7.6.7-dev.11707162903.1706e75f", + "@ionic/vue-router": "7.6.7-dev.11707162903.1706e75f", "vue": "^3.2.25", "vue-router": "4.2.5" }, diff --git a/static/usage/v8/theming/always-high-contrast-mode/angular/example_component_html.md b/static/usage/v8/theming/always-high-contrast-mode/angular/example_component_html.md new file mode 100644 index 00000000000..3601ee18053 --- /dev/null +++ b/static/usage/v8/theming/always-high-contrast-mode/angular/example_component_html.md @@ -0,0 +1,45 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + +``` 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 new file mode 100644 index 00000000000..414ed0c49ce --- /dev/null +++ b/static/usage/v8/theming/always-high-contrast-mode/angular/styles_css.md @@ -0,0 +1,37 @@ +```css +/* + * App Global CSS + * ---------------------------------------------------------------------------- + * Put style rules here that you want to apply globally. These styles are for + * the entire app and not just one component. Additionally, this file can be + * used as an entry point to import other CSS/Sass files to be included in the + * output CSS. + * For more information on global stylesheets, visit the documentation: + * https://ionicframework.com/docs/layout/global-stylesheets + */ + +/* Core CSS required for Ionic components to work properly */ +@import '@ionic/angular/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +@import '@ionic/angular/css/normalize.css'; +@import '@ionic/angular/css/structure.css'; +@import '@ionic/angular/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +@import '@ionic/angular/css/padding.css'; +@import '@ionic/angular/css/float-elements.css'; +@import '@ionic/angular/css/text-alignment.css'; +@import '@ionic/angular/css/text-transformation.css'; +@import '@ionic/angular/css/flex-utils.css'; +@import '@ionic/angular/css/display.css'; + +/** + * Ionic High Contrast Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +@import '@ionic/angular/css/themes/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 new file mode 100644 index 00000000000..cfae52d1aa4 --- /dev/null +++ b/static/usage/v8/theming/always-high-contrast-mode/demo.html @@ -0,0 +1,70 @@ + + + + + + Theming + + + + + + + + + + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + + + + diff --git a/static/usage/v8/theming/always-high-contrast-mode/index.md b/static/usage/v8/theming/always-high-contrast-mode/index.md new file mode 100644 index 00000000000..c418c914696 --- /dev/null +++ b/static/usage/v8/theming/always-high-contrast-mode/index.md @@ -0,0 +1,46 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_app_tsx from './react/app_tsx.md'; +import react_main_tsx from './react/main_tsx.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_styles_css from './angular/styles_css.md'; + +import vue_example from './vue/example_vue.md'; +import vue_main_ts from './vue/main_ts.md'; + + diff --git a/static/usage/v8/theming/always-high-contrast-mode/javascript/index_html.md b/static/usage/v8/theming/always-high-contrast-mode/javascript/index_html.md new file mode 100644 index 00000000000..9660e319e39 --- /dev/null +++ b/static/usage/v8/theming/always-high-contrast-mode/javascript/index_html.md @@ -0,0 +1,45 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + +``` 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 new file mode 100644 index 00000000000..04a03c25a9c --- /dev/null +++ b/static/usage/v8/theming/always-high-contrast-mode/javascript/index_ts.md @@ -0,0 +1,30 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic High Contrast Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +import '@ionic/core/css/themes/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 new file mode 100644 index 00000000000..1a86e400a69 --- /dev/null +++ b/static/usage/v8/theming/always-high-contrast-mode/react/app_tsx.md @@ -0,0 +1,41 @@ +```tsx +import React from 'react'; +import { setupIonicReact, IonApp } from '@ionic/react'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/react/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/react/css/normalize.css'; +import '@ionic/react/css/structure.css'; +import '@ionic/react/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/react/css/padding.css'; +import '@ionic/react/css/float-elements.css'; +import '@ionic/react/css/text-alignment.css'; +import '@ionic/react/css/text-transformation.css'; +import '@ionic/react/css/flex-utils.css'; +import '@ionic/react/css/display.css'; + +/** + * Ionic High Contrast Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +import '@ionic/react/css/themes/high-contrast.always.css'; + +import Example from './main'; + +setupIonicReact(); + +export default function App() { + return ( + + + + ); +} +``` diff --git a/static/usage/v8/theming/always-high-contrast-mode/react/main_tsx.md b/static/usage/v8/theming/always-high-contrast-mode/react/main_tsx.md new file mode 100644 index 00000000000..1c4eaa1e3a0 --- /dev/null +++ b/static/usage/v8/theming/always-high-contrast-mode/react/main_tsx.md @@ -0,0 +1,76 @@ +```tsx +import React from 'react'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/react'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + + True Tone + + + + + + + Night Shift + + 9:00 PM to 8:00 AM + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/theming/always-high-contrast-mode/vue/example_vue.md b/static/usage/v8/theming/always-high-contrast-mode/vue/example_vue.md new file mode 100644 index 00000000000..d4946f4e440 --- /dev/null +++ b/static/usage/v8/theming/always-high-contrast-mode/vue/example_vue.md @@ -0,0 +1,90 @@ +```html + + + +``` 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 new file mode 100644 index 00000000000..1f9b8301773 --- /dev/null +++ b/static/usage/v8/theming/always-high-contrast-mode/vue/main_ts.md @@ -0,0 +1,33 @@ +```ts +import { createApp } from 'vue'; +import { IonicVue } from '@ionic/vue'; + +import App from './App.vue'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/vue/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/vue/css/normalize.css'; +import '@ionic/vue/css/structure.css'; +import '@ionic/vue/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/vue/css/padding.css'; +import '@ionic/vue/css/float-elements.css'; +import '@ionic/vue/css/text-alignment.css'; +import '@ionic/vue/css/text-transformation.css'; +import '@ionic/vue/css/flex-utils.css'; +import '@ionic/vue/css/display.css'; + +/** + * Ionic High Contrast Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +import '@ionic/vue/css/themes/high-contrast.always.css'; + +createApp(App).use(IonicVue).mount('#app'); +``` diff --git a/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_html.md b/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_html.md new file mode 100644 index 00000000000..fc419f03c63 --- /dev/null +++ b/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_html.md @@ -0,0 +1,61 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + + Dark Mode + + + High Contrast Mode + + + + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + +``` diff --git a/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md b/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md new file mode 100644 index 00000000000..a468d094169 --- /dev/null +++ b/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md @@ -0,0 +1,61 @@ +```ts +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent implements OnInit { + darkThemeToggle = false; + highContrastThemeToggle = false; + + ngOnInit() { + // Use matchMedia to check the user preference + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); + const prefersHighContrast = window.matchMedia('(prefers-contrast: more)'); + + // Initialize the dark and high contrast themes based on the initial + // value of the media queries + this.initializeDarkTheme(prefersDark.matches); + this.initializeHighContrastTheme(prefersHighContrast.matches); + + // Listen for changes to the media queries + prefersDark.addEventListener('change', (mediaQuery) => this.initializeDarkTheme(mediaQuery.matches)); + prefersHighContrast.addEventListener('change', (mediaQuery) => + this.initializeHighContrastTheme(mediaQuery.matches) + ); + } + + // Check/uncheck the toggle and update the theme based on isDark + initializeDarkTheme(isDark) { + this.darkThemeToggle = isDark; + this.toggleDarkTheme(isDark); + } + + // Check/uncheck the toggle and update the theme based on isHighContrast + initializeHighContrastTheme(isHighContrast) { + this.highContrastThemeToggle = isHighContrast; + this.toggleHighContrastTheme(isHighContrast); + } + + // Listen for the toggle check/uncheck to toggle the dark theme + darkThemeToggleChange(ev) { + this.toggleDarkTheme(ev.detail.checked); + } + + // Listen for the toggle check/uncheck to toggle the high contrast theme + highContrastThemeToggleChange(ev) { + this.toggleHighContrastTheme(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-theme-high-contrast" class on the html element + toggleHighContrastTheme(shouldAdd) { + document.documentElement.classList.toggle('ion-theme-high-contrast', shouldAdd); + } +} +``` diff --git a/static/usage/v8/theming/class-high-contrast-mode/angular/global_css.md b/static/usage/v8/theming/class-high-contrast-mode/angular/global_css.md new file mode 100644 index 00000000000..83d9fe99158 --- /dev/null +++ b/static/usage/v8/theming/class-high-contrast-mode/angular/global_css.md @@ -0,0 +1,6 @@ +```css +/* (Optional) This is added to prevent the flashing that happens when toggling between themes */ +ion-item { + --transition: none; +} +``` diff --git a/static/usage/v8/theming/class-high-contrast-mode/angular/styles_css.md b/static/usage/v8/theming/class-high-contrast-mode/angular/styles_css.md new file mode 100644 index 00000000000..736e7d9adee --- /dev/null +++ b/static/usage/v8/theming/class-high-contrast-mode/angular/styles_css.md @@ -0,0 +1,40 @@ +```css +/* + * App Global CSS + * ---------------------------------------------------------------------------- + * Put style rules here that you want to apply globally. These styles are for + * the entire app and not just one component. Additionally, this file can be + * used as an entry point to import other CSS/Sass files to be included in the + * output CSS. + * For more information on global stylesheets, visit the documentation: + * https://ionicframework.com/docs/layout/global-stylesheets + */ + +/* Core CSS required for Ionic components to work properly */ +@import '@ionic/angular/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +@import '@ionic/angular/css/normalize.css'; +@import '@ionic/angular/css/structure.css'; +@import '@ionic/angular/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +@import '@ionic/angular/css/padding.css'; +@import '@ionic/angular/css/float-elements.css'; +@import '@ionic/angular/css/text-alignment.css'; +@import '@ionic/angular/css/text-transformation.css'; +@import '@ionic/angular/css/flex-utils.css'; +@import '@ionic/angular/css/display.css'; + +/** + * Ionic Dark and High Contrast Themes + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +@import '@ionic/angular/css/themes/dark.class.css'; +@import '@ionic/angular/css/themes/high-contrast.class.css'; +@import '@ionic/angular/css/themes/high-contrast-dark.class.css'; +``` diff --git a/static/usage/v8/theming/class-high-contrast-mode/demo.html b/static/usage/v8/theming/class-high-contrast-mode/demo.html new file mode 100644 index 00000000000..d478d1f7271 --- /dev/null +++ b/static/usage/v8/theming/class-high-contrast-mode/demo.html @@ -0,0 +1,151 @@ + + + + + + Theming + + + + + + + + + + + + + + + + + Display + + + + + + + + + + Appearance + + + Dark Mode + + + High Contrast Mode + + + + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + + + + + + + + diff --git a/static/usage/v8/theming/class-high-contrast-mode/index.md b/static/usage/v8/theming/class-high-contrast-mode/index.md new file mode 100644 index 00000000000..21da1d4301f --- /dev/null +++ b/static/usage/v8/theming/class-high-contrast-mode/index.md @@ -0,0 +1,52 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_app_tsx from './react/app_tsx.md'; +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; +import angular_styles_css from './angular/styles_css.md'; + +import vue_example from './vue/example_vue.md'; +import vue_main_ts from './vue/main_ts.md'; + + diff --git a/static/usage/v8/theming/class-high-contrast-mode/javascript/index_html.md b/static/usage/v8/theming/class-high-contrast-mode/javascript/index_html.md new file mode 100644 index 00000000000..8188f34e829 --- /dev/null +++ b/static/usage/v8/theming/class-high-contrast-mode/javascript/index_html.md @@ -0,0 +1,111 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + + Dark Mode + + + High Contrast Mode + + + + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + + + + + +``` diff --git a/static/usage/v8/theming/class-high-contrast-mode/javascript/index_ts.md b/static/usage/v8/theming/class-high-contrast-mode/javascript/index_ts.md new file mode 100644 index 00000000000..19ec3bcaacf --- /dev/null +++ b/static/usage/v8/theming/class-high-contrast-mode/javascript/index_ts.md @@ -0,0 +1,33 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark and High Contrast Themes + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +import '@ionic/core/css/themes/dark.class.css'; +import '@ionic/core/css/themes/high-contrast.class.css'; +import '@ionic/core/css/themes/high-contrast-dark.class.css'; + +defineCustomElements(); +``` diff --git a/static/usage/v8/theming/class-high-contrast-mode/react/app_tsx.md b/static/usage/v8/theming/class-high-contrast-mode/react/app_tsx.md new file mode 100644 index 00000000000..28b411bce77 --- /dev/null +++ b/static/usage/v8/theming/class-high-contrast-mode/react/app_tsx.md @@ -0,0 +1,44 @@ +```tsx +import React from 'react'; +import { setupIonicReact, IonApp } from '@ionic/react'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/react/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/react/css/normalize.css'; +import '@ionic/react/css/structure.css'; +import '@ionic/react/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/react/css/padding.css'; +import '@ionic/react/css/float-elements.css'; +import '@ionic/react/css/text-alignment.css'; +import '@ionic/react/css/text-transformation.css'; +import '@ionic/react/css/flex-utils.css'; +import '@ionic/react/css/display.css'; + +/** + * Ionic Dark and High Contrast Themes + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +import '@ionic/react/css/themes/dark.class.css'; +import '@ionic/react/css/themes/high-contrast.class.css'; +import '@ionic/react/css/themes/high-contrast-dark.class.css'; + +import Example from './main'; + +setupIonicReact(); + +export default function App() { + return ( + + + + ); +} +``` diff --git a/static/usage/v8/theming/class-high-contrast-mode/react/main_css.md b/static/usage/v8/theming/class-high-contrast-mode/react/main_css.md new file mode 100644 index 00000000000..83d9fe99158 --- /dev/null +++ b/static/usage/v8/theming/class-high-contrast-mode/react/main_css.md @@ -0,0 +1,6 @@ +```css +/* (Optional) This is added to prevent the flashing that happens when toggling between themes */ +ion-item { + --transition: none; +} +``` diff --git a/static/usage/v8/theming/class-high-contrast-mode/react/main_tsx.md b/static/usage/v8/theming/class-high-contrast-mode/react/main_tsx.md new file mode 100644 index 00000000000..f20cd63e321 --- /dev/null +++ b/static/usage/v8/theming/class-high-contrast-mode/react/main_tsx.md @@ -0,0 +1,144 @@ +```tsx +import React, { useEffect, useState } from 'react'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/react'; +import type { ToggleCustomEvent } from '@ionic/react'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + const [darkThemeToggle, setDarkThemeToggle] = useState(false); + const [highContrastThemeToggle, setHighContrastThemeToggle] = useState(false); + + // Listen for the toggle check/uncheck to toggle the themes + const darkThemeToggleChange = (ev: ToggleCustomEvent) => { + toggleDarkTheme(ev.detail.checked); + }; + + const highContrastThemeToggleChange = (ev: ToggleCustomEvent) => { + toggleHighContrastTheme(ev.detail.checked); + }; + + // Add or remove the "ion-theme-dark" class on the html element + const toggleDarkTheme = (shouldAdd: boolean) => { + document.documentElement.classList.toggle('ion-theme-dark', shouldAdd); + }; + + // Add or remove the "ion-theme-high-contrast" class on the html element + const toggleHighContrastTheme = (shouldAdd: boolean) => { + document.documentElement.classList.toggle('ion-theme-high-contrast', shouldAdd); + }; + + // Check/uncheck the toggle and update the theme + const initializeDarkTheme = (isDark: boolean) => { + setDarkThemeToggle(isDark); + toggleDarkTheme(isDark); + }; + + const initializeHighContrastTheme = (isHighContrast: boolean) => { + setHighContrastThemeToggle(isHighContrast); + toggleHighContrastTheme(isHighContrast); + }; + + useEffect(() => { + // Use matchMedia to check the user preference + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); + const prefersHighContrast = window.matchMedia('(prefers-contrast: more)'); + + // Initialize the dark theme based on the initial + // value of the media queries + initializeDarkTheme(prefersDark.matches); + initializeHighContrastTheme(prefersHighContrast.matches); + + // Listen for changes to the media queries + prefersDark.addEventListener('change', (mediaQuery) => initializeDarkTheme(mediaQuery.matches)); + prefersHighContrast.addEventListener('change', (mediaQuery) => initializeHighContrastTheme(mediaQuery.matches)); + }, []); + + return ( + <> + + + + + + Display + + + + + + + + + + Appearance + + + + Dark Mode + + + + + High Contrast Mode + + + + + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + + True Tone + + + + + + + Night Shift + + 9:00 PM to 8:00 AM + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/theming/class-high-contrast-mode/vue/example_vue.md b/static/usage/v8/theming/class-high-contrast-mode/vue/example_vue.md new file mode 100644 index 00000000000..26fd2ae08d5 --- /dev/null +++ b/static/usage/v8/theming/class-high-contrast-mode/vue/example_vue.md @@ -0,0 +1,165 @@ +```html + + + + + +``` diff --git a/static/usage/v8/theming/class-high-contrast-mode/vue/main_ts.md b/static/usage/v8/theming/class-high-contrast-mode/vue/main_ts.md new file mode 100644 index 00000000000..3fefcdac66b --- /dev/null +++ b/static/usage/v8/theming/class-high-contrast-mode/vue/main_ts.md @@ -0,0 +1,36 @@ +```ts +import { createApp } from 'vue'; +import { IonicVue } from '@ionic/vue'; + +import App from './App.vue'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/vue/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/vue/css/normalize.css'; +import '@ionic/vue/css/structure.css'; +import '@ionic/vue/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/vue/css/padding.css'; +import '@ionic/vue/css/float-elements.css'; +import '@ionic/vue/css/text-alignment.css'; +import '@ionic/vue/css/text-transformation.css'; +import '@ionic/vue/css/flex-utils.css'; +import '@ionic/vue/css/display.css'; + +/** + * Ionic Dark and High Contrast Themes + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +import '@ionic/vue/css/themes/dark.class.css'; +import '@ionic/vue/css/themes/high-contrast.class.css'; +import '@ionic/vue/css/themes/high-contrast-dark.class.css'; + +createApp(App).use(IonicVue).mount('#app'); +``` diff --git a/static/usage/v8/theming/system-high-contrast-mode/angular/example_component_html.md b/static/usage/v8/theming/system-high-contrast-mode/angular/example_component_html.md new file mode 100644 index 00000000000..3601ee18053 --- /dev/null +++ b/static/usage/v8/theming/system-high-contrast-mode/angular/example_component_html.md @@ -0,0 +1,45 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + +``` diff --git a/static/usage/v8/theming/system-high-contrast-mode/angular/styles_css.md b/static/usage/v8/theming/system-high-contrast-mode/angular/styles_css.md new file mode 100644 index 00000000000..524ce97b135 --- /dev/null +++ b/static/usage/v8/theming/system-high-contrast-mode/angular/styles_css.md @@ -0,0 +1,40 @@ +```css +/* + * App Global CSS + * ---------------------------------------------------------------------------- + * Put style rules here that you want to apply globally. These styles are for + * the entire app and not just one component. Additionally, this file can be + * used as an entry point to import other CSS/Sass files to be included in the + * output CSS. + * For more information on global stylesheets, visit the documentation: + * https://ionicframework.com/docs/layout/global-stylesheets + */ + +/* Core CSS required for Ionic components to work properly */ +@import '@ionic/angular/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +@import '@ionic/angular/css/normalize.css'; +@import '@ionic/angular/css/structure.css'; +@import '@ionic/angular/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +@import '@ionic/angular/css/padding.css'; +@import '@ionic/angular/css/float-elements.css'; +@import '@ionic/angular/css/text-alignment.css'; +@import '@ionic/angular/css/text-transformation.css'; +@import '@ionic/angular/css/flex-utils.css'; +@import '@ionic/angular/css/display.css'; + +/** + * Ionic Dark and High Contrast Themes + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +@import '@ionic/angular/css/themes/dark.system.css'; +@import '@ionic/angular/css/themes/high-contrast.system.css'; +@import '@ionic/angular/css/themes/high-contrast-dark.system.css'; +``` diff --git a/static/usage/v8/theming/system-high-contrast-mode/demo.html b/static/usage/v8/theming/system-high-contrast-mode/demo.html new file mode 100644 index 00000000000..198681c16cf --- /dev/null +++ b/static/usage/v8/theming/system-high-contrast-mode/demo.html @@ -0,0 +1,78 @@ + + + + + + Theming + + + + + + + + + + + + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + + + + diff --git a/static/usage/v8/theming/system-high-contrast-mode/index.md b/static/usage/v8/theming/system-high-contrast-mode/index.md new file mode 100644 index 00000000000..88179ede2d8 --- /dev/null +++ b/static/usage/v8/theming/system-high-contrast-mode/index.md @@ -0,0 +1,46 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_app_tsx from './react/app_tsx.md'; +import react_main_tsx from './react/main_tsx.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_styles_css from './angular/styles_css.md'; + +import vue_example from './vue/example_vue.md'; +import vue_main_ts from './vue/main_ts.md'; + + diff --git a/static/usage/v8/theming/system-high-contrast-mode/javascript/index_html.md b/static/usage/v8/theming/system-high-contrast-mode/javascript/index_html.md new file mode 100644 index 00000000000..9660e319e39 --- /dev/null +++ b/static/usage/v8/theming/system-high-contrast-mode/javascript/index_html.md @@ -0,0 +1,45 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + +``` diff --git a/static/usage/v8/theming/system-high-contrast-mode/javascript/index_ts.md b/static/usage/v8/theming/system-high-contrast-mode/javascript/index_ts.md new file mode 100644 index 00000000000..82317812454 --- /dev/null +++ b/static/usage/v8/theming/system-high-contrast-mode/javascript/index_ts.md @@ -0,0 +1,33 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark and High Contrast Themes + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +import '@ionic/core/css/themes/dark.system.css'; +import '@ionic/core/css/themes/high-contrast.system.css'; +import '@ionic/core/css/themes/high-contrast-dark.system.css'; + +defineCustomElements(); +``` diff --git a/static/usage/v8/theming/system-high-contrast-mode/react/app_tsx.md b/static/usage/v8/theming/system-high-contrast-mode/react/app_tsx.md new file mode 100644 index 00000000000..02510a04c68 --- /dev/null +++ b/static/usage/v8/theming/system-high-contrast-mode/react/app_tsx.md @@ -0,0 +1,44 @@ +```tsx +import React from 'react'; +import { setupIonicReact, IonApp } from '@ionic/react'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/react/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/react/css/normalize.css'; +import '@ionic/react/css/structure.css'; +import '@ionic/react/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/react/css/padding.css'; +import '@ionic/react/css/float-elements.css'; +import '@ionic/react/css/text-alignment.css'; +import '@ionic/react/css/text-transformation.css'; +import '@ionic/react/css/flex-utils.css'; +import '@ionic/react/css/display.css'; + +/** + * Ionic Dark and High Contrast Themes + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +import '@ionic/react/css/themes/dark.system.css'; +import '@ionic/react/css/themes/high-contrast.system.css'; +import '@ionic/react/css/themes/high-contrast-dark.system.css'; + +import Example from './main'; + +setupIonicReact(); + +export default function App() { + return ( + + + + ); +} +``` diff --git a/static/usage/v8/theming/system-high-contrast-mode/react/main_tsx.md b/static/usage/v8/theming/system-high-contrast-mode/react/main_tsx.md new file mode 100644 index 00000000000..1c4eaa1e3a0 --- /dev/null +++ b/static/usage/v8/theming/system-high-contrast-mode/react/main_tsx.md @@ -0,0 +1,76 @@ +```tsx +import React from 'react'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/react'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + + True Tone + + + + + + + Night Shift + + 9:00 PM to 8:00 AM + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/theming/system-high-contrast-mode/vue/example_vue.md b/static/usage/v8/theming/system-high-contrast-mode/vue/example_vue.md new file mode 100644 index 00000000000..d4946f4e440 --- /dev/null +++ b/static/usage/v8/theming/system-high-contrast-mode/vue/example_vue.md @@ -0,0 +1,90 @@ +```html + + + +``` diff --git a/static/usage/v8/theming/system-high-contrast-mode/vue/main_ts.md b/static/usage/v8/theming/system-high-contrast-mode/vue/main_ts.md new file mode 100644 index 00000000000..b3ab3c49953 --- /dev/null +++ b/static/usage/v8/theming/system-high-contrast-mode/vue/main_ts.md @@ -0,0 +1,39 @@ +```ts +import { createApp } from 'vue'; +import { IonicVue } from '@ionic/vue'; + +import App from './App.vue'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/vue/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/vue/css/normalize.css'; +import '@ionic/vue/css/structure.css'; +import '@ionic/vue/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/vue/css/padding.css'; +import '@ionic/vue/css/float-elements.css'; +import '@ionic/vue/css/text-alignment.css'; +import '@ionic/vue/css/text-transformation.css'; +import '@ionic/vue/css/flex-utils.css'; +import '@ionic/vue/css/display.css'; + +/** + * Ionic Dark and High Contrast Themes + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +import '@ionic/vue/css/themes/dark.system.css'; +import '@ionic/vue/css/themes/high-contrast.system.css'; +import '@ionic/vue/css/themes/high-contrast-dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +createApp(App).use(IonicVue).mount('#app'); +```