Implemented dark mode setting (#96)

* Migrated to Recoil state management library

* Upgraded to Capacitor 4

* Store & retrieve animation settings from preferences

* Store & retrieve background settings from preferences

* Migrated to @capacitor/preferences (from cordova preferences)

* Implemented dark mode setting

* Fade when changing app theme

android/app/capacitor.build.gradle

@@ -16,6 +16,7 @@ dependencies {
     implementation project(':capacitor-filesystem')
     implementation project(':capacitor-haptics')
     implementation project(':capacitor-keyboard')
+    implementation project(':capacitor-preferences')
     implementation project(':capacitor-share')
     implementation project(':capacitor-splash-screen')
     implementation project(':capacitor-status-bar')

android/app/src/main/assets/capacitor.plugins.json

@@ -27,6 +27,10 @@
 		"pkg": "@capacitor/keyboard",
 		"classpath": "com.capacitorjs.plugins.keyboard.KeyboardPlugin"
 	},
+	{
+		"pkg": "@capacitor/preferences",
+		"classpath": "com.capacitorjs.plugins.preferences.PreferencesPlugin"
+	},
 	{
 		"pkg": "@capacitor/share",
 		"classpath": "com.capacitorjs.plugins.share.SharePlugin"

android/app/src/main/java/earthbyte/gplates/edu/MainActivity.java

@@ -37,9 +37,6 @@ private void updateDarkMode(Configuration configuration) {
                 // setStyle("DARK");
                 break;
         }
-        // We want status & navigation bar to remain dark (because it looks better)
-        setBackgroundColor();
-        setStyle("DARK");
     }
 
     // Update webview theme

android/app/src/main/res/values-v30/styles.xml

@@ -16,6 +16,8 @@
         <item name="windowActionBar">false</item>
         <item name="windowNoTitle">true</item>
         <item name="android:background">@null</item>
+        <item name="android:statusBarColor">@color/navigationBarColor</item>
+        <item name="android:navigationBarColor">@color/navigationBarColor</item>
     </style>
 
     <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">

android/app/src/main/res/values/styles.xml

@@ -16,6 +16,8 @@
         <item name="windowActionBar">false</item>
         <item name="windowNoTitle">true</item>
         <item name="android:background">@null</item>
+        <item name="android:statusBarColor">@color/navigationBarColor</item>
+        <item name="android:navigationBarColor">@color/navigationBarColor</item>
     </style>
 
     <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">

android/app/src/main/res/xml/config.xml

@@ -2,9 +2,5 @@
 <widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
   <access origin="*" />
 
-  <feature name="AppPreferences">
-    <param name="android-package" value="me.apla.cordova.AppPreferences"/>
-  </feature>
-
 
 </widget>

android/capacitor.settings.gradle

@@ -23,6 +23,9 @@ project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-keyboard'
 project(':capacitor-keyboard').projectDir = new File('../node_modules/@capacitor/keyboard/android')
 
+include ':capacitor-preferences'
+project(':capacitor-preferences').projectDir = new File('../node_modules/@capacitor/preferences/android')
+
 include ':capacitor-share'
 project(':capacitor-share').projectDir = new File('../node_modules/@capacitor/share/android')
 

ios/App/Podfile

@@ -18,6 +18,7 @@ def capacitor_pods
   pod 'CapacitorFilesystem', :path => '../../node_modules/@capacitor/filesystem'
   pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
   pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
+  pod 'CapacitorPreferences', :path => '../../node_modules/@capacitor/preferences'
   pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
   pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
   pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'

src/App.tsx

@@ -22,7 +22,7 @@ import '@ionic/react/css/flex-utils.css'
 import '@ionic/react/css/display.css'
 
 /* Theme variables */
-import './theme/variables.css'
+import './theme/variables.scss'
 import { RecoilRoot } from 'recoil'
 
 // Singleton SQLite Hook

src/components/AgeSlider.tsx

@@ -17,17 +17,27 @@ import {
   playForwardOutline,
   timeOutline,
 } from 'ionicons/icons'
-import React, { useState } from 'react'
+import React, { useEffect } from 'react'
 import { setNumber } from '../functions/input'
 import { AnimationService } from '../functions/animation'
-import { LIMIT_LOWER, LIMIT_UPPER } from '../functions/atoms'
+import {
+  appDarkMode,
+  isAgeSliderShown,
+  LIMIT_LOWER,
+  LIMIT_UPPER,
+} from '../functions/atoms'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import {
   age,
   animatePlaying,
   isSettingsMenuShow,
   settingsPath,
 } from '../functions/atoms'
+import {
+  matchDarkMode,
+  setStatusBarTheme,
+  statusBarListener,
+} from '../functions/darkMode'
 
 interface AgeSliderProps {
   buttons: any
@@ -36,19 +46,30 @@ interface AgeSliderProps {
 
 const AgeSlider: React.FC<AgeSliderProps> = ({ buttons, animationService }) => {
   const [_age, setAge] = useRecoilState(age)
+  const darkMode = useRecoilValue(appDarkMode)
   const playing = useRecoilValue(animatePlaying)
   const setMenuPath = useSetRecoilState(settingsPath)
   const setMenuState = useSetRecoilState(isSettingsMenuShow)
-  const [hidden, setHidden] = useState(true)
+  const [shown, setShown] = useRecoilState(isAgeSliderShown)
 
   const openMenu = () => {
     setMenuPath('animation')
     setMenuState(true)
   }
 
+  useEffect(() => {
+    if (shown) {
+      setStatusBarTheme(darkMode)
+    } else {
+      setStatusBarTheme('dark')
+      // Remove listener so status bar stays dark (Android) or light (iOS)
+      matchDarkMode.removeEventListener('change', statusBarListener)
+    }
+  }, [shown])
+
   return (
     <div>
-      <div className={hidden ? 'container hidden' : 'container'}>
+      <div className={shown ? 'container' : 'container hidden'}>
         <IonItem className="time-input" lines="none">
           <IonLabel>Time:</IonLabel>
           <IonInput
@@ -115,14 +136,12 @@ const AgeSlider: React.FC<AgeSliderProps> = ({ buttons, animationService }) => {
           />
         </IonItem>
       </div>
-      <div
-        className={hidden ? 'buttons container hidden' : 'buttons container'}
-      >
+      <div className={shown ? 'buttons container' : 'buttons container hidden'}>
         <div
           className="time"
           id={'timeStamp'} // screenshot need time information, using id to locate element
           onClick={() => {
-            setHidden(!hidden)
+            setShown(!shown)
           }}
         >
           {_age} Ma
@@ -132,11 +151,11 @@ const AgeSlider: React.FC<AgeSliderProps> = ({ buttons, animationService }) => {
           <IonButton
             className="round-button show-button"
             onClick={() => {
-              setHidden(!hidden)
+              setShown(!shown)
             }}
             size="default"
           >
-            <IonIcon icon={hidden ? timeOutline : chevronUpCircleOutline} />
+            <IonIcon icon={shown ? chevronUpCircleOutline : timeOutline} />
           </IonButton>
         </div>
       </div>

src/functions/atoms.tsx

@@ -41,7 +41,13 @@ export const backgroundIsCustom = atom({
   default: false,
 })
 
+export const appDarkMode = atom({ key: 'appDarkMode', default: 'auto' })
+
 export const isAboutPageShow = atom({ key: 'isAboutPageShow', default: false })
+export const isAgeSliderShown = atom({
+  key: 'isAgeSliderShown',
+  default: false,
+})
 export const isRasterMenuShow = atom({
   key: 'isRasterMenuShow',
   default: false,

src/functions/darkMode.ts

@@ -0,0 +1,40 @@
+import { StatusBar, Style } from '@capacitor/status-bar'
+import { Capacitor } from '@capacitor/core'
+
+export const matchDarkMode = window.matchMedia('(prefers-color-scheme: dark)')
+const darkModeListener = () => {
+  setDarkMode.apply(matchDarkMode.matches)
+}
+
+export const setDarkMode = (darkMode = 'auto') => {
+  const apply = (isDark: boolean) => {
+    document.body.classList.toggle('dark', isDark)
+  }
+
+  if (darkMode === 'auto') {
+    apply(matchDarkMode.matches)
+    matchDarkMode.addEventListener('change', darkModeListener)
+  } else {
+    apply(darkMode === 'dark')
+  }
+}
+
+export const statusBarListener = () => {
+  setStatusBarTheme.apply(matchDarkMode.matches)
+}
+
+export const setStatusBarTheme = (darkMode = 'auto') => {
+  const apply = (isDark: boolean) => {
+    StatusBar.setBackgroundColor({ color: isDark ? '#000000' : '#FFFFFF' })
+    StatusBar.setStyle({ style: isDark ? Style.Dark : Style.Light })
+  }
+
+  if (Capacitor.getPlatform() !== 'web') {
+    if (darkMode === 'auto') {
+      apply(matchDarkMode.matches)
+      matchDarkMode.addEventListener('change', statusBarListener)
+    } else {
+      apply(darkMode === 'dark')
+    }
+  }
+}

src/pages/Main.tsx

@@ -58,12 +58,14 @@ import {
   backgroundIsEnabled,
   backgroundIsCustom,
   backgroundColor,
+  appDarkMode,
 } from '../functions/atoms'
 import { initCesiumViewer } from '../functions/cesiumViewer'
 import { gplates_coastlines } from '../functions/DataLoader'
 import rasterMaps, { loadRasterMaps } from '../functions/rasterMaps'
 import { BackgroundService } from '../functions/background'
 import { Preferences } from '@capacitor/preferences'
+import { setDarkMode } from '../functions/darkMode'
 
 Ion.defaultAccessToken =
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlMGFjYTVjNC04OTJjLTQ0Y2EtYTExOS1mYzAzOWFmYmM1OWQiLCJpZCI6MjA4OTksInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1Nzg1MzEyNjF9.KyUbfBd_2aCHlvBlrBgdM3c3uDEfYyKoEmWzAHSGSsk'
@@ -88,6 +90,7 @@ const Main: React.FC = () => {
 
   // Animation
   const setAge = useSetRecoilState(age)
+  const _setDarkMode = useSetRecoilState(appDarkMode)
   const [exact, setExact] = useRecoilState(animateExact)
   const [fps, setFps] = useRecoilState(animateFps)
   const [increment, setIncrement] = useRecoilState(animateIncrement)
@@ -160,6 +163,15 @@ const Main: React.FC = () => {
             setRange(settings.range)
           }
         })
+        Preferences.get({ key: 'appSettings' }).then((res) => {
+          if (res?.value) {
+            const settings = JSON.parse(res.value)
+            _setDarkMode(settings.darkMode)
+            setDarkMode(settings.darkMode)
+          } else {
+            setDarkMode()
+          }
+        })
         Preferences.get({ key: 'backgroundSettings' }).then((res) => {
           if (res?.value) {
             const settings = JSON.parse(res.value)

src/pages/SettingMenuPage.scss

@@ -2,6 +2,19 @@ ion-checkbox.single-setting-option {
   margin-right: 0.75rem;
 }
 
+ion-list.md {
+  padding-top: 0;
+  margin-top: 8px;
+}
+
+ion-toolbar {
+  --background: none;
+}
+
+ion-modal::part(content), ion-list, ion-item-divider, ion-item::part(native) {
+  transition: background 150ms;
+}
+
 .fade-enter {
   opacity: 0;
 }
@@ -67,6 +80,7 @@ ion-checkbox.single-setting-option {
       text-transform: revert;
     }
     .description {
+      color: var(--ion-text-color);
       padding: 8px;
     }
     align-items: center;