ionic-team · brandyscarney · Aug 4, 2023 · Aug 2, 2023 · Aug 2, 2023 · Aug 2, 2023
@@ -0,0 +1,45 @@
+```html
+<ion-header class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button default-href="#"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Display</ion-title>
+    <ion-buttons slot="end">
+      <ion-button color="dark">
+        <ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list-header>Appearance</ion-list-header>
+  <ion-list [inset]="true">
+    <ion-item [button]="true">Text Size</ion-item>
+    <ion-item>
+      <ion-toggle justify="space-between">Bold Text</ion-toggle>
+    </ion-item>
+  </ion-list>
+
+  <ion-list-header>Brightness</ion-list-header>
+  <ion-list [inset]="true">
+    <ion-item>
+      <ion-range value="40">
+        <ion-icon name="sunny-outline" slot="start"></ion-icon>
+        <ion-icon name="sunny" slot="end"></ion-icon>
+      </ion-range>
+    </ion-item>
+    <ion-item>
+      <ion-toggle justify="space-between" checked>True Tone</ion-toggle>
+    </ion-item>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-item [button]="true">
+      <ion-label>Night Shift</ion-label>
+      <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>
+    </ion-item>
+  </ion-list>
+</ion-content>
+```
@@ -0,0 +1,24 @@
+```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);
+  }
+}
+```
@@ -0,0 +1,25 @@
+```css
+/*
+ * Optional CSS
+ * -----------------------------------
+ */
+
+/* This sets a different background and item background in light mode on ios */
+.ios body {
+  --ion-background-color: #f2f2f6;
+  --ion-toolbar-background: var(--ion-background-color);
+  --ion-item-background: #fff;
+}
+
+/* This sets a different background and item background in light mode on md */
+.md body {
+  --ion-background-color: #f9f9f9;
+  --ion-toolbar-background: var(--ion-background-color);
+  --ion-item-background: #fff;
+}
+
+/* This is added for the flashing that happens when toggling between themes */
+ion-item {
+  --transition: none;
+}
+```
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Theming</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header class="ion-no-border">
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button default-href="#"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Display</ion-title>
+          <ion-buttons slot="end">
+            <ion-button color="dark">
+              <ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list-header>Appearance</ion-list-header>
+        <ion-list inset="true">
+          <ion-item button="true">Text Size</ion-item>
+          <ion-item>
+            <ion-toggle justify="space-between">Bold Text</ion-toggle>
+          </ion-item>
+        </ion-list>
+
+        <ion-list-header>Brightness</ion-list-header>
+        <ion-list inset="true">
+          <ion-item>
+            <ion-range value="40">
+              <ion-icon name="sunny-outline" slot="start"></ion-icon>
+              <ion-icon name="sunny" slot="end"></ion-icon>
+            </ion-range>
+          </ion-item>
+          <ion-item>
+            <ion-toggle justify="space-between" checked>True Tone</ion-toggle>
+          </ion-item>
+        </ion-list>
+
+        <ion-list inset="true">
+          <ion-item button="true">
+            <ion-label>Night Shift</ion-label>
+            <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      // Use matchMedia to check the user preference
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+      // Listen for changes to the prefers-color-scheme media query
+      prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches));
+
+      // Add or remove the "dark" class on the document body
+      function toggleDarkTheme(shouldAdd) {
+        document.body.classList.toggle('dark', shouldAdd);
+      }
+    </script>
+
+    <style>
+      /*
+      * Optional CSS
+      * -----------------------------------
+      */
+
+      /* This sets a different background and item background in light mode on ios */
+      .ios body {
+        --ion-background-color: #f2f2f6;
+        --ion-toolbar-background: var(--ion-background-color);
+        --ion-item-background: #fff;
+      }
+
+      /* This sets a different background and item background in light mode on md */
+      .md body {
+        --ion-background-color: #f9f9f9;
+        --ion-toolbar-background: var(--ion-background-color);
+        --ion-item-background: #fff;
+      }
+
+      /* This sets a different item background in dark mode on ios */
+      .ios body.dark {
+        --ion-item-background: #1c1c1d;
+      }
+
+      /* This is added for the flashing that happens when toggling between themes */
+      ion-item {
+        --transition: none;
+      }
+    </style>
+  </body>
+</html>
@@ -0,0 +1,50 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript_index_html from './javascript.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 variables_css from './theme/variables_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'theme/variables.css': variables_css,
+      },
+    },
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+        'src/theme/variables.css': variables_css,
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue,
+        'src/theme/variables.css': variables_css,
+      },
+    },
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/global.css': angular_global_css,
+        'src/theme/variables.css': variables_css,
+      },
+    },
+  }}
+  src="usage/v7/theming/automatic-dark-mode/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
@@ -0,0 +1,105 @@
+```html
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />
+
+    <script>
+      window.Ionic = {
+        config: {
+          mode: 'ios',
+        },
+      };
+    </script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header class="ion-no-border">
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button default-href="#"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Display</ion-title>
+          <ion-buttons slot="end">
+            <ion-button color="dark">
+              <ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list-header>Appearance</ion-list-header>
+        <ion-list inset="true">
+          <ion-item button="true">Text Size</ion-item>
+          <ion-item>
+            <ion-toggle justify="space-between">Bold Text</ion-toggle>
+          </ion-item>
+        </ion-list>
+
+        <ion-list-header>Brightness</ion-list-header>
+        <ion-list inset="true">
+          <ion-item>
+            <ion-range value="40">
+              <ion-icon name="sunny-outline" slot="start"></ion-icon>
+              <ion-icon name="sunny" slot="end"></ion-icon>
+            </ion-range>
+          </ion-item>
+          <ion-item>
+            <ion-toggle justify="space-between" checked>True Tone</ion-toggle>
+          </ion-item>
+        </ion-list>
+
+        <ion-list inset="true">
+          <ion-item button="true">
+            <ion-label>Night Shift</ion-label>
+            <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+
+      <script>
+        // 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));
+
+        // Add or remove the "dark" class on the document body
+        function toggleDarkTheme(shouldAdd) {
+          document.body.classList.toggle('dark', shouldAdd);
+        }
+      </script>
+
+      <style>
+        /*
+      * Optional CSS
+      * -----------------------------------
+      */
+
+        /* This sets a different background and item background in light mode on ios */
+        .ios body {
+          --ion-background-color: #f2f2f6;
+          --ion-toolbar-background: var(--ion-background-color);
+          --ion-item-background: #fff;
+        }
+
+        /* This sets a different background and item background in light mode on md */
+        .md body {
+          --ion-background-color: #f9f9f9;
+          --ion-toolbar-background: var(--ion-background-color);
+          --ion-item-background: #fff;
+        }
+
+        /* This is added for the flashing that happens when toggling between themes */
+        ion-item {
+          --transition: none;
+        }
+      </style>
+    </ion-app>
+  </body>
+</html>
+```
@@ -0,0 +1,25 @@
+```css
+/*
+ * Optional CSS
+ * -----------------------------------
+ */
+
+/* This sets a different background and item background in light mode on ios */
+.ios body {
+  --ion-background-color: #f2f2f6;
+  --ion-toolbar-background: var(--ion-background-color);
+  --ion-item-background: #fff;
+}
+
+/* This sets a different background and item background in light mode on md */
+.md body {
+  --ion-background-color: #f9f9f9;
+  --ion-toolbar-background: var(--ion-background-color);
+  --ion-item-background: #fff;
+}
+
+/* This is added for the flashing that happens when toggling between themes */
+ion-item {
+  --transition: none;
+}
+```