From b07fd82c1335ed63f0350f3e138b5b8653d52b8b Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 12 Jan 2024 16:28:28 -0500 Subject: [PATCH 01/22] feat(theming): add the dark mode playground for system dark theme --- .../angular/example_component_ts.md | 24 --- .../theme/variables_css.md | 160 ------------------ .../angular/example_component_html.md | 0 .../angular/global_css.md | 22 ++- .../system-dark-mode/angular/styles_css.md | 39 +++++ .../demo.html | 41 ++--- .../index.md | 26 +-- .../javascript/index_html.md} | 37 ++-- .../system-dark-mode/javascript/index_ts.md | 35 ++++ .../theming/system-dark-mode/react/app_tsx.md | 46 +++++ .../react/main_css.md | 22 ++- .../react/main_tsx.md | 17 +- .../vue/example_vue.md} | 43 +++-- .../theming/system-dark-mode/vue/main_ts.md | 38 +++++ 14 files changed, 252 insertions(+), 298 deletions(-) delete mode 100644 static/usage/v8/theming/automatic-dark-mode/angular/example_component_ts.md delete mode 100644 static/usage/v8/theming/automatic-dark-mode/theme/variables_css.md rename static/usage/v8/theming/{automatic-dark-mode => system-dark-mode}/angular/example_component_html.md (100%) rename static/usage/v8/theming/{automatic-dark-mode => system-dark-mode}/angular/global_css.md (63%) create mode 100644 static/usage/v8/theming/system-dark-mode/angular/styles_css.md rename static/usage/v8/theming/{automatic-dark-mode => system-dark-mode}/demo.html (80%) rename static/usage/v8/theming/{automatic-dark-mode => system-dark-mode}/index.md (55%) rename static/usage/v8/theming/{automatic-dark-mode/javascript.md => system-dark-mode/javascript/index_html.md} (75%) create mode 100644 static/usage/v8/theming/system-dark-mode/javascript/index_ts.md create mode 100644 static/usage/v8/theming/system-dark-mode/react/app_tsx.md rename static/usage/v8/theming/{automatic-dark-mode => system-dark-mode}/react/main_css.md (63%) rename static/usage/v8/theming/{automatic-dark-mode => system-dark-mode}/react/main_tsx.md (77%) rename static/usage/v8/theming/{automatic-dark-mode/vue.md => system-dark-mode/vue/example_vue.md} (79%) create mode 100644 static/usage/v8/theming/system-dark-mode/vue/main_ts.md 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/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/automatic-dark-mode/angular/example_component_html.md b/static/usage/v8/theming/system-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/system-dark-mode/angular/example_component_html.md diff --git a/static/usage/v8/theming/automatic-dark-mode/angular/global_css.md b/static/usage/v8/theming/system-dark-mode/angular/global_css.md similarity index 63% rename from static/usage/v8/theming/automatic-dark-mode/angular/global_css.md rename to static/usage/v8/theming/system-dark-mode/angular/global_css.md index e26327f896f..2a691a75a87 100644 --- a/static/usage/v8/theming/automatic-dark-mode/angular/global_css.md +++ b/static/usage/v8/theming/system-dark-mode/angular/global_css.md @@ -4,22 +4,30 @@ * ----------------------------------- */ +/* This is added for the flashing that happens when toggling between themes */ +ion-item { + --transition: none; +} + /* This sets a different background and item background in light mode on ios */ -.ios body { - --ion-background-color: #f2f2f6; +.ios { + --ion-background-color: var(--ion-color-step-50, #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; +.md { + --ion-background-color: var(--ion-color-step-100, #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; +/* This sets a different item background in dark mode on ios and md */ +@media (prefers-color-scheme: dark) { + .ios, + .md { + --ion-item-background: #1c1c1d; + } } ``` diff --git a/static/usage/v8/theming/system-dark-mode/angular/styles_css.md b/static/usage/v8/theming/system-dark-mode/angular/styles_css.md new file mode 100644 index 00000000000..b32c57c87d0 --- /dev/null +++ b/static/usage/v8/theming/system-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 info, 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/automatic-dark-mode/demo.html b/static/usage/v8/theming/system-dark-mode/demo.html similarity index 80% rename from static/usage/v8/theming/automatic-dark-mode/demo.html rename to static/usage/v8/theming/system-dark-mode/demo.html index 17acbcf3fe6..af8fc6ffced 100644 --- a/static/usage/v8/theming/automatic-dark-mode/demo.html +++ b/static/usage/v8/theming/system-dark-mode/demo.html @@ -8,6 +8,7 @@ + @@ -57,47 +58,37 @@ - - diff --git a/static/usage/v8/theming/automatic-dark-mode/index.md b/static/usage/v8/theming/system-dark-mode/index.md similarity index 55% rename from static/usage/v8/theming/automatic-dark-mode/index.md rename to static/usage/v8/theming/system-dark-mode/index.md index 13ea9d14464..9b96f116a6a 100644 --- a/static/usage/v8/theming/automatic-dark-mode/index.md +++ b/static/usage/v8/theming/system-dark-mode/index.md @@ -1,17 +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 variables_css from './theme/variables_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/automatic-dark-mode/javascript.md b/static/usage/v8/theming/system-dark-mode/javascript/index_html.md similarity index 75% 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..fbf73f4951c 100644 --- a/static/usage/v8/theming/automatic-dark-mode/javascript.md +++ b/static/usage/v8/theming/system-dark-mode/javascript/index_html.md @@ -43,44 +43,37 @@ - - ``` diff --git a/static/usage/v8/theming/system-dark-mode/javascript/index_ts.md b/static/usage/v8/theming/system-dark-mode/javascript/index_ts.md new file mode 100644 index 00000000000..132b044b5c0 --- /dev/null +++ b/static/usage/v8/theming/system-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 info, 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/system-dark-mode/react/app_tsx.md b/static/usage/v8/theming/system-dark-mode/react/app_tsx.md new file mode 100644 index 00000000000..c96e810fd07 --- /dev/null +++ b/static/usage/v8/theming/system-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 info, 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/automatic-dark-mode/react/main_css.md b/static/usage/v8/theming/system-dark-mode/react/main_css.md similarity index 63% rename from static/usage/v8/theming/automatic-dark-mode/react/main_css.md rename to static/usage/v8/theming/system-dark-mode/react/main_css.md index e26327f896f..2a691a75a87 100644 --- a/static/usage/v8/theming/automatic-dark-mode/react/main_css.md +++ b/static/usage/v8/theming/system-dark-mode/react/main_css.md @@ -4,22 +4,30 @@ * ----------------------------------- */ +/* This is added for the flashing that happens when toggling between themes */ +ion-item { + --transition: none; +} + /* This sets a different background and item background in light mode on ios */ -.ios body { - --ion-background-color: #f2f2f6; +.ios { + --ion-background-color: var(--ion-color-step-50, #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; +.md { + --ion-background-color: var(--ion-color-step-100, #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; +/* This sets a different item background in dark mode on ios and md */ +@media (prefers-color-scheme: dark) { + .ios, + .md { + --ion-item-background: #1c1c1d; + } } ``` diff --git a/static/usage/v8/theming/automatic-dark-mode/react/main_tsx.md b/static/usage/v8/theming/system-dark-mode/react/main_tsx.md similarity index 77% rename from static/usage/v8/theming/automatic-dark-mode/react/main_tsx.md rename to static/usage/v8/theming/system-dark-mode/react/main_tsx.md index dc92e1ad1cf..58d10fa6a6b 100644 --- a/static/usage/v8/theming/automatic-dark-mode/react/main_tsx.md +++ b/static/usage/v8/theming/system-dark-mode/react/main_tsx.md @@ -1,5 +1,5 @@ ```tsx -import React, { useEffect } from 'react'; +import React from 'react'; import { IonBackButton, IonButton, @@ -22,21 +22,6 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons import './main.css'; function Example() { - // Add or remove the "dark" class on the document body - const toggleDarkTheme = (shouldAdd: boolean) => { - document.body.classList.toggle('dark', shouldAdd); - }; - - useEffect(() => { - // Use matchMedia to check the user preference - const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); - - toggleDarkTheme(prefersDark.matches); - - // Listen for changes to the prefers-color-scheme media query - prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches)); - }, []); - return ( <> diff --git a/static/usage/v8/theming/automatic-dark-mode/vue.md b/static/usage/v8/theming/system-dark-mode/vue/example_vue.md similarity index 79% rename from static/usage/v8/theming/automatic-dark-mode/vue.md rename to static/usage/v8/theming/system-dark-mode/vue/example_vue.md index 45dd5f8d9a5..52900522400 100644 --- a/static/usage/v8/theming/automatic-dark-mode/vue.md +++ b/static/usage/v8/theming/system-dark-mode/vue/example_vue.md @@ -83,47 +83,42 @@ IonToolbar, }, setup() { - // 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 - const toggleDarkTheme = (shouldAdd) => { - document.body.classList.toggle('dark', shouldAdd); - }; - - toggleDarkTheme(prefersDark.matches); - - // Listen for changes to the prefers-color-scheme media query - prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches)); - - return { personCircle, personCircleOutline, sunnyOutline, sunny, toggleDarkTheme }; + return { personCircle, personCircleOutline, sunnyOutline, sunny }; }, }); ``` diff --git a/static/usage/v8/theming/system-dark-mode/vue/main_ts.md b/static/usage/v8/theming/system-dark-mode/vue/main_ts.md new file mode 100644 index 00000000000..44641fe2f3c --- /dev/null +++ b/static/usage/v8/theming/system-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 info, 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'); +``` From 2ab79156fc02700713581633e698dba75a23b2dd Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 12 Jan 2024 16:36:24 -0500 Subject: [PATCH 02/22] feat(theming): add the dark mode playground for always dark theme --- .../angular/example_component_html.md | 45 +++++++ .../always-dark-mode/angular/global_css.md | 25 ++++ .../always-dark-mode/angular/styles_css.md | 39 ++++++ .../v8/theming/always-dark-mode/demo.html | 87 +++++++++++++ .../v8/theming/always-dark-mode/index.md | 50 ++++++++ .../always-dark-mode/javascript/index_html.md | 71 +++++++++++ .../always-dark-mode/javascript/index_ts.md | 35 ++++++ .../theming/always-dark-mode/react/app_tsx.md | 46 +++++++ .../always-dark-mode/react/main_css.md | 25 ++++ .../always-dark-mode/react/main_tsx.md | 78 ++++++++++++ .../always-dark-mode/vue/example_vue.md | 116 ++++++++++++++++++ .../theming/always-dark-mode/vue/main_ts.md | 38 ++++++ 12 files changed, 655 insertions(+) create mode 100644 static/usage/v8/theming/always-dark-mode/angular/example_component_html.md create mode 100644 static/usage/v8/theming/always-dark-mode/angular/global_css.md create mode 100644 static/usage/v8/theming/always-dark-mode/angular/styles_css.md create mode 100644 static/usage/v8/theming/always-dark-mode/demo.html create mode 100644 static/usage/v8/theming/always-dark-mode/index.md create mode 100644 static/usage/v8/theming/always-dark-mode/javascript/index_html.md create mode 100644 static/usage/v8/theming/always-dark-mode/javascript/index_ts.md create mode 100644 static/usage/v8/theming/always-dark-mode/react/app_tsx.md create mode 100644 static/usage/v8/theming/always-dark-mode/react/main_css.md create mode 100644 static/usage/v8/theming/always-dark-mode/react/main_tsx.md create mode 100644 static/usage/v8/theming/always-dark-mode/vue/example_vue.md create mode 100644 static/usage/v8/theming/always-dark-mode/vue/main_ts.md diff --git a/static/usage/v8/theming/always-dark-mode/angular/example_component_html.md b/static/usage/v8/theming/always-dark-mode/angular/example_component_html.md new file mode 100644 index 00000000000..418eddfc30f --- /dev/null +++ b/static/usage/v8/theming/always-dark-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-dark-mode/angular/global_css.md b/static/usage/v8/theming/always-dark-mode/angular/global_css.md new file mode 100644 index 00000000000..2473b652672 --- /dev/null +++ b/static/usage/v8/theming/always-dark-mode/angular/global_css.md @@ -0,0 +1,25 @@ +```css +/* + * Optional CSS + * ----------------------------------- + */ + +/* This is added for the flashing that happens when toggling between themes */ +ion-item { + --transition: none; +} + +/* This sets a different background and item background for the dark theme on ios */ +.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 dark theme on md */ +.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/angular/styles_css.md b/static/usage/v8/theming/always-dark-mode/angular/styles_css.md new file mode 100644 index 00000000000..a67344515b9 --- /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 info, 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..be013af3bf5 --- /dev/null +++ b/static/usage/v8/theming/always-dark-mode/demo.html @@ -0,0 +1,87 @@ + + + + + + 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..cd58fbe6665 --- /dev/null +++ b/static/usage/v8/theming/always-dark-mode/index.md @@ -0,0 +1,50 @@ +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_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/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..bb322c6cd2b --- /dev/null +++ b/static/usage/v8/theming/always-dark-mode/javascript/index_html.md @@ -0,0 +1,71 @@ +```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..b7b3c134e1c --- /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 info, 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..3008a67b937 --- /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 info, 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_css.md b/static/usage/v8/theming/always-dark-mode/react/main_css.md new file mode 100644 index 00000000000..2473b652672 --- /dev/null +++ b/static/usage/v8/theming/always-dark-mode/react/main_css.md @@ -0,0 +1,25 @@ +```css +/* + * Optional CSS + * ----------------------------------- + */ + +/* This is added for the flashing that happens when toggling between themes */ +ion-item { + --transition: none; +} + +/* This sets a different background and item background for the dark theme on ios */ +.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 dark theme on md */ +.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/react/main_tsx.md b/static/usage/v8/theming/always-dark-mode/react/main_tsx.md new file mode 100644 index 00000000000..58d10fa6a6b --- /dev/null +++ b/static/usage/v8/theming/always-dark-mode/react/main_tsx.md @@ -0,0 +1,78 @@ +```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'; + +import './main.css'; + +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/vue/example_vue.md b/static/usage/v8/theming/always-dark-mode/vue/example_vue.md new file mode 100644 index 00000000000..59b9059d46c --- /dev/null +++ b/static/usage/v8/theming/always-dark-mode/vue/example_vue.md @@ -0,0 +1,116 @@ +```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..d1b3c5bf486 --- /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 info, 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'); +``` From e4732c150904f9a02b847e83a8401c0a5600f742 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 12 Jan 2024 17:48:40 -0500 Subject: [PATCH 03/22] feat(theming): add the dark mode playground for class dark theme --- .../angular/example_component_html.md | 0 .../angular/example_component_ts.md | 4 +- .../angular/global_css.md | 20 ++- .../class-dark-mode/angular/styles_css.md | 39 +++++ .../demo.html | 60 ++++--- .../index.md | 24 +-- .../javascript/index_html.md} | 26 +-- .../class-dark-mode/javascript/index_ts.md | 35 ++++ .../theming/class-dark-mode/react/app_tsx.md | 46 +++++ .../react/main_css.md | 20 ++- .../react/main_tsx.md | 4 +- .../vue/example_vue.md} | 30 ++-- .../v8/theming/class-dark-mode/vue/main_ts.md | 38 +++++ .../manual-dark-mode/theme/variables_css.md | 160 ------------------ 14 files changed, 272 insertions(+), 234 deletions(-) rename static/usage/v8/theming/{manual-dark-mode => class-dark-mode}/angular/example_component_html.md (100%) rename static/usage/v8/theming/{manual-dark-mode => class-dark-mode}/angular/example_component_ts.md (87%) rename static/usage/v8/theming/{manual-dark-mode => class-dark-mode}/angular/global_css.md (64%) create mode 100644 static/usage/v8/theming/class-dark-mode/angular/styles_css.md rename static/usage/v8/theming/{manual-dark-mode => class-dark-mode}/demo.html (77%) rename static/usage/v8/theming/{manual-dark-mode => class-dark-mode}/index.md (60%) rename static/usage/v8/theming/{manual-dark-mode/javascript.md => class-dark-mode/javascript/index_html.md} (85%) create mode 100644 static/usage/v8/theming/class-dark-mode/javascript/index_ts.md create mode 100644 static/usage/v8/theming/class-dark-mode/react/app_tsx.md rename static/usage/v8/theming/{manual-dark-mode => class-dark-mode}/react/main_css.md (64%) rename static/usage/v8/theming/{manual-dark-mode => class-dark-mode}/react/main_tsx.md (95%) rename static/usage/v8/theming/{manual-dark-mode/vue.md => class-dark-mode/vue/example_vue.md} (88%) create mode 100644 static/usage/v8/theming/class-dark-mode/vue/main_ts.md delete mode 100644 static/usage/v8/theming/manual-dark-mode/theme/variables_css.md 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/manual-dark-mode/angular/global_css.md b/static/usage/v8/theming/class-dark-mode/angular/global_css.md similarity index 64% rename from static/usage/v8/theming/manual-dark-mode/angular/global_css.md rename to static/usage/v8/theming/class-dark-mode/angular/global_css.md index e26327f896f..7d847e48717 100644 --- a/static/usage/v8/theming/manual-dark-mode/angular/global_css.md +++ b/static/usage/v8/theming/class-dark-mode/angular/global_css.md @@ -4,22 +4,28 @@ * ----------------------------------- */ +/* This is added for the flashing that happens when toggling between themes */ +ion-item { + --transition: none; +} + /* This sets a different background and item background in light mode on ios */ -.ios body { - --ion-background-color: #f2f2f6; +html.ios { + --ion-background-color: var(--ion-color-step-50, #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; +html.md { + --ion-background-color: var(--ion-color-step-100, #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; +/* This sets a different item background in dark mode on ios and md */ +.ion-theme-dark.ios, +.ion-theme-dark.md { + --ion-item-background: #1c1c1d; } ``` 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..023617505ac --- /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 info, 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 77% rename from static/usage/v8/theming/manual-dark-mode/demo.html rename to static/usage/v8/theming/class-dark-mode/demo.html index c4d502db12d..455da57f459 100644 --- a/static/usage/v8/theming/manual-dark-mode/demo.html +++ b/static/usage/v8/theming/class-dark-mode/demo.html @@ -8,6 +8,7 @@ + @@ -68,17 +69,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 +89,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) => { @@ -104,33 +117,34 @@ diff --git a/static/usage/v8/theming/manual-dark-mode/index.md b/static/usage/v8/theming/class-dark-mode/index.md similarity index 60% rename from static/usage/v8/theming/manual-dark-mode/index.md rename to static/usage/v8/theming/class-dark-mode/index.md index 5cb7c5432bb..4dd5c6f0c34 100644 --- a/static/usage/v8/theming/manual-dark-mode/index.md +++ b/static/usage/v8/theming/class-dark-mode/index.md @@ -1,17 +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 variables_css from './theme/variables_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/manual-dark-mode/javascript.md b/static/usage/v8/theming/class-dark-mode/javascript/index_html.md similarity index 85% 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..ec3ac35e9f0 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,9 +79,9 @@ 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); } @@ -91,23 +91,29 @@ * ----------------------------------- */ + /* This is added for the flashing that happens when toggling between themes */ + ion-item { + --transition: none; + } + /* This sets a different background and item background in light mode on ios */ - .ios body { - --ion-background-color: #f2f2f6; + html.ios { + --ion-background-color: var(--ion-color-step-50, #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; + html.md { + --ion-background-color: var(--ion-color-step-100, #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; + /* This sets a different item background in dark mode on ios and md */ + .ion-theme-dark.ios, + .ion-theme-dark.md { + --ion-item-background: #1c1c1d; } ``` diff --git a/static/usage/v8/theming/class-dark-mode/javascript/index_ts.md b/static/usage/v8/theming/class-dark-mode/javascript/index_ts.md new file mode 100644 index 00000000000..4fb11475bc8 --- /dev/null +++ b/static/usage/v8/theming/class-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 info, 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/class-dark-mode/react/app_tsx.md b/static/usage/v8/theming/class-dark-mode/react/app_tsx.md new file mode 100644 index 00000000000..bdbca518b00 --- /dev/null +++ b/static/usage/v8/theming/class-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 info, 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/manual-dark-mode/react/main_css.md b/static/usage/v8/theming/class-dark-mode/react/main_css.md similarity index 64% rename from static/usage/v8/theming/manual-dark-mode/react/main_css.md rename to static/usage/v8/theming/class-dark-mode/react/main_css.md index e26327f896f..7d847e48717 100644 --- a/static/usage/v8/theming/manual-dark-mode/react/main_css.md +++ b/static/usage/v8/theming/class-dark-mode/react/main_css.md @@ -4,22 +4,28 @@ * ----------------------------------- */ +/* This is added for the flashing that happens when toggling between themes */ +ion-item { + --transition: none; +} + /* This sets a different background and item background in light mode on ios */ -.ios body { - --ion-background-color: #f2f2f6; +html.ios { + --ion-background-color: var(--ion-color-step-50, #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; +html.md { + --ion-background-color: var(--ion-color-step-100, #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; +/* This sets a different item background in dark mode on ios and md */ +.ion-theme-dark.ios, +.ion-theme-dark.md { + --ion-item-background: #1c1c1d; } ``` diff --git a/static/usage/v8/theming/manual-dark-mode/react/main_tsx.md b/static/usage/v8/theming/class-dark-mode/react/main_tsx.md similarity index 95% rename from static/usage/v8/theming/manual-dark-mode/react/main_tsx.md rename to static/usage/v8/theming/class-dark-mode/react/main_tsx.md index 70938e6a804..698ac620472 100644 --- a/static/usage/v8/theming/manual-dark-mode/react/main_tsx.md +++ b/static/usage/v8/theming/class-dark-mode/react/main_tsx.md @@ -30,9 +30,9 @@ function Example() { 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 const toggleDarkTheme = (shouldAdd: boolean) => { - document.body.classList.toggle('dark', shouldAdd); + document.documentElement.classList.toggle('ion-theme-dark', shouldAdd); }; // Check/uncheck the toggle and update the theme based on isDark diff --git a/static/usage/v8/theming/manual-dark-mode/vue.md b/static/usage/v8/theming/class-dark-mode/vue/example_vue.md similarity index 88% rename from static/usage/v8/theming/manual-dark-mode/vue.md rename to static/usage/v8/theming/class-dark-mode/vue/example_vue.md index 2dfda3aa30c..292bc62d266 100644 --- a/static/usage/v8/theming/manual-dark-mode/vue.md +++ b/static/usage/v8/theming/class-dark-mode/vue/example_vue.md @@ -97,9 +97,9 @@ // 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 + // Add or remove the "ion-theme-dark" class on the html element const toggleDarkTheme = (shouldAdd) => { - document.body.classList.toggle('dark', shouldAdd); + document.documentElement.classList.toggle('ion-theme-dark', shouldAdd); }; // Check/uncheck the toggle and update the theme based on isDark @@ -136,27 +136,33 @@ ``` diff --git a/static/usage/v8/theming/class-dark-mode/vue/main_ts.md b/static/usage/v8/theming/class-dark-mode/vue/main_ts.md new file mode 100644 index 00000000000..6f4ec6739be --- /dev/null +++ b/static/usage/v8/theming/class-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 info, 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/manual-dark-mode/theme/variables_css.md b/static/usage/v8/theming/manual-dark-mode/theme/variables_css.md deleted file mode 100644 index 72a10e6d263..00000000000 --- a/static/usage/v8/theming/manual-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; -} -``` From 79ac39a8bfaec5e0f8f04eaac74a9d4bc804683e Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 15 Jan 2024 13:37:46 -0500 Subject: [PATCH 04/22] docs(theming): fix css styles to target body --- .../v8/theming/always-dark-mode/angular/global_css.md | 4 ++-- static/usage/v8/theming/always-dark-mode/demo.html | 4 ++-- .../v8/theming/always-dark-mode/javascript/index_html.md | 4 ++-- .../usage/v8/theming/always-dark-mode/react/main_css.md | 4 ++-- .../usage/v8/theming/always-dark-mode/vue/example_vue.md | 4 ++-- .../v8/theming/system-dark-mode/angular/global_css.md | 8 ++++---- static/usage/v8/theming/system-dark-mode/demo.html | 8 ++++---- .../v8/theming/system-dark-mode/javascript/index_html.md | 8 ++++---- .../usage/v8/theming/system-dark-mode/react/main_css.md | 8 ++++---- .../usage/v8/theming/system-dark-mode/vue/example_vue.md | 8 ++++---- 10 files changed, 30 insertions(+), 30 deletions(-) diff --git a/static/usage/v8/theming/always-dark-mode/angular/global_css.md b/static/usage/v8/theming/always-dark-mode/angular/global_css.md index 2473b652672..9e4b071d6f8 100644 --- a/static/usage/v8/theming/always-dark-mode/angular/global_css.md +++ b/static/usage/v8/theming/always-dark-mode/angular/global_css.md @@ -10,14 +10,14 @@ ion-item { } /* This sets a different background and item background for the dark theme on ios */ -.ios { +html.ios body { --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 dark theme on md */ -.md { +html.md body { --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/demo.html b/static/usage/v8/theming/always-dark-mode/demo.html index be013af3bf5..efcca3b4be4 100644 --- a/static/usage/v8/theming/always-dark-mode/demo.html +++ b/static/usage/v8/theming/always-dark-mode/demo.html @@ -70,14 +70,14 @@ } /* This sets a different background and item background for the dark theme on ios */ - .ios { + html.ios body { --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 dark theme on md */ - .md { + html.md body { --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/javascript/index_html.md b/static/usage/v8/theming/always-dark-mode/javascript/index_html.md index bb322c6cd2b..6b59fff63be 100644 --- a/static/usage/v8/theming/always-dark-mode/javascript/index_html.md +++ b/static/usage/v8/theming/always-dark-mode/javascript/index_html.md @@ -55,14 +55,14 @@ } /* This sets a different background and item background for the dark theme on ios */ - .ios { + html.ios body { --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 dark theme on md */ - .md { + html.md body { --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/react/main_css.md b/static/usage/v8/theming/always-dark-mode/react/main_css.md index 2473b652672..9e4b071d6f8 100644 --- a/static/usage/v8/theming/always-dark-mode/react/main_css.md +++ b/static/usage/v8/theming/always-dark-mode/react/main_css.md @@ -10,14 +10,14 @@ ion-item { } /* This sets a different background and item background for the dark theme on ios */ -.ios { +html.ios body { --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 dark theme on md */ -.md { +html.md body { --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 index 59b9059d46c..e5b007cd50d 100644 --- a/static/usage/v8/theming/always-dark-mode/vue/example_vue.md +++ b/static/usage/v8/theming/always-dark-mode/vue/example_vue.md @@ -100,14 +100,14 @@ } /* This sets a different background and item background for the dark theme on ios */ - .ios { + html.ios body { --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 dark theme on md */ - .md { + html.md body { --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-dark-mode/angular/global_css.md b/static/usage/v8/theming/system-dark-mode/angular/global_css.md index 2a691a75a87..13f07292dd0 100644 --- a/static/usage/v8/theming/system-dark-mode/angular/global_css.md +++ b/static/usage/v8/theming/system-dark-mode/angular/global_css.md @@ -10,14 +10,14 @@ ion-item { } /* This sets a different background and item background in light mode on ios */ -.ios { +html.ios body { --ion-background-color: var(--ion-color-step-50, #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 { +html.md body { --ion-background-color: var(--ion-color-step-100, #f9f9f9); --ion-toolbar-background: var(--ion-background-color); --ion-item-background: #fff; @@ -25,8 +25,8 @@ ion-item { /* This sets a different item background in dark mode on ios and md */ @media (prefers-color-scheme: dark) { - .ios, - .md { + html.ios body, + html.md body { --ion-item-background: #1c1c1d; } } diff --git a/static/usage/v8/theming/system-dark-mode/demo.html b/static/usage/v8/theming/system-dark-mode/demo.html index af8fc6ffced..c739cb393db 100644 --- a/static/usage/v8/theming/system-dark-mode/demo.html +++ b/static/usage/v8/theming/system-dark-mode/demo.html @@ -70,14 +70,14 @@ } /* This sets a different background and item background in light mode on ios */ - .ios { + html.ios body { --ion-background-color: var(--ion-color-step-50, #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 { + html.md body { --ion-background-color: var(--ion-color-step-100, #f9f9f9); --ion-toolbar-background: var(--ion-background-color); --ion-item-background: #fff; @@ -85,8 +85,8 @@ /* This sets a different item background in dark mode on ios and md */ @media (prefers-color-scheme: dark) { - .ios, - .md { + html.ios body, + html.md body { --ion-item-background: #1c1c1d; } } diff --git a/static/usage/v8/theming/system-dark-mode/javascript/index_html.md b/static/usage/v8/theming/system-dark-mode/javascript/index_html.md index fbf73f4951c..ef6aeef0b85 100644 --- a/static/usage/v8/theming/system-dark-mode/javascript/index_html.md +++ b/static/usage/v8/theming/system-dark-mode/javascript/index_html.md @@ -55,14 +55,14 @@ } /* This sets a different background and item background in light mode on ios */ - .ios { + html.ios body { --ion-background-color: var(--ion-color-step-50, #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 { + html.md body { --ion-background-color: var(--ion-color-step-100, #f9f9f9); --ion-toolbar-background: var(--ion-background-color); --ion-item-background: #fff; @@ -70,8 +70,8 @@ /* This sets a different item background in dark mode on ios and md */ @media (prefers-color-scheme: dark) { - .ios, - .md { + html.ios body, + html.md body { --ion-item-background: #1c1c1d; } } diff --git a/static/usage/v8/theming/system-dark-mode/react/main_css.md b/static/usage/v8/theming/system-dark-mode/react/main_css.md index 2a691a75a87..13f07292dd0 100644 --- a/static/usage/v8/theming/system-dark-mode/react/main_css.md +++ b/static/usage/v8/theming/system-dark-mode/react/main_css.md @@ -10,14 +10,14 @@ ion-item { } /* This sets a different background and item background in light mode on ios */ -.ios { +html.ios body { --ion-background-color: var(--ion-color-step-50, #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 { +html.md body { --ion-background-color: var(--ion-color-step-100, #f9f9f9); --ion-toolbar-background: var(--ion-background-color); --ion-item-background: #fff; @@ -25,8 +25,8 @@ ion-item { /* This sets a different item background in dark mode on ios and md */ @media (prefers-color-scheme: dark) { - .ios, - .md { + html.ios body, + html.md body { --ion-item-background: #1c1c1d; } } diff --git a/static/usage/v8/theming/system-dark-mode/vue/example_vue.md b/static/usage/v8/theming/system-dark-mode/vue/example_vue.md index 52900522400..cd8c45117a0 100644 --- a/static/usage/v8/theming/system-dark-mode/vue/example_vue.md +++ b/static/usage/v8/theming/system-dark-mode/vue/example_vue.md @@ -100,14 +100,14 @@ } /* This sets a different background and item background in light mode on ios */ - .ios { + html.ios body { --ion-background-color: var(--ion-color-step-50, #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 { + html.md body { --ion-background-color: var(--ion-color-step-100, #f9f9f9); --ion-toolbar-background: var(--ion-background-color); --ion-item-background: #fff; @@ -115,8 +115,8 @@ /* This sets a different item background in dark mode on ios and md */ @media (prefers-color-scheme: dark) { - .ios, - .md { + html.ios body, + html.md body { --ion-item-background: #1c1c1d; } } From ba7b26af6aab81739de4013e9ae224e8fb6c367a Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 15 Jan 2024 13:38:12 -0500 Subject: [PATCH 05/22] fix(playgrounds): update common to add new dark theme class --- static/usage/common.css | 231 ---------------------------------------- static/usage/common.js | 4 +- 2 files changed, 2 insertions(+), 233 deletions(-) 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..d95b7ef6ba5 100644 --- a/static/usage/common.js +++ b/static/usage/common.js @@ -16,9 +16,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'); } }); From 17e185003f4ef6d32d98f453f75fb299f21b0e47 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 15 Jan 2024 14:27:39 -0500 Subject: [PATCH 06/22] fix(theming): move dark mode overrides to the variables css file --- .../v8/theming/always-dark-mode/demo.html | 10 ------- .../v8/theming/always-dark-mode/index.md | 16 +++++----- .../always-dark-mode/javascript/index_html.md | 26 ----------------- .../always-dark-mode/react/main_css.md | 25 ---------------- .../always-dark-mode/react/main_tsx.md | 2 -- .../global_css.md => theme/variables_css.md} | 11 ++----- .../always-dark-mode/vue/example_vue.md | 26 ----------------- .../class-dark-mode/angular/global_css.md | 27 +---------------- .../v8/theming/class-dark-mode/demo.html | 7 +---- .../usage/v8/theming/class-dark-mode/index.md | 14 ++++++--- .../class-dark-mode/javascript/index_html.md | 27 +---------------- .../theming/class-dark-mode/react/main_css.md | 27 +---------------- .../class-dark-mode/theme/variables_css.md | 24 +++++++++++++++ .../class-dark-mode/vue/example_vue.md | 27 +---------------- .../system-dark-mode/angular/global_css.md | 29 +------------------ .../v8/theming/system-dark-mode/demo.html | 7 +---- .../v8/theming/system-dark-mode/index.md | 14 ++++++--- .../system-dark-mode/javascript/index_html.md | 29 +------------------ .../system-dark-mode/react/main_css.md | 29 +------------------ .../system-dark-mode/theme/variables_css.md | 26 +++++++++++++++++ .../system-dark-mode/vue/example_vue.md | 29 +------------------ 21 files changed, 91 insertions(+), 341 deletions(-) delete mode 100644 static/usage/v8/theming/always-dark-mode/react/main_css.md rename static/usage/v8/theming/always-dark-mode/{angular/global_css.md => theme/variables_css.md} (74%) create mode 100644 static/usage/v8/theming/class-dark-mode/theme/variables_css.md create mode 100644 static/usage/v8/theming/system-dark-mode/theme/variables_css.md diff --git a/static/usage/v8/theming/always-dark-mode/demo.html b/static/usage/v8/theming/always-dark-mode/demo.html index efcca3b4be4..3cbc9b96c88 100644 --- a/static/usage/v8/theming/always-dark-mode/demo.html +++ b/static/usage/v8/theming/always-dark-mode/demo.html @@ -59,16 +59,6 @@ ``` diff --git a/static/usage/v8/theming/always-dark-mode/react/main_css.md b/static/usage/v8/theming/always-dark-mode/react/main_css.md deleted file mode 100644 index 9e4b071d6f8..00000000000 --- a/static/usage/v8/theming/always-dark-mode/react/main_css.md +++ /dev/null @@ -1,25 +0,0 @@ -```css -/* - * Optional CSS - * ----------------------------------- - */ - -/* This is added for the flashing that happens when toggling between themes */ -ion-item { - --transition: none; -} - -/* This sets a different background and item background for the dark theme on ios */ -html.ios body { - --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 dark theme on md */ -html.md body { - --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/react/main_tsx.md b/static/usage/v8/theming/always-dark-mode/react/main_tsx.md index 58d10fa6a6b..f6a15cd12f7 100644 --- a/static/usage/v8/theming/always-dark-mode/react/main_tsx.md +++ b/static/usage/v8/theming/always-dark-mode/react/main_tsx.md @@ -19,8 +19,6 @@ import { } from '@ionic/react'; import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; -import './main.css'; - function Example() { return ( <> diff --git a/static/usage/v8/theming/always-dark-mode/angular/global_css.md b/static/usage/v8/theming/always-dark-mode/theme/variables_css.md similarity index 74% rename from static/usage/v8/theming/always-dark-mode/angular/global_css.md rename to static/usage/v8/theming/always-dark-mode/theme/variables_css.md index 9e4b071d6f8..dd67e3809e9 100644 --- a/static/usage/v8/theming/always-dark-mode/angular/global_css.md +++ b/static/usage/v8/theming/always-dark-mode/theme/variables_css.md @@ -1,13 +1,6 @@ ```css -/* - * Optional CSS - * ----------------------------------- - */ - -/* This is added for the flashing that happens when toggling between themes */ -ion-item { - --transition: none; -} +/* Ionic Variables and Theming. For more info, please see: +http://ionicframework.com/docs/theming/ */ /* This sets a different background and item background for the dark theme on ios */ html.ios body { 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 index e5b007cd50d..14753b7e25f 100644 --- a/static/usage/v8/theming/always-dark-mode/vue/example_vue.md +++ b/static/usage/v8/theming/always-dark-mode/vue/example_vue.md @@ -87,30 +87,4 @@ }, }); - - ``` diff --git a/static/usage/v8/theming/class-dark-mode/angular/global_css.md b/static/usage/v8/theming/class-dark-mode/angular/global_css.md index 7d847e48717..83d9fe99158 100644 --- a/static/usage/v8/theming/class-dark-mode/angular/global_css.md +++ b/static/usage/v8/theming/class-dark-mode/angular/global_css.md @@ -1,31 +1,6 @@ ```css -/* - * Optional CSS - * ----------------------------------- - */ - -/* This is added for the flashing that happens when toggling between themes */ +/* (Optional) This is added to prevent the flashing that happens when toggling between themes */ ion-item { --transition: none; } - -/* This sets a different background and item background in light mode on ios */ -html.ios { - --ion-background-color: var(--ion-color-step-50, #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 */ -html.md { - --ion-background-color: var(--ion-color-step-100, #f9f9f9); - --ion-toolbar-background: var(--ion-background-color); - --ion-item-background: #fff; -} - -/* This sets a different item background in dark mode on ios and md */ -.ion-theme-dark.ios, -.ion-theme-dark.md { - --ion-item-background: #1c1c1d; -} ``` diff --git a/static/usage/v8/theming/class-dark-mode/demo.html b/static/usage/v8/theming/class-dark-mode/demo.html index 455da57f459..435abc06ecd 100644 --- a/static/usage/v8/theming/class-dark-mode/demo.html +++ b/static/usage/v8/theming/class-dark-mode/demo.html @@ -116,12 +116,7 @@ ``` diff --git a/static/usage/v8/theming/class-dark-mode/react/main_css.md b/static/usage/v8/theming/class-dark-mode/react/main_css.md index 7d847e48717..83d9fe99158 100644 --- a/static/usage/v8/theming/class-dark-mode/react/main_css.md +++ b/static/usage/v8/theming/class-dark-mode/react/main_css.md @@ -1,31 +1,6 @@ ```css -/* - * Optional CSS - * ----------------------------------- - */ - -/* This is added for the flashing that happens when toggling between themes */ +/* (Optional) This is added to prevent the flashing that happens when toggling between themes */ ion-item { --transition: none; } - -/* This sets a different background and item background in light mode on ios */ -html.ios { - --ion-background-color: var(--ion-color-step-50, #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 */ -html.md { - --ion-background-color: var(--ion-color-step-100, #f9f9f9); - --ion-toolbar-background: var(--ion-background-color); - --ion-item-background: #fff; -} - -/* This sets a different item background in dark mode on ios and md */ -.ion-theme-dark.ios, -.ion-theme-dark.md { - --ion-item-background: #1c1c1d; -} ``` diff --git a/static/usage/v8/theming/class-dark-mode/theme/variables_css.md b/static/usage/v8/theming/class-dark-mode/theme/variables_css.md new file mode 100644 index 00000000000..50e9a6c84fd --- /dev/null +++ b/static/usage/v8/theming/class-dark-mode/theme/variables_css.md @@ -0,0 +1,24 @@ +```css +/* Ionic Variables and Theming. For more info, please see: +http://ionicframework.com/docs/theming/ */ + +/* This sets a different background and item background in light mode on ios */ +html.ios { + --ion-background-color: var(--ion-color-step-50, #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 */ +html.md { + --ion-background-color: var(--ion-color-step-100, #f9f9f9); + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #fff; +} + +/* This sets a different item background in dark mode on ios and md */ +.ion-theme-dark.ios, +.ion-theme-dark.md { + --ion-item-background: #1c1c1d; +} +``` diff --git a/static/usage/v8/theming/class-dark-mode/vue/example_vue.md b/static/usage/v8/theming/class-dark-mode/vue/example_vue.md index 292bc62d266..a2731f2d235 100644 --- a/static/usage/v8/theming/class-dark-mode/vue/example_vue.md +++ b/static/usage/v8/theming/class-dark-mode/vue/example_vue.md @@ -135,34 +135,9 @@ ``` diff --git a/static/usage/v8/theming/system-dark-mode/angular/global_css.md b/static/usage/v8/theming/system-dark-mode/angular/global_css.md index 13f07292dd0..83d9fe99158 100644 --- a/static/usage/v8/theming/system-dark-mode/angular/global_css.md +++ b/static/usage/v8/theming/system-dark-mode/angular/global_css.md @@ -1,33 +1,6 @@ ```css -/* - * Optional CSS - * ----------------------------------- - */ - -/* This is added for the flashing that happens when toggling between themes */ +/* (Optional) This is added to prevent the flashing that happens when toggling between themes */ ion-item { --transition: none; } - -/* This sets a different background and item background in light mode on ios */ -html.ios body { - --ion-background-color: var(--ion-color-step-50, #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 */ -html.md body { - --ion-background-color: var(--ion-color-step-100, #f9f9f9); - --ion-toolbar-background: var(--ion-background-color); - --ion-item-background: #fff; -} - -/* This sets a different item background in dark mode on ios and md */ -@media (prefers-color-scheme: dark) { - html.ios body, - html.md body { - --ion-item-background: #1c1c1d; - } -} ``` diff --git a/static/usage/v8/theming/system-dark-mode/demo.html b/static/usage/v8/theming/system-dark-mode/demo.html index c739cb393db..d2182d042e9 100644 --- a/static/usage/v8/theming/system-dark-mode/demo.html +++ b/static/usage/v8/theming/system-dark-mode/demo.html @@ -59,12 +59,7 @@ ``` diff --git a/static/usage/v8/theming/system-dark-mode/react/main_css.md b/static/usage/v8/theming/system-dark-mode/react/main_css.md index 13f07292dd0..83d9fe99158 100644 --- a/static/usage/v8/theming/system-dark-mode/react/main_css.md +++ b/static/usage/v8/theming/system-dark-mode/react/main_css.md @@ -1,33 +1,6 @@ ```css -/* - * Optional CSS - * ----------------------------------- - */ - -/* This is added for the flashing that happens when toggling between themes */ +/* (Optional) This is added to prevent the flashing that happens when toggling between themes */ ion-item { --transition: none; } - -/* This sets a different background and item background in light mode on ios */ -html.ios body { - --ion-background-color: var(--ion-color-step-50, #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 */ -html.md body { - --ion-background-color: var(--ion-color-step-100, #f9f9f9); - --ion-toolbar-background: var(--ion-background-color); - --ion-item-background: #fff; -} - -/* This sets a different item background in dark mode on ios and md */ -@media (prefers-color-scheme: dark) { - html.ios body, - html.md body { - --ion-item-background: #1c1c1d; - } -} ``` diff --git a/static/usage/v8/theming/system-dark-mode/theme/variables_css.md b/static/usage/v8/theming/system-dark-mode/theme/variables_css.md new file mode 100644 index 00000000000..db073156b8a --- /dev/null +++ b/static/usage/v8/theming/system-dark-mode/theme/variables_css.md @@ -0,0 +1,26 @@ +```css +/* Ionic Variables and Theming. For more info, please see: +http://ionicframework.com/docs/theming/ */ + +/* This sets a different background and item background in light mode on ios */ +html.ios body { + --ion-background-color: var(--ion-color-step-50, #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 */ +html.md body { + --ion-background-color: var(--ion-color-step-100, #f9f9f9); + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #fff; +} + +/* This sets a different item background in dark mode on ios and md */ +@media (prefers-color-scheme: dark) { + html.ios body, + html.md body { + --ion-item-background: #1c1c1d; + } +} +``` diff --git a/static/usage/v8/theming/system-dark-mode/vue/example_vue.md b/static/usage/v8/theming/system-dark-mode/vue/example_vue.md index cd8c45117a0..1b6a89855c3 100644 --- a/static/usage/v8/theming/system-dark-mode/vue/example_vue.md +++ b/static/usage/v8/theming/system-dark-mode/vue/example_vue.md @@ -89,36 +89,9 @@ ``` From ce1e0a312bc44be848eafdd4354cb1d59ce92c7b Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 15 Jan 2024 14:41:44 -0500 Subject: [PATCH 07/22] style: lint --- .../always-dark-mode/angular/styles_css.md | 22 +++++++++---------- .../v8/theming/always-dark-mode/demo.html | 5 ++++- .../v8/theming/always-dark-mode/index.md | 8 +++---- .../class-dark-mode/angular/styles_css.md | 22 +++++++++---------- .../v8/theming/class-dark-mode/demo.html | 5 ++++- .../usage/v8/theming/class-dark-mode/index.md | 8 +++---- .../system-dark-mode/angular/styles_css.md | 22 +++++++++---------- .../v8/theming/system-dark-mode/demo.html | 5 ++++- .../v8/theming/system-dark-mode/index.md | 8 +++---- 9 files changed, 57 insertions(+), 48 deletions(-) diff --git a/static/usage/v8/theming/always-dark-mode/angular/styles_css.md b/static/usage/v8/theming/always-dark-mode/angular/styles_css.md index a67344515b9..ba0e5a5e386 100644 --- a/static/usage/v8/theming/always-dark-mode/angular/styles_css.md +++ b/static/usage/v8/theming/always-dark-mode/angular/styles_css.md @@ -11,20 +11,20 @@ */ /* Core CSS required for Ionic components to work properly */ -@import "~@ionic/angular/css/core.css"; +@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"; +@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"; +@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 @@ -33,7 +33,7 @@ * https://ionicframework.com/docs/theming/dark-mode */ -@import "~@ionic/angular/css/themes/dark.always.css"; +@import '~@ionic/angular/css/themes/dark.always.css'; /* @import "~@ionic/angular/css/themes/dark.class.css"; */ /* @import "~@ionic/angular/css/themes/dark.system.css"; */ ``` diff --git a/static/usage/v8/theming/always-dark-mode/demo.html b/static/usage/v8/theming/always-dark-mode/demo.html index 3cbc9b96c88..caa4f8e27e0 100644 --- a/static/usage/v8/theming/always-dark-mode/demo.html +++ b/static/usage/v8/theming/always-dark-mode/demo.html @@ -8,7 +8,10 @@ - + diff --git a/static/usage/v8/theming/always-dark-mode/index.md b/static/usage/v8/theming/always-dark-mode/index.md index be4c8622d46..18c585f986f 100644 --- a/static/usage/v8/theming/always-dark-mode/index.md +++ b/static/usage/v8/theming/always-dark-mode/index.md @@ -21,28 +21,28 @@ import variables_css from './theme/variables_css.md'; files: { 'index.html': javascript_index_html, 'index.ts': javascript_index_ts, - 'theme/variables.css': variables_css + 'theme/variables.css': variables_css, }, }, react: { files: { 'src/App.tsx': react_app_tsx, 'src/main.tsx': react_main_tsx, - 'src/theme/variables.css': variables_css + 'src/theme/variables.css': variables_css, }, }, vue: { files: { 'src/components/Example.vue': vue_example, 'src/main.ts': vue_main_ts, - 'src/theme/variables.css': variables_css + 'src/theme/variables.css': variables_css, }, }, angular: { files: { 'src/app/example.component.html': angular_example_component_html, 'src/styles.css': angular_styles_css, - 'src/theme/variables.css': variables_css + 'src/theme/variables.css': variables_css, }, }, }} diff --git a/static/usage/v8/theming/class-dark-mode/angular/styles_css.md b/static/usage/v8/theming/class-dark-mode/angular/styles_css.md index 023617505ac..9c4856e6df6 100644 --- a/static/usage/v8/theming/class-dark-mode/angular/styles_css.md +++ b/static/usage/v8/theming/class-dark-mode/angular/styles_css.md @@ -11,20 +11,20 @@ */ /* Core CSS required for Ionic components to work properly */ -@import "~@ionic/angular/css/core.css"; +@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"; +@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"; +@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 @@ -34,6 +34,6 @@ */ /* @import "~@ionic/angular/css/themes/dark.always.css"; */ -@import "~@ionic/angular/css/themes/dark.class.css"; +@import '~@ionic/angular/css/themes/dark.class.css'; /* @import "~@ionic/angular/css/themes/dark.system.css"; */ ``` diff --git a/static/usage/v8/theming/class-dark-mode/demo.html b/static/usage/v8/theming/class-dark-mode/demo.html index 435abc06ecd..c97c71bb5ab 100644 --- a/static/usage/v8/theming/class-dark-mode/demo.html +++ b/static/usage/v8/theming/class-dark-mode/demo.html @@ -8,7 +8,10 @@ - + diff --git a/static/usage/v8/theming/class-dark-mode/index.md b/static/usage/v8/theming/class-dark-mode/index.md index f445eb2fa94..f0fb042f97a 100644 --- a/static/usage/v8/theming/class-dark-mode/index.md +++ b/static/usage/v8/theming/class-dark-mode/index.md @@ -24,7 +24,7 @@ import variables_css from './theme/variables_css.md'; files: { 'index.html': javascript_index_html, 'index.ts': javascript_index_ts, - 'theme/variables.css': variables_css + 'theme/variables.css': variables_css, }, }, react: { @@ -32,14 +32,14 @@ import variables_css from './theme/variables_css.md'; 'src/App.tsx': react_app_tsx, 'src/main.tsx': react_main_tsx, 'src/main.css': react_main_css, - 'src/theme/variables.css': variables_css + 'src/theme/variables.css': variables_css, }, }, vue: { files: { 'src/components/Example.vue': vue_example, 'src/main.ts': vue_main_ts, - 'src/theme/variables.css': variables_css + 'src/theme/variables.css': variables_css, }, }, angular: { @@ -48,7 +48,7 @@ import variables_css from './theme/variables_css.md'; '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/theme/variables.css': variables_css, }, }, }} diff --git a/static/usage/v8/theming/system-dark-mode/angular/styles_css.md b/static/usage/v8/theming/system-dark-mode/angular/styles_css.md index b32c57c87d0..7e5a1745d9a 100644 --- a/static/usage/v8/theming/system-dark-mode/angular/styles_css.md +++ b/static/usage/v8/theming/system-dark-mode/angular/styles_css.md @@ -11,20 +11,20 @@ */ /* Core CSS required for Ionic components to work properly */ -@import "~@ionic/angular/css/core.css"; +@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"; +@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"; +@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 @@ -35,5 +35,5 @@ /* @import "~@ionic/angular/css/themes/dark.always.css"; */ /* @import "~@ionic/angular/css/themes/dark.class.css"; */ -@import "~@ionic/angular/css/themes/dark.system.css"; +@import '~@ionic/angular/css/themes/dark.system.css'; ``` diff --git a/static/usage/v8/theming/system-dark-mode/demo.html b/static/usage/v8/theming/system-dark-mode/demo.html index d2182d042e9..3118d0844ac 100644 --- a/static/usage/v8/theming/system-dark-mode/demo.html +++ b/static/usage/v8/theming/system-dark-mode/demo.html @@ -8,7 +8,10 @@ - + diff --git a/static/usage/v8/theming/system-dark-mode/index.md b/static/usage/v8/theming/system-dark-mode/index.md index 7c57271d6b3..0ba01ef41e2 100644 --- a/static/usage/v8/theming/system-dark-mode/index.md +++ b/static/usage/v8/theming/system-dark-mode/index.md @@ -23,7 +23,7 @@ import variables_css from './theme/variables_css.md'; files: { 'index.html': javascript_index_html, 'index.ts': javascript_index_ts, - 'theme/variables.css': variables_css + 'theme/variables.css': variables_css, }, }, react: { @@ -31,14 +31,14 @@ import variables_css from './theme/variables_css.md'; 'src/App.tsx': react_app_tsx, 'src/main.tsx': react_main_tsx, 'src/main.css': react_main_css, - 'src/theme/variables.css': variables_css + 'src/theme/variables.css': variables_css, }, }, vue: { files: { 'src/components/Example.vue': vue_example, 'src/main.ts': vue_main_ts, - 'src/theme/variables.css': variables_css + 'src/theme/variables.css': variables_css, }, }, angular: { @@ -46,7 +46,7 @@ import variables_css from './theme/variables_css.md'; 'src/app/example.component.html': angular_example_component_html, 'src/global.css': angular_global_css, 'src/styles.css': angular_styles_css, - 'src/theme/variables.css': variables_css + 'src/theme/variables.css': variables_css, }, }, }} From f0f3914c0b1e0de4302550a0237b1eaa4c5cd3a2 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 16 Jan 2024 10:05:21 -0500 Subject: [PATCH 08/22] docs(dark-mode): initial check in of updated docs --- docs/theming/dark-mode.md | 173 +++++++++++++++++++++++++++++--------- 1 file changed, 133 insertions(+), 40 deletions(-) diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md index e4c36d9ecb8..9ed460aebfa 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. + + + + +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. + +:::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 `html` element. +::: + +:::info Demo +This demo 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'; -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 +### System -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 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. + +:::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 `html` element. ::: -:::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). +:::info Demo +This demo uses the system settings to decide when to show dark mode. + +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/v7/theming/automatic-dark-mode/index.md'; +import SystemDarkMode from '@site/static/usage/v8/theming/system-dark-mode/index.md'; + + + +### 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'; +``` - + + -### Manually Toggle Dark Mode +```ts +import '@ionic/vue/css/themes/dark.class.css'; +``` -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: + + + + +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. + +:::caution Important +The `.ion-theme-dark` class **must** be added to the `html` element in order to work with the imported dark theme. +::: + +:::info Demo +This demo 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. + +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 ManualDarkMode from '@site/static/usage/v7/theming/manual-dark-mode/index.md'; +import ClassDarkMode from '@site/static/usage/v8/theming/class-dark-mode/index.md'; - + ## Adjusting System UI Components From 3fb7daf1736535440e7e6f71c73b4831090bde12 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 16 Jan 2024 10:25:08 -0500 Subject: [PATCH 09/22] fix(theming): update to use new theme selectors --- docs/theming/dark-mode.md | 4 +-- .../code/stackblitz/v8/angular/package.json | 4 +-- static/code/stackblitz/v8/html/index.html | 4 +-- .../stackblitz/v8/html/index.withContent.html | 4 +-- static/code/stackblitz/v8/html/package.json | 2 +- .../stackblitz/v8/react/package-lock.json | 36 +++++++++---------- static/code/stackblitz/v8/react/package.json | 4 +-- .../code/stackblitz/v8/vue/package-lock.json | 36 +++++++++---------- static/code/stackblitz/v8/vue/package.json | 4 +-- .../v8/theming/always-dark-mode/demo.html | 6 ++-- .../always-dark-mode/theme/variables_css.md | 4 +-- .../v8/theming/class-dark-mode/demo.html | 2 +- .../v8/theming/system-dark-mode/demo.html | 10 +++--- .../system-dark-mode/theme/variables_css.md | 8 ++--- 14 files changed, 64 insertions(+), 64 deletions(-) diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md index 9ed460aebfa..560168780eb 100644 --- a/docs/theming/dark-mode.md +++ b/docs/theming/dark-mode.md @@ -61,7 +61,7 @@ import '@ionic/vue/css/themes/dark.always.css'; This sets the [application colors](/docs/theming/themes#application-colors) and [stepped colors](/docs/theming/themes#stepped-colors) on the [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector. :::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 `html` element. +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. ::: :::info Demo @@ -112,7 +112,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. :::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 `html` element. +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. ::: :::info Demo 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/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.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/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/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/v8/theming/always-dark-mode/demo.html b/static/usage/v8/theming/always-dark-mode/demo.html index caa4f8e27e0..8d779683c6d 100644 --- a/static/usage/v8/theming/always-dark-mode/demo.html +++ b/static/usage/v8/theming/always-dark-mode/demo.html @@ -10,7 +10,7 @@ @@ -63,14 +63,14 @@