diff --git a/docs/theming/css-variables.md b/docs/theming/css-variables.md index 85b320b6392..9c6c4f6ff92 100644 --- a/docs/theming/css-variables.md +++ b/docs/theming/css-variables.md @@ -31,12 +31,12 @@ When using the Ionic CLI to start an Angular project, the `src/theme/variables.s } /* Set text color of the entire app for iOS only */ -.ios { +:root.ios { --ion-text-color: #000; } /* Set text color of the entire app for Material Design only */ -.md { +:root.md { --ion-text-color: #222; } ``` diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md index 7ad43dee986..bd004502f50 100644 --- a/docs/theming/dark-mode.md +++ b/docs/theming/dark-mode.md @@ -4,6 +4,9 @@ initialTab: 'preview' inlineHtmlPreviews: true --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + Dark Mode to Change Color Schemes and CSS Properties + + ```css -@media (prefers-color-scheme: dark) { - :root { - /* Dark mode variables go here */ - } -} +@import '@ionic/angular/css/themes/dark.always.css'; ``` -The `prefers-color-scheme` media query is supported by [all modern browsers](https://caniuse.com/#feat=prefers-color-scheme). Users will not be able to benefit from having the dark theme applied using this media query in certain browsers, however, the dark theme can still be applied by using a [CSS class fallback](#css-class-fallback) if support for older browsers is needed. + + -## CSS Class Fallback +```ts +import '@ionic/core/css/themes/dark.always.css'; +``` -As a fallback method for devices that don't support the media query, the dark mode can be applied by styling a CSS selector and applying the class to the document body. + + -```css -@media (prefers-color-scheme: dark) { - :root { - /* Dark mode variables go here */ - } -} +```tsx +import '@ionic/react/css/themes/dark.always.css'; +``` -/* Fallback for older browsers or manual mode */ -body.dark { - /* Dark mode variables go here */ -} + + + +```ts +import '@ionic/vue/css/themes/dark.always.css'; ``` -With the variables targeting the `body.dark` selector, all that is needed now is to add the class to the `` in the app. This can be done in a variety of ways depending on the framework your app is built with. + -Notice that the variables should be in both places in this example. We can [use JavaScript](#combining-with-javascript) in order to avoid setting the variables in two places. + -## Combining with JavaScript +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. -In order to keep the CSS variables written once and avoid having to update them in multiple places, the `dark` class can be added when the value of the `prefers-color-scheme` media query is `dark`. Here's what the CSS would look like: +The following example will always display the dark theme, regardless of the system settings for dark mode. + +import AlwaysDarkMode from '@site/static/usage/v8/theming/always-dark-mode/index.md'; + + + +:::caution Important +Avoid targeting the `.ios` or `.md` selectors to override the Ionic dark theme, as these classes are added to each component and will take priority over globally defined variables. Instead, we can target the mode-specific classes on the `:root` element. +::: + +### System + +The system approach to enable dark mode involves checking the system settings for the user's preferred color scheme. This is the default when starting a new Ionic Framework app. Importing the following stylesheet in the appropriate file will automatically retrieve the user's preference from the system settings and apply the dark theme when dark mode is preferred: + + + + ```css -body.dark { - /* Dark mode variables go here */ -} +@import '@ionic/angular/css/themes/dark.system.css'; ``` -Notice that the variables above are only in the `body.dark` selector now, and the `prefers-color-scheme` media query has been removed. + + -### Automatically Enable Dark Mode +```ts +import '@ionic/core/css/themes/dark.system.css'; +``` -The `dark` class can be added to the `` by checking if the document matches the media query using [matchMedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia). This will allow dark mode to still work based on the user's preference. + + -:::note -The demo below prioritizes the site's theme over the system settings. If your system settings are set to something other than the site's theme when the demo loads, it will match the site's theme. Try changing the system preferences on your device between light & dark mode to see it change. -::: +```tsx +import '@ionic/react/css/themes/dark.system.css'; +``` + + + + +```ts +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. + +The following example uses the system settings to decide when to show dark mode. :::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 [how to enable it on a Mac](https://support.apple.com/en-us/HT208976). +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 AutomaticDarkMode from '@site/static/usage/v8/theming/automatic-dark-mode/index.md'; +import SystemDarkMode from '@site/static/usage/v8/theming/system-dark-mode/index.md'; + + + +:::caution Important +Avoid targeting the `.ios` or `.md` selectors to override the Ionic dark theme, as these classes are added to each component and will take priority over globally defined variables. Instead, we can target the mode-specific classes on the `:root` element. +::: + +### 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'; +``` + + - + -### Manually Toggle Dark Mode +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). +::: -In addition to adding the `dark` class to the `` when the media query changes, the class can be added by the app, such as when a user changes a toggle, to switch between the light and dark themes: +import ClassDarkMode from '@site/static/usage/v8/theming/class-dark-mode/index.md'; -import ManualDarkMode from '@site/static/usage/v8/theming/manual-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 @@ -117,96 +208,246 @@ For developers looking to customize the theme color under the status bar in Safa ## Ionic Dark Theme -Ionic has a recommended theme for variables to use in order to get a dark mode based on the device running the app. It can be broken down into the following parts: +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. -1. Changing the default [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement the dark background in the `body.dark` selector. -2. Setting variables for the dark theme on `ios` devices. -3. Setting variables for the dark theme on `md` devices. +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 following code can be copied and pasted into an app's global CSS file to get Ionic's dark theme. We are [using the CSS media query](#using-media-queries) to enable dark mode. If older browser support is required, use the method described in the [combining with JavaScript](#combining-with-javascript) section. + -:::info -For more information on the variables that are being changed, including other variables that can be added to further customize, see [Themes](themes.md). + + +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) { - /* - * Dark Colors - * ------------------------------------------- - */ - - body { - --ion-color-primary: #428cff; - --ion-color-primary-rgb: 66, 140, 255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3a7be0; - --ion-color-primary-tint: #5598ff; - - --ion-color-secondary: #50c8ff; - --ion-color-secondary-rgb: 80, 200, 255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #46b0e0; - --ion-color-secondary-tint: #62ceff; - - --ion-color-tertiary: #6a64ff; - --ion-color-tertiary-rgb: 106, 100, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #5d58e0; - --ion-color-tertiary-tint: #7974ff; - - --ion-color-success: #2fdf75; - --ion-color-success-rgb: 47, 223, 117; + :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: #29c467; - --ion-color-success-tint: #44e283; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; - --ion-color-warning: #ffd534; - --ion-color-warning-rgb: 255, 213, 52; + --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: #e0bb2e; - --ion-color-warning-tint: #ffd948; - - --ion-color-danger: #ff4961; - --ion-color-danger-rgb: 255, 73, 97; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #e04055; - --ion-color-danger-tint: #ff5b71; - - --ion-color-dark: #f4f5f8; - --ion-color-dark-rgb: 244, 245, 248; + --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: #d7d8da; - --ion-color-dark-tint: #f5f6f9; + --ion-color-dark-shade: #d6d6d6; + --ion-color-dark-tint: #f4f4f4; - --ion-color-medium: #989aa2; - --ion-color-medium-rgb: 152, 154, 162; + --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: #86888f; - --ion-color-medium-tint: #a2a4ab; + --ion-color-medium-shade: #838383; + --ion-color-medium-tint: #a0a0a0; - --ion-color-light: #222428; - --ion-color-light-rgb: 34, 36, 40; + --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: #1e2023; - --ion-color-light-tint: #383a3e; + --ion-color-light-shade: #292929; + --ion-color-light-tint: #444444; } - /* - * iOS Dark Theme - * ------------------------------------------- - */ - - .ios body { + :root.ios { --ion-background-color: #000000; --ion-background-color-rgb: 0, 0, 0; @@ -234,22 +475,16 @@ For more information on the variables that are being changed, including other va --ion-color-step-950: #f2f2f2; --ion-item-background: #000000; - --ion-card-background: #1c1c1d; } - .ios ion-modal { + :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); } - /* - * Material Design Dark Theme - * ------------------------------------------- - */ - - .md body { + :root.md { --ion-background-color: #121212; --ion-background-color-rgb: 18, 18, 18; @@ -279,12 +514,166 @@ For more information on the variables that are being changed, including other va --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; +} +``` + + + + diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json index baceaaefcfe..59ddfbfb456 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.11704998705.1e1f9850", - "@ionic/core": "7.6.2-dev.11704998705.1e1f9850", + "@ionic/angular": "7.6.2-dev.11705355381.14b22962", + "@ionic/core": "7.6.2-dev.11705355381.14b22962", "@angular/platform-browser-dynamic": "17.0.4" } } diff --git a/static/code/stackblitz/v8/angular/styles.css b/static/code/stackblitz/v8/angular/styles.css index d34e7fd4b2c..9976736eeb4 100644 --- a/static/code/stackblitz/v8/angular/styles.css +++ b/static/code/stackblitz/v8/angular/styles.css @@ -28,7 +28,7 @@ /** * Ionic Dark Theme * ----------------------------------------------------- - * For more info, please see: + * For more information, please see: * https://ionicframework.com/docs/theming/dark-mode */ diff --git a/static/code/stackblitz/v8/html/index.html b/static/code/stackblitz/v8/html/index.html index 441b83f2b27..a67bce870c0 100644 --- a/static/code/stackblitz/v8/html/index.html +++ b/static/code/stackblitz/v8/html/index.html @@ -1,8 +1,8 @@ - - + + diff --git a/static/code/stackblitz/v8/html/index.ts b/static/code/stackblitz/v8/html/index.ts index 0e45cf87ccf..ee69ed49698 100644 --- a/static/code/stackblitz/v8/html/index.ts +++ b/static/code/stackblitz/v8/html/index.ts @@ -21,7 +21,7 @@ import '@ionic/core/css/display.css'; /** * Ionic Dark Theme * ----------------------------------------------------- - * For more info, please see: + * For more information, please see: * https://ionicframework.com/docs/theming/dark-mode */ diff --git a/static/code/stackblitz/v8/html/index.withContent.html b/static/code/stackblitz/v8/html/index.withContent.html index 783a865e009..ca48c36a014 100644 --- a/static/code/stackblitz/v8/html/index.withContent.html +++ b/static/code/stackblitz/v8/html/index.withContent.html @@ -1,8 +1,8 @@ - - + + diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json index 3fc82541f08..161edec67e0 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.11704998705.1e1f9850" + "@ionic/core": "7.6.2-dev.11705355381.14b22962" } } diff --git a/static/code/stackblitz/v8/react/app.tsx b/static/code/stackblitz/v8/react/app.tsx index 733e3a586bd..668e3374307 100644 --- a/static/code/stackblitz/v8/react/app.tsx +++ b/static/code/stackblitz/v8/react/app.tsx @@ -20,7 +20,7 @@ import '@ionic/react/css/display.css'; /** * Ionic Dark Theme * ----------------------------------------------------- - * For more info, please see: + * For more information, please see: * https://ionicframework.com/docs/theming/dark-mode */ diff --git a/static/code/stackblitz/v8/react/app.withContent.tsx b/static/code/stackblitz/v8/react/app.withContent.tsx index d826cd168f2..bcc98294168 100644 --- a/static/code/stackblitz/v8/react/app.withContent.tsx +++ b/static/code/stackblitz/v8/react/app.withContent.tsx @@ -20,7 +20,7 @@ import '@ionic/react/css/display.css'; /** * Ionic Dark Theme * ----------------------------------------------------- - * For more info, please see: + * For more information, please see: * https://ionicframework.com/docs/theming/dark-mode */ diff --git a/static/code/stackblitz/v8/react/package-lock.json b/static/code/stackblitz/v8/react/package-lock.json index 0002818b05b..0602a81f632 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.11704998705.1e1f9850", - "@ionic/react-router": "7.6.2-dev.11704998705.1e1f9850", + "@ionic/react": "7.6.2-dev.11705355381.14b22962", + "@ionic/react-router": "7.6.2-dev.11705355381.14b22962", "@types/node": "^20.0.0", "@types/react": "^18.0.9", "@types/react-dom": "^18.0.4", @@ -683,8 +683,8 @@ } }, "node_modules/@ionic/core": { - "version": "7.6.2-dev.11704998705.1e1f9850", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.2-dev.11704998705.1e1f9850.tgz", + "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==", "dependencies": { "@stencil/core": "^4.8.2", @@ -693,11 +693,11 @@ } }, "node_modules/@ionic/react": { - "version": "7.6.2-dev.11704998705.1e1f9850", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.2-dev.11704998705.1e1f9850.tgz", + "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==", "dependencies": { - "@ionic/core": "7.6.2-dev.11704998705.1e1f9850", + "@ionic/core": "7.6.2-dev.11705355381.14b22962", "ionicons": "^7.0.0", "tslib": "*" }, @@ -707,11 +707,11 @@ } }, "node_modules/@ionic/react-router": { - "version": "7.6.2-dev.11704998705.1e1f9850", - "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.6.2-dev.11704998705.1e1f9850.tgz", + "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==", "dependencies": { - "@ionic/react": "7.6.2-dev.11704998705.1e1f9850", + "@ionic/react": "7.6.2-dev.11705355381.14b22962", "tslib": "*" }, "peerDependencies": { @@ -1918,8 +1918,8 @@ "optional": true }, "@ionic/core": { - "version": "7.6.2-dev.11704998705.1e1f9850", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.2-dev.11704998705.1e1f9850.tgz", + "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==", "requires": { "@stencil/core": "^4.8.2", @@ -1928,21 +1928,21 @@ } }, "@ionic/react": { - "version": "7.6.2-dev.11704998705.1e1f9850", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.2-dev.11704998705.1e1f9850.tgz", + "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==", "requires": { - "@ionic/core": "7.6.2-dev.11704998705.1e1f9850", + "@ionic/core": "7.6.2-dev.11705355381.14b22962", "ionicons": "^7.0.0", "tslib": "*" } }, "@ionic/react-router": { - "version": "7.6.2-dev.11704998705.1e1f9850", - "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.6.2-dev.11704998705.1e1f9850.tgz", + "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==", "requires": { - "@ionic/react": "7.6.2-dev.11704998705.1e1f9850", + "@ionic/react": "7.6.2-dev.11705355381.14b22962", "tslib": "*" } }, diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json index fdd9c7c3e25..413146cac02 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.11704998705.1e1f9850", - "@ionic/react-router": "7.6.2-dev.11704998705.1e1f9850", + "@ionic/react": "7.6.2-dev.11705355381.14b22962", + "@ionic/react-router": "7.6.2-dev.11705355381.14b22962", "@types/node": "^20.0.0", "@types/react": "^18.0.9", "@types/react-dom": "^18.0.4", diff --git a/static/code/stackblitz/v8/vue/main.ts b/static/code/stackblitz/v8/vue/main.ts index 03f90875d35..5e4ba10662b 100644 --- a/static/code/stackblitz/v8/vue/main.ts +++ b/static/code/stackblitz/v8/vue/main.ts @@ -22,7 +22,7 @@ import '@ionic/vue/css/display.css'; /** * Ionic Dark Theme * ----------------------------------------------------- - * For more info, please see: + * For more information, please see: * https://ionicframework.com/docs/theming/dark-mode */ diff --git a/static/code/stackblitz/v8/vue/package-lock.json b/static/code/stackblitz/v8/vue/package-lock.json index 6ed88d27a92..b35443c69b5 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.11704998705.1e1f9850", - "@ionic/vue-router": "7.6.2-dev.11704998705.1e1f9850", + "@ionic/vue": "7.6.2-dev.11705355381.14b22962", + "@ionic/vue-router": "7.6.2-dev.11705355381.14b22962", "vue": "^3.2.25", "vue-router": "4.2.5" }, @@ -384,8 +384,8 @@ } }, "node_modules/@ionic/core": { - "version": "7.6.2-dev.11704998705.1e1f9850", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.2-dev.11704998705.1e1f9850.tgz", + "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==", "dependencies": { "@stencil/core": "^4.8.2", @@ -394,20 +394,20 @@ } }, "node_modules/@ionic/vue": { - "version": "7.6.2-dev.11704998705.1e1f9850", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.2-dev.11704998705.1e1f9850.tgz", + "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==", "dependencies": { - "@ionic/core": "7.6.2-dev.11704998705.1e1f9850", + "@ionic/core": "7.6.2-dev.11705355381.14b22962", "ionicons": "^7.0.0" } }, "node_modules/@ionic/vue-router": { - "version": "7.6.2-dev.11704998705.1e1f9850", - "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.6.2-dev.11704998705.1e1f9850.tgz", + "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==", "dependencies": { - "@ionic/vue": "7.6.2-dev.11704998705.1e1f9850" + "@ionic/vue": "7.6.2-dev.11705355381.14b22962" } }, "node_modules/@jridgewell/sourcemap-codec": { @@ -1145,8 +1145,8 @@ "optional": true }, "@ionic/core": { - "version": "7.6.2-dev.11704998705.1e1f9850", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.2-dev.11704998705.1e1f9850.tgz", + "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==", "requires": { "@stencil/core": "^4.8.2", @@ -1155,20 +1155,20 @@ } }, "@ionic/vue": { - "version": "7.6.2-dev.11704998705.1e1f9850", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.2-dev.11704998705.1e1f9850.tgz", + "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==", "requires": { - "@ionic/core": "7.6.2-dev.11704998705.1e1f9850", + "@ionic/core": "7.6.2-dev.11705355381.14b22962", "ionicons": "^7.0.0" } }, "@ionic/vue-router": { - "version": "7.6.2-dev.11704998705.1e1f9850", - "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.6.2-dev.11704998705.1e1f9850.tgz", + "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==", "requires": { - "@ionic/vue": "7.6.2-dev.11704998705.1e1f9850" + "@ionic/vue": "7.6.2-dev.11705355381.14b22962" } }, "@jridgewell/sourcemap-codec": { diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json index 193af332e3a..9ae9b56723f 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.11704998705.1e1f9850", - "@ionic/vue-router": "7.6.2-dev.11704998705.1e1f9850", + "@ionic/vue": "7.6.2-dev.11705355381.14b22962", + "@ionic/vue-router": "7.6.2-dev.11705355381.14b22962", "vue": "^3.2.25", "vue-router": "4.2.5" }, diff --git a/static/usage/common.css b/static/usage/common.css index f52da4a6cec..c0cfced3ab9 100644 --- a/static/usage/common.css +++ b/static/usage/common.css @@ -9,237 +9,6 @@ font-weight: 450 500; } -:root { - /** primary **/ - --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; - - /** secondary **/ - --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; - - /** tertiary **/ - --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; - - /** success **/ - --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; - - /** warning **/ - --ion-color-warning: #ffc409; - --ion-color-warning-rgb: 255, 196, 9; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0, 0, 0; - --ion-color-warning-shade: #e0ac08; - --ion-color-warning-tint: #ffca22; - - /** danger **/ - --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; - - /** dark **/ - --ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; - - /** medium **/ - --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95,95,95; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255,255,255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; - - /** light **/ - --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246,248,252; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0,0,0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; -} - - /* - * Dark Colors - * ------------------------------------------- - */ - - body.dark { - --ion-color-primary: #428cff; - --ion-color-primary-rgb: 66,140,255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; - --ion-color-primary-shade: #3a7be0; - --ion-color-primary-tint: #5598ff; - - --ion-color-secondary: #50c8ff; - --ion-color-secondary-rgb: 80,200,255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255,255,255; - --ion-color-secondary-shade: #46b0e0; - --ion-color-secondary-tint: #62ceff; - - --ion-color-tertiary: #6a64ff; - --ion-color-tertiary-rgb: 106,100,255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255,255,255; - --ion-color-tertiary-shade: #5d58e0; - --ion-color-tertiary-tint: #7974ff; - - --ion-color-success: #2fdf75; - --ion-color-success-rgb: 47,223,117; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0,0,0; - --ion-color-success-shade: #29c467; - --ion-color-success-tint: #44e283; - - --ion-color-warning: #ffd534; - --ion-color-warning-rgb: 255,213,52; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0,0,0; - --ion-color-warning-shade: #e0bb2e; - --ion-color-warning-tint: #ffd948; - - --ion-color-danger: #ff4961; - --ion-color-danger-rgb: 255,73,97; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255,255,255; - --ion-color-danger-shade: #e04055; - --ion-color-danger-tint: #ff5b71; - - --ion-color-dark: #f4f5f8; - --ion-color-dark-rgb: 244,245,248; - --ion-color-dark-contrast: #000000; - --ion-color-dark-contrast-rgb: 0,0,0; - --ion-color-dark-shade: #d7d8da; - --ion-color-dark-tint: #f5f6f9; - - --ion-color-medium: #989aa2; - --ion-color-medium-rgb: 152,154,162; - --ion-color-medium-contrast: #000000; - --ion-color-medium-contrast-rgb: 0,0,0; - --ion-color-medium-shade: #86888f; - --ion-color-medium-tint: #a2a4ab; - - --ion-color-light: #222428; - --ion-color-light-rgb: 34,36,40; - --ion-color-light-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255,255,255; - --ion-color-light-shade: #1e2023; - --ion-color-light-tint: #383a3e; - } - - /* - * iOS Dark Theme - * ------------------------------------------- - */ - - .ios body.dark { - --ion-background-color: #03060b; - --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; - } - - .ios body.dark 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); - } - - - /* - * Material Design Dark Theme - * ------------------------------------------- - */ - - .md body.dark { - --ion-background-color: #03060b; - --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; - } - .container { display: flex; diff --git a/static/usage/common.js b/static/usage/common.js index 52694d7e7b2..5bb65d362eb 100644 --- a/static/usage/common.js +++ b/static/usage/common.js @@ -1,3 +1,10 @@ +const linkElement = document.createElement('link'); + +linkElement.rel = 'stylesheet'; +linkElement.href = 'https://cdn.jsdelivr.net/npm/@ionic/core@7.6.2-dev.11705355381.14b22962/css/themes/dark.class.css'; + +document.head.appendChild(linkElement); + /** * Wait for the initial HTML document to be * loaded and parsed before adding the message @@ -16,9 +23,9 @@ window.addEventListener('DOMContentLoaded', () => { const { data } = ev; if (data.darkMode) { - document.body.classList.add('dark'); + document.documentElement.classList.add('ion-theme-dark'); } else { - document.body.classList.remove('dark'); + document.documentElement.classList.remove('ion-theme-dark'); } }); diff --git a/static/usage/v8/theming/automatic-dark-mode/angular/example_component_html.md b/static/usage/v8/theming/always-dark-mode/angular/example_component_html.md similarity index 100% rename from static/usage/v8/theming/automatic-dark-mode/angular/example_component_html.md rename to static/usage/v8/theming/always-dark-mode/angular/example_component_html.md diff --git a/static/usage/v8/theming/always-dark-mode/angular/styles_css.md b/static/usage/v8/theming/always-dark-mode/angular/styles_css.md new file mode 100644 index 00000000000..a2983eb542f --- /dev/null +++ b/static/usage/v8/theming/always-dark-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 Dark Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +@import '@ionic/angular/css/themes/dark.always.css'; +/* @import '@ionic/angular/css/themes/dark.class.css'; */ +/* @import '@ionic/angular/css/themes/dark.system.css'; */ +``` diff --git a/static/usage/v8/theming/always-dark-mode/demo.html b/static/usage/v8/theming/always-dark-mode/demo.html new file mode 100644 index 00000000000..63479f10c8e --- /dev/null +++ b/static/usage/v8/theming/always-dark-mode/demo.html @@ -0,0 +1,85 @@ + + + + + + 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-dark-mode/index.md b/static/usage/v8/theming/always-dark-mode/index.md new file mode 100644 index 00000000000..18c585f986f --- /dev/null +++ b/static/usage/v8/theming/always-dark-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-dark-mode/javascript/index_html.md b/static/usage/v8/theming/always-dark-mode/javascript/index_html.md new file mode 100644 index 00000000000..0b81aecb1a6 --- /dev/null +++ b/static/usage/v8/theming/always-dark-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-dark-mode/javascript/index_ts.md b/static/usage/v8/theming/always-dark-mode/javascript/index_ts.md new file mode 100644 index 00000000000..a060e55840d --- /dev/null +++ b/static/usage/v8/theming/always-dark-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 Dark Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +import '@ionic/core/css/themes/dark.always.css'; +// import '@ionic/core/css/themes/dark.class.css'; +// import '@ionic/core/css/themes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +defineCustomElements(); +``` diff --git a/static/usage/v8/theming/always-dark-mode/react/app_tsx.md b/static/usage/v8/theming/always-dark-mode/react/app_tsx.md new file mode 100644 index 00000000000..233ae3deb56 --- /dev/null +++ b/static/usage/v8/theming/always-dark-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 Dark Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +import '@ionic/react/css/themes/dark.always.css'; +// import '@ionic/react/css/themes/dark.class.css'; +// import '@ionic/react/css/themes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +import Example from './main'; + +setupIonicReact(); + +export default function App() { + return ( + + + + ); +} +``` diff --git a/static/usage/v8/theming/always-dark-mode/react/main_tsx.md b/static/usage/v8/theming/always-dark-mode/react/main_tsx.md new file mode 100644 index 00000000000..f6a15cd12f7 --- /dev/null +++ b/static/usage/v8/theming/always-dark-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-dark-mode/theme/variables_css.md b/static/usage/v8/theming/always-dark-mode/theme/variables_css.md new file mode 100644 index 00000000000..4cf2a1631e6 --- /dev/null +++ b/static/usage/v8/theming/always-dark-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-dark-mode/vue/example_vue.md b/static/usage/v8/theming/always-dark-mode/vue/example_vue.md new file mode 100644 index 00000000000..14753b7e25f --- /dev/null +++ b/static/usage/v8/theming/always-dark-mode/vue/example_vue.md @@ -0,0 +1,90 @@ +```html + + + +``` diff --git a/static/usage/v8/theming/always-dark-mode/vue/main_ts.md b/static/usage/v8/theming/always-dark-mode/vue/main_ts.md new file mode 100644 index 00000000000..ee9cac48753 --- /dev/null +++ b/static/usage/v8/theming/always-dark-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 Dark Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +import '@ionic/vue/css/themes/dark.always.css'; +// import '@ionic/vue/css/themes/dark.class.css'; +// import '@ionic/vue/css/themes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +createApp(App).use(IonicVue).mount('#app'); +``` diff --git a/static/usage/v8/theming/automatic-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/automatic-dark-mode/angular/example_component_ts.md deleted file mode 100644 index add5097b954..00000000000 --- a/static/usage/v8/theming/automatic-dark-mode/angular/example_component_ts.md +++ /dev/null @@ -1,24 +0,0 @@ -```ts -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-example', - templateUrl: 'example.component.html', -}) -export class ExampleComponent implements OnInit { - ngOnInit() { - // Use matchMedia to check the user preference - const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); - - this.toggleDarkTheme(prefersDark.matches); - - // Listen for changes to the prefers-color-scheme media query - prefersDark.addEventListener('change', (mediaQuery) => this.toggleDarkTheme(mediaQuery.matches)); - } - - // Add or remove the "dark" class on the document body - toggleDarkTheme(shouldAdd) { - document.body.classList.toggle('dark', shouldAdd); - } -} -``` diff --git a/static/usage/v8/theming/automatic-dark-mode/angular/global_css.md b/static/usage/v8/theming/automatic-dark-mode/angular/global_css.md deleted file mode 100644 index e26327f896f..00000000000 --- a/static/usage/v8/theming/automatic-dark-mode/angular/global_css.md +++ /dev/null @@ -1,25 +0,0 @@ -```css -/* - * Optional CSS - * ----------------------------------- - */ - -/* This sets a different background and item background in light mode on ios */ -.ios body { - --ion-background-color: #f2f2f6; - --ion-toolbar-background: var(--ion-background-color); - --ion-item-background: #fff; -} - -/* This sets a different background and item background in light mode on md */ -.md body { - --ion-background-color: #f9f9f9; - --ion-toolbar-background: var(--ion-background-color); - --ion-item-background: #fff; -} - -/* This is added for the flashing that happens when toggling between themes */ -ion-item { - --transition: none; -} -``` diff --git a/static/usage/v8/theming/automatic-dark-mode/react/main_css.md b/static/usage/v8/theming/automatic-dark-mode/react/main_css.md deleted file mode 100644 index e26327f896f..00000000000 --- a/static/usage/v8/theming/automatic-dark-mode/react/main_css.md +++ /dev/null @@ -1,25 +0,0 @@ -```css -/* - * Optional CSS - * ----------------------------------- - */ - -/* This sets a different background and item background in light mode on ios */ -.ios body { - --ion-background-color: #f2f2f6; - --ion-toolbar-background: var(--ion-background-color); - --ion-item-background: #fff; -} - -/* This sets a different background and item background in light mode on md */ -.md body { - --ion-background-color: #f9f9f9; - --ion-toolbar-background: var(--ion-background-color); - --ion-item-background: #fff; -} - -/* This is added for the flashing that happens when toggling between themes */ -ion-item { - --transition: none; -} -``` diff --git a/static/usage/v8/theming/automatic-dark-mode/theme/variables_css.md b/static/usage/v8/theming/automatic-dark-mode/theme/variables_css.md deleted file mode 100644 index 72a10e6d263..00000000000 --- a/static/usage/v8/theming/automatic-dark-mode/theme/variables_css.md +++ /dev/null @@ -1,160 +0,0 @@ -```css -/* Ionic Variables and Theming. For more info, please see: -http://ionicframework.com/docs/theming/ */ - -/* - * Dark Colors - * ------------------------------------------- - */ - -body.dark { - --ion-color-primary: #428cff; - --ion-color-primary-rgb: 66, 140, 255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3a7be0; - --ion-color-primary-tint: #5598ff; - - --ion-color-secondary: #50c8ff; - --ion-color-secondary-rgb: 80, 200, 255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #46b0e0; - --ion-color-secondary-tint: #62ceff; - - --ion-color-tertiary: #6a64ff; - --ion-color-tertiary-rgb: 106, 100, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #5d58e0; - --ion-color-tertiary-tint: #7974ff; - - --ion-color-success: #2fdf75; - --ion-color-success-rgb: 47, 223, 117; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #29c467; - --ion-color-success-tint: #44e283; - - --ion-color-warning: #ffd534; - --ion-color-warning-rgb: 255, 213, 52; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0, 0, 0; - --ion-color-warning-shade: #e0bb2e; - --ion-color-warning-tint: #ffd948; - - --ion-color-danger: #ff4961; - --ion-color-danger-rgb: 255, 73, 97; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #e04055; - --ion-color-danger-tint: #ff5b71; - - --ion-color-dark: #f4f5f8; - --ion-color-dark-rgb: 244, 245, 248; - --ion-color-dark-contrast: #000000; - --ion-color-dark-contrast-rgb: 0, 0, 0; - --ion-color-dark-shade: #d7d8da; - --ion-color-dark-tint: #f5f6f9; - - --ion-color-medium: #989aa2; - --ion-color-medium-rgb: 152, 154, 162; - --ion-color-medium-contrast: #000000; - --ion-color-medium-contrast-rgb: 0, 0, 0; - --ion-color-medium-shade: #86888f; - --ion-color-medium-tint: #a2a4ab; - - --ion-color-light: #222428; - --ion-color-light-rgb: 34, 36, 40; - --ion-color-light-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255, 255, 255; - --ion-color-light-shade: #1e2023; - --ion-color-light-tint: #383a3e; -} - -/* - * iOS Dark Theme - * ------------------------------------------- - */ - -.ios body.dark { - --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: #1c1c1d; - - --ion-card-background: #1c1c1d; -} - -.ios body.dark 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); -} - -/* - * Material Design Dark Theme - * ------------------------------------------- - */ - -.md body.dark { - --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; -} -``` diff --git a/static/usage/v8/theming/manual-dark-mode/angular/example_component_html.md b/static/usage/v8/theming/class-dark-mode/angular/example_component_html.md similarity index 100% rename from static/usage/v8/theming/manual-dark-mode/angular/example_component_html.md rename to static/usage/v8/theming/class-dark-mode/angular/example_component_html.md diff --git a/static/usage/v8/theming/manual-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md similarity index 87% rename from static/usage/v8/theming/manual-dark-mode/angular/example_component_ts.md rename to static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md index ad697b08012..016569e58fa 100644 --- a/static/usage/v8/theming/manual-dark-mode/angular/example_component_ts.md +++ b/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md @@ -31,9 +31,9 @@ export class ExampleComponent implements OnInit { this.toggleDarkTheme(ev.detail.checked); } - // Add or remove the "dark" class on the document body + // Add or remove the "ion-theme-dark" class on the html element toggleDarkTheme(shouldAdd) { - document.body.classList.toggle('dark', shouldAdd); + document.documentElement.classList.toggle('ion-theme-dark', shouldAdd); } } ``` diff --git a/static/usage/v8/theming/class-dark-mode/angular/global_css.md b/static/usage/v8/theming/class-dark-mode/angular/global_css.md new file mode 100644 index 00000000000..83d9fe99158 --- /dev/null +++ b/static/usage/v8/theming/class-dark-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-dark-mode/angular/styles_css.md b/static/usage/v8/theming/class-dark-mode/angular/styles_css.md new file mode 100644 index 00000000000..cd68c5d4997 --- /dev/null +++ b/static/usage/v8/theming/class-dark-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 Dark Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +/* @import '@ionic/angular/css/themes/dark.always.css'; */ +@import '@ionic/angular/css/themes/dark.class.css'; +/* @import '@ionic/angular/css/themes/dark.system.css'; */ +``` diff --git a/static/usage/v8/theming/manual-dark-mode/demo.html b/static/usage/v8/theming/class-dark-mode/demo.html similarity index 69% rename from static/usage/v8/theming/manual-dark-mode/demo.html rename to static/usage/v8/theming/class-dark-mode/demo.html index c4d502db12d..fbc1ee588e9 100644 --- a/static/usage/v8/theming/manual-dark-mode/demo.html +++ b/static/usage/v8/theming/class-dark-mode/demo.html @@ -8,6 +8,10 @@ + @@ -68,17 +72,19 @@ const toggle = document.querySelector('#themeToggle'); // Listen for the toggle check/uncheck to toggle the dark theme - toggle.addEventListener('ionChange', (ev) => toggleDarkTheme(ev.detail.checked)); + toggle.addEventListener('ionChange', (ev) => { + toggleDarkTheme(ev.detail.checked); + }); - // Called by the media query to check/uncheck the toggle - function checkToggle(shouldCheck) { - toggle.checked = shouldCheck; - } + // Use matchMedia to check the user preference + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); - // Add or remove the "dark" class on the document body - function toggleDarkTheme(shouldAdd) { - document.body.classList.toggle('dark', shouldAdd); - } + // Initialize the dark theme based on the initial + // value of the prefers-color-scheme media query + initializeDarkTheme(prefersDark.matches); + + // Listen for changes to the prefers-color-scheme media query + prefersDark.addEventListener('change', (mediaQuery) => initializeDarkTheme(mediaQuery.matches)); // Check/uncheck the toggle and update the theme based on isDark function initializeDarkTheme(isDark) { @@ -86,6 +92,16 @@ toggleDarkTheme(isDark); } + // Called by the media query to check/uncheck the toggle + function checkToggle(shouldCheck) { + toggle.checked = shouldCheck; + } + + // Add or remove the "ion-theme-dark" class on the html element + function toggleDarkTheme(shouldAdd) { + document.documentElement.classList.toggle('ion-theme-dark', shouldAdd); + } + // Demo only code below // ---------------------------------------------------- window.addEventListener('demoReady', (ev) => { @@ -103,34 +119,35 @@ diff --git a/static/usage/v8/theming/manual-dark-mode/index.md b/static/usage/v8/theming/class-dark-mode/index.md similarity index 67% rename from static/usage/v8/theming/manual-dark-mode/index.md rename to static/usage/v8/theming/class-dark-mode/index.md index 5cb7c5432bb..f0fb042f97a 100644 --- a/static/usage/v8/theming/manual-dark-mode/index.md +++ b/static/usage/v8/theming/class-dark-mode/index.md @@ -1,15 +1,19 @@ import Playground from '@site/src/components/global/Playground'; -import javascript_index_html from './javascript.md'; +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 vue from './vue.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'; import variables_css from './theme/variables_css.md'; @@ -19,11 +23,13 @@ import variables_css from './theme/variables_css.md'; javascript: { files: { 'index.html': javascript_index_html, + 'index.ts': javascript_index_ts, 'theme/variables.css': variables_css, }, }, react: { files: { + 'src/App.tsx': react_app_tsx, 'src/main.tsx': react_main_tsx, 'src/main.css': react_main_css, 'src/theme/variables.css': variables_css, @@ -31,7 +37,8 @@ import variables_css from './theme/variables_css.md'; }, vue: { files: { - 'src/components/Example.vue': vue, + 'src/components/Example.vue': vue_example, + 'src/main.ts': vue_main_ts, 'src/theme/variables.css': variables_css, }, }, @@ -40,11 +47,12 @@ import variables_css from './theme/variables_css.md'; 'src/app/example.component.html': angular_example_component_html, 'src/app/example.component.ts': angular_example_component_ts, 'src/global.css': angular_global_css, + 'src/styles.css': angular_styles_css, 'src/theme/variables.css': variables_css, }, }, }} - src="usage/v8/theming/manual-dark-mode/demo.html" + src="usage/v8/theming/class-dark-mode/demo.html" devicePreview includeIonContent={false} /> diff --git a/static/usage/v8/theming/manual-dark-mode/javascript.md b/static/usage/v8/theming/class-dark-mode/javascript/index_html.md similarity index 76% rename from static/usage/v8/theming/manual-dark-mode/javascript.md rename to static/usage/v8/theming/class-dark-mode/javascript/index_html.md index 33173b9eea3..3628ba31258 100644 --- a/static/usage/v8/theming/manual-dark-mode/javascript.md +++ b/static/usage/v8/theming/class-dark-mode/javascript/index_html.md @@ -17,7 +17,7 @@ Appearance - Dark Mode + Dark Mode @@ -79,33 +79,14 @@ toggle.checked = shouldCheck; } - // Add or remove the "dark" class on the document body + // Add or remove the "ion-theme-dark" class on the html element function toggleDarkTheme(shouldAdd) { - document.body.classList.toggle('dark', shouldAdd); + document.documentElement.classList.toggle('ion-theme-dark', shouldAdd); } diff --git a/static/usage/v8/theming/automatic-dark-mode/index.md b/static/usage/v8/theming/system-dark-mode/index.md similarity index 64% rename from static/usage/v8/theming/automatic-dark-mode/index.md rename to static/usage/v8/theming/system-dark-mode/index.md index 13ea9d14464..0ba01ef41e2 100644 --- a/static/usage/v8/theming/automatic-dark-mode/index.md +++ b/static/usage/v8/theming/system-dark-mode/index.md @@ -1,15 +1,18 @@ import Playground from '@site/src/components/global/Playground'; -import javascript_index_html from './javascript.md'; +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 vue from './vue.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'; import variables_css from './theme/variables_css.md'; @@ -19,11 +22,13 @@ import variables_css from './theme/variables_css.md'; javascript: { files: { 'index.html': javascript_index_html, + 'index.ts': javascript_index_ts, 'theme/variables.css': variables_css, }, }, react: { files: { + 'src/App.tsx': react_app_tsx, 'src/main.tsx': react_main_tsx, 'src/main.css': react_main_css, 'src/theme/variables.css': variables_css, @@ -31,20 +36,21 @@ import variables_css from './theme/variables_css.md'; }, vue: { files: { - 'src/components/Example.vue': vue, + 'src/components/Example.vue': vue_example, + 'src/main.ts': vue_main_ts, 'src/theme/variables.css': variables_css, }, }, angular: { files: { 'src/app/example.component.html': angular_example_component_html, - 'src/app/example.component.ts': angular_example_component_ts, 'src/global.css': angular_global_css, + 'src/styles.css': angular_styles_css, 'src/theme/variables.css': variables_css, }, }, }} - src="usage/v8/theming/automatic-dark-mode/demo.html" + src="usage/v8/theming/system-dark-mode/demo.html" devicePreview includeIonContent={false} /> diff --git a/static/usage/v8/theming/automatic-dark-mode/javascript.md b/static/usage/v8/theming/system-dark-mode/javascript/index_html.md similarity index 54% rename from static/usage/v8/theming/automatic-dark-mode/javascript.md rename to static/usage/v8/theming/system-dark-mode/javascript/index_html.md index 0300924c4e0..fc6ad02e154 100644 --- a/static/usage/v8/theming/automatic-dark-mode/javascript.md +++ b/static/usage/v8/theming/system-dark-mode/javascript/index_html.md @@ -43,42 +43,8 @@ - -