35fb0c21.870226e0.js

js ionicframework.jp collected 2026-10-04 01:43:28 UTC 117,700 bytes, 21 lines download raw bytes

1"use strict";(self.webpackChunkionic_docs=self.webpackChunkionic_docs||[]).push([["24276"],{74991(e,n,t){t.r(n),t.d(n,{metadata:()=>o,default:()=>e_,frontMatter:()=>eL,contentTitle:()=>eR,toc:()=>eB,assets:()=>eN});var o=JSON.parse('{"id":"theming/dark-mode","title":"Dark Mode","description":"Dark Mode to Change Color Schemes and CSS Properties","source":"@site/versioned_docs/version-v8/theming/dark-mode.md","sourceDirName":"theming","slug":"/theming/dark-mode","permalink":"/docs/v8/theming/dark-mode","draft":false,"unlisted":false,"editUrl":"https://github.com/ionic-team/ionic-docs/edit/main/versioned_docs/version-v8/theming/dark-mode.md","tags":[],"version":"v8","frontMatter":{"title":"Dark Mode"},"sidebar":"docs","previous":{"title":"Themes","permalink":"/docs/v8/theming/themes"},"next":{"title":"High Contrast Mode","permalink":"/docs/v8/theming/high-contrast-mode"}}'),s=t(74848),i=t(28453),r=t(50773),a=t(57250),c=t(61794);function l(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",children:'<ion-header class="ion-no-border">\n  <ion-toolbar>\n    <ion-buttons slot="start">\n      <ion-back-button default-href="#"></ion-back-button>\n    </ion-buttons>\n    <ion-title>Display</ion-title>\n    <ion-buttons slot="end">\n      <ion-button color="dark">\n        <ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <ion-list-header>Appearance</ion-list-header>\n  <ion-list inset="true">\n    <ion-item button="true">Text Size</ion-item>\n    <ion-item>\n      <ion-toggle justify="space-between">Bold Text</ion-toggle>\n    </ion-item>\n  </ion-list>\n\n  <ion-list-header>Brightness</ion-list-header>\n  <ion-list inset="true">\n    <ion-item>\n      <ion-range value="40">\n        <ion-icon name="sunny-outline" slot="start"></ion-icon>\n        <ion-icon name="sunny" slot="end"></ion-icon>\n      </ion-range>\n    </ion-item>\n    <ion-item>\n      <ion-toggle justify="space-between" checked>True Tone</ion-toggle>\n    </ion-item>\n  </ion-list>\n\n  <ion-list inset="true">\n    <ion-item button="true">\n      <ion-label>Night Shift</ion-label>\n      <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>\n    </ion-item>\n  </ion-list>\n</ion-content>\n'})})}function d(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}function p(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import { defineCustomElements } from '@ionic/core/loader';\n\nimport { addIcons } from 'ionicons';\nimport { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';\n\n/* Core CSS required for Ionic components to work properly */\nimport '@ionic/core/css/core.css';\n\n/* Basic CSS for apps built with Ionic */\nimport '@ionic/core/css/normalize.css';\nimport '@ionic/core/css/structure.css';\nimport '@ionic/core/css/typography.css';\n\n/* Optional CSS utils that can be commented out */\nimport '@ionic/core/css/padding.css';\nimport '@ionic/core/css/float-elements.css';\nimport '@ionic/core/css/text-alignment.css';\nimport '@ionic/core/css/text-transformation.css';\nimport '@ionic/core/css/flex-utils.css';\nimport '@ionic/core/css/display.css';\n\n/**\n * Ionic Dark Palette\n * -----------------------------------------------------\n * For more information, please see:\n * https://ionicframework.com/docs/theming/dark-mode\n */\n\nimport '@ionic/core/css/palettes/dark.always.css';\n// import '@ionic/core/css/palettes/dark.class.css';\n// import '@ionic/core/css/palettes/dark.system.css';\n\n/* Theme variables */\nimport './theme/variables.css';\n\n/**\n * On Ionicons 7.2+ these icons\n * get mapped to a kebab-case key.\n * Alternatively, developers can do:\n * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline,\n * 'sunny': sunny, 'sunny-outline': sunnyOutline });\n */\naddIcons({ personCircle, personCircleOutline, sunny, sunnyOutline });\n\ndefineCustomElements();\n"})})}function u(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}function m(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { setupIonicReact, IonApp } from '@ionic/react';\n\n/* Core CSS required for Ionic components to work properly */\nimport '@ionic/react/css/core.css';\n\n/* Basic CSS for apps built with Ionic */\nimport '@ionic/react/css/normalize.css';\nimport '@ionic/react/css/structure.css';\nimport '@ionic/react/css/typography.css';\n\n/* Optional CSS utils that can be commented out */\nimport '@ionic/react/css/padding.css';\nimport '@ionic/react/css/float-elements.css';\nimport '@ionic/react/css/text-alignment.css';\nimport '@ionic/react/css/text-transformation.css';\nimport '@ionic/react/css/flex-utils.css';\nimport '@ionic/react/css/display.css';\n\n/**\n * Ionic Dark Palette\n * -----------------------------------------------------\n * For more information, please see:\n * https://ionicframework.com/docs/theming/dark-mode\n */\n\nimport '@ionic/react/css/palettes/dark.always.css';\n// import '@ionic/react/css/palettes/dark.class.css';\n// import '@ionic/react/css/palettes/dark.system.css';\n\n/* Theme variables */\nimport './theme/variables.css';\n\nimport Example from './main';\n\nsetupIonicReact();\n\nexport default function App() {\n  return (\n    <IonApp>\n      <Example />\n    </IonApp>\n  );\n}\n"})})}function h(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}function g(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'import React from \'react\';\nimport {\n  IonBackButton,\n  IonButton,\n  IonButtons,\n  IonContent,\n  IonHeader,\n  IonIcon,\n  IonItem,\n  IonLabel,\n  IonList,\n  IonListHeader,\n  IonRange,\n  IonText,\n  IonTitle,\n  IonToggle,\n  IonToolbar,\n} from \'@ionic/react\';\nimport { personCircle, personCircleOutline, sunny, sunnyOutline } from \'ionicons/icons\';\n\nfunction Example() {\n  return (\n    <>\n      <IonHeader class="ion-no-border">\n        <IonToolbar>\n          <IonButtons slot="start">\n            <IonBackButton default-href="#"></IonBackButton>\n          </IonButtons>\n          <IonTitle>Display</IonTitle>\n          <IonButtons slot="end">\n            <IonButton color="dark">\n              <IonIcon slot="icon-only" ios={personCircleOutline} md={personCircle}></IonIcon>\n            </IonButton>\n          </IonButtons>\n        </IonToolbar>\n      </IonHeader>\n\n      <IonContent>\n        <IonListHeader>Appearance</IonListHeader>\n        <IonList inset={true}>\n          <IonItem button={true}>Text Size</IonItem>\n          <IonItem>\n            <IonToggle justify="space-between">Bold Text</IonToggle>\n          </IonItem>\n        </IonList>\n\n        <IonListHeader>Brightness</IonListHeader>\n        <IonList inset={true}>\n          <IonItem>\n            <IonRange value={40}>\n              <IonIcon icon={sunnyOutline} slot="start"></IonIcon>\n              <IonIcon icon={sunny} slot="end"></IonIcon>\n            </IonRange>\n          </IonItem>\n          <IonItem>\n            <IonToggle justify="space-between" checked>\n              True Tone\n            </IonToggle>\n          </IonItem>\n        </IonList>\n\n        <IonList inset={true}>\n          <IonItem button={true}>\n            <IonLabel>Night Shift</IonLabel>\n            <IonText slot="end" color="medium">\n              9:00 PM to 8:00 AM\n            </IonText>\n          </IonItem>\n        </IonList>\n      </IonContent>\n    </>\n  );\n}\nexport default Example;\n'})})}function f(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(g,{...e})}):g(e)}function x(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",children:'<ion-header class="ion-no-border">\n  <ion-toolbar>\n    <ion-buttons slot="start">\n      <ion-back-button default-href="#"></ion-back-button>\n    </ion-buttons>\n    <ion-title>Display</ion-title>\n    <ion-buttons slot="end">\n      <ion-button color="dark">\n        <ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <ion-list-header>Appearance</ion-list-header>\n  <ion-list [inset]="true">\n    <ion-item [button]="true">Text Size</ion-item>\n    <ion-item>\n      <ion-toggle justify="space-between">Bold Text</ion-toggle>\n    </ion-item>\n  </ion-list>\n\n  <ion-list-header>Brightness</ion-list-header>\n  <ion-list [inset]="true">\n    <ion-item>\n      <ion-range value="40">\n        <ion-icon name="sunny-outline" slot="start"></ion-icon>\n        <ion-icon name="sunny" slot="end"></ion-icon>\n      </ion-range>\n    </ion-item>\n    <ion-item>\n      <ion-toggle justify="space-between" checked>True Tone</ion-toggle>\n    </ion-item>\n  </ion-list>\n\n  <ion-list [inset]="true">\n    <ion-item [button]="true">\n      <ion-label>Night Shift</ion-label>\n      <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>\n    </ion-item>\n  </ion-list>\n</ion-content>\n'})})}function b(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(x,{...e})}):x(e)}function j(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import { Component } from '@angular/core';\nimport {\n  IonBackButton,\n  IonButton,\n  IonButtons,\n  IonContent,\n  IonHeader,\n  IonIcon,\n  IonItem,\n  IonLabel,\n  IonList,\n  IonListHeader,\n  IonRange,\n  IonText,\n  IonTitle,\n  IonToggle,\n  IonToolbar,\n} from '@ionic/angular/standalone';\n\nimport { addIcons } from 'ionicons';\nimport { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: 'example.component.html',\n  styleUrls: ['example.component.css'],\n  imports: [\n    IonBackButton,\n    IonButton,\n    IonButtons,\n    IonContent,\n    IonHeader,\n    IonIcon,\n    IonItem,\n    IonLabel,\n    IonList,\n    IonListHeader,\n    IonRange,\n    IonText,\n    IonTitle,\n    IonToggle,\n    IonToolbar,\n  ],\n}

1)\nexport class ExampleComponent {\n  constructor() {\n    /**\n     * Any icons you want to use in your application\n     * can be registered in app.component.ts and then\n     * referenced by name anywhere in your application.\n     */\n    addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline });\n  }\n}\n"})})}function v(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(j,{...e})}):j(e)}function I(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/*\n * App Global CSS\n * ----------------------------------------------------------------------------\n * Put style rules here that you want to apply globally. These styles are for\n * the entire app and not just one component. Additionally, this file can be\n * used as an entry point to import other CSS/Sass files to be included in the\n * output CSS.\n * For more information on global stylesheets, visit the documentation:\n * https://ionicframework.com/docs/layout/global-stylesheets\n */\n\n/* Core CSS required for Ionic components to work properly */\n@import '@ionic/angular/css/core.css';\n\n/* Basic CSS for apps built with Ionic */\n@import '@ionic/angular/css/normalize.css';\n@import '@ionic/angular/css/structure.css';\n@import '@ionic/angular/css/typography.css';\n\n/* Optional CSS utils that can be commented out */\n@import '@ionic/angular/css/padding.css';\n@import '@ionic/angular/css/float-elements.css';\n@import '@ionic/angular/css/text-alignment.css';\n@import '@ionic/angular/css/text-transformation.css';\n@import '@ionic/angular/css/flex-utils.css';\n@import '@ionic/angular/css/display.css';\n\n/**\n * Ionic Dark Palette\n * -----------------------------------------------------\n * For more information, please see:\n * https://ionicframework.com/docs/theming/dark-mode\n */\n\n@import '@ionic/angular/css/palettes/dark.always.css';\n/* @import '@ionic/angular/css/palettes/dark.class.css'; */\n/* @import '@ionic/angular/css/palettes/dark.system.css'; */\n"})})}function y(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(I,{...e})}):I(e)}function k(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",children:'<template>\n  <ion-header class="ion-no-border">\n    <ion-toolbar>\n      <ion-buttons slot="start">\n        <ion-back-button default-href="#"></ion-back-button>\n      </ion-buttons>\n      <ion-title>Display</ion-title>\n      <ion-buttons slot="end">\n        <ion-button color="dark">\n          <ion-icon slot="icon-only" :ios="personCircleOutline" :md="personCircle"></ion-icon>\n        </ion-button>\n      </ion-buttons>\n    </ion-toolbar>\n  </ion-header>\n\n  <ion-content>\n    <ion-list-header>Appearance</ion-list-header>\n    <ion-list :inset="true">\n      <ion-item :button="true">Text Size</ion-item>\n      <ion-item>\n        <ion-toggle justify="space-between">Bold Text</ion-toggle>\n      </ion-item>\n    </ion-list>\n\n    <ion-list-header>Brightness</ion-list-header>\n    <ion-list :inset="true">\n      <ion-item>\n        <ion-range value="40">\n          <ion-icon :icon="sunnyOutline" slot="start"></ion-icon>\n          <ion-icon :icon="sunny" slot="end"></ion-icon>\n        </ion-range>\n      </ion-item>\n      <ion-item>\n        <ion-toggle justify="space-between" checked>True Tone</ion-toggle>\n      </ion-item>\n    </ion-list>\n\n    <ion-list :inset="true">\n      <ion-item :button="true">\n        <ion-label>Night Shift</ion-label>\n        <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>\n      </ion-item>\n    </ion-list>\n  </ion-content>\n</template>\n\n<script setup lang="ts">\n  import {\n    IonBackButton,\n    IonButton,\n    IonButtons,\n    IonContent,\n    IonHeader,\n    IonIcon,\n    IonItem,\n    IonLabel,\n    IonList,\n    IonListHeader,\n    IonRange,\n    IonText,\n    IonToggle,\n    IonToolbar,\n  } from \'@ionic/vue\';\n  import { personCircle, personCircleOutline, sunnyOutline, sunny } from \'ionicons/icons\';\n<\/script>\n'})})}function w(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(k,{...e})}):k(e)}function C(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import { createApp } from 'vue';\nimport { IonicVue } from '@ionic/vue';\n\nimport App from './App.vue';\n\n/* Core CSS required for Ionic components to work properly */\nimport '@ionic/vue/css/core.css';\n\n/* Basic CSS for apps built with Ionic */\nimport '@ionic/vue/css/normalize.css';\nimport '@ionic/vue/css/structure.css';\nimport '@ionic/vue/css/typography.css';\n\n/* Optional CSS utils that can be commented out */\nimport '@ionic/vue/css/padding.css';\nimport '@ionic/vue/css/float-elements.css';\nimport '@ionic/vue/css/text-alignment.css';\nimport '@ionic/vue/css/text-transformation.css';\nimport '@ionic/vue/css/flex-utils.css';\nimport '@ionic/vue/css/display.css';\n\n/**\n * Ionic Dark Palette\n * -----------------------------------------------------\n * For more information, please see:\n * https://ionicframework.com/docs/theming/dark-mode\n */\n\nimport '@ionic/vue/css/palettes/dark.always.css';\n// import '@ionic/vue/css/palettes/dark.class.css';\n// import '@ionic/vue/css/palettes/dark.system.css';\n\n/* Theme variables */\nimport './theme/variables.css';\n\ncreateApp(App).use(IonicVue).mount('#app');\n"})})}function S(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(C,{...e})}):C(e)}function T(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* Ionic Variables and Theming\n * ---------------------------------------------------------------\n * Any overrides to theme variables should be placed in this file.\n * For more information, please see:\n * http://ionicframework.com/docs/theming/\n */\n\n/* This sets a different item border color for the default theme on ios and md */\n:root {\n  --ion-item-border-color: var(--ion-background-color-step-200);\n}\n\n/* This sets a different background and item background for the default theme on ios */\n:root.ios {\n  --ion-background-color: var(--ion-background-color-step-50);\n  --ion-toolbar-background: var(--ion-background-color);\n  --ion-item-background: #1c1c1d;\n}\n\n/* This sets a different background and item background for the default theme on md */\n:root.md {\n  --ion-background-color: var(--ion-background-color-step-100);\n  --ion-toolbar-background: var(--ion-background-color);\n  --ion-item-background: #1c1c1d;\n}\n"})})}function A(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(T,{...e})}):T(e)}function L(e){return(0,s.jsx)(c.A,{version:"8",code:{javascript:{files:{"index.html":d,"index.ts":u,"theme/variables.css":A}},react:{files:{"src/App.tsx":h,"src/main.tsx":f,"src/theme/variables.css":A}},vue:{files:{"src/components/Example.vue":w,"src/main.ts":S,"src/theme/variables.css":A}},angular:{files:{"src/app/example.component.html":b,"src/app/example.component.ts":v,"src/styles.css":y,"src/theme/variables.css":A}}}

1,src:"usage/v8/theming/always-dark-mode/demo.html",devicePreview:!0,includeIonContent:!1})}function R(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(L,{...e})}):L(e)}function N(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",children:'<ion-header class="ion-no-border">\n  <ion-toolbar>\n    <ion-buttons slot="start">\n      <ion-back-button default-href="#"></ion-back-button>\n    </ion-buttons>\n    <ion-title>Display</ion-title>\n    <ion-buttons slot="end">\n      <ion-button color="dark">\n        <ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <ion-list-header>Appearance</ion-list-header>\n  <ion-list inset="true">\n    <ion-item button="true">Text Size</ion-item>\n    <ion-item>\n      <ion-toggle justify="space-between">Bold Text</ion-toggle>\n    </ion-item>\n  </ion-list>\n\n  <ion-list-header>Brightness</ion-list-header>\n  <ion-list inset="true">\n    <ion-item>\n      <ion-range value="40">\n        <ion-icon name="sunny-outline" slot="start"></ion-icon>\n        <ion-icon name="sunny" slot="end"></ion-icon>\n      </ion-range>\n    </ion-item>\n    <ion-item>\n      <ion-toggle justify="space-between" checked>True Tone</ion-toggle>\n    </ion-item>\n  </ion-list>\n\n  <ion-list inset="true">\n    <ion-item button="true">\n      <ion-label>Night Shift</ion-label>\n      <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>\n    </ion-item>\n  </ion-list>\n</ion-content>\n\n<style>\n  /* (Optional) This is added to prevent the flashing that happens when toggling between palettes */\n  ion-item {\n    --transition: none;\n  }\n</style>\n'})})}function B(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(N,{...e})}):N(e)}function O(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import { defineCustomElements } from '@ionic/core/loader';\n\nimport { addIcons } from 'ionicons';\nimport { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';\n\n/* Core CSS required for Ionic components to work properly */\nimport '@ionic/core/css/core.css';\n\n/* Basic CSS for apps built with Ionic */\nimport '@ionic/core/css/normalize.css';\nimport '@ionic/core/css/structure.css';\nimport '@ionic/core/css/typography.css';\n\n/* Optional CSS utils that can be commented out */\nimport '@ionic/core/css/padding.css';\nimport '@ionic/core/css/float-elements.css';\nimport '@ionic/core/css/text-alignment.css';\nimport '@ionic/core/css/text-transformation.css';\nimport '@ionic/core/css/flex-utils.css';\nimport '@ionic/core/css/display.css';\n\n/**\n * Ionic Dark Palette\n * -----------------------------------------------------\n * For more information, please see:\n * https://ionicframework.com/docs/theming/dark-mode\n */\n\n// import '@ionic/core/css/palettes/dark.always.css';\n// import '@ionic/core/css/palettes/dark.class.css';\nimport '@ionic/core/css/palettes/dark.system.css';\n\n/* Theme variables */\nimport './theme/variables.css';\n\n/**\n * On Ionicons 7.2+ these icons\n * get mapped to a kebab-case key.\n * Alternatively, developers can do:\n * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline,\n * 'sunny': sunny, 'sunny-outline': sunnyOutline });\n */\naddIcons({ personCircle, personCircleOutline, sunny, sunnyOutline });\n\ndefineCustomElements();\n"})})}function _(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(O,{...e})}):O(e)}function D(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { setupIonicReact, IonApp } from '@ionic/react';\n\n/* Core CSS required for Ionic components to work properly */\nimport '@ionic/react/css/core.css';\n\n/* Basic CSS for apps built with Ionic */\nimport '@ionic/react/css/normalize.css';\nimport '@ionic/react/css/structure.css';\nimport '@ionic/react/css/typography.css';\n\n/* Optional CSS utils that can be commented out */\nimport '@ionic/react/css/padding.css';\nimport '@ionic/react/css/float-elements.css';\nimport '@ionic/react/css/text-alignment.css';\nimport '@ionic/react/css/text-transformation.css';\nimport '@ionic/react/css/flex-utils.css';\nimport '@ionic/react/css/display.css';\n\n/**\n * Ionic Dark Palette\n * -----------------------------------------------------\n * For more information, please see:\n * https://ionicframework.com/docs/theming/dark-mode\n */\n\n// import '@ionic/react/css/palettes/dark.always.css';\n// import '@ionic/react/css/palettes/dark.class.css';\nimport '@ionic/react/css/palettes/dark.system.css';\n\n/* Theme variables */\nimport './theme/variables.css';\n\nimport Example from './main';\n\nsetupIonicReact();\n\nexport default function App() {\n  return (\n    <IonApp>\n      <Example />\n    </IonApp>\n  );\n}\n"})})}

1function E(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(D,{...e})}):D(e)}function M(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'import React from \'react\';\nimport {\n  IonBackButton,\n  IonButton,\n  IonButtons,\n  IonContent,\n  IonHeader,\n  IonIcon,\n  IonItem,\n  IonLabel,\n  IonList,\n  IonListHeader,\n  IonRange,\n  IonText,\n  IonTitle,\n  IonToggle,\n  IonToolbar,\n} from \'@ionic/react\';\nimport { personCircle, personCircleOutline, sunny, sunnyOutline } from \'ionicons/icons\';\n\nimport \'./main.css\';\n\nfunction Example() {\n  return (\n    <>\n      <IonHeader class="ion-no-border">\n        <IonToolbar>\n          <IonButtons slot="start">\n            <IonBackButton default-href="#"></IonBackButton>\n          </IonButtons>\n          <IonTitle>Display</IonTitle>\n          <IonButtons slot="end">\n            <IonButton color="dark">\n              <IonIcon slot="icon-only" ios={personCircleOutline} md={personCircle}></IonIcon>\n            </IonButton>\n          </IonButtons>\n        </IonToolbar>\n      </IonHeader>\n\n      <IonContent>\n        <IonListHeader>Appearance</IonListHeader>\n        <IonList inset={true}>\n          <IonItem button={true}>Text Size</IonItem>\n          <IonItem>\n            <IonToggle justify="space-between">Bold Text</IonToggle>\n          </IonItem>\n        </IonList>\n\n        <IonListHeader>Brightness</IonListHeader>\n        <IonList inset={true}>\n          <IonItem>\n            <IonRange value={40}>\n              <IonIcon icon={sunnyOutline} slot="start"></IonIcon>\n              <IonIcon icon={sunny} slot="end"></IonIcon>\n            </IonRange>\n          </IonItem>\n          <IonItem>\n            <IonToggle justify="space-between" checked>\n              True Tone\n            </IonToggle>\n          </IonItem>\n        </IonList>\n\n        <IonList inset={true}>\n          <IonItem button={true}>\n            <IonLabel>Night Shift</IonLabel>\n            <IonText slot="end" color="medium">\n              9:00 PM to 8:00 AM\n            </IonText>\n          </IonItem>\n        </IonList>\n      </IonContent>\n    </>\n  );\n}\nexport default Example;\n'})})}function P(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(M,{...e})}):M(e)}function H(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* (Optional) This is added to prevent the flashing that happens when toggling between palettes */\nion-item {\n  --transition: none;\n}\n"})})}function z(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(H,{...e})}):H(e)}function $(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",children:'<ion-header class="ion-no-border">\n  <ion-toolbar>\n    <ion-buttons slot="start">\n      <ion-back-button default-href="#"></ion-back-button>\n    </ion-buttons>\n    <ion-title>Display</ion-title>\n    <ion-buttons slot="end">\n      <ion-button color="dark">\n        <ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <ion-list-header>Appearance</ion-list-header>\n  <ion-list [inset]="true">\n    <ion-item [button]="true">Text Size</ion-item>\n    <ion-item>\n      <ion-toggle justify="space-between">Bold Text</ion-toggle>\n    </ion-item>\n  </ion-list>\n\n  <ion-list-header>Brightness</ion-list-header>\n  <ion-list [inset]="true">\n    <ion-item>\n      <ion-range value="40">\n        <ion-icon name="sunny-outline" slot="start"></ion-icon>\n        <ion-icon name="sunny" slot="end"></ion-icon>\n      </ion-range>\n    </ion-item>\n    <ion-item>\n      <ion-toggle justify="space-between" checked>True Tone</ion-toggle>\n    </ion-item>\n  </ion-list>\n\n  <ion-list [inset]="true">\n    <ion-item [button]="true">\n      <ion-label>Night Shift</ion-label>\n      <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>\n    </ion-item>\n  </ion-list>\n</ion-content>\n'})})}function V(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)($,{...e})}):$(e)}function F(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import { Component } from '@angular/core';\nimport {\n  IonBackButton,\n  IonButton,\n  IonButtons,\n  IonContent,\n  IonHeader,\n  IonIcon,\n  IonItem,\n  IonLabel,\n  IonList,\n  IonListHeader,\n  IonRange,\n  IonText,\n  IonTitle,\n  IonToggle,\n  IonToolbar,\n} from '@ionic/angular/standalone';\n\nimport { addIcons } from 'ionicons';\nimport { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: 'example.component.html',\n  styleUrls: ['example.component.css'],\n  imports: [\n    IonBackButton,\n    IonButton,\n    IonButtons,\n    IonContent,\n    IonHeader,\n    IonIcon,\n    IonItem,\n    IonLabel,\n    IonList,\n    IonListHeader,\n    IonRange,\n    IonText,\n    IonTitle,\n    IonToggle,\n    IonToolbar,\n  ],\n}

1)\nexport class ExampleComponent {\n  constructor() {\n    /**\n     * Any icons you want to use in your application\n     * can be registered in app.component.ts and then\n     * referenced by name anywhere in your application.\n     */\n    addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline });\n  }\n}\n"})})}function q(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(F,{...e})}):F(e)}function W(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* (Optional) This is added to prevent the flashing that happens when toggling between palettes */\nion-item {\n  --transition: none;\n}\n"})})}function U(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(W,{...e})}):W(e)}function J(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/*\n * App Global CSS\n * ----------------------------------------------------------------------------\n * Put style rules here that you want to apply globally. These styles are for\n * the entire app and not just one component. Additionally, this file can be\n * used as an entry point to import other CSS/Sass files to be included in the\n * output CSS.\n * For more information on global stylesheets, visit the documentation:\n * https://ionicframework.com/docs/layout/global-stylesheets\n */\n\n/* Core CSS required for Ionic components to work properly */\n@import '@ionic/angular/css/core.css';\n\n/* Basic CSS for apps built with Ionic */\n@import '@ionic/angular/css/normalize.css';\n@import '@ionic/angular/css/structure.css';\n@import '@ionic/angular/css/typography.css';\n\n/* Optional CSS utils that can be commented out */\n@import '@ionic/angular/css/padding.css';\n@import '@ionic/angular/css/float-elements.css';\n@import '@ionic/angular/css/text-alignment.css';\n@import '@ionic/angular/css/text-transformation.css';\n@import '@ionic/angular/css/flex-utils.css';\n@import '@ionic/angular/css/display.css';\n\n/**\n * Ionic Dark Palette\n * -----------------------------------------------------\n * For more information, please see:\n * https://ionicframework.com/docs/theming/dark-mode\n */\n\n/* @import '@ionic/angular/css/palettes/dark.always.css'; */\n/* @import '@ionic/angular/css/palettes/dark.class.css'; */\n@import '@ionic/angular/css/palettes/dark.system.css';\n"})})}function Q(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(J,{...e})}):J(e)}function Z(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",children:'<template>\n  <ion-header class="ion-no-border">\n    <ion-toolbar>\n      <ion-buttons slot="start">\n        <ion-back-button default-href="#"></ion-back-button>\n      </ion-buttons>\n      <ion-title>Display</ion-title>\n      <ion-buttons slot="end">\n        <ion-button color="dark">\n          <ion-icon slot="icon-only" :ios="personCircleOutline" :md="personCircle"></ion-icon>\n        </ion-button>\n      </ion-buttons>\n    </ion-toolbar>\n  </ion-header>\n\n  <ion-content>\n    <ion-list-header>Appearance</ion-list-header>\n    <ion-list :inset="true">\n      <ion-item :button="true">Text Size</ion-item>\n      <ion-item>\n        <ion-toggle justify="space-between">Bold Text</ion-toggle>\n      </ion-item>\n    </ion-list>\n\n    <ion-list-header>Brightness</ion-list-header>\n    <ion-list :inset="true">\n      <ion-item>\n        <ion-range value="40">\n          <ion-icon :icon="sunnyOutline" slot="start"></ion-icon>\n          <ion-icon :icon="sunny" slot="end"></ion-icon>\n        </ion-range>\n      </ion-item>\n      <ion-item>\n        <ion-toggle justify="space-between" checked>True Tone</ion-toggle>\n      </ion-item>\n    </ion-list>\n\n    <ion-list :inset="true">\n      <ion-item :button="true">\n        <ion-label>Night Shift</ion-label>\n        <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>\n      </ion-item>\n    </ion-list>\n  </ion-content>\n</template>\n\n<script setup lang="ts">\n  import {\n    IonBackButton,\n    IonButton,\n    IonButtons,\n    IonContent,\n    IonHeader,\n    IonIcon,\n    IonItem,\n    IonLabel,\n    IonList,\n    IonListHeader,\n    IonRange,\n    IonText,\n    IonToggle,\n    IonToolbar,\n  } from \'@ionic/vue\';\n  import { personCircle, personCircleOutline, sunnyOutline, sunny } from \'ionicons/icons\';\n<\/script>\n\n<style>\n  /* (Optional) This is added to prevent the flashing that happens when toggling between palettes */\n  ion-item {\n    --transition: none;\n  }\n</style>\n'})})}function G(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(Z,{...e})}):Z(e)}function Y(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import { createApp } from 'vue';\nimport { IonicVue } from '@ionic/vue';\n\nimport App from './App.vue';\n\n/* Core CSS required for Ionic components to work properly */\nimport '@ionic/vue/css/core.css';\n\n/* Basic CSS for apps built with Ionic */\nimport '@ionic/vue/css/normalize.css';\nimport '@ionic/vue/css/structure.css';\nimport '@ionic/vue/css/typography.css';\n\n/* Optional CSS utils that can be commented out */\nimport '@ionic/vue/css/padding.css';\nimport '@ionic/vue/css/float-elements.css';\nimport '@ionic/vue/css/text-alignment.css';\nimport '@ionic/vue/css/text-transformation.css';\nimport '@ionic/vue/css/flex-utils.css';\nimport '@ionic/vue/css/display.css';\n\n/**\n * Ionic Dark Palette\n * -----------------------------------------------------\n * For more information, please see:\n * https://ionicframework.com/docs/theming/dark-mode\n */\n\n// import '@ionic/vue/css/palettes/dark.always.css';\n// import '@ionic/vue/css/palettes/dark.class.css';\nimport '@ionic/vue/css/palettes/dark.system.css';\n\n/* Theme variables */\nimport './theme/variables.css';\n\ncreateApp(App).use(IonicVue).mount('#app');\n"})})}function K(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(Y,{...e})}):Y(e)}function X(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* Ionic Variables and Theming\n * ---------------------------------------------------------------\n * Any overrides to theme variables should be placed in this file.\n * For more information, please see:\n * http://ionicframework.com/docs/theming/\n */\n\n/* This sets a different item border color for the default theme on ios and md */\n:root {\n  --ion-item-border-color: var(--ion-background-color-step-200);\n}\n\n/* This sets a different background and item background for the default theme on ios */\n:root.ios {\n  --ion-background-color: var(--ion-background-color-step-50, #f2f2f6);\n  --ion-toolbar-background: var(--ion-background-color);\n  --ion-item-background: #fff;\n}\n\n/* This sets a different background and item background for the default theme on md */\n:root.md {\n  --ion-background-color: var(--ion-background-color-step-100, #f9f9f9);\n  --ion-toolbar-background: var(--ion-background-color);\n  --ion-item-background: #fff;\n}\n\n/* This sets a different item background when dark mode is enabled on ios and md */\n@media (prefers-color-scheme: dark) {\n  :root.ios,\n  :root.md {\n    --ion-item-background: #1c1c1d;\n  }\n}\n"})})}function ee(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(X,{...e})}):X(e)}function en(e){return(0,s.jsx)(c.A,{version:"8",code:{javascript:{files:{"index.html":B,"index.ts":_,"theme/variables.css":ee}},react:{files:{"src/App.tsx":E,"src/main.tsx":P,"src/main.css":z,"src/theme/variables.css":ee}},vue:{files:{"src/components/Example.vue":G,"src/main.ts":K,"src/theme/variables.css":ee}},angular:{files:{"src/app/example.component.html":V,"src/app/example.component.ts":q,"src/global.css":U,"src/styles.css":Q,"src/theme/variables.css":ee}}},src:"usage/v8/theming/system-dark-mode/demo.html",devicePreview:!0,includeIonContent:!1})}function et(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(en,{...e})}):en(e)}function eo(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",children:'<ion-header class="ion-no-border">\n  <ion-toolbar>\n    <ion-buttons slot="start">\n      <ion-back-button default-href="#"></ion-back-button>\n    </ion-buttons>\n    <ion-title>Display</ion-title>\n    <ion-buttons slot="end">\n      <ion-button color="dark">\n        <ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <ion-list-header>Appearance</ion-list-header>\n  <ion-list inset="true">\n    <ion-item>\n      <ion-toggle justify="space-between" id="paletteToggle">Dark Mode</ion-toggle>\n    </ion-item>\n  </ion-list>\n\n  <ion-list inset="true">\n    <ion-item button="true">Text Size</ion-item>\n    <ion-item>\n      <ion-toggle justify="space-between">Bold Text</ion-toggle>\n    </ion-item>\n  </ion-list>\n\n  <ion-list-header>Brightness</ion-list-header>\n  <ion-list inset="true">\n    <ion-item>\n      <ion-range value="40">\n        <ion-icon name="sunny-outline" slot="start"></ion-icon>\n        <ion-icon name="sunny" slot="end"></ion-icon>\n      </ion-range>\n    </ion-item>\n    <ion-item>\n      <ion-toggle justify="space-between" checked>True Tone</ion-toggle>\n    </ion-item>\n  </ion-list>\n\n  <ion-list inset="true">\n    <ion-item button="true">\n      <ion-label>Night Shift</ion-label>\n      <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>\n    </ion-item>\n  </ion-list>\n</ion-content>\n\n<script>\n  // Query for the toggle that is used to change between palettes\n  const toggle = document.querySelector(\'#paletteToggle\');\n\n  // Listen for the toggle check/uncheck to toggle the dark palette\n  toggle.addEventListener(\'ionChange\', (event) => {\n    toggleDarkPalette(event.detail.checked);\n  });\n\n  // Use matchMedia to check the user preference\n  const prefersDark = window.matchMedia(\'(prefers-color-scheme: dark)\');\n\n  // Initialize the dark palette based on the initial\n  // value of the prefers-color-scheme media query\n  initializeDarkPalette(prefersDark.matches);\n\n  // Listen for changes to the prefers-color-scheme media query\n  prefersDark.addEventListener(\'change\', (mediaQuery) => initializeDarkPalette(mediaQuery.matches));\n\n  // Check/uncheck the toggle and update the palette based on isDark\n  function initializeDarkPalette(isDark) {\n    toggle.checked = isDark;\n    toggleDarkPalette(isDark);\n  }\n\n  // Called by the media query to check/uncheck the toggle\n  function checkToggle(shouldCheck) {\n    toggle.checked = shouldCheck;\n  }\n\n  // Add or remove the "ion-palette-dark" class on the html element\n  function toggleDarkPalette(shouldAdd) {\n    document.documentElement.classList.toggle(\'ion-palette-dark\', shouldAdd);\n  }\n<\/script>\n\n<style>\n  /* (Optional) This is added to prevent the flashing that happens when toggling between palettes */\n  ion-item {\n    --transition: none;\n  }\n</style>\n'})})}function es(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(eo,{...e})}):eo(e)}function ei(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import { defineCustomElements } from '@ionic/core/loader';\n\nimport { addIcons } from 'ionicons';\nimport { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';\n\n/* Core CSS required for Ionic components to work properly */\nimport '@ionic/core/css/core.css';\n\n/* Basic CSS for apps built with Ionic */\nimport '@ionic/core/css/normalize.css';\nimport '@ionic/core/css/structure.css';\nimport '@ionic/core/css/typography.css';\n\n/* Optional CSS utils that can be commented out */\nimport '@ionic/core/css/padding.css';\nimport '@ionic/core/css/float-elements.css';\nimport '@ionic/core/css/text-alignment.css';\nimport '@ionic/core/css/text-transformation.css';\nimport '@ionic/core/css/flex-utils.css';\nimport '@ionic/core/css/display.css';\n\n/**\n * Ionic Dark Palette\n * -----------------------------------------------------\n * For more information, please see:\n * https://ionicframework.com/docs/theming/dark-mode\n */\n\n// import '@ionic/core/css/palettes/dark.always.css';\nimport '@ionic/core/css/palettes/dark.class.css';\n// import '@ionic/core/css/palettes/dark.system.css';\n\n/* Theme variables */\nimport './theme/variables.css';\n\n/**\n * On Ionicons 7.2+ these icons\n * get mapped to a kebab-case key.\n * Alternatively, developers can do:\n * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline,\n * 'sunny': sunny, 'sunny-outline': sunnyOutline });\n */\naddIcons({ personCircle, personCircleOutline, sunny, sunnyOutline });\n\ndefineCustomElements();\n"})})}function er(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(ei,{...e})}):ei(e)}function ea(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import React from 'react';\nimport { setupIonicReact, IonApp } from '@ionic/react';\n\n/* Core CSS required for Ionic components to work properly */\nimport '@ionic/react/css/core.css';\n\n/* Basic CSS for apps built with Ionic */\nimport '@ionic/react/css/normalize.css';\nimport '@ionic/react/css/structure.css';\nimport '@ionic/react/css/typography.css';\n\n/* Optional CSS utils that can be commented out */\nimport '@ionic/react/css/padding.css';\nimport '@ionic/react/css/float-elements.css';\nimport '@ionic/react/css/text-alignment.css';\nimport '@ionic/react/css/text-transformation.css';\nimport '@ionic/react/css/flex-utils.css';\nimport '@ionic/react/css/display.css';\n\n/**\n * Ionic Dark Palette\n * -----------------------------------------------------\n * For more information, please see:\n * https://ionicframework.com/docs/theming/dark-mode\n */\n\n// import '@ionic/react/css/palettes/dark.always.css';\nimport '@ionic/react/css/palettes/dark.class.css';\n// import '@ionic/react/css/palettes/dark.system.css';\n\n/* Theme variables */\nimport './theme/variables.css';\n\nimport Example from './main';\n\nsetupIonicReact();\n\nexport default function App() {\n  return (\n    <IonApp>\n      <Example />\n    </IonApp>\n  );\n}\n"})})}function ec(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(ea,{...e})}):ea(e)}function el(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'import React, { useEffect, useState } from \'react\';\nimport {\n  IonBackButton,\n  IonButton,\n  IonButtons,\n  IonContent,\n  IonHeader,\n  IonIcon,\n  IonItem,\n  IonLabel,\n  IonList,\n  IonListHeader,\n  IonRange,\n  IonText,\n  IonTitle,\n  IonToggle,\n  IonToolbar,\n} from \'@ionic/react\';\nimport type { ToggleCustomEvent } from \'@ionic/react\';\nimport { personCircle, personCircleOutline, sunny, sunnyOutline } from \'ionicons/icons\';\n\nimport \'./main.css\';\n\nfunction Example() {\n  const [paletteToggle, setPaletteToggle] = useState(false);\n\n  // Listen for the toggle check/uncheck to toggle the dark palette\n

1const toggleChange = (event: ToggleCustomEvent) => {\n    toggleDarkPalette(event.detail.checked);\n  };\n\n  // Add or remove the "ion-palette-dark" class on the html element\n  const toggleDarkPalette = (shouldAdd: boolean) => {\n    document.documentElement.classList.toggle(\'ion-palette-dark\', shouldAdd);\n  };\n\n  // Check/uncheck the toggle and update the palette based on isDark\n  const initializeDarkPalette = (isDark: boolean) => {\n    setPaletteToggle(isDark);\n    toggleDarkPalette(isDark);\n  };\n\n  useEffect(() => {\n    // Use matchMedia to check the user preference\n    const prefersDark = window.matchMedia(\'(prefers-color-scheme: dark)\');\n\n    // Initialize the dark palette based on the initial\n    // value of the prefers-color-scheme media query\n    initializeDarkPalette(prefersDark.matches);\n\n    const setDarkPaletteFromMediaQuery = (mediaQuery: MediaQueryListEvent) => {\n      initializeDarkPalette(mediaQuery.matches);\n    };\n\n    // Listen for changes to the prefers-color-scheme media query\n    prefersDark.addEventListener(\'change\', setDarkPaletteFromMediaQuery);\n\n    return () => {\n      prefersDark.removeEventListener(\'change\', setDarkPaletteFromMediaQuery);\n    };\n  }, []);\n\n  return (\n    <>\n      <IonHeader class="ion-no-border">\n        <IonToolbar>\n          <IonButtons slot="start">\n            <IonBackButton default-href="#"></IonBackButton>\n          </IonButtons>\n          <IonTitle>Display</IonTitle>\n          <IonButtons slot="end">\n            <IonButton color="dark">\n              <IonIcon slot="icon-only" ios={personCircleOutline} md={personCircle}></IonIcon>\n            </IonButton>\n          </IonButtons>\n        </IonToolbar>\n      </IonHeader>\n\n      <IonContent>\n        <IonListHeader>Appearance</IonListHeader>\n        <IonList inset={true}>\n          <IonItem>\n            <IonToggle checked={paletteToggle} onIonChange={toggleChange} justify="space-between">\n              Dark Mode\n            </IonToggle>\n          </IonItem>\n        </IonList>\n\n        <IonList inset={true}>\n          <IonItem button={true}>Text Size</IonItem>\n          <IonItem>\n            <IonToggle justify="space-between">Bold Text</IonToggle>\n          </IonItem>\n        </IonList>\n\n        <IonListHeader>Brightness</IonListHeader>\n        <IonList inset={true}>\n          <IonItem>\n            <IonRange value={40}>\n              <IonIcon icon={sunnyOutline} slot="start"></IonIcon>\n              <IonIcon icon={sunny} slot="end"></IonIcon>\n            </IonRange>\n          </IonItem>\n          <IonItem>\n            <IonToggle justify="space-between" checked>\n              True Tone\n            </IonToggle>\n          </IonItem>\n        </IonList>\n\n        <IonList inset={true}>\n          <IonItem button={true}>\n            <IonLabel>Night Shift</IonLabel>\n            <IonText slot="end" color="medium">\n              9:00 PM to 8:00 AM\n            </IonText>\n          </IonItem>\n        </IonList>\n      </IonContent>\n    </>\n  );\n}\nexport default Example;\n'})})}function ed(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(el,{...e})}):el(e)}function ep(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* (Optional) This is added to prevent the flashing that happens when toggling between palettes */\nion-item {\n  --transition: none;\n}\n"})})}function eu(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(ep,{...e})}):ep(e)}function em(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",children:'<ion-header class="ion-no-border">\n  <ion-toolbar>\n    <ion-buttons slot="start">\n      <ion-back-button default-href="#"></ion-back-button>\n    </ion-buttons>\n    <ion-title>Display</ion-title>\n    <ion-buttons slot="end">\n      <ion-button color="dark">\n        <ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <ion-list-header>Appearance</ion-list-header>\n  <ion-list [inset]="true">\n    <ion-item>\n      <ion-toggle [(ngModel)]="paletteToggle" (ionChange)="toggleChange($event)" justify="space-between"\n        >Dark Mode</ion-toggle\n      >\n    </ion-item>\n  </ion-list>\n\n  <ion-list [inset]="true">\n    <ion-item [button]="true">Text Size</ion-item>\n    <ion-item>\n      <ion-toggle justify="space-between">Bold Text</ion-toggle>\n    </ion-item>\n  </ion-list>\n\n  <ion-list-header>Brightness</ion-list-header>\n  <ion-list [inset]="true">\n    <ion-item>\n      <ion-range value="40">\n        <ion-icon name="sunny-outline" slot="start"></ion-icon>\n        <ion-icon name="sunny" slot="end"></ion-icon>\n      </ion-range>\n    </ion-item>\n    <ion-item>\n      <ion-toggle justify="space-between" checked>True Tone</ion-toggle>\n    </ion-item>\n  </ion-list>\n\n  <ion-list [inset]="true">\n    <ion-item [button]="true">\n      <ion-label>Night Shift</ion-label>\n      <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>\n    </ion-item>\n  </ion-list>\n</ion-content>\n'})})}function eh(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(em,{...e})}):em(e)}function eg(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import { Component, OnInit } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport {\n  IonBackButton,\n  IonButton,\n  IonButtons,\n  IonContent,\n  IonHeader,\n  IonIcon,\n  IonItem,\n  IonLabel,\n  IonList,\n  IonListHeader,\n  IonRange,\n  IonText,\n  IonTitle,\n  IonToggle,\n  IonToolbar,\n} from '@ionic/angular/standalone';\n\nimport { addIcons } from 'ionicons';\nimport { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: 'example.component.html',\n  styleUrls: ['example.component.css'],\n  imports: [\n    FormsModule,\n    IonBackButton,\n    IonButton,\n    IonButtons,\n    IonContent,\n    IonHeader,\n    IonIcon,\n    IonItem,\n    IonLabel,\n    IonList,\n    IonListHeader,\n    IonRange,\n    IonText,\n    IonTitle,\n    IonToggle,\n    IonToolbar,\n  ],\n}

1)\nexport class ExampleComponent implements OnInit {\n  paletteToggle = false;\n\n  constructor() {\n    /**\n     * Any icons you want to use in your application\n     * can be registered in app.component.ts and then\n     * referenced by name anywhere in your application.\n     */\n    addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline });\n  }\n\n  ngOnInit() {\n    // Use matchMedia to check the user preference\n    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');\n\n    // Initialize the dark palette based on the initial\n    // value of the prefers-color-scheme media query\n    this.initializeDarkPalette(prefersDark.matches);\n\n    // Listen for changes to the prefers-color-scheme media query\n    prefersDark.addEventListener('change', (mediaQuery) => this.initializeDarkPalette(mediaQuery.matches));\n  }\n\n  // Check/uncheck the toggle and update the palette based on isDark\n  initializeDarkPalette(isDark: boolean) {\n    this.paletteToggle = isDark;\n    this.toggleDarkPalette(isDark);\n  }\n\n  // Listen for the toggle check/uncheck to toggle the dark palette\n  toggleChange(event: CustomEvent) {\n    this.toggleDarkPalette(event.detail.checked);\n  }\n\n  // Add or remove the \"ion-palette-dark\" class on the html element\n  toggleDarkPalette(shouldAdd: boolean) {\n    document.documentElement.classList.toggle('ion-palette-dark', shouldAdd);\n  }\n}\n"})})}function ef(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(eg,{...e})}):eg(e)}function ex(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* (Optional) This is added to prevent the flashing that happens when toggling between palettes */\nion-item {\n  --transition: none;\n}\n"})})}function eb(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(ex,{...e})}):ex(e)}function ej(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/*\n * App Global CSS\n * ----------------------------------------------------------------------------\n * Put style rules here that you want to apply globally. These styles are for\n * the entire app and not just one component. Additionally, this file can be\n * used as an entry point to import other CSS/Sass files to be included in the\n * output CSS.\n * For more information on global stylesheets, visit the documentation:\n * https://ionicframework.com/docs/layout/global-stylesheets\n */\n\n/* Core CSS required for Ionic components to work properly */\n@import '@ionic/angular/css/core.css';\n\n/* Basic CSS for apps built with Ionic */\n@import '@ionic/angular/css/normalize.css';\n@import '@ionic/angular/css/structure.css';\n@import '@ionic/angular/css/typography.css';\n\n/* Optional CSS utils that can be commented out */\n@import '@ionic/angular/css/padding.css';\n@import '@ionic/angular/css/float-elements.css';\n@import '@ionic/angular/css/text-alignment.css';\n@import '@ionic/angular/css/text-transformation.css';\n@import '@ionic/angular/css/flex-utils.css';\n@import '@ionic/angular/css/display.css';\n\n/**\n * Ionic Dark Palette\n * -----------------------------------------------------\n * For more information, please see:\n * https://ionicframework.com/docs/theming/dark-mode\n */\n\n/* @import '@ionic/angular/css/palettes/dark.always.css'; */\n@import '@ionic/angular/css/palettes/dark.class.css';\n/* @import '@ionic/angular/css/palettes/dark.system.css'; */\n"})})}function ev(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(ej,{...e})}):ej(e)}function eI(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",children:'<template>\n  <ion-header class="ion-no-border">\n    <ion-toolbar>\n      <ion-buttons slot="start">\n        <ion-back-button default-href="#"></ion-back-button>\n      </ion-buttons>\n      <ion-title>Display</ion-title>\n      <ion-buttons slot="end">\n        <ion-button color="dark">\n          <ion-icon slot="icon-only" :ios="personCircleOutline" :md="personCircle"></ion-icon>\n        </ion-button>\n      </ion-buttons>\n    </ion-toolbar>\n  </ion-header>\n\n  <ion-content>\n    <ion-list-header>Appearance</ion-list-header>\n    <ion-list :inset="true">\n      <ion-item>\n        <ion-toggle :checked="paletteToggle" @ionChange="toggleChange($event)" justify="space-between"\n          >Dark Mode</ion-toggle\n        >\n      </ion-item>\n    </ion-list>\n\n    <ion-list :inset="true">\n      <ion-item :button="true">Text Size</ion-item>\n      <ion-item>\n        <ion-toggle justify="space-between">Bold Text</ion-toggle>\n      </ion-item>\n    </ion-list>\n\n    <ion-list-header>Brightness</ion-list-header>\n    <ion-list :inset="true">\n      <ion-item>\n        <ion-range value="40">\n          <ion-icon :icon="sunnyOutline" slot="start"></ion-icon>\n          <ion-icon :icon="sunny" slot="end"></ion-icon>\n        </ion-range>\n      </ion-item>\n      <ion-item>\n        <ion-toggle justify="space-between" checked>True Tone</ion-toggle>\n      </ion-item>\n    </ion-list>\n\n    <ion-list :inset="true">\n      <ion-item :button="true">\n        <ion-label>Night Shift</ion-label>\n        <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>\n      </ion-item>\n    </ion-list>\n  </ion-content>\n</template>\n\n<script setup lang="ts">\n  import {\n    IonBackButton,\n    IonButton,\n    IonButtons,\n    IonContent,\n    IonHeader,\n    IonIcon,\n    IonItem,\n    IonLabel,\n    IonList,\n    IonListHeader,\n    IonRange,\n    IonText,\n    IonToggle,\n    IonToolbar,\n  } from \'@ionic/vue\';\n  import type { ToggleCustomEvent } from \'@ionic/vue\';\n  import { personCircle, personCircleOutline, sunnyOutline, sunny } from \'ionicons/icons\';\n  import { ref } from \'vue\';\n\n  const paletteToggle = ref(false);\n\n  // Use matchMedia to check the user preference\n  const prefersDark = window.matchMedia(\'(prefers-color-scheme: dark)\');\n\n  // Add or remove the "ion-palette-dark" class on the html element\n

1const toggleDarkPalette = (shouldAdd) => {\n    document.documentElement.classList.toggle(\'ion-palette-dark\', shouldAdd);\n  };\n\n  // Check/uncheck the toggle and update the palette based on isDark\n  const initializeDarkPalette = (isDark) => {\n    paletteToggle.value = isDark;\n    toggleDarkPalette(isDark);\n  };\n\n  // Initialize the dark palette based on the initial\n  // value of the prefers-color-scheme media query\n  initializeDarkPalette(prefersDark.matches);\n\n  // Listen for changes to the prefers-color-scheme media query\n  prefersDark.addEventListener(\'change\', (mediaQuery) => initializeDarkPalette(mediaQuery.matches));\n\n  // Listen for the toggle check/uncheck to toggle the dark palette\n  const toggleChange = (event: ToggleCustomEvent) => {\n    toggleDarkPalette(event.detail.checked);\n  };\n<\/script>\n\n<style>\n  /* (Optional) This is added to prevent the flashing that happens when toggling between palettes */\n  ion-item {\n    --transition: none;\n  }\n</style>\n'})})}function ey(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(eI,{...e})}):eI(e)}function ek(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import { createApp } from 'vue';\nimport { IonicVue } from '@ionic/vue';\n\nimport App from './App.vue';\n\n/* Core CSS required for Ionic components to work properly */\nimport '@ionic/vue/css/core.css';\n\n/* Basic CSS for apps built with Ionic */\nimport '@ionic/vue/css/normalize.css';\nimport '@ionic/vue/css/structure.css';\nimport '@ionic/vue/css/typography.css';\n\n/* Optional CSS utils that can be commented out */\nimport '@ionic/vue/css/padding.css';\nimport '@ionic/vue/css/float-elements.css';\nimport '@ionic/vue/css/text-alignment.css';\nimport '@ionic/vue/css/text-transformation.css';\nimport '@ionic/vue/css/flex-utils.css';\nimport '@ionic/vue/css/display.css';\n\n/**\n * Ionic Dark Palette\n * -----------------------------------------------------\n * For more information, please see:\n * https://ionicframework.com/docs/theming/dark-mode\n */\n\n// import '@ionic/vue/css/palettes/dark.always.css';\nimport '@ionic/vue/css/palettes/dark.class.css';\n// import '@ionic/vue/css/palettes/dark.system.css';\n\n/* Theme variables */\nimport './theme/variables.css';\n\ncreateApp(App).use(IonicVue).mount('#app');\n"})})}function ew(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(ek,{...e})}):ek(e)}function eC(e){let n={code:"code",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* Ionic Variables and Theming\n * ---------------------------------------------------------------\n * Any overrides to theme variables should be placed in this file.\n * For more information, please see:\n * http://ionicframework.com/docs/theming/\n */\n\n/* This sets a different item border color for the default theme on ios and md */\n:root {\n  --ion-item-border-color: var(--ion-background-color-step-200);\n}\n\n/* This sets a different background and item background for the default theme on ios */\n:root.ios {\n  --ion-background-color: var(--ion-background-color-step-50, #f2f2f6);\n  --ion-toolbar-background: var(--ion-background-color);\n  --ion-item-background: #fff;\n}\n\n/* This sets a different background and item background for the default theme on md */\n:root.md {\n  --ion-background-color: var(--ion-background-color-step-100, #f9f9f9);\n  --ion-toolbar-background: var(--ion-background-color);\n  --ion-item-background: #fff;\n}\n\n/* This sets a different item background when dark mode is enabled on ios and md */\n.ion-palette-dark.ios,\n.ion-palette-dark.md {\n  --ion-item-background: #1c1c1d;\n}\n"})})}function eS(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(eC,{...e})}):eC(e)}function eT(e){return(0,s.jsx)(c.A,{version:"8",code:{javascript:{files:{"index.html":es,"index.ts":er,"theme/variables.css":eS}},react:{files:{"src/App.tsx":ec,"src/main.tsx":ed,"src/main.css":eu,"src/theme/variables.css":eS}},vue:{files:{"src/components/Example.vue":ey,"src/main.ts":ew,"src/theme/variables.css":eS}},angular:{files:{"src/app/example.component.html":eh,"src/app/example.component.ts":ef,"src/global.css":eb,"src/styles.css":ev,"src/theme/variables.css":eS}}},src:"usage/v8/theming/class-dark-mode/demo.html",devicePreview:!0,includeIonContent:!1})}function eA(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(eT,{...e})}):eT(e)}let eL={title:"Dark Mode"},eR,eN={},eB=[{value:"Enabling Dark Palette",id:"enabling-dark-palette",level:2},{value:"Always",id:"always",level:3},{value:"System",id:"system",level:3},{value:"CSS Class",id:"css-class",level:3}

1,{value:"Adjusting System UI Components",id:"adjusting-system-ui-components",level:2},{value:"Ionic Dark Palette",id:"ionic-dark-palette",level:2}];function eO(e){let n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.R)(),...e.components},{Head:o}=n;return o||function(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Head",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(o,{children:[(0,s.jsx)("title",{children:"Dark Mode to Change Color Schemes and CSS Properties"}),(0,s.jsx)("meta",{name:"description",content:"Developers are adding dark mode CSS on native applications to support their user preferences. Read to learn more about dark color schemes for Ionic apps."})]}),"\n",(0,s.jsx)(n.p,{children:"Ionic makes it easy to change the palettes of your app, including supporting dark color schemes. Dark mode is a display setting that changes all of an app's views to a dark palette. It has system-wide support on iOS and Android, making it highly desirable for developers to add to their apps."}),"\n",(0,s.jsx)(n.h2,{id:"enabling-dark-palette",children:"Enabling Dark Palette"}),"\n",(0,s.jsxs)(n.p,{children:["There are three provided ways to enable the dark palette in an app: ",(0,s.jsx)(n.strong,{children:"always"}),", based on ",(0,s.jsx)(n.strong,{children:"system"})," settings, or by using a CSS ",(0,s.jsx)(n.strong,{children:"class"}),"."]}),"\n",(0,s.jsx)(n.h3,{id:"always",children:"Always"}),"\n",(0,s.jsx)(n.p,{children:"The default palette provided with Ionic Framework is a light palette, consisting of a light background and dark text. However, the default palette can be changed to the dark palette by importing the following stylesheet in the appropriate files:"}),"\n",(0,s.jsxs)(r.A,{groupId:"framework",defaultValue:"angular",values:[{value:"angular",label:"Angular"},{value:"javascript",label:"Javascript"},{value:"react",label:"React"},{value:"vue",label:"Vue"}],children:[(0,s.jsx)(a.A,{value:"angular",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"@import '@ionic/angular/css/palettes/dark.always.css';\n"})})}),(0,s.jsx)(a.A,{value:"javascript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import '@ionic/core/css/palettes/dark.always.css';\n"})})}),(0,s.jsx)(a.A,{value:"react",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import '@ionic/react/css/palettes/dark.always.css';\n"})})}),(0,s.jsx)(a.A,{value:"vue",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import '@ionic/vue/css/palettes/dark.always.css';\n"})})})]}),"\n",(0,s.jsxs)(n.p,{children:["This sets the ",(0,s.jsx)(n.a,{href:"/docs/theming/themes#application-colors",children:"application colors"})," and ",(0,s.jsx)(n.a,{href:"/docs/theming/themes#stepped-colors",children:"stepped colors"})," on the ",(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:root",children:(0,s.jsx)(n.code,{children:":root"})})," selector."]}),"\n",(0,s.jsx)(n.p,{children:"The following example will always display the dark palette, regardless of the system settings for dark mode."}),"\n","\n",(0,s.jsx)(R,{}),"\n",(0,s.jsx)(n.admonition,{title:"Important",type:"caution",children:(0,s.jsxs)(n.p,{children:["Avoid targeting the ",(0,s.jsx)(n.code,{children:".ios"})," or ",(0,s.jsx)(n.code,{children:".md"})," selectors to override the Ionic dark palette, 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 ",(0,s.jsx)(n.code,{children:":root"})," element."]})}),"\n",(0,s.jsx)(n.h3,{id:"system",children:"System"}),"\n",(0,s.jsx)(n.p,{children:"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 palette when dark mode is preferred:"}),"\n",(0,s.jsxs)(r.A,{groupId:"framework",defaultValue:"angular",values:[{value:"angular",label:"Angular"},{value:"javascript",label:"Javascript"},{value:"react",label:"React"},{value:"vue",label:"Vue"}],children:[(0,s.jsx)(a.A,{value:"angular",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"@import '@ionic/angular/css/palettes/dark.system.css';\n"})})}),(0,s.jsx)(a.A,{value:"javascript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import '@ionic/core/css/palettes/dark.system.css';\n"})})}),(0,s.jsx)(a.A,{value:"react",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import '@ionic/react/css/palettes/dark.system.css';\n"})})}),(0,s.jsx)(a.A,{value:"vue",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import '@ionic/vue/css/palettes/dark.system.css';\n"})})})]}),"\n",(0,s.jsxs)(n.p,{children:["This sets the ",(0,s.jsx)(n.a,{href:"/docs/theming/themes#application-colors",children:"application colors"})," and ",(0,s.jsx)(n.a,{href:"/docs/theming/themes#stepped-colors",children:"stepped colors"})," when the ",(0,s.jsxs)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme",children:["CSS media query for ",(0,s.jsx)(n.code,{children:"prefers-color-scheme"})]})," is ",(0,s.jsx)(n.code,{children:"dark"}),". The ",(0,s.jsx)(n.code,{children:"prefers-color-scheme"})," media query is supported by ",(0,s.jsx)(n.a,{href:"https://caniuse.com/#feat=prefers-color-scheme",children:"all modern browsers"}),". If support for older browser is required, we recommend using the ",(0,s.jsx)(n.a,{href:"#css-class",children:"CSS class"})," approach."]}),"\n",(0,s.jsx)(n.p,{children:"The following example uses the system settings to decide when to show dar

1k mode."}),"\n",(0,s.jsx)(n.admonition,{type:"info",children:(0,s.jsxs)(n.p,{children:["Not sure how to change the system settings? Here's how to enable dark mode on ",(0,s.jsx)(n.a,{href:"https://support.microsoft.com/en-us/windows/change-colors-in-windows-d26ef4d6-819a-581c-1581-493cfcc005fe",children:"Windows 11"})," and on ",(0,s.jsx)(n.a,{href:"https://support.apple.com/en-us/HT208976",children:"macOS"}),"."]})}),"\n","\n",(0,s.jsx)(et,{}),"\n",(0,s.jsx)(n.admonition,{title:"Important",type:"caution",children:(0,s.jsxs)(n.p,{children:["Avoid targeting the ",(0,s.jsx)(n.code,{children:".ios"})," or ",(0,s.jsx)(n.code,{children:".md"})," selectors to override the Ionic dark palette, 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 ",(0,s.jsx)(n.code,{children:":root"})," element."]})}),"\n",(0,s.jsx)(n.h3,{id:"css-class",children:"CSS Class"}),"\n",(0,s.jsx)(n.p,{children:"While the previous approaches are excellent for enabling the dark palette 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 palette conditionally, such as through a toggle, or if you want to extend the functionality based on system settings, we provide a dark palette class file. This file applies the dark palette 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 palette with the class:"}),"\n",(0,s.jsxs)(r.A,{groupId:"framework",defaultValue:"angular",values:[{value:"angular",label:"Angular"},{value:"javascript",label:"Javascript"},{value:"react",label:"React"},{value:"vue",label:"Vue"}],children:[(0,s.jsx)(a.A,{value:"angular",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"@import '@ionic/angular/css/palettes/dark.class.css';\n"})})}),(0,s.jsx)(a.A,{value:"javascript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import '@ionic/core/css/palettes/dark.class.css';\n"})})}),(0,s.jsx)(a.A,{value:"react",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import '@ionic/react/css/palettes/dark.class.css';\n"})})}),(0,s.jsx)(a.A,{value:"vue",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import '@ionic/vue/css/palettes/dark.class.css';\n"})})})]}),"\n",(0,s.jsxs)(n.p,{children:["This sets the ",(0,s.jsx)(n.a,{href:"/docs/theming/themes#application-colors",children:"application colors"})," and ",(0,s.jsx)(n.a,{href:"/docs/theming/themes#stepped-colors",children:"stepped colors"})," on the ",(0,s.jsx)(n.code,{children:".ion-palette-dark"})," selector, which must be applied to the app by the developer."]}),"\n",(0,s.jsx)(n.p,{children:"The following example combines site settings, system settings, and the toggle to decide when to show dark mode. The site's palette takes precedence over system settings. If your system settings differ from the site's palette when the demo loads, it will use the site's palette."}),"\n",(0,s.jsx)(n.admonition,{type:"info",children:(0,s.jsxs)(n.p,{children:["Not sure how to change the system settings? Here's how to enable dark mode on ",(0,s.jsx)(n.a,{href:"https://support.microsoft.com/en-us/windows/change-colors-in-windows-d26ef4d6-819a-581c-1581-493cfcc005fe",children:"Windows 11"})," and on ",(0,s.jsx)(n.a,{href:"https://support.apple.com/en-us/HT208976",children:"macOS"}),"."]})}),"\n","\n",(0,s.jsx)(eA,{}),"\n",(0,s.jsx)(n.admonition,{title:"Important",type:"caution",children:(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:".ion-palette-dark"})," class ",(0,s.jsx)(n.strong,{children:"must"})," be added to the ",(0,s.jsx)(n.code,{children:"html"})," element in order to work with the imported dark palette."]})}),"\n",(0,s.jsx)(n.h2,{id:"adjusting-system-ui-components",children:"Adjusting System UI Components"}),"\n",(0,s.jsxs)(n.p,{children:["When developing a dark palette, you may

1notice that certain system UI components are not adjusting to dark mode properly. To fix this you will need to specify the ",(0,s.jsx)(n.code,{children:"color-scheme"}),". Refer to the ",(0,s.jsx)("a",{href:"https://caniuse.com/#feat=mdn-html_elements_meta_name_color-scheme",target:"_blank",children:"browser compatibility for color-scheme"})," for details on cross browser support."]}),"\n",(0,s.jsxs)(n.p,{children:["While you may be mainly using Ionic components instead of only native components, ",(0,s.jsx)(n.code,{children:"color-scheme"})," can also affect aspects of your application such as the scrollbar. In order to use ",(0,s.jsx)(n.code,{children:"color-scheme"})," you will need to add the following HTML to the ",(0,s.jsx)(n.code,{children:"head"})," of your application:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",children:'<meta name="color-scheme" content="light dark" />\n'})}),"\n",(0,s.jsx)(n.p,{children:"This allows the page to indicate which color scheme it is comfortable being rendered with. Alternatively, you can add the following CSS to do this on a per-element basis:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"color-scheme: light dark;\n"})}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Default scrollbar"}),(0,s.jsxs)(n.th,{children:["Scrollbar with ",(0,s.jsx)(n.code,{children:"color-scheme"})]})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.img,{alt:"A default light-themed scrollbar in an application interface.",src:t(52534).A+"",title:"Default scrollbar appearance without dark mode",width:"1500",height:"2668"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.img,{alt:"A dark-themed scrollbar in an application interface, demonstrating the effect of the &#39;color-scheme&#39; property.",src:t(34524).A+"",title:"Scrollbar appearance with dark mode &#39;color-scheme&#39; applied",width:"1500",height:"2668"})})]})})]}),"\n",(0,s.jsxs)(n.p,{children:["For more information regarding ",(0,s.jsx)(n.code,{children:"color-scheme"}),", please refer to the ",(0,s.jsx)(n.a,{href:"https://web.dev/color-scheme/",children:"Web.dev guide on color schemes"}),"."]}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"color-scheme"})," does not apply to the keyboard. For details on how dark mode works with the keyboard, refer to ",(0,s.jsx)(n.a,{href:"/docs/v8/developing/keyboard#dark-mode",children:"Keyboard Documentation"}),"."]})}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:["For developers looking to customize the theme color under the status bar in Safari on iOS 15 or the toolbar in Safari on macOS, refer to ",(0,s.jsxs)(n.a,{href:"/docs/v8/theming/advanced#theme-color-meta",children:[(0,s.jsx)(n.code,{children:"theme-color"})," Meta"]}),"."]})}),"\n",(0,s.jsx)(n.h2,{id:"ionic-dark-palette",children:"Ionic Dark Palette"}),"\n",(0,s.jsxs)(n.p,{children:["Ionic has a recommended dark palette that can be enabled in three different ways: ",(0,s.jsx)(n.a,{href:"#always",children:"always"}),", based on ",(0,s.jsx)(n.a,{href:"#system",children:"system"})," settings, or by using a ",(0,s.jsx)(n.a,{href:"#css-class",children:"CSS class"}),". Each of these methods involves importing the dark palette file with the corresponding name."]}),"\n",(0,s.jsxs)(n.p,{children:["The contents of each file are included below for reference. These variables are set by importing the relevant dark palette file and do not need to be copied into an app. For more information on the variables being changed, including additional variables for further customization, refer to the ",(0,s.jsx)(n.a,{href:"/docs/v8/theming/themes",children:"Themes"})," section."]}),"\n",(0,s.jsxs)(r.A,{groupId:"darkFiles",defaultValue:"always",values:[{value:"always",label:"Always (dark.always.css)"},{value:"system",label:"System (dark.system.css)"},{value:"class",label:"Class (dark.class.css)"}],children:[(0,s.jsxs)(a.A,{value:"always",children:[(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.strong,{children:"always"})," dark palette behaves in the following ways:"]}),(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["Sets the ",(0,s.jsx)(n.a,{href:"/docs/v8/theming/colors",children:"Ionic colors"})," for all ",(0,s.jsx)(n.a,{href:"/docs/v8/theming/platform-styles#ionic-modes",children:"modes"})," to complement a dark palette in the ",(0,s.jsx)(n.code,{children:":root"})," selector. The ",(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:root",children:(0,s.jsx)(n.code,{children:":root"})})," selector is identical to the selector ",(0,s.jsx)(n.code,{children:"html"}),", except that its ",(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity",children:"specificity"})," is higher."]}

1),"\n",(0,s.jsxs)(n.li,{children:["Setting variables for the dark palette on ",(0,s.jsx)(n.code,{children:"ios"})," devices using the ",(0,s.jsx)(n.code,{children:":root.ios"})," selector."]}),"\n",(0,s.jsxs)(n.li,{children:["Setting variables for the dark palette on ",(0,s.jsx)(n.code,{children:"md"})," devices using the ",(0,s.jsx)(n.code,{children:":root.md"})," selector."]}),"\n"]}),(0,s.jsx)(n.admonition,{type:"caution",children:(0,s.jsxs)(n.p,{children:["It is important to pay attention to the specificity if you want to override any of the Ionic dark palette variables. For example, because the ",(0,s.jsx)(n.code,{children:"--ion-item-background"})," variable is set for each mode, it cannot be overridden in the ",(0,s.jsx)(n.code,{children:":root"})," selector. A higher specificity selector, such as ",(0,s.jsx)(n.code,{children:":root.ios"}),", is required."]})}),(0,s.jsx)(n.admonition,{type:"info",children:(0,s.jsxs)(n.p,{children:["The contents of Ionic's dark palette can be ",(0,s.jsx)(n.a,{href:"https://github.com/ionic-team/ionic-framework/blob/main/core/src/css/palettes/dark.scss",children:"viewed on GitHub"}),". The CSS used to apply the ",(0,s.jsx)(n.strong,{children:"always"})," dark palette can be found in the ",(0,s.jsx)(n.a,{href:"https://github.com/ionic-team/ionic-framework/blob/main/core/src/css/palettes/dark.always.scss",children:"repository"}),"."]})})]}),(0,s.jsxs)(a.A,{value:"system",children:[(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.strong,{children:"system"})," dark palette behaves in the following ways:"]}),(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["Sets the ",(0,s.jsx)(n.a,{href:"/docs/v8/theming/colors",children:"Ionic colors"})," for all ",(0,s.jsx)(n.a,{href:"/docs/v8/theming/platform-styles#ionic-modes",children:"modes"})," to complement a dark palette in the ",(0,s.jsx)(n.code,{children:":root"})," selector. The ",(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:root",children:(0,s.jsx)(n.code,{children:":root"})})," selector is identical to the selector ",(0,s.jsx)(n.code,{children:"html"}),", except that its ",(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity",children:"specificity"})," is higher."]}),"\n",(0,s.jsxs)(n.li,{children:["Setting variables for the dark palette on ",(0,s.jsx)(n.code,{children:"ios"})," devices using the ",(0,s.jsx)(n.code,{children:":root.ios"})," selector."]}),"\n",(0,s.jsxs)(n.li,{children:["Setting variables for the dark palette on ",(0,s.jsx)(n.code,{children:"md"})," devices using the ",(0,s.jsx)(n.code,{children:":root.md"})," selector."]}),"\n",(0,s.jsxs)(n.li,{children:["Only applies these variables when the ",(0,s.jsxs)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme",children:["CSS media query for ",(0,s.jsx)(n.code,{children:"prefers-color-scheme"})]})," is ",(0,s.jsx)(n.code,{children:"dark"}),"."]}),"\n"]}),(0,s.jsx)(n.admonition,{type:"caution",children:(0,s.jsxs)(n.p,{children:["It is important to pay attention to the specificity if you want to override any of the Ionic dark palette variables. For example, because the ",(0,s.jsx)(n.code,{children:"--ion-item-background"})," variable is set for each mode, it cannot be overridden in the ",(0,s.jsx)(n.code,{children:":root"})," selector. A higher specificity selector, such as ",(0,s.jsx)(n.code,{children:":root.ios"}),", is required."]})}),(0,s.jsx)(n.admonition,{type:"info",children:(0,s.jsxs)(n.p,{children:["The contents of Ionic's dark palette can be ",(0,s.jsx)(n.a,{href:"https://github.com/ionic-team/ionic-framework/blob/main/core/src/css/palettes/dark.scss",children:"viewed on GitHub"}),". The CSS used to apply the ",(0,s.jsx)(n.strong,{children:"system"})," dark palette can be found in the ",(0,s.jsx)(n.a,{href:"https://github.com/ionic-team/ionic-framework/blob/main/core/src/css/palettes/dark.system.scsss",children:"repository"}),"."]})})]}),(0,s.jsxs)(a.A,{value:"class",children:[(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.strong,{children:"class"})," dark palette behaves in the following ways:"]}),(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["Sets the ",(0,s.jsx)(n.a,{href:"/docs/v8/theming/colors",children:"Ionic colors"})," for all ",(0,s.jsx)(n.a,{href:"/docs/v8/theming/platform-styles#ionic-modes",children:"modes"})," to complement a dark palette in the ",(0,s.jsx)(n.code,{children:".ion-palette-dark"})," selector. The ",(0,s.jsx)(n.code,{children:".ion-palette-dark"})," class must be added to the ",(0,s.jsx)(n.code,{children:"html"})," element in an app."]}),"\n",(0,s.jsxs)(n.li,{children:["Setting variables for the dark palette on ",(0,s.jsx)(n.code,{children:"ios"})," devices using the ",(0,s.jsx)(n.code,{children:".ion-palette-dark.ios"})," selector."]}),"\n",(0,s.jsxs)(n.li,{children:["Setting variables for the dark palette on ",(0,s.jsx)(n.code,{children:"md"})," devices using the ",(0,s.jsx)(n.code,{children:".ion-palette-dark.md"})," selector."]}),"\n"]}),(0,s.jsx)(n.admonition,{type:"caution",children:(0,s.jsxs)(n.p,{children:["It is important to pay attention to the specificity if you want to override any of the Ionic dark palette variables. For example, because the ",(0,s.jsx)(n.code,{children:"--ion-item-background"})," variable is set for each mode, it cannot be overridden in the ",(0,s.jsx)(n.code,{children:".ion-palette-dark"})," selector. A higher specificity selector, such as ",(0,s.jsx)(n.code,{children:".ion-palette-dark.ios"}),", is required."]})}),(0,s.jsx)(n.admonition,{type:"info",children:(0,s.jsxs)(n.p,{children:["The contents of Ionic's dark palette can be ",(0,s.jsx)(n.a,{href:"https://github.com/ionic-team/ionic-framework/blob/main/core/src/css/palettes/dark.scss",children:"viewed on GitHub"}),". The CSS used to apply the ",(0,s.jsx)(n.strong,{children:"class"})," dark palette can be found in the ",(0,s.jsx)(n.a,{href:"https://github.com/ionic-team/ionic-framework/blob/main/core/src/css/palettes/dark.class.scss",children:"repository"}),"."]})})]})]})]})}function e_(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(eO,{...e})}):eO(e)}},34524(e,n,t){t.d(n,{A:()=>o});

1let o=t.p+"assets/images/color-scheme-dark-dc6ce3834a396fffd335f1a9f6636040.png"},52534(e,n,t){t.d(n,{A:()=>o});let o=t.p+"assets/images/color-scheme-light-0d99e3df2e3f3275a72e5c62b8efd0ad.png"},57250(e,n,t){t.d(n,{A:()=>a});var o=t(74848);t(96540);var s=t(18215),i=t(57663);function r({children:e,className:n,hidden:t}){return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.A)("tabItem_Ymn6",n),hidden:t,children:e})}function a({children:e,className:n,value:t}){let{selectedValue:s,lazy:c}=(0,i.uc)(),l=t===s;return!l&&c?null:(0,o.jsx)(r,{className:n,hidden:!l,children:e})}},50773(e,n,t){t.d(n,{A:()=>u});var o=t(74848);t(96540);var s=t(18215),i=t(88287),r=t(57663),a=t(28584),c=t(19863);function l({className:e}){let{selectedValue:n,selectValue:t,tabValues:i,block:c}=(0,r.uc)(),d=[],{blockElementScrollPositionUntilNextRender:p}=(0,a.a_)(),u=e=>{let o=e.currentTarget,s=i[d.indexOf(o)].value;s!==n&&(p(o),t(s))},m=e=>{let n=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{let t=d.indexOf(e.currentTarget)+1;n=d[t]??d[0];break}case"ArrowLeft":{let t=d.indexOf(e.currentTarget)-1;n=d[t]??d[d.length-1]}}n?.focus()};return(0,o.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":c},e),children:i.map(({value:e,label:t,attributes:i})=>(0,o.jsx)("li",{role:"tab",tabIndex:n===e?0:-1,"aria-selected":n===e,ref:e=>{d.push(e)},onKeyDown:m,onClick:u,...i,className:(0,s.A)("tabs__item","tabItem_LNqP",i?.className,{"tabs__item--active":n===e}),children:t??e},e))})}function d({children:e}){return(0,o.jsx)("div",{className:"margin-top--md",children:e})}function p({className:e,children:n}){return(0,o.jsxs)("div",{className:(0,s.A)(i.G.tabs.container,"tabs-container","tabList__CuJ"),children:[(0,o.jsx)(l,{className:e}),(0,o.jsx)(d,{children:n})]})}function u(e){let n=(0,c.A)(),t=(0,r.OC)(e);return(0,o.jsx)(r.O_,{value:t,children:(0,o.jsx)(p,{className:e.className,children:(0,r.vT)(e.children)})},String(n))}},57663(e,n,t){t.d(n,{OC:()=>u,O_:()=>g,uc:()=>h,vT:()=>d});var o=t(74848),s=t(96540),i=t(56347),r=t(99989),a=t(96629),c=t(80618),l=t(41367);function d(e){return s.Children.toArray(e).filter(e=>"\n"!==e)}function p({value:e,tabValues:n}){return n.some(n=>n.value===e)}function u(e){let n,{defaultValue:t,queryString:o=!1,groupId:d}=e,u=function(e){let{values:n,children:t}=e;return(0,s.useMemo)(()=>{let e=n??s.Children.toArray(t).flatMap(e=>{if(!e)return[];if((0,s.isValidElement)(e)&&function(e){let{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return[e];let n="string"==typeof e.type?e.type:e.type.name;throw Error(`Docusaurus error: Bad <Tabs> child <${n}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.
2If you do not want to pass on a "value" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.`)}).map(({props:{value:e,label:n,attributes:t,default:o}})=>({value:e,label:n,attributes:t,default:o})),o=(0,c.XI)(e,(e,n)=>e.value===n.value);if(o.length>0)throw Error(`Docusaurus error: Duplicate values "${o.map(e=>`'${e.value}'`).join(", ")}" found in <Tabs>. Every value needs to be unique.`);return e},[n,t])}(e),[m,h]=(0,s.useState)(()=>(function({defaultValue:e,tabValues:n}){if(0===n.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!p({value:e,tabValues:n}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${n.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}let t=n.find(e=>e.default)??n[0];if(!t)throw Error("Unexpected error: 0 tabValues");return t.value})({defaultValue:t,tabValues:u})),[g,f]=function({queryString:e=!1,groupId:n}){let t=(0,i.W6)(),o=function({queryString:e=!1,groupId:n}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!n)throw Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:e,groupId:n});return[(0,a.aZ)(o),(0,s.useCallback)(e=>{if(!o)return;let n=new URLSearchParams(t.location.search);n.set(o,e),t.replace({...t.location,search:n.toString()})},[o,t])]}({queryString:o,groupId:d}),[x,b]=function({groupId:e}){let n=e?`docusaurus.tab.${e}`:null,[t,o]=(0,l.Dv)(n);return[t,(0,s.useCallback)(e=>{n&&o.set(e)},[n,o])]}({groupId:d}),j=p({value:n=g??x,tabValues:u})?n:null;return(0,r.A)(()=>{j&&h(j)},[j]),{selectedValue:m,selectValue:(0,s.useCallback)(e=>{if(!p({value:e,tabValues:u}))throw Error(`Can't select invalid tab value=${e}`);h(e),f(e),b(e)},[f,b,u]),tabValues:u,lazy:e.lazy??!1,block:e.block??!1}}let m=(0,s.createContext)(null);function h(){let e=s.useContext(m);if(!e)throw Error("useTabsContext() must be used within a Tabs component");return e}function g(e){return(0,o.jsx)(m.Provider,{value:e.value,children:e.children})}},61794(e,n,t){t.d(n,{A:()=>Q});var o,s,i=t(74848),r=t(96540),a=t(66497),c=t(52908);let l="__HTML_COMMENT_PLACEHOLDER_",d=/<!--[\s\S]*?-->/g,p=/^([ \t]*)((?:\/\/[^\n]*\n[ \t]*)+|\/\*[\s\S]*?\*\/\s*)?window\.Ionic\s*=\s

2*\{\s*config\s*:\s*(\{[\s\S]*?\})\s*,?\s*\};?[ \t]*/m,u=e=>{let n=e.indexOf("{"),t=e.lastIndexOf("}");return -1===n||-1===t||n>=t?"":e.slice(n+1,t)},m=e=>e?.mode?`{
3  mode: ${JSON.stringify(e.mode)}
4}`:"{}",h=(e,n)=>{if(!e)return n;let t=u(n).trim();if(0===t.length)return e;let o=u(e).split("\n").filter(e=>e.trim().length>0);if(0===o.length)return`{
5  ${t}
6}`;let s=Math.min(...o.map(e=>e.match(/^\s*/)?.[0].length??0)),i=o.map(e=>`  ${e.slice(s)}`).join("\n").replace(/,$/,"");return`{
7${i},
8  ${t}
9}`},g=(e,n)=>e.split("\n").map((e,t)=>0===t?e:`${n}${e}`).join("\n"),f=(e,n,t,o)=>e.replace(n,(...e)=>{let n=e[1],s=e[e.length-2],i=e[e.length-1],r=i.lastIndexOf("\n",s-1)+1,a=i.slice(r,s).match(/^[ \t]*/)?.[0]??"";return o(g(h(n,t),a))}),x=(e,n)=>n?{...e,dependencies:{...e.dependencies,...n}}:e,b=(e,n)=>{c.A.openProject({template:"node",title:n?.title??"Ionic Docs Example",description:n?.description??"",files:e})},j=async(e,n)=>{let t=`v${n}`,o=await Promise.all(e.map(e=>fetch(`/docs/code/stackblitz/${t}/${e}`)));return await Promise.all(o.map(e=>e.text()))},v=async(e,n)=>{var t;let o,s,i,r=await j(["html/index.ts",n?.includeIonContent?"html/index.withContent.html":"html/index.html","html/variables.css","html/package.json","html/package-lock.json","html/tsconfig.json","html/vite.config.ts"],n.version),a=x(JSON.parse(r[3]),n?.dependencies),c="index.html",u={"package.json":JSON.stringify(a,null,2),"package-lock.json":r[4],"index.ts":r[0],[c]:r[1],"theme/variables.css":r[2],"tsconfig.json":r[5],"vite.config.ts":r[6],...n?.files};u[c]=(t=r[1],s=g((o=((e,n)=>{let t,o,s,{maskedHtml:i,restore:r}=(s=[],{maskedHtml:e.replace(d,e=>{let n=`${l}${s.length}__`;return s.push(e),n}),restore:e=>e.replace(RegExp(`${l}(\\d+)__`,"g"),(e,n)=>s[Number(n)])}),a=i.replace(p,(e,n,s,i)=>(s&&s.trim().length>0&&(o=`${n}${s.trim()}`),t=i,""));return{code:r(a=a.replace(/<script>\s*\n([ \t]*\n)+/g,"<script>\n").replace(/<script>\s*<\/script>/g,"").replace(/\n{3,}/g,"\n\n")),ionicConfig:h(t,n),leadingComment:o}})(e,m(n))).ionicConfig,"      "),i=((e,n)=>{if(!e)return"";let t=e.split("\n").filter(e=>e.trim().length>0);if(0===t.length)return"";let o=Math.min(...t.map(e=>e.match(/^\s*/)?.[0].length??0));return t.map(e=>`${n}${e.slice(o)}`).join("\n")})(o.leadingComment,"    "),t.replace(/{{ TEMPLATE }}/g,o.code).replace("</head>",`
10  <script>
11${i?`${i}
12`:""}    window.Ionic = {
13      config: ${s}
14    };
15  </script>
16</head>
17`)),b(u,n)},I=async(e,n)=>{let t=await j(["angular/package.json","angular/package-lock.json","angular/angular.json","angular/tsconfig.json","angular/tsconfig.app.json","angular/main.ts","angular/index.html","angular/app.routes.ts",n?.includeIonContent?"angular/app.component.withContent.ts":"angular/app.component.ts","angular/app.component.css",n?.includeIonContent?"angular/app.component.withContent.html":"angular/app.component.html","angular/example.component.ts","angular/styles.css","angular/global.css","angular/variables.css"],n.version),o=x(JSON.parse(t[0]),n?.dependencies),s="src/main.ts",i={"package.json":JSON.stringify(o,null,2),"package-lock.json":t[1],"angular.json":t[2],"tsconfig.json":t[3],"tsconfig.app.json":t[4],[s]:t[5],"src/index.html":t[6],"src/polyfills.ts":"9"===n.version?"":"import 'zone.js';","src/app/app.routes.ts":t[7],"src/app/app.component.ts":t[8],"src/app/app.component.css":t[9],"src/app/app.component.html":t[10],"src/app/example.component.ts":t[11],"src/app/example.component.html":e,"src/app/example.component.css":"","src/styles.css":t[12],"src/global.css":t[13],"src/theme/variables.css":t[14],...n?.files},r=m(n);i[s]="6"===n.version?f(i[s],/IonicModule\.forRoot\(\s*(\{[\s\S]*?\})?\s*\)/s,r,e=>`IonicModule.forRoot(${e})`):f(i[s],/provideIonicAngular\(\s*(\{[\s\S]*?\})?\s*\)/s,r,e=>`provideIonicAngular(${e})`),b(i,n)},y=async(e,n)=>{let t=await j(["react/index.tsx",n?.includeIonContent?"react/app.withContent.tsx":"react/app.tsx","react/variables.css","react/tsconfig.json","react/package.json","react/package-lock.json","react/index.html","react/vite.config.js","react/browserslistrc","react/eslintrc.js"],n.version),o=x(JSON.parse(t[4]),n?.depen

17dencies),s="src/App.tsx",i={".eslintrc.js":t[9],".browserslistrc":t[8],"vite.config.js":t[7],"index.html":t[6],"src/index.tsx":t[0],[s]:t[1],"src/main.tsx":e,"src/theme/variables.css":t[2],"tsconfig.json":t[3],"package.json":JSON.stringify(o,null,2),"package-lock.json":t[5],...n?.files,".stackblitzrc":`{
18  "startCommand": "yarn run start"
19}`};i[s]=f(i[s],/setupIonicReact\(\s*(\{[\s\S]*?\})?\s*\)/s,m(n),e=>`setupIonicReact(${e})`),b(i,n)},k=async(e,n)=>{let t=await j(["vue/package.json","vue/package-lock.json","vue/index.html","vue/variables.css","vue/vite.config.ts","vue/main.ts",n?.includeIonContent?"vue/App.withContent.vue":"vue/App.vue","vue/tsconfig.json","vue/tsconfig.node.json"],n.version),o=x(JSON.parse(t[0]),n?.dependencies),s="src/main.ts",i={"src/App.vue":t[6],"src/components/Example.vue":e,[s]:t[5],"src/theme/variables.css":t[3],"index.html":t[2],"vite.config.ts":t[4],"package.json":JSON.stringify(o,null,2),"package-lock.json":t[1],"tsconfig.json":t[7],"tsconfig.node.json":t[8],...n?.files,".stackblitzrc":`{
20  "startCommand": "yarn run dev"
21}`};i[s]=f(i[s],/\.use\(IonicVue(?:,\s*(\{[\s\S]*?\}))?\)/s,m(n),e=>`.use(IonicVue, ${e})`),b(i,n)};var w=t(83941),C=((o={}).JavaScript="javascript",o.Angular="angular",o.React="react",o.Vue="vue",o),S=((s={}).iOS="ios",s.MD="md",s),T=t(52617),A=t(34743),L=t(95419);function R({content:e,children:n}){let[t,o]=(0,r.useState)(!1),{refs:s,floatingStyles:a,context:c}=(0,T.we)({open:t,onOpenChange:o,placement:"bottom",middleware:[(0,A.cY)(10),(0,A.UU)(),(0,A.BN)({padding:5})],whileElementsMounted:L.ll}),{getReferenceProps:l,getFloatingProps:d}=(0,T.bv)([(0,T.Mk)(c,{move:!1}),(0,T.iQ)(c),(0,T.s9)(c),(0,T.It)(c,{role:"tooltip"})]),{isMounted:p,styles:u}=(0,T.DL)(c,{duration:{open:300,close:250}}),m=(0,T.SV)([s.setReference,n.props.ref]);return(0,i.jsxs)(i.Fragment,{children:[(0,r.cloneElement)(n,l({...n.props,ref:m})),p&&(0,i.jsx)(T.XF,{children:(0,i.jsx)("div",{ref:s.setFloating,className:"tooltip__root",style:a,...d(),children:(0,i.jsx)("div",{className:"tooltip",style:u,children:e})})})]})}var N=t(19863),B=t(80618),O=t(28584),_=t(20053);let D="tabNavItem_t9Ol",E="tabNavButton__N7i";function M(e){let{lazy:n,block:t,defaultValue:o,values:s,groupId:a,className:c}=e,[l,d]=(0,r.useState)(!1),[p,u]=(0,r.useState)(!1),m=(0,r.createRef)(),h=r.Children.map(e.children,e=>{if((0,r.isValidElement)(e)&&function(e){let{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}),g=s??h.map(({props:{value:e,label:n,icon:t,attributes:o}})=>({value:e,label:n,attributes:o,icon:t})),f=(0,B.XI)(g,(e,n)=>e.value===n.value);if(f.length>0)throw Error(`Docusaurus error: Duplicate values "${f.map(e=>e.value).join(", ")}" found in <Tabs>. Every value needs to be unique.`);let x=null===o?o:o??h.find(e=>e.props.default)?.props.value??h[0]?.props.value;if(null!==x&&!g.some(e=>e.value===x))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${x}" but none of its children has the corresponding value. Available values are: ${g.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);let[b,j]=(0,r.useState)(x),v=[],{blockElementScrollPositionUntilNextRender:I}=(0,O.a_)(),y=e=>{let n=e.currentTarget,t=g[v.indexOf(n)].value;t!==b&&(I(n),j(t))},k=e=>{let n=null;switch(e.key){case"ArrowRight":{let t=v.indexOf(e.currentTarget)+1;n=v[t]||v[0];break}case"ArrowLeft":{let t=v.indexOf(e.currentTarget)-1;n=v[t]||v[v.length-1]}}n?.focus()};(0,r.useEffect)(()=>{d(m.current?.scrollLeft>40),u(m.current?.scrollWidth>m.current?.offsetWidth)},[a]);let w=void 0===g.find(e=>e.value===b),C=e=>w?e===g[0].value:e===b;return(0,i.jsxs)("div",{className:(0,_.A)("tabs-container","tabList_nZAZ"),children:[(0,i.jsx)("div",{className:(0,_.A)("tabs-nav","tabNav_gxPI"),children:(0,i.jsxs)("ul",{ref:m,role:"tablist","aria-orientation":"horizontal",className:(0,_.A)("tabs",{"tabs--block":t},c),onScroll:()=>{d(m.current?.scrollLeft>40),u(m.current?.scrollWidth>m.current?.offsetWidth)},children:[l&&(0,i.jsx)("div",{className:(0,_.A)("tabs__nav-item",D,"tabNavItemLeft_qnms"),children:(0,i.jsx)("button",{className:(0,_.A)("tabs__nav-button",E),onClick:()=>{m.current.scrollTo({left:m.current.scrollLeft-150,behavior:"smooth"})},children:(0,i.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 512 512",children:(0,i.jsx)("polyline",{points:"328 112 184 256 328 400",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"48px"})})})}),g.map(({value:e,label:n,icon:t,attributes:o})=>{let s=C(e);return(0,i.jsxs)("li",{role:"tab",tabIndex:s?0:-1,"aria-selected":s,ref:e=>

21v.push(e),onKeyDown:k,onFocus:y,onClick:y,...o,className:(0,_.A)("tabs__item","tabItem_VZd9",o?.className,{"tabs__item--active":s}),children:[t&&(0,i.jsx)("span",{className:(0,_.A)("tabs__icon","tabIcon_DCeC"),children:t}),n??e]},e)}),p&&(0,i.jsx)("div",{className:(0,_.A)("tabs__nav-item",D),children:(0,i.jsx)("button",{className:(0,_.A)("tabs__nav-button",E),onClick:()=>{m.current.scrollTo({left:m.current.scrollLeft+150,behavior:"smooth"})},children:(0,i.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 512 512",children:(0,i.jsx)("polyline",{points:"184 112 328 256 184 400",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"48px"})})})})]})}),n?(0,r.cloneElement)(h.filter(e=>C(e.props.value))[0],{className:"margin-top--md"}):(0,i.jsx)("div",{className:"margin-top--md",children:h.map((e,n)=>(0,r.cloneElement)(e,{key:n,className:`${e.props.className} ${!C(e.props.value)?"hidden":""}`}))})]})}function P(e){let n=(0,N.A)();return(0,i.jsx)(M,{...e},String(n))}function H({children:e,className:n}){return(0,i.jsx)("div",{role:"tabpanel",className:(0,_.A)("tabPanel_Fc1s",n),children:e})}let z=()=>(0,i.jsxs)("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,i.jsx)("path",{d:"M3.75 8.625L0.75 6L3.75 3.375",stroke:"#EB4700",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),(0,i.jsx)("path",{d:"M8.25 8.625L11.25 6L8.25 3.375",stroke:"#EB4700",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),$=()=>(0,i.jsx)("svg",{width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,i.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6.78201 5.84221V7.56845C7.05944 7.71231 7.38757 7.82017 7.76639 7.8921C8.1452 7.96403 8.54444 8 8.96417 8C9.37323 8 9.7618 7.96045 10.1299 7.88131C10.4981 7.80221 10.8209 7.67183 11.0983 7.49021C11.3758 7.30862 11.5954 7.07124 11.7572 6.77814C11.9191 6.48503 12 6.12272 12 5.69117C12 5.37828 11.9538 5.10407 11.8613 4.86852C11.7688 4.63297 11.6354 4.42348 11.4611 4.24007C11.2869 4.05666 11.0779 3.8921 10.8342 3.74645C10.5906 3.60079 10.3158 3.46324 10.0099 3.33379C9.78583 3.24028 9.58486 3.14948 9.40701 3.06138C9.22916 2.97324 9.078 2.88335 8.9535 2.79166C8.829 2.69993 8.73297 2.60283 8.6654 2.50035C8.59783 2.39783 8.56401 2.28186 8.56401 2.15238C8.56401 2.03372 8.59425 1.92672 8.65473 1.83141C8.71521 1.7361 8.80057 1.65431 8.91082 1.58597C9.0211 1.51766 9.15624 1.46459 9.3163 1.42683C9.47639 1.38907 9.6542 1.37021 9.84985 1.37021C9.99211 1.37021 10.1424 1.381 10.3007 1.40255C10.459 1.42414 10.6181 1.45741 10.7782 1.50234C10.9383 1.54731 11.0939 1.60397 11.2451 1.67228C11.3962 1.74062 11.5358 1.81972 11.6639 1.90966V0.29669C11.4042 0.196 11.1206 0.12

211379 10.8129 0.0728276C10.5052 0.0242758 10.1522 0 9.75382 0C9.34831 0 8.96417 0.0440687 8.60138 0.132172C8.23858 0.220276 7.91935 0.357828 7.64366 0.544828C7.368 0.731862 7.15016 0.970103 6.9901 1.25962C6.83005 1.5491 6.75 1.89524 6.75 2.29803C6.75 2.81231 6.89673 3.25107 7.19018 3.61431C7.4836 3.97752 7.9291 4.285 8.52668 4.53676C8.76143 4.63386 8.98019 4.72914 9.18293 4.82266C9.38567 4.91617 9.56086 5.01328 9.70844 5.11397C9.85606 5.21465 9.97255 5.32434 10.0579 5.44303C10.1433 5.56169 10.186 5.69655 10.186 5.84762C10.186 5.9591 10.1593 6.06248 10.1059 6.15779C10.0526 6.2531 9.97166 6.33579 9.86318 6.40593C9.75471 6.47607 9.61953 6.5309 9.4577 6.57045C9.29584 6.61003 9.10647 6.62979 8.88948 6.62979C8.51956 6.62979 8.15322 6.56417 7.79039 6.4329C7.42759 6.30165 7.09145 6.10476 6.78201 5.84221ZM3.91295 1.58903H6.10227V0.172414H0V1.58903H2.17861V7.89655H3.91295V1.58903Z",fill:"#3178C6"})}),V=()=>(0,i.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 512 512",children:[(0,i.jsx)("polygon",{fill:"#33475A",points:"256 144.03 200.51 47.92 121.08 47.92 256 281.61 390.92 47.92 311.49 47.92 256 144.03"}),(0,i.jsx)("polygon",{fill:"#3FB27F",points:"409.4 47.92 256 313.61 102.6 47.92 15.74 47.92 256 464.08 496.26 47.92 409.4 47.92"})]}),F=()=>(0,i.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",height:"12",width:"12",children:(0,i.jsx)("path",{d:"M20.414,2H5V30H27V8.586ZM7,28V4H19v6h6V28Z",fill:"#3178C6"})}),q=()=>(0,i.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",height:"12",width:"12",children:[(0,i.jsx)("polygon",{points:"5.902 27.201 3.656 2 28.344 2 26.095 27.197 15.985 30 5.902 27.201",fill:"#1572b6"}),(0,i.jsx)("polygon",{points:"16 27.858 24.17 25.593 26.092 4.061 16 4.061 16 27.858",fill:"#33a9dc"}),(0,i.jsx)("polygon",{points:"16 13.191 20.09 13.191 20.372 10.026 16 10.026 16 6.935 16.011 6.935 23.75 6.935 23.676 7.764 22.917 16.282 16 16.282 16 13.191",fill:"#fff"}),(0,i.jsx)("polygon",{points:"16.019 21.218 16.005 21.222 12.563 20.292 12.343 17.827 10.67 17.827 9.24 17.827 9.673 22.68 16.004 24.438 16.019 24.434 16.019 21.218",fill:"#ebebeb"}),(0,i.jsx)("polygon",{points:"19.827 16.151 19.455 20.29 16.008 21.22 16.008 24.436 22.344 22.68 22.391 22.158 22.928 16.151 19.827 16.151",fill:"#fff"}),(0,i.jsx)("polygon",{points:"16.011 6.935 16.011 8.855 16.011 10.018 16.011 10.026 8.555 10.026 8.555 10.026 8.545 10.026 8.483 9.331 8.342 7.764 8.268 6.935 16.011 6.935",fill:"#ebebeb"}),(0,i.jsx)("polygon",{points:"16 13.191 16 15.111 16 16.274 16 16.282 12.611 16.282 12.611 16.282 12.601 16.282 12.539 15.587 12.399 14.02 12.325 13.191 16 13.191",fill:"#ebebeb"})]}),W=()=>(0,i.jsxs)("div",{className:"icon__dots",children:[(0,i.jsx)("svg",{viewBox:"0 0 64 64",children:(0,i.jsx)("circle",{transform:"translate(32,32)",r:"6"})}),(0,i.jsx)("svg",{viewBox:"0 0 64 64",children:(0,i.jsx)("circle",{transform:"translate(32,32)",r:"6"})}),(0,i.jsx)("svg",{viewBox:"0 0 64 64",children:(0,i.jsx)("circle",{transform:"translate(32,32)",r:"6"})})]}),U=(0,r.forwardRef)(({isSelected:e,handleClick:n,title:t,label:o,disabled:s},r)=>{let a=(0,i.jsx)("button",{title:s?void 0:t,disabled:s,className:`playground__control-button ${e?"playground__control-button--selected":""}`,onClick:n,"data-text":o,ref:r,children:o});return s?(0,i.jsx)(R,{content:`Unavailable for ${o}`,children:(0,i.jsx)("div",{children:a})}):a}),J=({language:e,usageTarget:n,setAndSaveUsageTarget:t,disabled:o})=>{let s=(0,r.useRef)(null),a=C[e];return(0,i.jsx)(U,{isSelected:n===a,handleClick:()=>{t(a,s.current)},title:`Show ${e} code`,label:e,disabled:o,ref:s})};function Q({code:e,title:n,description:o,src:s,size:c="small",mode:l,devicePreview:d,showConsole:p,includeIonContent:u=!0,version:m,defaultFramework:h}){let g;if(!e||0===Object.keys(e).length)return void console.warn("No code usage examples provided for this Playground example.");if(void 0!==l&&"ios"!==l&&"md"!==l)return void console.warn(`Invalid mode provided: ${l}. Accepted values are: "ios" or "md".`);if(void 0===m)return void console.warn('You must specify a `version` for the Playground example. For example: <Playground version="7" />');let{colorMode:f}=(0,w.G)(),x=(0,N.A)(),b=(0,r.useRef)(null),j=(0,r.useRef)(null),T=(0,r.useRef)(null),A=(0,r.useRef)(null),L=(0,r.useRef)(null),{blockElementScrollPositionUntilNextRender:B}=(0,O.a_)(),_=()=>{if(l)return l;if(x){let e=localStorage.getItem(ee);if(e)return e}return S.iOS},D=()=>

21{if(h&&void 0!==e[h])return h;if(x){let n=localStorage.getItem(X);if(n&&void 0!==e[n])return n}return void 0!==e[C.Angular]?C.Angular:Object.keys(e)[0]},E=Z[c]||c,[M,K]=(0,r.useState)(D()),[eo,es]=(0,r.useState)(_()),[ei,er]=(0,r.useState)({}),[ea,ec]=(0,r.useState)(!1),[el,ed]=(0,r.useState)(!1),[ep,eu]=(0,r.useState)("dark"===f),[em,eh]=(0,r.useState)([]),[eg,ef]=(0,r.useState)([]),[ex,eb]=(0,r.useState)(0),[ej,ev]=(0,r.useState)(!1),eI=e=>{es(e),x&&(localStorage.setItem(ee,e),window.dispatchEvent(new CustomEvent(et,{detail:e})))},ey=(e,n)=>{K(e),x&&(localStorage.setItem(X,e),B(n),window.dispatchEvent(new CustomEvent(en,{detail:e})))},ek=async()=>{if(T.current&&A.current){await Promise.all([G(T.current),G(A.current)]);let e={darkMode:ep};T.current&&T.current.contentWindow.postMessage(e),A.current&&A.current.contentWindow.postMessage(e)}},ew=(e,n)=>{"ios"===n?T.current=e:A.current=e,T.current&&A.current&&ek()};(0,r.useEffect)(()=>{eu("dark"===f)},[f]),(0,r.useEffect)(()=>{ek()},[ep]),(0,r.useEffect)(()=>{(async()=>{await Promise.all([G(T.current),G(A.current)]),ed(!0)})()},[ea]),(0,r.useEffect)(()=>{p&&(T.current&&T.current.contentWindow.addEventListener("console",e=>{ef(n=>[...n,e.detail]),L.current.scrollTo(0,L.current.scrollHeight)}),A.current&&A.current.contentWindow.addEventListener("console",e=>{eh(n=>[...n,e.detail]),L.current.scrollTo(0,L.current.scrollHeight)}))},[el,ex]),(0,r.useEffect)(()=>{t.e("5812").then(t.bind(t,92607)).then(e=>e.defineCustomElement())}),(0,r.useEffect)(()=>{new IntersectionObserver(e=>{let n=e[0];ev(n.isIntersecting),n.isIntersecting&&(es(_()),h||K(D()),ea||ec(!0))},{threshold:0}).observe(b.current)});let eC=e=>{let n=e.detail;Object.values(S).includes(n)&&es(n)},eS=e=>{let n=e.detail;Object.values(C).includes(n)&&K(n)};(0,r.useEffect)(()=>(x&&ej&&(window.addEventListener(et,eC),window.addEventListener(en,eS)),()=>{window.removeEventListener(et,eC),window.removeEventListener(en,eS)}),[x,ej]);let eT=eo===S.iOS,eA=eo===S.MD,eL=(0,a.Ay)(`${s}?ionic:mode=${S.iOS}`),eR=(0,a.Ay)(`${s}?ionic:mode=${S.MD}`),eN=e[M]?.files!==void 0;async function eB(){T.current&&T.current.contentWindow.location.reload(),A.current&&A.current.contentWindow.location.reload(),ef([]),eh([]),await Promise.all([Y(T.current),Y(A.current)]),eb(e=>e+1)}function eO(e,n){let t=n;return t=t.replace(/[^a-zA-Z0-9]/g,"_"),`playground_${e}_${t}`}(0,r.useEffect)(()=>{let n={};Object.keys(e).forEach(t=>{if("function"==typeof e[t]){let o=e[t];n[t]=(0,i.jsx)(o,{})}else if("object"==typeof e[t]){let o={};for(let n of Object.keys(e[t].files)){let s=e[t].files[n];o[`${n}`]=(0,i.jsx)(s,{})}n[t]=o}}),er(n)},[]);let e_=(0,r.useMemo)(()=>Object.keys(C).sort(),[]);return(0,i.jsxs)("div",{className:"playground",ref:b,children:[(0,i.jsxs)("div",{className:`playground__container ${p?"playground__container--has-console":""}`,children:[(0,i.jsxs)("div",{className:"playground__control-toolbar",children:[(0,i.jsx)("div",{className:"playground__control-group",children:e_.map(n=>{let t=void 0!==e[C[n]];return(0,i.jsx)(J,{language:n,usageTarget:M,setAndSaveUsageTarget:ey,disabled:!t},`code-block-${n}`)})}),(0,i.jsxs)("div",{className:"playground__control-group",children:[(0,i.jsx)(U,{disabled:l&&"md"===l,isSelected:eT,handleClick:()=>eI(S.iOS),title:"iOS mode",label:"iOS"}),(0,i.jsx)(U,{disabled:l&&"ios"===l,isSelected:eA,handleClick:()=>eI(S.MD),title:"MD mode",label:"MD"})]}),(0,i.jsxs)("div",{className:"playground__control-group playground__control-group--end",children:[(0,i.jsx)(R,{content:"Open in StackBlitz",children:(0,i.jsx)("button",{className:"playground__icon-button playground__icon-button--primary",onClick:function(t){let s={title:n,description:o,includeIonContent:u,mode:eT?"ios":"md",version:m},i=j.current.querySelector("code").outerText;switch(eN&&(s.files=Object.keys(ei[M]).map(e=>{let n=b.current.querySelector(`#${eO(M,e)} code`),t=n.outerText;if(0===t.trim().length){let e=document.createElement("div");e.innerHTML=n.innerHTML,t=e.outerText}return{[e]:t}}).reduce((e,n)=>({...e,...n}),{}),s.dependencies=e[M].dependencies),M){case C.Angular:I(i,s);break;case C.JavaScript:v(i,s);break;case C.React:y(i,s);break;case C.Vue:k(i,s)}},children:(0,i.jsx)("svg",{"aria-hidden":"true",width:"10",height:"14",viewBox:"0 0 10 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,i.jsx)("path",{d:"M5.53812 5.91743L7.52915 1L1 8.01835H4.42601L2.42601 13L9 5.91743H5.53812Z",stroke:"#73849A",strokeLinejoin:"round"})})})}),(0,i.jsx)(R,{content:eN?"For multi-file examples, use the copy buttons on the code blocks":"Copy source code",children:(0,i.jsx)("button",{className:`playground__icon-button playground__icon-button--primary ${eN?"playground__icon-button--disabled":""}`,"aria-disabled":eN,onClick:function(){eN||j.current.querySelector("button").click()},children:(0,i.jsxs)("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:[(0,i.jsx)("path",{d:"M2.06667 9V9C1.47756 9 1 8.52244 1 7.93333V3C1 1.89543 1.89543 1 3 1H7.93333C8.52244 1 9 1.47756 9 2.06667V2.06667",stroke:"current"}

21),(0,i.jsx)("rect",{x:"3",y:"3",width:"8",height:"8",rx:"1.5",stroke:"current"})]})})}),(0,i.jsx)(R,{content:"Reset demo",children:(0,i.jsx)("button",{className:"playground__icon-button",onClick:eB,children:(0,i.jsxs)("svg",{"aria-hidden":"true",width:"10",height:"12",viewBox:"0 0 10 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,i.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M2.22215 2.96247C3.0444 2.42025 4.01109 2.13084 5 2.13084C5.63538 2.13084 6.08146 2.15202 6.39321 2.18615C6.68142 2.2177 6.92148 2.26571 7.08584 2.36392C7.17445 2.41686 7.31584 2.52988 7.35221 2.73039C7.38869 2.93151 7.29402 3.07964 7.24155 3.14415C7.18678 3.21149 7.126 3.25445 7.09468 3.275C7.07632 3.28704 7.06001 3.29656 7.04754 3.30345C7.0412 3.30696 7.03557 3.30995 7.03082 3.3124C7.02933 3.31317 7.02792 3.31389 7.0266 3.31456C7.0258 3.31496 7.02503 3.31535 7.02429 3.31572C7.02331 3.31621 7.02238 3.31667 7.0215 3.3171L7.02023 3.31773C7.01994 3.31787 7.01905 3.31831 6.81818 2.91589L7.01905 3.31831C6.79385 3.42779 6.52136 3.33637 6.41043 3.11412C6.40662 3.1065 6.40305 3.09881 6.39972 3.09108C6.36829 3.08669 6.33284 3.08224 6.29298 3.07787C6.02849 3.04892 5.61974 3.02804 5 3.02804C4.1909 3.02804 3.39996 3.26482 2.72721 3.70846C2.05447 4.15209 1.53013 4.78264 1.22049 5.52038C0.910864 6.25812 0.82985 7.0699 0.987699 7.85307C1.14555 8.63625 1.53517 9.35564 2.10729 9.92028C2.67942 10.4849 3.40835 10.8694 4.2019 11.0252C4.99546 11.181 5.81801 11.1011 6.56552 10.7955C7.31304 10.4899 7.95195 9.97241 8.40147 9.30847C8.85098 8.64452 9.09091 7.86394 9.09091 7.06542C9.09091 6.81767 9.29442 6.61682 9.54545 6.61682C9.79649 6.61682 10 6.81767 10 7.06542C10 8.04139 9.70675 8.99544 9.15735 9.80692C8.60794 10.6184 7.82705 11.2509 6.91342 11.6244C5.99979 11.9979 4.99445 12.0956 4.02455 11.9052C3.05464 11.7148 2.16373 11.2448 1.46447 10.5547C0.765206 9.86458 0.289002 8.98532 0.0960758 8.02811C-0.0968502 7.07089 0.00216639 6.07871 0.380605 5.17704C0.759043 4.27536 1.3999 3.50469 2.22215 2.96247Z",fill:"#73849A"}),(0,i.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M4.67859 0.131391C4.8561 -0.0437971 5.1439 -0.0437971 5.32141 0.131391L7.59414 2.37438C7.77165 2.54957 7.77165 2.83361 7.59414 3.00879L5.32141 5.25178C5.1439 5.42697 4.8561 5.42697 4.67859 5.25178C4.50108 5.0766 4.50108 4.79256 4.67859 4.61737L6.6299 2.69159L4.67859 0.765805C4.50108 0.590616 4.50108 0.30658 4.67859 0.131391Z",fill:"#73849A"})]})})}),(0,i.jsx)(R,{content:"Report an issue",children:(0,i.jsx)("a",{className:"playground__icon-button",href:"https://github.com/ionic-team/ionic-docs/issues/new/choose","aria-label":"Report an issue",target:"_blank",rel:"noreferrer",children:(0,i.jsx)("svg",{"aria-hidden":"true",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:(0,i.jsx)("path",{d:"M6 0C2.68661 0 0 2.75625 0 6.15268C0 8.87143 1.71964 11.175 4.10357 11.9893C4.14107 11.9973 4.17321 12 4.20536 12C4.42768 12 4.51339 11.8366 4.51339 11.6946C4.51339 11.5473 4.50804 11.1616 4.50536 10.6473C4.28036 10.6982 4.07946 10.7196 3.9 10.7196C2.74554 10.7196 2.48304 9.82232 2.48304 9.82232C2.20982 9.1125 1.81607 8.92232 1.81607 8.92232C1.29375 8.55536 1.81339 8.54464 1.85357 8.54464H1.85625C2.45893 8.59821 2.775 9.18214 2.775 9.18214C3.075 9.70714 3.47679 9.85446 3.83571 9.85446C4.11696 9.85446 4.37143 9.76339 4.52143 9.69375C4.575 9.29732 4.73036 9.02679 4.90179 8.87143C3.57054 8.71607 2.16964 8.18839 2.16964 5.83125C2.16964 5.15893 2.40268 4.60982 2.78571 4.18125C2.72411 4.02589 2.51786 3.39911 2.84464 2.55268C2.84464 2.55268 2.8875 2.53929 2.97857 2.53929C3.19554 2.53929 3.68571 2.62232 4.49464 3.18482C4.97411 3.04821 5.48571 2.98125 5.99732 2.97857C6.50625 2.98125 7.02054 3.04821 7.5 3.18482C8.30893 2.62232 8.79911 2.53929 9.01607 2.53929C9.10714 2.53929 9.15 2.55268 9.15 2.55268C9.47679 3.39911 9.27054 4.02589 9.20893 4.18125C9.59196 4.6125 9.825 5.16161 9.825 5.83125C9.825 8.19375 8.42143 8.71339 7.08482 8.86607C7.29911 9.05625 7.49196 9.43125 7.49196 10.0045C7.49196 10.8268 7.48393 11.4911 7.48393 11.692C7.48393 11.8366 7.56696 12 7.78929 12C7.82143 12 7.85893 11.9973 7.89643 11.9893C10.283 11.175 12 8.86875 12 6.15268C12 2.75625 9.31339 0 6 0Z",fill:"#73849A"})})})})]})]}),ea?[(0,i.jsxs)("div",{className:"playground__preview",children:[!el&&(0,i.jsx)("div",{className:"playground__loading",children:(0,i.jsx)(W,{})}),d?[(0,i.jsx)("div",{className:eT?"frame-visible":"frame-hidden","aria-hidden":eT?null:"true",children:(0,i.jsx)("device-preview",{mode:"ios",children:(0,i.jsx)("iframe",{height:E,ref:e=>ew(e,"ios"),src:eL})})},"ios-iframe"),(0,i.jsx)("div",{className:eA?"frame-visible":"frame-hidden","aria-hidden":eA?null:"true",children:(0,i.jsx)("device-preview",{mode:"md",children:(0,i.jsx)("iframe",{height:E,ref:e=>ew(e,"md"),src:eR})})},"md-iframe")]:[(0,i.jsx)("iframe",{height:E,className:eT?"":"frame-hidden",ref:e=>ew(e,"ios"),src:eL,"aria-hidden":eT?null:"true"},"ios-iframe"),(0,i.jsx)("iframe",{height:E,className:eA?"":"frame-hidden",ref:e=>ew(e,"md"),src:eR,"aria-hidden":eA?null:"true"},"md-iframe")]]},"preview")]:[]]}),p&&(g=eo===S.iOS?eg:em,(0,i.jsxs)("div",{className:"playground__console",children:[(0,i.jsx)("div",{className:"playground__console-header",children:(0,i.jsx)("code",{children:"Console"})}),(0,i.jsx)("div",{className:"playground__console-body",ref:L,children:0===g.length?(0,i.jsx)("div",{className:"playground__console-item playground__console-item--placeholder",children:(0,i.jsx)("code",{children:"Console messages will appear here when logged from the example above."})}):g.map((e,n)=>(0,i.jsxs)("div",{className:`playground__console-item playground__console-item--${e.type}`,children:["log"!==e.type&&(0,i.jsx)("div",{className:"playground__console-icon",children:"warning"===e.type?"\u26A0":"\u274C"}),(0,i.jsx)("code",{children:e.message})]},n))})]})),(0,i.jsx)("div",{ref:j,className:"playground__code-block",children:function(){if(e[M])return eN?null==ei[M]?null:(0,i.jsx)(P,{groupId:M,className:"playground__tabs",children:Object.keys(ei[M]).map(e=>(0,i.jsx)(H,{className:"playground__tab-item",value:e,label:e,icon:function(e){switch(e.slice(e.lastIndexOf(".")+1)){case"ts":case"tsx":return(0,i.jsx)($,{});case"html":return(0,i.jsx)(z,{});case"vue":return(0,i.jsx)(V,{});case"css":return(0,i.jsx)(q,{});default:return(0,i.jsx)(F,{})}}(e),children:(0,i.jsx)("div",{id:eO(M,e),children:ei[M][e]})},e))}):ei[M]}()})]})}let Z={xsmall:"100px",small:"200px",medium:"400px",large:"600px",xlarge:"800px"},G=e=>K(e)?Promise.resolve():new Promise(n=>{e&&e.contentWindow.addEventListener("demoReady",()=>{n()})}),Y=e=>new Promise(n=>{let t=()=>{e.removeEventListener("load",t),n()};e&&e.addEventListener("load",t)}),K=e=>!!e&&!0===e.contentWindow.demoReady,X="playground_usage_target",ee="playground_mode",en="playground-usage-target-updated",et="playground-event-updated"}}]);

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.