From 51d3849417f55a3b2168804ba518247a4531191e Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 5 Feb 2024 14:44:11 -0500 Subject: [PATCH 01/40] docs(high-contrast): add first pass --- docs/theming/high-contrast-mode.md | 754 +++++++++++++++++++++++++++++ 1 file changed, 754 insertions(+) create mode 100644 docs/theming/high-contrast-mode.md diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md new file mode 100644 index 00000000000..d2260e9e0c4 --- /dev/null +++ b/docs/theming/high-contrast-mode.md @@ -0,0 +1,754 @@ +--- +title: Hide Contrast Mode +initialTab: 'preview' +inlineHtmlPreviews: true +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + High Contrast Mode to Increase Color Contrast + + + +Ionic ships with themes for increased contrast for users with low vision. These themes work by increasing the contrast between foreground content, such as text, and background content, such as UI components. Ionic provides light and dark variants for high contrast. + +## 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 **class**. + +### Always + +The default theme provided with Ionic Framework also uses the default color contrast levels. The high contrast theme can be enabled by importing the following stylesheet in the appropriate files: + + + + + +```css +@import '@ionic/angular/css/themes/high-contrast.always.css'; +``` + + + + +```ts +import '@ionic/core/css/themes/high-contrast.always.css'; +``` + + + + +```tsx +import '@ionic/react/css/themes/high-contrast.always.css'; +``` + + + + +```ts +import '@ionic/vue/css/themes/high-contrast.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 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 system settings for high contrast or dark mode. + +import AlwaysHighContrastMode from '@site/static/usage/v8/theming/always-high-contrast-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. +::: + +### 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 imports both the light and dark high contrast themes. The dark high contrast theme will be applied using a combination of the user's contrast preference and [dark mode preference](./dark-mode#system). + + + + + +```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 sets the [application colors](/docs/theming/themes#application-colors) and [stepped colors](/docs/theming/themes#stepped-colors) 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 [class](#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 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. +::: + +### 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: + + + + + +```css +@import '@ionic/angular/css/themes/dark.class.css'; +``` + + + + +```ts +import '@ionic/core/css/themes/dark.class.css'; +``` + + + + +```tsx +import '@ionic/react/css/themes/dark.class.css'; +``` + + + + +```ts +import '@ionic/vue/css/themes/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. + +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. + +:::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). +::: + +import ClassDarkMode from '@site/static/usage/v8/theming/class-dark-mode/index.md'; + + + +:::caution Important +The `.ion-theme-dark` class **must** be added to the `html` element in order to work with the imported dark theme. +::: + +## 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. + +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: + +```html + +``` + +This allows the page to indicate which color scheme it is comfortable being rendered with. Alternatively, you can add the following CSS to do this on a per-element basis: + +```css +color-scheme: light dark; +``` + +| Default scrollbar | Scrollbar with `color-scheme` | +| ------------------------------------------------------------------------ | -------------------------------------------------------------------- | +| ![Application without color-scheme](/img/theming/color-scheme-light.png) | ![Application with color-scheme](/img/theming/color-scheme-dark.png) | + +For more information regarding `color-scheme` please see https://web.dev/color-scheme/. + +:::note +`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, see [Keyboard Documentation](../developing/keyboard.md#dark-mode). +::: + +:::note +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 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. + +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 **always** dark theme 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. + +:::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. +::: + +```css +:root { + --ion-color-primary: #4d8dff; + --ion-color-primary-rgb: 77, 141, 255; + --ion-color-primary-contrast: #000000; + --ion-color-primary-contrast-rgb: 0, 0, 0; + --ion-color-primary-shade: #447ce0; + --ion-color-primary-tint: #5f98ff; + + --ion-color-secondary: #62bdff; + --ion-color-secondary-rgb: 98, 189, 255; + --ion-color-secondary-contrast: #000000; + --ion-color-secondary-contrast-rgb: 0, 0, 0; + --ion-color-secondary-shade: #56a6e0; + --ion-color-secondary-tint: #72c4ff; + + --ion-color-tertiary: #8482fb; + --ion-color-tertiary-rgb: 132, 130, 251; + --ion-color-tertiary-contrast: #000000; + --ion-color-tertiary-contrast-rgb: 0, 0, 0; + --ion-color-tertiary-shade: #7472dd; + --ion-color-tertiary-tint: #908ffb; + + --ion-color-success: #2dd55b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; + + --ion-color-warning: #ffce31; + --ion-color-warning-rgb: 255, 206, 49; + --ion-color-warning-contrast: #000000; + --ion-color-warning-contrast-rgb: 0, 0, 0; + --ion-color-warning-shade: #e0b52b; + --ion-color-warning-tint: #ffd346; + + --ion-color-danger: #f56570; + --ion-color-danger-rgb: 245, 101, 112; + --ion-color-danger-contrast: #000000; + --ion-color-danger-contrast-rgb: 0, 0, 0; + --ion-color-danger-shade: #d85963; + --ion-color-danger-tint: #f6747e; + + --ion-color-dark: #f3f3f3; + --ion-color-dark-rgb: 243, 243, 243; + --ion-color-dark-contrast: #000000; + --ion-color-dark-contrast-rgb: 0, 0, 0; + --ion-color-dark-shade: #d6d6d6; + --ion-color-dark-tint: #f4f4f4; + + --ion-color-medium: #959595; + --ion-color-medium-rgb: 149, 149, 149; + --ion-color-medium-contrast: #000000; + --ion-color-medium-contrast-rgb: 0, 0, 0; + --ion-color-medium-shade: #838383; + --ion-color-medium-tint: #a0a0a0; + + --ion-color-light: #2f2f2f; + --ion-color-light-rgb: 47, 47, 47; + --ion-color-light-contrast: #ffffff; + --ion-color-light-contrast-rgb: 255, 255, 255; + --ion-color-light-shade: #292929; + --ion-color-light-tint: #444444; +} + +:root.ios { + --ion-background-color: #000000; + --ion-background-color-rgb: 0, 0, 0; + + --ion-text-color: #ffffff; + --ion-text-color-rgb: 255, 255, 255; + + --ion-color-step-50: #0d0d0d; + --ion-color-step-100: #1a1a1a; + --ion-color-step-150: #262626; + --ion-color-step-200: #333333; + --ion-color-step-250: #404040; + --ion-color-step-300: #4d4d4d; + --ion-color-step-350: #595959; + --ion-color-step-400: #666666; + --ion-color-step-450: #737373; + --ion-color-step-500: #808080; + --ion-color-step-550: #8c8c8c; + --ion-color-step-600: #999999; + --ion-color-step-650: #a6a6a6; + --ion-color-step-700: #b3b3b3; + --ion-color-step-750: #bfbfbf; + --ion-color-step-800: #cccccc; + --ion-color-step-850: #d9d9d9; + --ion-color-step-900: #e6e6e6; + --ion-color-step-950: #f2f2f2; + + --ion-item-background: #000000; + --ion-card-background: #1c1c1d; +} + +:root.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); +} + +:root.md { + --ion-background-color: #121212; + --ion-background-color-rgb: 18, 18, 18; + + --ion-text-color: #ffffff; + --ion-text-color-rgb: 255, 255, 255; + + --ion-border-color: #222222; + + --ion-color-step-50: #1e1e1e; + --ion-color-step-100: #2a2a2a; + --ion-color-step-150: #363636; + --ion-color-step-200: #414141; + --ion-color-step-250: #4d4d4d; + --ion-color-step-300: #595959; + --ion-color-step-350: #656565; + --ion-color-step-400: #717171; + --ion-color-step-450: #7d7d7d; + --ion-color-step-500: #898989; + --ion-color-step-550: #949494; + --ion-color-step-600: #a0a0a0; + --ion-color-step-650: #acacac; + --ion-color-step-700: #b8b8b8; + --ion-color-step-750: #c4c4c4; + --ion-color-step-800: #d0d0d0; + --ion-color-step-850: #dbdbdb; + --ion-color-step-900: #e7e7e7; + --ion-color-step-950: #f3f3f3; + + --ion-item-background: #1e1e1e; + --ion-toolbar-background: #1f1f1f; + --ion-tab-bar-background: #1f1f1f; + --ion-card-background: #1e1e1e; +} +``` + + + + + +The **system** dark theme 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. +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. +::: + +```css +@media (prefers-color-scheme: dark) { + :root { + --ion-color-primary: #4d8dff; + --ion-color-primary-rgb: 77, 141, 255; + --ion-color-primary-contrast: #000000; + --ion-color-primary-contrast-rgb: 0, 0, 0; + --ion-color-primary-shade: #447ce0; + --ion-color-primary-tint: #5f98ff; + + --ion-color-secondary: #62bdff; + --ion-color-secondary-rgb: 98, 189, 255; + --ion-color-secondary-contrast: #000000; + --ion-color-secondary-contrast-rgb: 0, 0, 0; + --ion-color-secondary-shade: #56a6e0; + --ion-color-secondary-tint: #72c4ff; + + --ion-color-tertiary: #8482fb; + --ion-color-tertiary-rgb: 132, 130, 251; + --ion-color-tertiary-contrast: #000000; + --ion-color-tertiary-contrast-rgb: 0, 0, 0; + --ion-color-tertiary-shade: #7472dd; + --ion-color-tertiary-tint: #908ffb; + + --ion-color-success: #2dd55b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; + + --ion-color-warning: #ffce31; + --ion-color-warning-rgb: 255, 206, 49; + --ion-color-warning-contrast: #000000; + --ion-color-warning-contrast-rgb: 0, 0, 0; + --ion-color-warning-shade: #e0b52b; + --ion-color-warning-tint: #ffd346; + + --ion-color-danger: #f56570; + --ion-color-danger-rgb: 245, 101, 112; + --ion-color-danger-contrast: #000000; + --ion-color-danger-contrast-rgb: 0, 0, 0; + --ion-color-danger-shade: #d85963; + --ion-color-danger-tint: #f6747e; + + --ion-color-dark: #f3f3f3; + --ion-color-dark-rgb: 243, 243, 243; + --ion-color-dark-contrast: #000000; + --ion-color-dark-contrast-rgb: 0, 0, 0; + --ion-color-dark-shade: #d6d6d6; + --ion-color-dark-tint: #f4f4f4; + + --ion-color-medium: #959595; + --ion-color-medium-rgb: 149, 149, 149; + --ion-color-medium-contrast: #000000; + --ion-color-medium-contrast-rgb: 0, 0, 0; + --ion-color-medium-shade: #838383; + --ion-color-medium-tint: #a0a0a0; + + --ion-color-light: #2f2f2f; + --ion-color-light-rgb: 47, 47, 47; + --ion-color-light-contrast: #ffffff; + --ion-color-light-contrast-rgb: 255, 255, 255; + --ion-color-light-shade: #292929; + --ion-color-light-tint: #444444; + } + + :root.ios { + --ion-background-color: #000000; + --ion-background-color-rgb: 0, 0, 0; + + --ion-text-color: #ffffff; + --ion-text-color-rgb: 255, 255, 255; + + --ion-color-step-50: #0d0d0d; + --ion-color-step-100: #1a1a1a; + --ion-color-step-150: #262626; + --ion-color-step-200: #333333; + --ion-color-step-250: #404040; + --ion-color-step-300: #4d4d4d; + --ion-color-step-350: #595959; + --ion-color-step-400: #666666; + --ion-color-step-450: #737373; + --ion-color-step-500: #808080; + --ion-color-step-550: #8c8c8c; + --ion-color-step-600: #999999; + --ion-color-step-650: #a6a6a6; + --ion-color-step-700: #b3b3b3; + --ion-color-step-750: #bfbfbf; + --ion-color-step-800: #cccccc; + --ion-color-step-850: #d9d9d9; + --ion-color-step-900: #e6e6e6; + --ion-color-step-950: #f2f2f2; + + --ion-item-background: #000000; + --ion-card-background: #1c1c1d; + } + + :root.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); + } + + :root.md { + --ion-background-color: #121212; + --ion-background-color-rgb: 18, 18, 18; + + --ion-text-color: #ffffff; + --ion-text-color-rgb: 255, 255, 255; + + --ion-border-color: #222222; + + --ion-color-step-50: #1e1e1e; + --ion-color-step-100: #2a2a2a; + --ion-color-step-150: #363636; + --ion-color-step-200: #414141; + --ion-color-step-250: #4d4d4d; + --ion-color-step-300: #595959; + --ion-color-step-350: #656565; + --ion-color-step-400: #717171; + --ion-color-step-450: #7d7d7d; + --ion-color-step-500: #898989; + --ion-color-step-550: #949494; + --ion-color-step-600: #a0a0a0; + --ion-color-step-650: #acacac; + --ion-color-step-700: #b8b8b8; + --ion-color-step-750: #c4c4c4; + --ion-color-step-800: #d0d0d0; + --ion-color-step-850: #dbdbdb; + --ion-color-step-900: #e7e7e7; + --ion-color-step-950: #f3f3f3; + + --ion-item-background: #1e1e1e; + --ion-toolbar-background: #1f1f1f; + --ion-tab-bar-background: #1f1f1f; + --ion-card-background: #1e1e1e; + } +} +``` + + + + + +The **class** dark theme 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. + +:::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. +::: + +```css +.ion-theme-dark { + --ion-color-primary: #4d8dff; + --ion-color-primary-rgb: 77, 141, 255; + --ion-color-primary-contrast: #000000; + --ion-color-primary-contrast-rgb: 0, 0, 0; + --ion-color-primary-shade: #447ce0; + --ion-color-primary-tint: #5f98ff; + + --ion-color-secondary: #62bdff; + --ion-color-secondary-rgb: 98, 189, 255; + --ion-color-secondary-contrast: #000000; + --ion-color-secondary-contrast-rgb: 0, 0, 0; + --ion-color-secondary-shade: #56a6e0; + --ion-color-secondary-tint: #72c4ff; + + --ion-color-tertiary: #8482fb; + --ion-color-tertiary-rgb: 132, 130, 251; + --ion-color-tertiary-contrast: #000000; + --ion-color-tertiary-contrast-rgb: 0, 0, 0; + --ion-color-tertiary-shade: #7472dd; + --ion-color-tertiary-tint: #908ffb; + + --ion-color-success: #2dd55b; + --ion-color-success-rgb: 45, 213, 91; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; + + --ion-color-warning: #ffce31; + --ion-color-warning-rgb: 255, 206, 49; + --ion-color-warning-contrast: #000000; + --ion-color-warning-contrast-rgb: 0, 0, 0; + --ion-color-warning-shade: #e0b52b; + --ion-color-warning-tint: #ffd346; + + --ion-color-danger: #f56570; + --ion-color-danger-rgb: 245, 101, 112; + --ion-color-danger-contrast: #000000; + --ion-color-danger-contrast-rgb: 0, 0, 0; + --ion-color-danger-shade: #d85963; + --ion-color-danger-tint: #f6747e; + + --ion-color-dark: #f3f3f3; + --ion-color-dark-rgb: 243, 243, 243; + --ion-color-dark-contrast: #000000; + --ion-color-dark-contrast-rgb: 0, 0, 0; + --ion-color-dark-shade: #d6d6d6; + --ion-color-dark-tint: #f4f4f4; + + --ion-color-medium: #959595; + --ion-color-medium-rgb: 149, 149, 149; + --ion-color-medium-contrast: #000000; + --ion-color-medium-contrast-rgb: 0, 0, 0; + --ion-color-medium-shade: #838383; + --ion-color-medium-tint: #a0a0a0; + + --ion-color-light: #2f2f2f; + --ion-color-light-rgb: 47, 47, 47; + --ion-color-light-contrast: #ffffff; + --ion-color-light-contrast-rgb: 255, 255, 255; + --ion-color-light-shade: #292929; + --ion-color-light-tint: #444444; +} + +.ion-theme-dark.ios { + --ion-background-color: #000000; + --ion-background-color-rgb: 0, 0, 0; + + --ion-text-color: #ffffff; + --ion-text-color-rgb: 255, 255, 255; + + --ion-color-step-50: #0d0d0d; + --ion-color-step-100: #1a1a1a; + --ion-color-step-150: #262626; + --ion-color-step-200: #333333; + --ion-color-step-250: #404040; + --ion-color-step-300: #4d4d4d; + --ion-color-step-350: #595959; + --ion-color-step-400: #666666; + --ion-color-step-450: #737373; + --ion-color-step-500: #808080; + --ion-color-step-550: #8c8c8c; + --ion-color-step-600: #999999; + --ion-color-step-650: #a6a6a6; + --ion-color-step-700: #b3b3b3; + --ion-color-step-750: #bfbfbf; + --ion-color-step-800: #cccccc; + --ion-color-step-850: #d9d9d9; + --ion-color-step-900: #e6e6e6; + --ion-color-step-950: #f2f2f2; + + --ion-item-background: #000000; + --ion-card-background: #1c1c1d; +} + +.ion-theme-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-background-color: #121212; + --ion-background-color-rgb: 18, 18, 18; + + --ion-text-color: #ffffff; + --ion-text-color-rgb: 255, 255, 255; + + --ion-border-color: #222222; + + --ion-color-step-50: #1e1e1e; + --ion-color-step-100: #2a2a2a; + --ion-color-step-150: #363636; + --ion-color-step-200: #414141; + --ion-color-step-250: #4d4d4d; + --ion-color-step-300: #595959; + --ion-color-step-350: #656565; + --ion-color-step-400: #717171; + --ion-color-step-450: #7d7d7d; + --ion-color-step-500: #898989; + --ion-color-step-550: #949494; + --ion-color-step-600: #a0a0a0; + --ion-color-step-650: #acacac; + --ion-color-step-700: #b8b8b8; + --ion-color-step-750: #c4c4c4; + --ion-color-step-800: #d0d0d0; + --ion-color-step-850: #dbdbdb; + --ion-color-step-900: #e7e7e7; + --ion-color-step-950: #f3f3f3; + + --ion-item-background: #1e1e1e; + --ion-toolbar-background: #1f1f1f; + --ion-tab-bar-background: #1f1f1f; + --ion-card-background: #1e1e1e; +} +``` + + + + + +## Troubleshooting + +### Application always showing either standard or high contrast themes + +If your application is always showing standard contrast themes, here are a few things to check to verify your application is correctly configured to use high contrast mode. + +1. Verify that you have imported the theme files in the correct order. For example, the high contrast dark theme should always be imported after the standard contrast dark theme, otherwise the standard contrast theme will take priority. Similarly, verify that the high contrast light theme is imported after [core.css](../layout/global-stylesheets#corecss). Here is an example usage for conditionally applying the high contrast theme while accounting for the standard contrast theme: + + + + + +```js +// Import standard contrast first +@import '@ionic/angular/css/core.css'; +@import '@ionic/angular/css/themes/dark.system.css'; + +// Import high contrast second +@import '@ionic/angular/css/themes/high-contrast.system.css'; +@import '@ionic/angular/css/themes/high-contrast-dark.system.css'; + +``` + + + + +```js +// Import standard contrast first +import '@ionic/core/css/core.css'; +import '@ionic/core/css/themes/dark.system.css'; + +// Import high contrast second +import '@ionic/core/css/themes/high-contrast.system.css'; +import '@ionic/core/css/themes/high-contrast-dark.system.css'; +``` + + + + +```js +// Import standard contrast first +import '@ionic/react/css/core.css'; +import '@ionic/react/css/themes/dark.system.css'; + +// Import high contrast second +import '@ionic/react/css/themes/high-contrast.system.css'; +import '@ionic/react/css/themes/high-contrast-dark.system.css'; +``` + + + + +```js +// Import standard contrast first +import '@ionic/vue/css/core.css'; +import '@ionic/vue/css/themes/dark.system.css'; + +// Import high contrast second +import '@ionic/vue/css/themes/high-contrast.system.css'; +import '@ionic/vue/css/themes/high-contrast-dark.system.css'; +``` + + + + + + +2. When applying the high contrast mode based on the system settings, verify that the target device supports the [`prefers-contrast` media query](https://caniuse.com/?search=prefers-contrast). \ No newline at end of file From c03b24b1d6b51670d070f8d0bbb56288ef853e49 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 5 Feb 2024 14:44:19 -0500 Subject: [PATCH 02/40] docs: add always playground --- .../angular/example_component_html.md | 45 ++++++++++ .../angular/styles_css.md | 39 ++++++++ .../always-high-contrast-mode/demo.html | 64 +++++++++++++ .../always-high-contrast-mode/index.md | 52 +++++++++++ .../javascript/index_html.md | 45 ++++++++++ .../javascript/index_ts.md | 35 ++++++++ .../react/app_tsx.md | 46 ++++++++++ .../react/main_tsx.md | 76 ++++++++++++++++ .../theme/variables_css.md | 27 ++++++ .../vue/example_vue.md | 90 +++++++++++++++++++ .../always-high-contrast-mode/vue/main_ts.md | 38 ++++++++ 11 files changed, 557 insertions(+) create mode 100644 static/usage/v8/theming/always-high-contrast-mode/angular/example_component_html.md create mode 100644 static/usage/v8/theming/always-high-contrast-mode/angular/styles_css.md create mode 100644 static/usage/v8/theming/always-high-contrast-mode/demo.html create mode 100644 static/usage/v8/theming/always-high-contrast-mode/index.md create mode 100644 static/usage/v8/theming/always-high-contrast-mode/javascript/index_html.md create mode 100644 static/usage/v8/theming/always-high-contrast-mode/javascript/index_ts.md create mode 100644 static/usage/v8/theming/always-high-contrast-mode/react/app_tsx.md create mode 100644 static/usage/v8/theming/always-high-contrast-mode/react/main_tsx.md create mode 100644 static/usage/v8/theming/always-high-contrast-mode/theme/variables_css.md create mode 100644 static/usage/v8/theming/always-high-contrast-mode/vue/example_vue.md create mode 100644 static/usage/v8/theming/always-high-contrast-mode/vue/main_ts.md 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..418eddfc30f --- /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..683a8e84eaa --- /dev/null +++ b/static/usage/v8/theming/always-high-contrast-mode/angular/styles_css.md @@ -0,0 +1,39 @@ +```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'; +// @import '@ionic/angular/css/themes/high-contrast.class.css'; +// @import '@ionic/angular/css/themes/high-contrast.system.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..e507c0b545e --- /dev/null +++ b/static/usage/v8/theming/always-high-contrast-mode/demo.html @@ -0,0 +1,64 @@ + + + + + + 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..6c30a4cf2ce --- /dev/null +++ b/static/usage/v8/theming/always-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 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'; + +import variables_css from './theme/variables_css.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..0b81aecb1a6 --- /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..e0ed5b91d67 --- /dev/null +++ b/static/usage/v8/theming/always-high-contrast-mode/javascript/index_ts.md @@ -0,0 +1,35 @@ +```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'; +// import '@ionic/core/css/themes/high-contrast.class.css'; +// import '@ionic/core/css/themes/high-contrast.system.css'; + +/* Theme variables */ +import './theme/variables.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..0ac54c6a9ef --- /dev/null +++ b/static/usage/v8/theming/always-high-contrast-mode/react/app_tsx.md @@ -0,0 +1,46 @@ +```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 '@ionic/react/css/themes/high-contrast.class.css'; +// import '@ionic/react/css/themes/high-contrast.system.css'; + +/* Theme variables */ +import './theme/variables.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..f6a15cd12f7 --- /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/theme/variables_css.md b/static/usage/v8/theming/always-high-contrast-mode/theme/variables_css.md new file mode 100644 index 00000000000..4cf2a1631e6 --- /dev/null +++ b/static/usage/v8/theming/always-high-contrast-mode/theme/variables_css.md @@ -0,0 +1,27 @@ +```css +/* Ionic Variables and Theming + * --------------------------------------------------------------- + * Any overrides to theme variables should be placed in this file. + * For more information, please see: + * http://ionicframework.com/docs/theming/ + */ + +/* This sets a different item border color for the default theme on ios and md */ +:root { + --ion-item-border-color: var(--ion-color-step-200); +} + +/* This sets a different background and item background for the default theme on ios */ +:root.ios { + --ion-background-color: var(--ion-color-step-50); + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #1c1c1d; +} + +/* This sets a different background and item background for the default theme on md */ +:root.md { + --ion-background-color: var(--ion-color-step-100); + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #1c1c1d; +} +``` 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..14753b7e25f --- /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..b41997084a1 --- /dev/null +++ b/static/usage/v8/theming/always-high-contrast-mode/vue/main_ts.md @@ -0,0 +1,38 @@ +```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'; +// import '@ionic/vue/css/themes/high-contrast.class.css'; +// import '@ionic/vue/css/themes/high-contrast.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +createApp(App).use(IonicVue).mount('#app'); +``` From 066a161702e7e86ffd5c893d6ad976bb256456fe Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 5 Feb 2024 14:46:54 -0500 Subject: [PATCH 03/40] typos --- docs/theming/high-contrast-mode.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index d2260e9e0c4..879719bab08 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -23,7 +23,7 @@ There are three provided ways to enable the high contrast theme in an app: **alw ### Always -The default theme provided with Ionic Framework also uses the default color contrast levels. The high contrast theme can be enabled by importing the following stylesheet in the appropriate files: +The default theme provided with Ionic Framework also uses the default color contrast levels. 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 a user's preference for high contrast. @@ -60,16 +60,12 @@ import '@ionic/vue/css/themes/high-contrast.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 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 system settings for high contrast or dark mode. +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'; -:::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. -::: - ### 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. From 26d1c494b759b81f7621d63a59a4bfbbc0ad0ac3 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 5 Feb 2024 14:46:58 -0500 Subject: [PATCH 04/40] docs: add to sidebar --- sidebars.js | 1 + 1 file changed, 1 insertion(+) 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', ], From cee93a2628516a6f22d6b2f480cef9be4d5a8d30 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 5 Feb 2024 14:50:49 -0500 Subject: [PATCH 05/40] docs(high-contrast): add system docs --- docs/theming/high-contrast-mode.md | 4 + .../angular/example_component_html.md | 45 ++++++++++ .../angular/styles_css.md | 38 ++++++++ .../system-high-contrast-mode/demo.html | 72 +++++++++++++++ .../system-high-contrast-mode/index.md | 52 +++++++++++ .../javascript/index_html.md | 45 ++++++++++ .../javascript/index_ts.md | 34 +++++++ .../react/app_tsx.md | 45 ++++++++++ .../react/main_tsx.md | 76 ++++++++++++++++ .../theme/variables_css.md | 27 ++++++ .../vue/example_vue.md | 90 +++++++++++++++++++ .../system-high-contrast-mode/vue/main_ts.md | 37 ++++++++ 12 files changed, 565 insertions(+) create mode 100644 static/usage/v8/theming/system-high-contrast-mode/angular/example_component_html.md create mode 100644 static/usage/v8/theming/system-high-contrast-mode/angular/styles_css.md create mode 100644 static/usage/v8/theming/system-high-contrast-mode/demo.html create mode 100644 static/usage/v8/theming/system-high-contrast-mode/index.md create mode 100644 static/usage/v8/theming/system-high-contrast-mode/javascript/index_html.md create mode 100644 static/usage/v8/theming/system-high-contrast-mode/javascript/index_ts.md create mode 100644 static/usage/v8/theming/system-high-contrast-mode/react/app_tsx.md create mode 100644 static/usage/v8/theming/system-high-contrast-mode/react/main_tsx.md create mode 100644 static/usage/v8/theming/system-high-contrast-mode/theme/variables_css.md create mode 100644 static/usage/v8/theming/system-high-contrast-mode/vue/example_vue.md create mode 100644 static/usage/v8/theming/system-high-contrast-mode/vue/main_ts.md diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 879719bab08..c09e086f82b 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -65,6 +65,10 @@ The following example will always display the high contrast light theme, regardl import AlwaysHighContrastMode from '@site/static/usage/v8/theming/always-high-contrast-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. +::: ### System 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..418eddfc30f --- /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..3a1df74ddd2 --- /dev/null +++ b/static/usage/v8/theming/system-high-contrast-mode/angular/styles_css.md @@ -0,0 +1,38 @@ +```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.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..a4f9759cf9a --- /dev/null +++ b/static/usage/v8/theming/system-high-contrast-mode/demo.html @@ -0,0 +1,72 @@ + + + + + + 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..269110a1b9a --- /dev/null +++ b/static/usage/v8/theming/system-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 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'; + +import variables_css from './theme/variables_css.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..0b81aecb1a6 --- /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..4b91551b470 --- /dev/null +++ b/static/usage/v8/theming/system-high-contrast-mode/javascript/index_ts.md @@ -0,0 +1,34 @@ +```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.system.css'; +import '@ionic/core/css/themes/high-contrast-dark.system.css'; + +/* Theme variables */ +import './theme/variables.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..687c9dad5d8 --- /dev/null +++ b/static/usage/v8/theming/system-high-contrast-mode/react/app_tsx.md @@ -0,0 +1,45 @@ +```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.system.css'; +import '@ionic/react/css/themes/high-contrast-dark.system.css'; + +/* Theme variables */ +import './theme/variables.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..f6a15cd12f7 --- /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/theme/variables_css.md b/static/usage/v8/theming/system-high-contrast-mode/theme/variables_css.md new file mode 100644 index 00000000000..4cf2a1631e6 --- /dev/null +++ b/static/usage/v8/theming/system-high-contrast-mode/theme/variables_css.md @@ -0,0 +1,27 @@ +```css +/* Ionic Variables and Theming + * --------------------------------------------------------------- + * Any overrides to theme variables should be placed in this file. + * For more information, please see: + * http://ionicframework.com/docs/theming/ + */ + +/* This sets a different item border color for the default theme on ios and md */ +:root { + --ion-item-border-color: var(--ion-color-step-200); +} + +/* This sets a different background and item background for the default theme on ios */ +:root.ios { + --ion-background-color: var(--ion-color-step-50); + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #1c1c1d; +} + +/* This sets a different background and item background for the default theme on md */ +:root.md { + --ion-background-color: var(--ion-color-step-100); + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #1c1c1d; +} +``` 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..14753b7e25f --- /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..530463718a2 --- /dev/null +++ b/static/usage/v8/theming/system-high-contrast-mode/vue/main_ts.md @@ -0,0 +1,37 @@ +```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.system.css'; +import '@ionic/vue/css/themes/high-contrast-dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +createApp(App).use(IonicVue).mount('#app'); +``` From 12504b01dc08e3824df150b113d7905a45578b6c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 5 Feb 2024 15:52:40 -0500 Subject: [PATCH 06/40] content clean up --- docs/theming/high-contrast-mode.md | 527 ++--------------------------- 1 file changed, 36 insertions(+), 491 deletions(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index c09e086f82b..79868c1b0d9 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -58,24 +58,18 @@ import '@ionic/vue/css/themes/high-contrast.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 high contrast dark theme can be applied by importing `high-contrast-dark.always.css` instead of `high-contrast.always.css`. +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'; - -:::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. -::: ### 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 imports both the light and dark high contrast themes. The dark high contrast theme will be applied using a combination of the user's contrast preference and [dark mode preference](./dark-mode#system). - @@ -113,7 +107,7 @@ import '@ionic/vue/css/themes/high-contrast-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-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 [class](#class) approach. +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 [class](#class) approach. The following example uses the system settings to decide when to show high contrast mode. @@ -125,561 +119,112 @@ import SystemHighContrastMode from '@site/static/usage/v8/theming/system-high-co -:::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. -::: - ### 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 high contrast 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 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/dark.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/dark.class.css'; +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/dark.class.css'; +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/dark.class.css'; +import '@ionic/vue/css/themes/high-contrast.class.css'; +import '@ionic/vue/css/themes/high-contrast-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 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#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 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 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 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). +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 ClassDarkMode from '@site/static/usage/v8/theming/class-dark-mode/index.md'; +import ClassHighContrastMode from '@site/static/usage/v8/theming/class-high-contrast-mode/index.md'; - + :::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-theme-high-contrast` class **must** be added to the `html` element in order to work with the imported high contrast theme. ::: -## 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. +## Customizing Ionic High Contrast Theme -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: +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 [class](#class). Each of these methods involves importing the high contrast theme file with the corresponding name. -```html - -``` - -This allows the page to indicate which color scheme it is comfortable being rendered with. Alternatively, you can add the following CSS to do this on a per-element basis: - -```css -color-scheme: light dark; -``` - -| Default scrollbar | Scrollbar with `color-scheme` | -| ------------------------------------------------------------------------ | -------------------------------------------------------------------- | -| ![Application without color-scheme](/img/theming/color-scheme-light.png) | ![Application with color-scheme](/img/theming/color-scheme-dark.png) | +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. -For more information regarding `color-scheme` please see https://web.dev/color-scheme/. - -:::note -`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, see [Keyboard Documentation](../developing/keyboard.md#dark-mode). -::: - -:::note -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 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. - -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 **always** dark theme behaves in the following ways: +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 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 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. :::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 high contrast theme variables. For example, because the `--ion-item-background` variable is set for each mode in the high contrast dark theme, it cannot be overridden in the `:root` selector. A higher specificity selector, such as `:root.ios`, is required. ::: -```css -:root { - --ion-color-primary: #4d8dff; - --ion-color-primary-rgb: 77, 141, 255; - --ion-color-primary-contrast: #000000; - --ion-color-primary-contrast-rgb: 0, 0, 0; - --ion-color-primary-shade: #447ce0; - --ion-color-primary-tint: #5f98ff; - - --ion-color-secondary: #62bdff; - --ion-color-secondary-rgb: 98, 189, 255; - --ion-color-secondary-contrast: #000000; - --ion-color-secondary-contrast-rgb: 0, 0, 0; - --ion-color-secondary-shade: #56a6e0; - --ion-color-secondary-tint: #72c4ff; - - --ion-color-tertiary: #8482fb; - --ion-color-tertiary-rgb: 132, 130, 251; - --ion-color-tertiary-contrast: #000000; - --ion-color-tertiary-contrast-rgb: 0, 0, 0; - --ion-color-tertiary-shade: #7472dd; - --ion-color-tertiary-tint: #908ffb; - - --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; - - --ion-color-warning: #ffce31; - --ion-color-warning-rgb: 255, 206, 49; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0, 0, 0; - --ion-color-warning-shade: #e0b52b; - --ion-color-warning-tint: #ffd346; - - --ion-color-danger: #f56570; - --ion-color-danger-rgb: 245, 101, 112; - --ion-color-danger-contrast: #000000; - --ion-color-danger-contrast-rgb: 0, 0, 0; - --ion-color-danger-shade: #d85963; - --ion-color-danger-tint: #f6747e; - - --ion-color-dark: #f3f3f3; - --ion-color-dark-rgb: 243, 243, 243; - --ion-color-dark-contrast: #000000; - --ion-color-dark-contrast-rgb: 0, 0, 0; - --ion-color-dark-shade: #d6d6d6; - --ion-color-dark-tint: #f4f4f4; - - --ion-color-medium: #959595; - --ion-color-medium-rgb: 149, 149, 149; - --ion-color-medium-contrast: #000000; - --ion-color-medium-contrast-rgb: 0, 0, 0; - --ion-color-medium-shade: #838383; - --ion-color-medium-tint: #a0a0a0; - - --ion-color-light: #2f2f2f; - --ion-color-light-rgb: 47, 47, 47; - --ion-color-light-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255, 255, 255; - --ion-color-light-shade: #292929; - --ion-color-light-tint: #444444; -} - -:root.ios { - --ion-background-color: #000000; - --ion-background-color-rgb: 0, 0, 0; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255, 255, 255; - - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; - - --ion-item-background: #000000; - --ion-card-background: #1c1c1d; -} - -:root.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); -} - -:root.md { - --ion-background-color: #121212; - --ion-background-color-rgb: 18, 18, 18; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255, 255, 255; - - --ion-border-color: #222222; - - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; - - --ion-item-background: #1e1e1e; - --ion-toolbar-background: #1f1f1f; - --ion-tab-bar-background: #1f1f1f; - --ion-card-background: #1e1e1e; -} -``` - -The **system** dark theme behaves in the following ways: +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 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 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-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 theme variables. For example, because the `--ion-item-background` variable is set for each mode in the high contrast dark theme, it cannot be overridden in the `:root` selector. A higher specificity selector, such as `:root.ios`, is required. ::: -```css -@media (prefers-color-scheme: dark) { - :root { - --ion-color-primary: #4d8dff; - --ion-color-primary-rgb: 77, 141, 255; - --ion-color-primary-contrast: #000000; - --ion-color-primary-contrast-rgb: 0, 0, 0; - --ion-color-primary-shade: #447ce0; - --ion-color-primary-tint: #5f98ff; - - --ion-color-secondary: #62bdff; - --ion-color-secondary-rgb: 98, 189, 255; - --ion-color-secondary-contrast: #000000; - --ion-color-secondary-contrast-rgb: 0, 0, 0; - --ion-color-secondary-shade: #56a6e0; - --ion-color-secondary-tint: #72c4ff; - - --ion-color-tertiary: #8482fb; - --ion-color-tertiary-rgb: 132, 130, 251; - --ion-color-tertiary-contrast: #000000; - --ion-color-tertiary-contrast-rgb: 0, 0, 0; - --ion-color-tertiary-shade: #7472dd; - --ion-color-tertiary-tint: #908ffb; - - --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; - - --ion-color-warning: #ffce31; - --ion-color-warning-rgb: 255, 206, 49; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0, 0, 0; - --ion-color-warning-shade: #e0b52b; - --ion-color-warning-tint: #ffd346; - - --ion-color-danger: #f56570; - --ion-color-danger-rgb: 245, 101, 112; - --ion-color-danger-contrast: #000000; - --ion-color-danger-contrast-rgb: 0, 0, 0; - --ion-color-danger-shade: #d85963; - --ion-color-danger-tint: #f6747e; - - --ion-color-dark: #f3f3f3; - --ion-color-dark-rgb: 243, 243, 243; - --ion-color-dark-contrast: #000000; - --ion-color-dark-contrast-rgb: 0, 0, 0; - --ion-color-dark-shade: #d6d6d6; - --ion-color-dark-tint: #f4f4f4; - - --ion-color-medium: #959595; - --ion-color-medium-rgb: 149, 149, 149; - --ion-color-medium-contrast: #000000; - --ion-color-medium-contrast-rgb: 0, 0, 0; - --ion-color-medium-shade: #838383; - --ion-color-medium-tint: #a0a0a0; - - --ion-color-light: #2f2f2f; - --ion-color-light-rgb: 47, 47, 47; - --ion-color-light-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255, 255, 255; - --ion-color-light-shade: #292929; - --ion-color-light-tint: #444444; - } - - :root.ios { - --ion-background-color: #000000; - --ion-background-color-rgb: 0, 0, 0; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255, 255, 255; - - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; - - --ion-item-background: #000000; - --ion-card-background: #1c1c1d; - } - - :root.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); - } - - :root.md { - --ion-background-color: #121212; - --ion-background-color-rgb: 18, 18, 18; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255, 255, 255; - - --ion-border-color: #222222; - - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; - - --ion-item-background: #1e1e1e; - --ion-toolbar-background: #1f1f1f; - --ion-tab-bar-background: #1f1f1f; - --ion-card-background: #1e1e1e; - } -} -``` - -The **class** dark theme behaves in the following ways: +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 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 high contrast 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 high contrast theme on `ios` devices using the `.ion-theme-dark.ios` selector. +3. Setting variables for the high contrast theme on `md` devices using the `.ion-theme-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 theme variables. For example, because the `--ion-item-background` variable is set for each mode in the high contrast dark theme, it cannot be overridden in the `.ion-theme-dark` selector. A higher specificity selector, such as `.ion-theme-dark.ios`, is required. ::: -```css -.ion-theme-dark { - --ion-color-primary: #4d8dff; - --ion-color-primary-rgb: 77, 141, 255; - --ion-color-primary-contrast: #000000; - --ion-color-primary-contrast-rgb: 0, 0, 0; - --ion-color-primary-shade: #447ce0; - --ion-color-primary-tint: #5f98ff; - - --ion-color-secondary: #62bdff; - --ion-color-secondary-rgb: 98, 189, 255; - --ion-color-secondary-contrast: #000000; - --ion-color-secondary-contrast-rgb: 0, 0, 0; - --ion-color-secondary-shade: #56a6e0; - --ion-color-secondary-tint: #72c4ff; - - --ion-color-tertiary: #8482fb; - --ion-color-tertiary-rgb: 132, 130, 251; - --ion-color-tertiary-contrast: #000000; - --ion-color-tertiary-contrast-rgb: 0, 0, 0; - --ion-color-tertiary-shade: #7472dd; - --ion-color-tertiary-tint: #908ffb; - - --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; - - --ion-color-warning: #ffce31; - --ion-color-warning-rgb: 255, 206, 49; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0, 0, 0; - --ion-color-warning-shade: #e0b52b; - --ion-color-warning-tint: #ffd346; - - --ion-color-danger: #f56570; - --ion-color-danger-rgb: 245, 101, 112; - --ion-color-danger-contrast: #000000; - --ion-color-danger-contrast-rgb: 0, 0, 0; - --ion-color-danger-shade: #d85963; - --ion-color-danger-tint: #f6747e; - - --ion-color-dark: #f3f3f3; - --ion-color-dark-rgb: 243, 243, 243; - --ion-color-dark-contrast: #000000; - --ion-color-dark-contrast-rgb: 0, 0, 0; - --ion-color-dark-shade: #d6d6d6; - --ion-color-dark-tint: #f4f4f4; - - --ion-color-medium: #959595; - --ion-color-medium-rgb: 149, 149, 149; - --ion-color-medium-contrast: #000000; - --ion-color-medium-contrast-rgb: 0, 0, 0; - --ion-color-medium-shade: #838383; - --ion-color-medium-tint: #a0a0a0; - - --ion-color-light: #2f2f2f; - --ion-color-light-rgb: 47, 47, 47; - --ion-color-light-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255, 255, 255; - --ion-color-light-shade: #292929; - --ion-color-light-tint: #444444; -} - -.ion-theme-dark.ios { - --ion-background-color: #000000; - --ion-background-color-rgb: 0, 0, 0; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255, 255, 255; - - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; - - --ion-item-background: #000000; - --ion-card-background: #1c1c1d; -} - -.ion-theme-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-background-color: #121212; - --ion-background-color-rgb: 18, 18, 18; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255, 255, 255; - - --ion-border-color: #222222; - - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; - - --ion-item-background: #1e1e1e; - --ion-toolbar-background: #1f1f1f; - --ion-tab-bar-background: #1f1f1f; - --ion-card-background: #1e1e1e; -} -``` - From 028cc3f6079ef8db70b14971c9dd3cd9e601aef0 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 5 Feb 2024 15:58:29 -0500 Subject: [PATCH 07/40] content changes --- docs/theming/high-contrast-mode.md | 79 ++++-------------------------- 1 file changed, 9 insertions(+), 70 deletions(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 79868c1b0d9..f1e102c80fd 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -118,6 +118,10 @@ Not sure how to change the system settings? Here's how to enable high contrast m 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#corecss), and the high contrast dark theme must be imported after `dark.system.css`. Otherwise, the standard contrast theme will take priority. +::: ### Class @@ -171,6 +175,10 @@ Not sure how to change the system settings? Here's how to enable high contrast m import ClassHighContrastMode from '@site/static/usage/v8/theming/class-high-contrast-mode/index.md'; + +:::caution Important +The high contrast light theme must be imported after [core.css](../layout/global-stylesheets#corecss), and the high contrast dark theme must be imported after `dark.class.css`. Otherwise, the standard contrast theme will take priority. +::: :::caution Important The `.ion-theme-high-contrast` class **must** be added to the `html` element in order to work with the imported high contrast theme. @@ -227,73 +235,4 @@ It is important to pay attention to the specificity if you want to override any - - -## Troubleshooting - -### Application always showing either standard or high contrast themes - -If your application is always showing standard contrast themes, here are a few things to check to verify your application is correctly configured to use high contrast mode. - -1. Verify that you have imported the theme files in the correct order. For example, the high contrast dark theme should always be imported after the standard contrast dark theme, otherwise the standard contrast theme will take priority. Similarly, verify that the high contrast light theme is imported after [core.css](../layout/global-stylesheets#corecss). Here is an example usage for conditionally applying the high contrast theme while accounting for the standard contrast theme: - - - - - -```js -// Import standard contrast first -@import '@ionic/angular/css/core.css'; -@import '@ionic/angular/css/themes/dark.system.css'; - -// Import high contrast second -@import '@ionic/angular/css/themes/high-contrast.system.css'; -@import '@ionic/angular/css/themes/high-contrast-dark.system.css'; - -``` - - - - -```js -// Import standard contrast first -import '@ionic/core/css/core.css'; -import '@ionic/core/css/themes/dark.system.css'; - -// Import high contrast second -import '@ionic/core/css/themes/high-contrast.system.css'; -import '@ionic/core/css/themes/high-contrast-dark.system.css'; -``` - - - - -```js -// Import standard contrast first -import '@ionic/react/css/core.css'; -import '@ionic/react/css/themes/dark.system.css'; - -// Import high contrast second -import '@ionic/react/css/themes/high-contrast.system.css'; -import '@ionic/react/css/themes/high-contrast-dark.system.css'; -``` - - - - -```js -// Import standard contrast first -import '@ionic/vue/css/core.css'; -import '@ionic/vue/css/themes/dark.system.css'; - -// Import high contrast second -import '@ionic/vue/css/themes/high-contrast.system.css'; -import '@ionic/vue/css/themes/high-contrast-dark.system.css'; -``` - - - - - - -2. When applying the high contrast mode based on the system settings, verify that the target device supports the [`prefers-contrast` media query](https://caniuse.com/?search=prefers-contrast). \ No newline at end of file + \ No newline at end of file From 35f01f8a169023aa0a95f93d69bddc539b163758 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 6 Feb 2024 13:57:14 -0500 Subject: [PATCH 08/40] add overview, clean up --- docs/theming/high-contrast-mode.md | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index f1e102c80fd..072ad24d05d 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -17,6 +17,10 @@ import TabItem from '@theme/TabItem'; Ionic ships with themes for increased contrast for users with low vision. These themes work by increasing the contrast between foreground content, such as text, and background content, such as UI components. Ionic provides light and dark variants for high contrast. +## Overview + +Ionic's high contrast theme works by improving contrast between the foreground and the background. The [Ionic colors](./colors) have been updated to meet [Level AAA as defined by Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html) when used with the appropriate contrast color. The theme also seeks to improve the contrast of UI components such as the border on an Item. However, Ionic's high contrast theme prioritizes text. This means that if increasing the contrast of a UI component against the page background would significantly reduce the contrast of the component's text against the component's background, the UI component contrast will not be modified. + ## 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 **class**. @@ -200,10 +204,6 @@ The **always** high contrast theme behaves in the following ways: 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. -:::caution -It is important to pay attention to the specificity if you want to override any of the Ionic high contrast theme variables. For example, because the `--ion-item-background` variable is set for each mode in the high contrast dark theme, it cannot be overridden in the `:root` selector. A higher specificity selector, such as `:root.ios`, is required. -::: - @@ -213,11 +213,7 @@ 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-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 in the high contrast dark theme, it cannot be overridden in the `:root` selector. A higher specificity selector, such as `:root.ios`, is required. -::: +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`. @@ -225,13 +221,9 @@ It is important to pay attention to the specificity if you want to override any 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-dark` selector. The `.ion-theme-dark` 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-dark.ios` selector. -3. Setting variables for the high contrast theme on `md` devices using the `.ion-theme-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 in the high contrast dark theme, it cannot be overridden in the `.ion-theme-dark` selector. A higher specificity selector, such as `.ion-theme-dark.ios`, is required. -::: +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. From 759eb8645882c5d36e0ac9d5f194cf606df7f018 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 6 Feb 2024 13:59:02 -0500 Subject: [PATCH 09/40] chore: clean up --- .../always-high-contrast-mode/index.md | 6 ----- .../javascript/index_ts.md | 3 --- .../react/app_tsx.md | 3 --- .../theme/variables_css.md | 27 ------------------- .../always-high-contrast-mode/vue/main_ts.md | 2 -- 5 files changed, 41 deletions(-) delete mode 100644 static/usage/v8/theming/always-high-contrast-mode/theme/variables_css.md diff --git a/static/usage/v8/theming/always-high-contrast-mode/index.md b/static/usage/v8/theming/always-high-contrast-mode/index.md index 6c30a4cf2ce..c418c914696 100644 --- a/static/usage/v8/theming/always-high-contrast-mode/index.md +++ b/static/usage/v8/theming/always-high-contrast-mode/index.md @@ -12,8 +12,6 @@ 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'; -import variables_css from './theme/variables_css.md'; - Date: Tue, 6 Feb 2024 14:00:57 -0500 Subject: [PATCH 10/40] chore: clean up --- .../system-high-contrast-mode/index.md | 6 ----- .../javascript/index_ts.md | 3 --- .../react/app_tsx.md | 3 --- .../theme/variables_css.md | 27 ------------------- .../system-high-contrast-mode/vue/main_ts.md | 3 --- 5 files changed, 42 deletions(-) delete mode 100644 static/usage/v8/theming/system-high-contrast-mode/theme/variables_css.md diff --git a/static/usage/v8/theming/system-high-contrast-mode/index.md b/static/usage/v8/theming/system-high-contrast-mode/index.md index 269110a1b9a..88179ede2d8 100644 --- a/static/usage/v8/theming/system-high-contrast-mode/index.md +++ b/static/usage/v8/theming/system-high-contrast-mode/index.md @@ -12,8 +12,6 @@ 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'; -import variables_css from './theme/variables_css.md'; - Date: Tue, 6 Feb 2024 14:03:20 -0500 Subject: [PATCH 11/40] fix imports --- .../system-high-contrast-mode/angular/styles_css.md | 6 ++++-- .../system-high-contrast-mode/javascript/index_ts.md | 6 ++++-- .../theming/system-high-contrast-mode/react/app_tsx.md | 6 ++++-- .../v8/theming/system-high-contrast-mode/vue/main_ts.md | 9 +++++++-- 4 files changed, 19 insertions(+), 8 deletions(-) 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 index 3a1df74ddd2..88617df3dee 100644 --- 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 @@ -27,12 +27,14 @@ @import '@ionic/angular/css/display.css'; /** - * Ionic High Contrast Theme + * 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/javascript/index_ts.md b/static/usage/v8/theming/system-high-contrast-mode/javascript/index_ts.md index 83f6a2ffbcd..0a373a0faf7 100644 --- 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 @@ -18,12 +18,14 @@ import '@ionic/core/css/flex-utils.css'; import '@ionic/core/css/display.css'; /** - * Ionic High Contrast Theme + * 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'; 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 index 7f1619ee2dd..7d72c6541dc 100644 --- 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 @@ -19,12 +19,14 @@ import '@ionic/react/css/flex-utils.css'; import '@ionic/react/css/display.css'; /** - * Ionic High Contrast Theme + * 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'; 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 index f2d6b7e22b1..dc849ba1fad 100644 --- 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 @@ -21,14 +21,19 @@ import '@ionic/vue/css/flex-utils.css'; import '@ionic/vue/css/display.css'; /** - * Ionic High Contrast Theme + * 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'); ``` From 3b19c23c8808005f003b14d1f2cee05216917b8a Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 6 Feb 2024 14:20:41 -0500 Subject: [PATCH 12/40] add class demo --- .../angular/example_component_html.md | 61 +++++++ .../angular/example_component_ts.md | 61 +++++++ .../angular/global_css.md | 6 + .../angular/styles_css.md | 40 +++++ .../class-high-contrast-mode/demo.html | 151 ++++++++++++++++ .../theming/class-high-contrast-mode/index.md | 52 ++++++ .../javascript/index_html.md | 111 ++++++++++++ .../javascript/index_ts.md | 33 ++++ .../class-high-contrast-mode/react/app_tsx.md | 44 +++++ .../react/main_css.md | 6 + .../react/main_tsx.md | 144 +++++++++++++++ .../vue/example_vue.md | 165 ++++++++++++++++++ .../class-high-contrast-mode/vue/main_ts.md | 36 ++++ 13 files changed, 910 insertions(+) create mode 100644 static/usage/v8/theming/class-high-contrast-mode/angular/example_component_html.md create mode 100644 static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md create mode 100644 static/usage/v8/theming/class-high-contrast-mode/angular/global_css.md create mode 100644 static/usage/v8/theming/class-high-contrast-mode/angular/styles_css.md create mode 100644 static/usage/v8/theming/class-high-contrast-mode/demo.html create mode 100644 static/usage/v8/theming/class-high-contrast-mode/index.md create mode 100644 static/usage/v8/theming/class-high-contrast-mode/javascript/index_html.md create mode 100644 static/usage/v8/theming/class-high-contrast-mode/javascript/index_ts.md create mode 100644 static/usage/v8/theming/class-high-contrast-mode/react/app_tsx.md create mode 100644 static/usage/v8/theming/class-high-contrast-mode/react/main_css.md create mode 100644 static/usage/v8/theming/class-high-contrast-mode/react/main_tsx.md create mode 100644 static/usage/v8/theming/class-high-contrast-mode/vue/example_vue.md create mode 100644 static/usage/v8/theming/class-high-contrast-mode/vue/main_ts.md 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..1d0edaf94bf --- /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'); +``` From 70f6314c8d237360795e591eff2beb0e7de228e6 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 6 Feb 2024 14:20:45 -0500 Subject: [PATCH 13/40] lint --- docs/theming/high-contrast-mode.md | 16 +++++++--------- .../theming/always-high-contrast-mode/demo.html | 10 ++++++++-- .../always-high-contrast-mode/vue/main_ts.md | 1 - .../angular/styles_css.md | 2 +- .../theming/system-high-contrast-mode/demo.html | 10 ++++++++-- .../javascript/index_ts.md | 2 +- .../system-high-contrast-mode/react/app_tsx.md | 2 +- .../system-high-contrast-mode/vue/main_ts.md | 2 +- 8 files changed, 27 insertions(+), 18 deletions(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 072ad24d05d..70938aff8ca 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -19,7 +19,7 @@ Ionic ships with themes for increased contrast for users with low vision. These ## Overview -Ionic's high contrast theme works by improving contrast between the foreground and the background. The [Ionic colors](./colors) have been updated to meet [Level AAA as defined by Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html) when used with the appropriate contrast color. The theme also seeks to improve the contrast of UI components such as the border on an Item. However, Ionic's high contrast theme prioritizes text. This means that if increasing the contrast of a UI component against the page background would significantly reduce the contrast of the component's text against the component's background, the UI component contrast will not be modified. +Ionic's high contrast theme works by improving contrast between the foreground and the background. The [Ionic colors](./colors) have been updated to meet [Level AAA as defined by Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html) when used with the appropriate contrast color. The theme also seeks to improve the contrast of UI components such as the border on an Item. However, Ionic's high contrast theme prioritizes text. This means that if increasing the contrast of a UI component against the page background would significantly reduce the contrast of the component's text against the component's background, the UI component contrast will not be modified. ## Enabling High Contrast Theme @@ -122,9 +122,8 @@ Not sure how to change the system settings? Here's how to enable high contrast m 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#corecss), and the high contrast dark theme must be imported after `dark.system.css`. Otherwise, the standard contrast theme will take priority. +:::caution The high contrast light theme must be imported after [core.css](../layout/global-stylesheets#corecss), and the +high contrast dark theme must be imported after `dark.system.css`. Otherwise, the standard contrast theme will take priority. ::: ### Class @@ -179,10 +178,9 @@ Not sure how to change the system settings? Here's how to enable high contrast m import ClassHighContrastMode from '@site/static/usage/v8/theming/class-high-contrast-mode/index.md'; - -:::caution Important -The high contrast light theme must be imported after [core.css](../layout/global-stylesheets#corecss), and the high contrast dark theme must be imported after `dark.class.css`. Otherwise, the standard contrast theme will take priority. -::: +:::caution Important The high contrast light theme must be imported after [core.css](../layout/global-stylesheets#corecss), +and the high contrast dark theme must be imported after `dark.class.css`. Otherwise, the standard contrast theme will take +priority. ::: :::caution Important The `.ion-theme-high-contrast` class **must** be added to the `html` element in order to work with the imported high contrast theme. @@ -227,4 +225,4 @@ The **class** high contrast theme behaves in the following ways: - \ No newline at end of file + 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 e507c0b545e..cfae52d1aa4 100644 --- a/static/usage/v8/theming/always-high-contrast-mode/demo.html +++ b/static/usage/v8/theming/always-high-contrast-mode/demo.html @@ -6,8 +6,14 @@ Theming - - + + Theming - - + + Date: Tue, 6 Feb 2024 14:26:49 -0500 Subject: [PATCH 14/40] a word --- cspell-wordlist.txt | 1 + 1 file changed, 1 insertion(+) 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 From ba11cf3bb8dd9845df3799a68306700d98ac6c45 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 6 Feb 2024 15:21:13 -0500 Subject: [PATCH 15/40] Update high-contrast-mode.md --- docs/theming/high-contrast-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 70938aff8ca..78e3c0386a3 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -19,7 +19,7 @@ Ionic ships with themes for increased contrast for users with low vision. These ## Overview -Ionic's high contrast theme works by improving contrast between the foreground and the background. The [Ionic colors](./colors) have been updated to meet [Level AAA as defined by Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html) when used with the appropriate contrast color. The theme also seeks to improve the contrast of UI components such as the border on an Item. However, Ionic's high contrast theme prioritizes text. This means that if increasing the contrast of a UI component against the page background would significantly reduce the contrast of the component's text against the component's background, the UI component contrast will not be modified. +The [Ionic colors](./colors) in the high contrast theme have been updated to meet [Level AAA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html) as defined by the Web Content Accessibility Guidelines (WCAG) when used with the appropriate contrast color. The theme also seeks to improve the contrast of UI components such as the border on an Item. However, Ionic's high contrast theme prioritizes text. This means that if increasing the contrast of a UI component against the page background would significantly reduce the contrast of the component's text against the component's background, the UI component contrast will not be modified. ## Enabling High Contrast Theme From 715de6f2e9a0dc98d60c4760cf5d32e9f125b212 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 6 Feb 2024 15:25:47 -0500 Subject: [PATCH 16/40] =?UTF-8?q?add=20color=3D=E2=80=9Clight=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../always-high-contrast-mode/angular/example_component_html.md | 2 +- .../theming/always-high-contrast-mode/javascript/index_html.md | 2 +- .../v8/theming/always-high-contrast-mode/react/main_tsx.md | 2 +- .../v8/theming/always-high-contrast-mode/vue/example_vue.md | 2 +- .../system-high-contrast-mode/angular/example_component_html.md | 2 +- .../theming/system-high-contrast-mode/javascript/index_html.md | 2 +- .../v8/theming/system-high-contrast-mode/react/main_tsx.md | 2 +- .../v8/theming/system-high-contrast-mode/vue/example_vue.md | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) 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 index 418eddfc30f..3601ee18053 100644 --- 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 @@ -13,7 +13,7 @@ - + Appearance Text Size 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 index 0b81aecb1a6..9660e319e39 100644 --- 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 @@ -13,7 +13,7 @@ - + Appearance Text Size 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 index f6a15cd12f7..1c4eaa1e3a0 100644 --- 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 @@ -36,7 +36,7 @@ function Example() { - + Appearance Text Size 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 index 14753b7e25f..d4946f4e440 100644 --- 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 @@ -14,7 +14,7 @@ - + Appearance Text Size 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 index 418eddfc30f..3601ee18053 100644 --- 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 @@ -13,7 +13,7 @@ - + Appearance Text Size 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 index 0b81aecb1a6..9660e319e39 100644 --- 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 @@ -13,7 +13,7 @@ - + Appearance Text Size 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 index f6a15cd12f7..1c4eaa1e3a0 100644 --- 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 @@ -36,7 +36,7 @@ function Example() { - + Appearance Text Size 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 index 14753b7e25f..d4946f4e440 100644 --- 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 @@ -14,7 +14,7 @@ - + Appearance Text Size From ad007e3dc860ebdb3193654f13ab95d0976c4a1b Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 6 Feb 2024 15:24:34 -0500 Subject: [PATCH 17/40] update packagejson --- .../code/stackblitz/v8/angular/package.json | 4 +- static/code/stackblitz/v8/html/package.json | 2 +- .../stackblitz/v8/react/package-lock.json | 68 +++++++++---------- static/code/stackblitz/v8/react/package.json | 4 +- .../code/stackblitz/v8/vue/package-lock.json | 68 +++++++++---------- static/code/stackblitz/v8/vue/package.json | 4 +- 6 files changed, 75 insertions(+), 75 deletions(-) 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" }, From 8f764450a18cb21094d4f9a59b18717fc5254523 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 6 Feb 2024 15:30:25 -0500 Subject: [PATCH 18/40] remove commented out files --- .../v8/theming/always-high-contrast-mode/angular/styles_css.md | 2 -- .../v8/theming/always-high-contrast-mode/javascript/index_ts.md | 2 -- .../usage/v8/theming/always-high-contrast-mode/react/app_tsx.md | 2 -- .../usage/v8/theming/always-high-contrast-mode/vue/main_ts.md | 2 -- 4 files changed, 8 deletions(-) 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 683a8e84eaa..414ed0c49ce 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 @@ -34,6 +34,4 @@ */ @import '@ionic/angular/css/themes/high-contrast.always.css'; -// @import '@ionic/angular/css/themes/high-contrast.class.css'; -// @import '@ionic/angular/css/themes/high-contrast.system.css'; ``` 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 fcdd3be0629..04a03c25a9c 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 @@ -25,8 +25,6 @@ import '@ionic/core/css/display.css'; */ import '@ionic/core/css/themes/high-contrast.always.css'; -// import '@ionic/core/css/themes/high-contrast.class.css'; -// import '@ionic/core/css/themes/high-contrast.system.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 fa8cce39c58..1a86e400a69 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 @@ -26,8 +26,6 @@ import '@ionic/react/css/display.css'; */ import '@ionic/react/css/themes/high-contrast.always.css'; -// import '@ionic/react/css/themes/high-contrast.class.css'; -// import '@ionic/react/css/themes/high-contrast.system.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 bebeeec4bcd..1f9b8301773 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 @@ -28,8 +28,6 @@ import '@ionic/vue/css/display.css'; */ import '@ionic/vue/css/themes/high-contrast.always.css'; -// import '@ionic/vue/css/themes/high-contrast.class.css'; -// import '@ionic/vue/css/themes/high-contrast.system.css'; createApp(App).use(IonicVue).mount('#app'); ``` From e569314064fa33076b6ff1c618011b3752fe703d Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 9 Feb 2024 11:07:45 -0500 Subject: [PATCH 19/40] Update docs/theming/high-contrast-mode.md Co-authored-by: Brandy Carney --- docs/theming/high-contrast-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 78e3c0386a3..406f856714c 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -15,7 +15,7 @@ import TabItem from '@theme/TabItem'; /> -Ionic ships with themes for increased contrast for users with low vision. These themes work by increasing the contrast between foreground content, such as text, and background content, such as UI components. Ionic provides light and dark variants for high 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 From ea4cfea8c091a540f8e895223627b9bf77d87612 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 9 Feb 2024 11:07:52 -0500 Subject: [PATCH 20/40] Update docs/theming/high-contrast-mode.md Co-authored-by: Brandy Carney --- docs/theming/high-contrast-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 406f856714c..4ab87a6fd41 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -27,7 +27,7 @@ There are three provided ways to enable the high contrast theme in an app: **alw ### Always -The default theme provided with Ionic Framework also uses the default color contrast levels. 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 a user's preference for high contrast. +The default theme provided with Ionic Framework uses lower color contrast levels. 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. From baa16e7f1f01eda177e6b2cd4c7e3750560cf707 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 9 Feb 2024 12:19:42 -0500 Subject: [PATCH 21/40] note dark mode for high contrast system --- docs/theming/high-contrast-mode.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 4ab87a6fd41..5bd9054bd85 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -74,6 +74,8 @@ import AlwaysHighContrastMode from '@site/static/usage/v8/theming/always-high-co 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's dark mode preference will also be checked to show either the light or dark variant of the high contrast theme. + From 5d62e64b0281d32cd710a0ee6681909189ee61c3 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 9 Feb 2024 12:20:04 -0500 Subject: [PATCH 22/40] Update docs/theming/high-contrast-mode.md Co-authored-by: Brandy Carney --- docs/theming/high-contrast-mode.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 5bd9054bd85..9e6a7f9ef3e 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -124,7 +124,8 @@ Not sure how to change the system settings? Here's how to enable high contrast m 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#corecss), and the +:::caution +The high contrast light theme must be imported after [core.css](../layout/global-stylesheets#corecss), and the high contrast dark theme must be imported after `dark.system.css`. Otherwise, the standard contrast theme will take priority. ::: From 65b2433bb6202af7d4fe1656929087433f18f7d2 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 9 Feb 2024 12:20:12 -0500 Subject: [PATCH 23/40] Update docs/theming/high-contrast-mode.md Co-authored-by: Brandy Carney --- docs/theming/high-contrast-mode.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 9e6a7f9ef3e..8fd8814e104 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -181,9 +181,11 @@ Not sure how to change the system settings? Here's how to enable high contrast m import ClassHighContrastMode from '@site/static/usage/v8/theming/class-high-contrast-mode/index.md'; -:::caution Important The high contrast light theme must be imported after [core.css](../layout/global-stylesheets#corecss), +:::caution +Important The high contrast light theme must be imported after [core.css](../layout/global-stylesheets#corecss), and the high contrast dark theme must be imported after `dark.class.css`. Otherwise, the standard contrast theme will take -priority. ::: +priority. +::: :::caution Important The `.ion-theme-high-contrast` class **must** be added to the `html` element in order to work with the imported high contrast theme. From 8b1b0fecaf9099c38f5d249b21c5322a9653bb9a Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 9 Feb 2024 12:21:27 -0500 Subject: [PATCH 24/40] fix vue typo --- .../v8/theming/class-high-contrast-mode/vue/example_vue.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 1d0edaf94bf..6c8b274f602 100644 --- 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 @@ -116,7 +116,7 @@ // Check/uncheck the toggle and update the themes const initializeDarkTheme = (isDark) => { - themeToggle.value = isDark; + darkThemeToggle.value = isDark; toggleDarkTheme(isDark); }; From 895624e36035dd35473e09cdd2a11da4f7f34a41 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 9 Feb 2024 12:26:42 -0500 Subject: [PATCH 25/40] note why we are importing both light and dark themes --- docs/theming/high-contrast-mode.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 8fd8814e104..c86e7c09774 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -74,7 +74,7 @@ import AlwaysHighContrastMode from '@site/static/usage/v8/theming/always-high-co 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's dark mode preference will also 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 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. @@ -197,7 +197,7 @@ Ionic has a recommended high contrast theme that can be enabled in three differe 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. - + From e462370ad55b393d5e5c0e0508b1b35682c3692c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 9 Feb 2024 12:31:07 -0500 Subject: [PATCH 26/40] show how to import dark always theme --- docs/theming/high-contrast-mode.md | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index c86e7c09774..f264879d355 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -33,29 +33,33 @@ The default theme provided with Ionic Framework uses lower color contrast levels -```css -@import '@ionic/angular/css/themes/high-contrast.always.css'; +```typescript +@import '@ionic/angular/css/themes/high-contrast.always.css'; // Light theme +// @import '@ionic/angular/css/themes/high-contrast.always.css'; // Dark theme ``` -```ts -import '@ionic/core/css/themes/high-contrast.always.css'; +```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'; +import '@ionic/react/css/themes/high-contrast.always.css'; // Light theme +// import '@ionic/react/css/themes/high-contrast-dark.always.css'; // Dark theme ``` -```ts -import '@ionic/vue/css/themes/high-contrast.always.css'; +```typescript +import '@ionic/vue/css/themes/high-contrast.always.css'; // Light theme +// import '@ionic/vue/css/themes/high-contrast-dark.always.css'; // Dark theme ``` From bcafcbe89d5614d96dab5dcfa93b6785fb98e359 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 9 Feb 2024 12:32:36 -0500 Subject: [PATCH 27/40] remove extra code --- docs/theming/high-contrast-mode.md | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index f264879d355..a5841911787 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -1,7 +1,5 @@ --- title: Hide Contrast Mode -initialTab: 'preview' -inlineHtmlPreviews: true --- import Tabs from '@theme/Tabs'; @@ -128,8 +126,7 @@ Not sure how to change the system settings? Here's how to enable high contrast m 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#corecss), and the +:::caution The high contrast light theme must be imported after [core.css](../layout/global-stylesheets#corecss), and the high contrast dark theme must be imported after `dark.system.css`. Otherwise, the standard contrast theme will take priority. ::: @@ -185,11 +182,9 @@ Not sure how to change the system settings? Here's how to enable high contrast m import ClassHighContrastMode from '@site/static/usage/v8/theming/class-high-contrast-mode/index.md'; -:::caution -Important The high contrast light theme must be imported after [core.css](../layout/global-stylesheets#corecss), +:::caution Important The high contrast light theme must be imported after [core.css](../layout/global-stylesheets#corecss), and the high contrast dark theme must be imported after `dark.class.css`. Otherwise, the standard contrast theme will take -priority. -::: +priority. ::: :::caution Important The `.ion-theme-high-contrast` class **must** be added to the `html` element in order to work with the imported high contrast theme. From 484db1b88edc228b95970888a6f1a88a147cc4c3 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 9 Feb 2024 12:33:23 -0500 Subject: [PATCH 28/40] clean up --- docs/theming/high-contrast-mode.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index a5841911787..953a74bad02 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -182,9 +182,11 @@ Not sure how to change the system settings? Here's how to enable high contrast m import ClassHighContrastMode from '@site/static/usage/v8/theming/class-high-contrast-mode/index.md'; -:::caution Important The high contrast light theme must be imported after [core.css](../layout/global-stylesheets#corecss), +:::caution Important +The high contrast light theme must be imported after [core.css](../layout/global-stylesheets#corecss), and the high contrast dark theme must be imported after `dark.class.css`. Otherwise, the standard contrast theme will take -priority. ::: +priority. +::: :::caution Important The `.ion-theme-high-contrast` class **must** be added to the `html` element in order to work with the imported high contrast theme. From 90ca840cdf6e0e415bc3d8bb39a7e6a9629d9f5e Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 9 Feb 2024 12:34:14 -0500 Subject: [PATCH 29/40] avoid custom titles to avoid linter --- docs/theming/high-contrast-mode.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 953a74bad02..ff081f821a7 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -182,13 +182,12 @@ Not sure how to change the system settings? Here's how to enable high contrast m import ClassHighContrastMode from '@site/static/usage/v8/theming/class-high-contrast-mode/index.md'; -:::caution Important +:::caution The high contrast light theme must be imported after [core.css](../layout/global-stylesheets#corecss), and the high contrast dark theme must be imported after `dark.class.css`. Otherwise, the standard contrast theme will take -priority. -::: +priority. ::: -:::caution Important +:::caution The `.ion-theme-high-contrast` class **must** be added to the `html` element in order to work with the imported high contrast theme. ::: From e46374cdb9fc29124b49a3e0455ed17eb283b68f Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 9 Feb 2024 12:35:17 -0500 Subject: [PATCH 30/40] lint --- docs/theming/high-contrast-mode.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index ff081f821a7..f4b9f2e4712 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -126,7 +126,9 @@ Not sure how to change the system settings? Here's how to enable high contrast m 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#corecss), and the + +:::caution +The high contrast light theme must be imported after [core.css](../layout/global-stylesheets#corecss), and the high contrast dark theme must be imported after `dark.system.css`. Otherwise, the standard contrast theme will take priority. ::: @@ -182,10 +184,12 @@ Not sure how to change the system settings? Here's how to enable high contrast m 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#corecss), and the high contrast dark theme must be imported after `dark.class.css`. Otherwise, the standard contrast theme will take -priority. ::: +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. From 31ca911f6f764e80cdf7d35cf16b3406383911e1 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 9 Feb 2024 12:38:55 -0500 Subject: [PATCH 31/40] note default behavior --- docs/theming/high-contrast-mode.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index f4b9f2e4712..141bc9e3426 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -17,7 +17,7 @@ Ionic offers themes with increased contrast for users with low vision. These the ## Overview -The [Ionic colors](./colors) in the high contrast theme have been updated to meet [Level AAA color contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html) as defined by the Web Content Accessibility Guidelines (WCAG) when used with the appropriate contrast color. The theme also seeks to improve the contrast of UI components such as the border on an Item. However, Ionic's high contrast theme prioritizes text. This means that if increasing the contrast of a UI component against the page background would significantly reduce the contrast of the component's text against the component's background, the UI component contrast will not be modified. +The default theme in Ionic provides [Ionic colors](./colors) 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) 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. The theme also seeks to improve the contrast of UI components such as the border on an Item. However, Ionic's high contrast theme prioritizes text. This means that if increasing the contrast of a UI component against the page background would significantly reduce the contrast of the component's text against the component's background, the UI component contrast will not be modified. ## Enabling High Contrast Theme @@ -25,7 +25,7 @@ There are three provided ways to enable the high contrast theme in an app: **alw ### Always -The default theme provided with Ionic Framework uses lower color contrast levels. 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 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. From 851d6f79ef3e8936af401bb396a28bc7e8625f0c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 9 Feb 2024 12:55:13 -0500 Subject: [PATCH 32/40] clarify --- docs/theming/high-contrast-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 141bc9e3426..a9abed87586 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -17,7 +17,7 @@ Ionic offers themes with increased contrast for users with low vision. These the ## Overview -The default theme in Ionic provides [Ionic colors](./colors) 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) 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. The theme also seeks to improve the contrast of UI components such as the border on an Item. However, Ionic's high contrast theme prioritizes text. This means that if increasing the contrast of a UI component against the page background would significantly reduce the contrast of the component's text against the component's background, the UI component contrast will not be modified. +The default theme in Ionic provides [Ionic colors](./colors) 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) 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 From daadec0488b5887cc846fee188afa8ec9f9a82cc Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 12 Feb 2024 11:18:50 -0500 Subject: [PATCH 33/40] clarify customization options --- docs/theming/high-contrast-mode.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index a9abed87586..314a3cbc7de 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -201,10 +201,14 @@ Ionic has a recommended high contrast theme that can be enabled in three differe 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. @@ -215,6 +219,8 @@ The **always** high contrast theme behaves in the following ways: +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. @@ -226,6 +232,8 @@ The **system** high contrast theme behaves in the following ways: +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. From 3d246bb430eb9a99d85b91f921cba19b3062f085 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 12 Feb 2024 16:01:59 -0500 Subject: [PATCH 34/40] Update docs/theming/high-contrast-mode.md Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> --- docs/theming/high-contrast-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 314a3cbc7de..c27d33d20b3 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -134,7 +134,7 @@ high contrast dark theme must be imported after `dark.system.css`. Otherwise, th ### 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 its application. 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 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: From 025151c799105b571ef7030f5ec4cd44e24d2355 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 12 Feb 2024 16:03:57 -0500 Subject: [PATCH 35/40] typo --- .../v8/theming/class-high-contrast-mode/vue/example_vue.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 6c8b274f602..05e703d2e82 100644 --- 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 @@ -121,7 +121,7 @@ }; const initializeHighContrastTheme = (isHighContrast) => { - highContrastToggle.value = isHighContrast; + highContrastThemeToggle.value = isHighContrast; toggleHighContrastTheme(isHighContrast); }; From 225dc62d4ac724ef797ef341797fc55cdb4f1a6d Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 12 Feb 2024 16:06:12 -0500 Subject: [PATCH 36/40] use css class terminology --- docs/theming/dark-mode.md | 6 +++--- docs/theming/high-contrast-mode.md | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md index bd004502f50..b4bb1fda0e6 100644 --- a/docs/theming/dark-mode.md +++ b/docs/theming/dark-mode.md @@ -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 index c27d33d20b3..613f5596f16 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -115,7 +115,7 @@ 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 [class](#class) approach. +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. @@ -132,7 +132,7 @@ The high contrast light theme must be imported after [core.css](../layout/global high contrast dark theme must be imported after `dark.system.css`. Otherwise, the standard contrast theme will take priority. ::: -### Class +### 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: @@ -173,7 +173,7 @@ 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#class) to conditionally apply the high contrast dark theme. +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#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. @@ -197,7 +197,7 @@ The `.ion-theme-high-contrast` class **must** be added to the `html` element in ## 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 [class](#class). Each of these methods involves importing the high contrast theme file with the corresponding name. +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. From c27e0629644567f66cf7053de00d88aa1c6b8500 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 12 Feb 2024 16:07:19 -0500 Subject: [PATCH 37/40] use css term --- docs/theming/dark-mode.md | 2 +- docs/theming/high-contrast-mode.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md index b4bb1fda0e6..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 diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 613f5596f16..5b39e819abc 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -21,7 +21,7 @@ The default theme in Ionic provides [Ionic colors](./colors) that meet [Level AA ## 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 **class**. +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 From eea490309636ec322ce43673e317c451c02a10fc Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 12 Feb 2024 16:09:48 -0500 Subject: [PATCH 38/40] another typo --- .../v8/theming/class-high-contrast-mode/vue/example_vue.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 05e703d2e82..26fd2ae08d5 100644 --- 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 @@ -141,7 +141,7 @@ // Listen for the toggle check/uncheck to toggle the high contrast theme const highContrastChange = (ev: ToggleCustomEvent) => { - toggleDarkTheme(ev.detail.checked); + toggleHighContrastTheme(ev.detail.checked); }; return { From 5b70e28c09360d0a68a3a02a680f6458ceb4528e Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 12 Feb 2024 16:11:17 -0500 Subject: [PATCH 39/40] consistent links --- docs/theming/high-contrast-mode.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 5b39e819abc..33e4a729f8b 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -17,7 +17,7 @@ Ionic offers themes with increased contrast for users with low vision. These the ## Overview -The default theme in Ionic provides [Ionic colors](./colors) 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) 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 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 @@ -128,7 +128,7 @@ 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#corecss), and the +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. ::: @@ -173,7 +173,7 @@ 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#css-class) to conditionally apply the high contrast dark theme. +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. @@ -186,7 +186,7 @@ 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#corecss), +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. ::: From 7e623d6f02c61d40e92bfa588e2a9647c60a11f2 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 12 Feb 2024 16:50:43 -0500 Subject: [PATCH 40/40] css --- docs/theming/high-contrast-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 33e4a729f8b..20fb1a61629 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -31,7 +31,7 @@ The high contrast theme can be enabled by importing the following stylesheet in -```typescript +```css @import '@ionic/angular/css/themes/high-contrast.always.css'; // Light theme // @import '@ionic/angular/css/themes/high-contrast.always.css'; // Dark theme ```