update DemoStorageExample,

03_source/mobile/src/pages/DemoStorageExample/AppPages/Tab1.tsx

@@ -14,11 +14,11 @@ import {
 
 import { Geolocation } from '@capacitor/geolocation';
 import { useEffect, useState } from 'react';
-import { SkeletonDashboard } from '../components/SkeletonDashboard';
+import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
 import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
-import { CurrentWeather } from '../components/CurrentWeather';
+import { CurrentWeather } from '../TestComponents/CurrentWeather';
 
-function Tab1() {
+function Tab1(): React.JSX.Element {
   const router = useIonRouter();
 
   const [currentWeather, setCurrentWeather] = useState(false);

03_source/mobile/src/pages/DemoStorageExample/AppPages/Tab2.tsx

@@ -9,10 +9,10 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/react';
-import { useState } from 'react';
-import { CurrentWeather } from '../components/CurrentWeather';
+import React, { useState } from 'react';
+import { CurrentWeather } from '../TestComponents/CurrentWeather';
 
-function Tab2() {
+function Tab2(): React.JSX.Element {
   const [search, setSearch] = useState('');
   const [currentWeather, setCurrentWeather] = useState(false);
 

03_source/mobile/src/pages/DemoStorageExample/components/MessageListItem.scss

@@ -0,0 +1,61 @@
+.DemoStorageExample {
+  ion-item {
+    --padding-start: 0;
+    --inner-padding-end: 0;
+  }
+
+  ion-label {
+    margin-top: 12px;
+    margin-bottom: 12px;
+  }
+
+  ion-item h2 {
+    font-weight: 600;
+    margin: 0;
+  }
+
+  ion-item p {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 95%;
+  }
+
+  ion-item .date {
+    float: right;
+    align-items: center;
+    display: flex;
+  }
+
+  ion-item ion-icon {
+    color: #c9c9ca;
+  }
+
+  ion-item ion-note {
+    font-size: 15px;
+    margin-right: 8px;
+    font-weight: normal;
+  }
+
+  ion-item ion-note.md {
+    margin-right: 14px;
+  }
+
+  .dot {
+    display: block;
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    align-self: start;
+    margin: 16px 10px 16px 16px;
+  }
+
+  .dot-unread {
+    background: var(--ion-color-primary);
+  }
+
+  ion-footer ion-title {
+    font-size: 11px;
+    font-weight: normal;
+  }
+}

03_source/mobile/src/pages/DemoStorageExample/components/MessageListItem.tsx

@@ -0,0 +1,27 @@
+import { IonItem, IonLabel, IonNote } from '@ionic/react';
+import { getContacts } from '../data/contacts';
+import './MessageListItem.scss';
+import React from 'react';
+import { rawMessage } from '../data/messages';
+
+const MessageListItem = ({ message }: { message: typeof rawMessage }): React.JSX.Element => {
+  const contacts = getContacts();
+
+  return (
+    <IonItem routerLink={`/demo-storage-example/message/${message.id}`} detail={false}>
+      <div slot="start" className="dot dot-unread"></div>
+      <IonLabel className="ion-text-wrap">
+        <h2>
+          {contacts.filter((c: any) => parseInt(c.id) === parseInt(message.fromId))[0].name}
+          <span className="date">
+            <IonNote>{message.date}</IonNote>
+          </span>
+        </h2>
+        <h3>{message.subject}</h3>
+        <p>{message.body}</p>
+      </IonLabel>
+    </IonItem>
+  );
+};
+
+export default MessageListItem;

03_source/mobile/src/pages/DemoStorageExample/data/IonicStorage.ts

@@ -0,0 +1,61 @@
+import { Storage, Drivers } from '@ionic/storage';
+
+let storage: any;
+
+export const createStore = (name = '__mydb') => {
+  storage = new Storage({
+    name,
+    driverOrder: [Drivers.IndexedDB, Drivers.LocalStorage],
+  });
+
+  storage.create();
+};
+
+export const set = (key: any, val: any) => {
+  if (storage) {
+    storage.set(key, val);
+  }
+};
+
+export const get = async (key: string) => {
+  if (storage) {
+    const val = await storage.get(key);
+    return val;
+  } else {
+    return null;
+  }
+};
+
+export const remove = async (key: string) => {
+  await storage.remove(key);
+};
+
+export const clear = async () => {
+  await storage.clear();
+};
+
+export const setObject = async (key: string, id: string, val: string) => {
+  const all = await storage.get(key);
+  const objIndex = await all.findIndex((a: any) => parseInt(a.id) === parseInt(id));
+
+  all[objIndex] = val;
+  set(key, all);
+};
+
+export const removeObject = async (key: string, id: string) => {
+  const all = await storage.get(key);
+  const objIndex = await all.findIndex(
+    (a: { id: string | number }) => parseInt(a.id.toString()) === parseInt(id)
+  );
+
+  all.splice(objIndex, 1);
+  set(key, all);
+};
+
+export const getObject = async (key: string, id: string) => {
+  const all = await storage.get(key);
+  const obj = await all.filter(
+    (a: { id: string | number }) => parseInt(a.id.toString()) === parseInt(id)
+  )[0];
+  return obj;
+};

03_source/mobile/src/pages/DemoStorageExample/data/contacts.ts

@@ -0,0 +1,36 @@
+const contacts = [
+  {
+    name: "Matt Chorsey",
+    id: 0,
+  },
+  {
+    name: "Lauren Ruthford",
+    id: 1,
+  },
+  {
+    name: "Jordan Firth",
+    id: 2,
+  },
+  {
+    name: "Bill Thomas",
+    id: 3,
+  },
+  {
+    name: "Joanne Pollan",
+    id: 4,
+  },
+  {
+    name: "Andrea Cornerston",
+    id: 5,
+  },
+  {
+    name: "Moe Chamont",
+    id: 6,
+  },
+  {
+    name: "Kelly Richardson",
+    id: 7,
+  },
+];
+
+export const getContacts = () => contacts;

03_source/mobile/src/pages/DemoStorageExample/data/messages.ts

@@ -0,0 +1,62 @@
+export const rawMessages = [
+  {
+    fromId: 0,
+    subject: "New event: Trip to Vegas",
+    body: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    date: "9:32 AM",
+    id: 0,
+  },
+  {
+    fromId: 1,
+    subject: "Long time no chat",
+    body: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    date: "6:12 AM",
+    id: 1,
+  },
+  {
+    fromId: 2,
+    subject: "Report Results",
+    body: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    date: "4:55 AM",
+    id: 2,
+  },
+  {
+    fromId: 3,
+    subject: "The situation",
+    body: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    date: "Yesterday",
+    id: 3,
+  },
+  {
+    fromId: 4,
+    subject: "Updated invitation: Swim lessons",
+    body: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    date: "Yesterday",
+    id: 4,
+  },
+  {
+    fromId: 5,
+    subject: "Last minute ask",
+    body: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    date: "Yesterday",
+    id: 5,
+  },
+  {
+    fromId: 6,
+    subject: "Family Calendar - Version 1",
+    body: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    date: "Last Week",
+    id: 6,
+  },
+  {
+    fromId: 7,
+    subject: "Placeholder Headhots",
+    body: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    date: "Last Week",
+    id: 7,
+  },
+];
+
+export const rawMessage = rawMessages[0];
+
+export const getMessages = () => rawMessages;

03_source/mobile/src/pages/DemoStorageExample/index.tsx

@@ -3,36 +3,27 @@ import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs }
 import { cloudOutline, searchOutline } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
+// import Tab1 from './AppPages/Tab1';
+// import Tab2 from './AppPages/Tab2';
 
-import './style.scss';
+import Home from './pages/Home';
+import ViewMessage from './pages/ViewMessage';
+
+import './theme/variables.scss';
 
 function DemoStorageExample() {
   return (
-    <IonTabs>
+    <IonTabs className="demo-storage-example">
       <IonRouterOutlet>
-        <Route exact path="/demo-weather-app/tab1">
-          <Tab1 />
+        <Route path="/demo-storage-example/home" exact={true}>
+          <Home />
         </Route>
-        <Route exact path="/demo-weather-app/tab2">
-          <Tab2 />
+        <Route path="/demo-storage-example/message/:id">
+          <ViewMessage />
         </Route>
 
-        <Redirect exact path="/demo-weather-app" to="/demo-weather-app/tab1" />
+        <Redirect exact path="/demo-storage-example" to="/demo-storage-example/home" />
       </IonRouterOutlet>
-
-      {/*  */}
-      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" href="/demo-weather-app/tab1">
-          <IonIcon icon={cloudOutline} />
-          <IonLabel>Dashboard</IonLabel>
-        </IonTabButton>
-        <IonTabButton tab="tab2" href="/demo-weather-app/tab2">
-          <IonIcon icon={searchOutline} />
-          <IonLabel>Search</IonLabel>
-        </IonTabButton>
-      </IonTabBar>
     </IonTabs>
   );
 }

03_source/mobile/src/pages/DemoStorageExample/pages/Home.tsx

@@ -0,0 +1,96 @@
+import MessageListItem from '../components/MessageListItem';
+import React, { JSX, useState } from 'react';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonList,
+  IonPage,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+  useIonViewWillEnter,
+} from '@ionic/react';
+
+import './Home.scss';
+
+import { get, set } from '../data/IonicStorage';
+import { getMessages, rawMessages } from '../data/messages';
+import { chevronBackOutline } from 'ionicons/icons';
+
+const Home = (): JSX.Element => {
+  const [messages, setMessages] = useState<typeof rawMessages>([]);
+
+  useIonViewWillEnter(async () => {
+    const exists = await get('msgs');
+
+    if (!exists) {
+      const msgs = getMessages();
+      set('msgs', msgs);
+      setMessages(msgs);
+    } else {
+      setMessages(exists);
+    }
+  });
+
+  const refresh = (e: any) => {
+    resetStore();
+    setTimeout(() => {
+      e.detail.complete();
+    }, 1000);
+  };
+
+  const resetStore = async () => {
+    const msgs = getMessages();
+    set('msgs', msgs);
+    setMessages(msgs);
+  };
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage id="home-page">
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Inbox</IonTitle>
+
+          <IonButtons slot="start">
+            <IonButton shape="round" onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonRefresher slot="fixed" onIonRefresh={refresh}>
+          <IonRefresherContent></IonRefresherContent>
+        </IonRefresher>
+
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Inbox</IonTitle>
+
+            <IonButtons slot="start">
+              <IonButton shape="round" onClick={() => handleBackClick()}>
+                <IonIcon icon={chevronBackOutline} color="primary" />
+              </IonButton>
+            </IonButtons>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonList>
+          {messages && messages.map((m: any) => <MessageListItem key={m.id} message={m} />)}
+        </IonList>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;

03_source/mobile/src/pages/DemoStorageExample/pages/ViewMessage.scss

@@ -0,0 +1,42 @@
+.demo-storage-example {
+  #view-message-page ion-item {
+    --inner-padding-end: 0;
+    --background: transparent;
+  }
+
+  #view-message-page ion-label {
+    margin-top: 12px;
+    margin-bottom: 12px;
+  }
+
+  #view-message-page ion-item h2 {
+    font-weight: 600;
+  }
+
+  #view-message-page ion-item .date {
+    float: right;
+    align-items: center;
+    display: flex;
+  }
+
+  #view-message-page ion-item ion-icon {
+    font-size: 42px;
+    margin-right: 8px;
+  }
+
+  #view-message-page ion-item ion-note {
+    font-size: 15px;
+    margin-right: 12px;
+    font-weight: normal;
+  }
+
+  #view-message-page h1 {
+    margin: 0;
+    font-weight: bold;
+    font-size: 22px;
+  }
+
+  #view-message-page p {
+    line-height: 22px;
+  }
+}

03_source/mobile/src/pages/DemoStorageExample/pages/ViewMessage.tsx

@@ -0,0 +1,163 @@
+import { useState } from 'react';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonNote,
+  IonPage,
+  IonSelect,
+  IonSelectOption,
+  IonTextarea,
+  IonToast,
+  IonToolbar,
+  useIonViewWillEnter,
+} from '@ionic/react';
+import { checkmarkSharp, personCircle, trashOutline } from 'ionicons/icons';
+import { useHistory, useParams } from 'react-router';
+import './ViewMessage.scss';
+
+import { getObject, setObject, removeObject } from '../data/IonicStorage';
+import { getContacts } from '../data/contacts';
+
+function ViewMessage(): React.JSX.Element {
+  const [message, setMessage] = useState<{
+    id?: number;
+    fromId?: number;
+    subject?: string;
+    body?: string;
+    date?: string;
+  }>();
+  const [showToast, setShowToast] = useState({
+    show: false,
+    message: '',
+    color: '',
+  });
+  const contacts = getContacts();
+  const params = useParams<{ id: string }>();
+  const history = useHistory();
+
+  useIonViewWillEnter(async () => {
+    const msg = await getObject('msgs', params.id);
+    setMessage(msg);
+  });
+
+  const saveEmail = async () => {
+    await setObject('msgs', params.id, message);
+    setShowToast({
+      show: true,
+      message: 'Email has been saved.',
+      color: 'primary',
+    });
+  };
+
+  const removeEmail = async () => {
+    await removeObject('msgs', params.id);
+    setShowToast({
+      show: true,
+      message: 'Email has been removed.',
+      color: 'danger',
+    });
+    history.goBack();
+  };
+
+  const handleChange = (key: any, val: any) => {
+    setMessage({ ...message, [key]: val });
+  };
+
+  return (
+    <IonPage id="view-message-page">
+      <IonHeader translucent>
+        <IonToolbar>
+          <IonButtons>
+            <IonBackButton text="Inbox" defaultHref="/home"></IonBackButton>
+          </IonButtons>
+
+          <IonButtons slot="end">
+            <IonButton onClick={removeEmail}>
+              <IonIcon icon={trashOutline} color="danger" />
+            </IonButton>
+            <IonButton onClick={saveEmail}>
+              <IonIcon icon={checkmarkSharp} />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent fullscreen>
+        {message ? (
+          <>
+            <IonItem>
+              <IonIcon icon={personCircle} color="primary"></IonIcon>
+              <IonLabel className="ion-text-wrap">
+                <IonItem lines="none">
+                  <IonLabel>From:</IonLabel>
+                  <IonSelect
+                    value={message.fromId}
+                    onIonChange={(e) =>
+                      handleChange('fromId', parseInt((e.target as HTMLIonSelectElement).value))
+                    }
+                  >
+                    {contacts.map((contact, index) => {
+                      return (
+                        <IonSelectOption key={index} value={contact.id}>
+                          {contact.name}
+                        </IonSelectOption>
+                      );
+                    })}
+                  </IonSelect>
+                </IonItem>
+                <span className="date">
+                  <IonNote>{message.date}</IonNote>
+                </span>
+                <h3>To: Me</h3>
+              </IonLabel>
+            </IonItem>
+
+            <div className="ion-padding">
+              <IonItem lines="full">
+                <IonLabel position="floating">Subject</IonLabel>
+                <IonInput
+                  placeholder="Email subject..."
+                  value={message.subject}
+                  onKeyUp={(e) => handleChange('subject', e.currentTarget.value)}
+                  style={{ fontSize: '1.5rem', fontWeight: '400' }}
+                />
+              </IonItem>
+
+              <br />
+
+              <IonItem lines="full">
+                <IonLabel position="floating">Body</IonLabel>
+                <IonTextarea
+                  placeholder="Enter email body..."
+                  rows={8}
+                  className="ion-text-wrap"
+                  value={message.body}
+                  onIonChange={(e) => handleChange('body', (e.target as HTMLInputElement).value)}
+                />
+              </IonItem>
+            </div>
+          </>
+        ) : (
+          <div>Message not found</div>
+        )}
+      </IonContent>
+
+      <IonToast
+        isOpen={showToast.show}
+        onDidDismiss={() => setShowToast({ show: false, message: '', color: 'red' })}
+        message={showToast.message}
+        duration={2000}
+        color={showToast.color}
+      />
+    </IonPage>
+  );
+}
+
+export default ViewMessage;

03_source/mobile/src/pages/DemoStorageExample/style.scss

@@ -1,103 +0,0 @@
-#about-page {
-  ion-toolbar {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    right: 0;
-
-    --background: transparent;
-    --color: white;
-  }
-
-  ion-toolbar ion-back-button,
-  ion-toolbar ion-button,
-  ion-toolbar ion-menu-button {
-    --color: white;
-  }
-
-  .about-header {
-    position: relative;
-
-    width: 100%;
-    height: 30%;
-  }
-
-  .about-header .about-image {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-
-    opacity: 0;
-
-    transition: opacity 500ms ease-in-out;
-  }
-
-  .about-header .madison {
-    background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
-  }
-
-  .about-header .austin {
-    background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
-  }
-
-  .about-header .chicago {
-    background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
-  }
-
-  .about-header .seattle {
-    background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
-  }
-
-  .about-info {
-    position: relative;
-    margin-top: -10px;
-    border-radius: 10px;
-    background: var(--ion-background-color, #fff);
-    z-index: 2; // display rounded border above header image
-  }
-
-  .about-info h3 {
-    margin-top: 0;
-  }
-
-  .about-info ion-list {
-    padding-top: 0;
-  }
-
-  .about-info p {
-    line-height: 130%;
-
-    color: var(--ion-color-dark);
-  }
-
-  .about-info ion-icon {
-    margin-inline-end: 32px;
-  }
-
-  /*
-   * iOS Only
-   */
-
-  .ios .about-info {
-    --ion-padding: 19px;
-  }
-
-  .ios .about-info h3 {
-    font-weight: 700;
-  }
-}
-
-#date-input-popover {
-  --offset-y: -var(--ion-safe-area-bottom);
-
-  --max-width: 90%;
-  --width: 336px;
-}

03_source/mobile/src/pages/DemoStorageExample/theme/variables.scss

@@ -0,0 +1,237 @@
+.demo-storage-example {
+  /* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+  /** Ionic CSS Variables **/
+  :root {
+    /** primary **/
+    --ion-color-primary: #3880ff;
+    --ion-color-primary-rgb: 56, 128, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3171e0;
+    --ion-color-primary-tint: #4c8dff;
+
+    /** secondary **/
+    --ion-color-secondary: #3dc2ff;
+    --ion-color-secondary-rgb: 61, 194, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #36abe0;
+    --ion-color-secondary-tint: #50c8ff;
+
+    /** tertiary **/
+    --ion-color-tertiary: #5260ff;
+    --ion-color-tertiary-rgb: 82, 96, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #4854e0;
+    --ion-color-tertiary-tint: #6370ff;
+
+    /** success **/
+    --ion-color-success: #2dd36f;
+    --ion-color-success-rgb: 45, 211, 111;
+    --ion-color-success-contrast: #ffffff;
+    --ion-color-success-contrast-rgb: 255, 255, 255;
+    --ion-color-success-shade: #28ba62;
+    --ion-color-success-tint: #42d77d;
+
+    /** warning **/
+    --ion-color-warning: #ffc409;
+    --ion-color-warning-rgb: 255, 196, 9;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0ac08;
+    --ion-color-warning-tint: #ffca22;
+
+    /** danger **/
+    --ion-color-danger: #eb445a;
+    --ion-color-danger-rgb: 235, 68, 90;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #cf3c4f;
+    --ion-color-danger-tint: #ed576b;
+
+    /** dark **/
+    --ion-color-dark: #222428;
+    --ion-color-dark-rgb: 34, 36, 40;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #1e2023;
+    --ion-color-dark-tint: #383a3e;
+
+    /** medium **/
+    --ion-color-medium: #92949c;
+    --ion-color-medium-rgb: 146, 148, 156;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #808289;
+    --ion-color-medium-tint: #9d9fa6;
+
+    /** light **/
+    --ion-color-light: #f4f5f8;
+    --ion-color-light-rgb: 244, 245, 248;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d7d8da;
+    --ion-color-light-tint: #f5f6f9;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    /*
+   * Dark Colors
+   * -------------------------------------------
+   */
+
+    body {
+      --ion-color-primary: #428cff;
+      --ion-color-primary-rgb: 66, 140, 255;
+      --ion-color-primary-contrast: #ffffff;
+      --ion-color-primary-contrast-rgb: 255, 255, 255;
+      --ion-color-primary-shade: #3a7be0;
+      --ion-color-primary-tint: #5598ff;
+
+      --ion-color-secondary: #50c8ff;
+      --ion-color-secondary-rgb: 80, 200, 255;
+      --ion-color-secondary-contrast: #ffffff;
+      --ion-color-secondary-contrast-rgb: 255, 255, 255;
+      --ion-color-secondary-shade: #46b0e0;
+      --ion-color-secondary-tint: #62ceff;
+
+      --ion-color-tertiary: #6a64ff;
+      --ion-color-tertiary-rgb: 106, 100, 255;
+      --ion-color-tertiary-contrast: #ffffff;
+      --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+      --ion-color-tertiary-shade: #5d58e0;
+      --ion-color-tertiary-tint: #7974ff;
+
+      --ion-color-success: #2fdf75;
+      --ion-color-success-rgb: 47, 223, 117;
+      --ion-color-success-contrast: #000000;
+      --ion-color-success-contrast-rgb: 0, 0, 0;
+      --ion-color-success-shade: #29c467;
+      --ion-color-success-tint: #44e283;
+
+      --ion-color-warning: #ffd534;
+      --ion-color-warning-rgb: 255, 213, 52;
+      --ion-color-warning-contrast: #000000;
+      --ion-color-warning-contrast-rgb: 0, 0, 0;
+      --ion-color-warning-shade: #e0bb2e;
+      --ion-color-warning-tint: #ffd948;
+
+      --ion-color-danger: #ff4961;
+      --ion-color-danger-rgb: 255, 73, 97;
+      --ion-color-danger-contrast: #ffffff;
+      --ion-color-danger-contrast-rgb: 255, 255, 255;
+      --ion-color-danger-shade: #e04055;
+      --ion-color-danger-tint: #ff5b71;
+
+      --ion-color-dark: #f4f5f8;
+      --ion-color-dark-rgb: 244, 245, 248;
+      --ion-color-dark-contrast: #000000;
+      --ion-color-dark-contrast-rgb: 0, 0, 0;
+      --ion-color-dark-shade: #d7d8da;
+      --ion-color-dark-tint: #f5f6f9;
+
+      --ion-color-medium: #989aa2;
+      --ion-color-medium-rgb: 152, 154, 162;
+      --ion-color-medium-contrast: #000000;
+      --ion-color-medium-contrast-rgb: 0, 0, 0;
+      --ion-color-medium-shade: #86888f;
+      --ion-color-medium-tint: #a2a4ab;
+
+      --ion-color-light: #222428;
+      --ion-color-light-rgb: 34, 36, 40;
+      --ion-color-light-contrast: #ffffff;
+      --ion-color-light-contrast-rgb: 255, 255, 255;
+      --ion-color-light-shade: #1e2023;
+      --ion-color-light-tint: #383a3e;
+    }
+
+    /*
+   * iOS Dark Theme
+   * -------------------------------------------
+   */
+
+    .ios body {
+      --ion-background-color: #000000;
+      --ion-background-color-rgb: 0, 0, 0;
+
+      --ion-text-color: #ffffff;
+      --ion-text-color-rgb: 255, 255, 255;
+
+      --ion-color-step-50: #0d0d0d;
+      --ion-color-step-100: #1a1a1a;
+      --ion-color-step-150: #262626;
+      --ion-color-step-200: #333333;
+      --ion-color-step-250: #404040;
+      --ion-color-step-300: #4d4d4d;
+      --ion-color-step-350: #595959;
+      --ion-color-step-400: #666666;
+      --ion-color-step-450: #737373;
+      --ion-color-step-500: #808080;
+      --ion-color-step-550: #8c8c8c;
+      --ion-color-step-600: #999999;
+      --ion-color-step-650: #a6a6a6;
+      --ion-color-step-700: #b3b3b3;
+      --ion-color-step-750: #bfbfbf;
+      --ion-color-step-800: #cccccc;
+      --ion-color-step-850: #d9d9d9;
+      --ion-color-step-900: #e6e6e6;
+      --ion-color-step-950: #f2f2f2;
+
+      --ion-item-background: #000000;
+
+      --ion-card-background: #1c1c1d;
+    }
+
+    .ios ion-modal {
+      --ion-background-color: var(--ion-color-step-100);
+      --ion-toolbar-background: var(--ion-color-step-150);
+      --ion-toolbar-border-color: var(--ion-color-step-250);
+    }
+
+    /*
+   * Material Design Dark Theme
+   * -------------------------------------------
+   */
+
+    .md body {
+      --ion-background-color: #121212;
+      --ion-background-color-rgb: 18, 18, 18;
+
+      --ion-text-color: #ffffff;
+      --ion-text-color-rgb: 255, 255, 255;
+
+      --ion-border-color: #222222;
+
+      --ion-color-step-50: #1e1e1e;
+      --ion-color-step-100: #2a2a2a;
+      --ion-color-step-150: #363636;
+      --ion-color-step-200: #414141;
+      --ion-color-step-250: #4d4d4d;
+      --ion-color-step-300: #595959;
+      --ion-color-step-350: #656565;
+      --ion-color-step-400: #717171;
+      --ion-color-step-450: #7d7d7d;
+      --ion-color-step-500: #898989;
+      --ion-color-step-550: #949494;
+      --ion-color-step-600: #a0a0a0;
+      --ion-color-step-650: #acacac;
+      --ion-color-step-700: #b8b8b8;
+      --ion-color-step-750: #c4c4c4;
+      --ion-color-step-800: #d0d0d0;
+      --ion-color-step-850: #dbdbdb;
+      --ion-color-step-900: #e7e7e7;
+      --ion-color-step-950: #f3f3f3;
+
+      --ion-item-background: #1e1e1e;
+
+      --ion-toolbar-background: #1f1f1f;
+
+      --ion-tab-bar-background: #1f1f1f;
+
+      --ion-card-background: #1e1e1e;
+    }
+  }
+}