Day 7 Capacitor & 在 Android 模擬器跑 APP 中加入了 Capacitor ，所以我們這邊就可以開始加入一些 native 套件。這邊想要做一個主題切換，然後將設置存在 Storage 中。

主題切換

建立一個 Setting Page，並放置在 Tabs 中。可以參考: Day 3 Grid Menu

調整 theme\variables.scss 這次 ionic 範本中預設的 dark mode 的 style
講 @media (prefers-color-scheme: dark) 刪除，然後修改以下:
body 改成 body.dark
.ios body 改成 .ios body.dark
.md body 改成 .md body.dark

setting.page.html

setting.page.ts

最主要做的事情就是在 body 加上 class="dark"，讓他吃到我們在 theme\variables.scss 設置的樣式。

Storage

安裝 Sqlite

npm i cordova-sqlite-storage

安裝 Storage 套件

npm install --save @ionic/storage

在 app.module 中 import 。

在 setting.page.html 中，將 icon-toggle 中加上 checked ，主要是為了初始化，如果現在的主題是 dark 那初始設定就是 true ，如果不是，就 false。

在 setting.page.html

1. import
2. 宣告 Storage
3. 初始化，從 Storage 取得目前的主題，然後設置 icon-toggle 是否是 dark mode。
4. 依據 icon-toggle 的勾選，把主題塞進 Storage 中。
   

最後就是 APP 啟動時主題的設置。每次開啟 APP 的時候，畫面啟動，基本上沒意外的話會從 app.component.ts 這個元件開始，這時候我們從 Storage 中取我們的 Theme 然後設置我們的主題。

結果，關閉 APP 後，主題還是在。