From 87599579f8b2c9d22e6d925b2e74db36238cff0e Mon Sep 17 00:00:00 2001
From: Vladimir Kharlampidi <nolimits4web@gmail.com>
Date: Mon, 19 Sep 2022 14:01:38 +0300
Subject: [PATCH] feat(core): rename `autoDarkMode` parameter to `darkMode`
 which accepts false, true or 'auto', add `setDarkMode` app method

---
 src/core/components/app/app-class.d.ts | 14 ++++++--------
 src/core/components/app/app-class.js   | 18 ++++++++++++++----
 src/vue/components/app.vue             |  3 ++-
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/core/components/app/app-class.d.ts b/src/core/components/app/app-class.d.ts
index 802e237827..969c5d32ed 100644
--- a/src/core/components/app/app-class.d.ts
+++ b/src/core/components/app/app-class.d.ts
@@ -56,8 +56,8 @@ export interface Framework7Parameters {
   language?: string;
   /** Array with default routes to all views.. (default []) */
   routes?: Router.RouteParameters[];
-  /** Enables auto dark mode */
-  autoDarkMode?: boolean;
+  /** Enables dark mode, can be `false` (disabled), `true` (enabled) or `auto` (based on system preferences) */
+  darkMode?: boolean | string;
   /** Lazy modules path */
   lazyModulesPath?: string;
   /** By default Framework7 will be initialized automatically when you call new Framework7(). If you want to prevent this behavior you can disable it with this option and then initialize it manually with init() when you need it.. (default true) */
@@ -121,7 +121,7 @@ export interface Framework7Plugin {
 export interface Framework7Events {
   /** Event will be fired on app initialization. Automatically after new Framework7() or after app.init() if you disabled auto init. */
   init: () => void;
-  /** Event will be fired on device preferred color scheme change. It has effect only when `autoDarkMode` enabled */
+  /** Event will be fired on device preferred color scheme change. It has effect only when `darkMode` is set to `auto` */
   darkModeChange: (isDark: boolean) => void;
   /** Event will be fired when app goes online */
   online: () => void;
@@ -150,7 +150,7 @@ interface Framework7 extends Framework7Class<Framework7Events> {
   rtl: boolean;
   /** Current app theme. Can be 'md' or 'ios' */
   theme: string;
-  /** Indicates whether the dark mode active or not. This property has effect only when `autoDarkMode` enabled */
+  /** Indicates whether the dark mode active or not */
   darkMode: boolean;
   /** Object with app root data passed on intialization */
   data: any;
@@ -168,10 +168,8 @@ interface Framework7 extends Framework7Class<Framework7Events> {
   colors: any;
   /** Sets primary color theme */
   setColorTheme(hexColor: string): void;
-  /** Enables auto dark mode detection */
-  enableAutoDarkMode(): void;
-  /** Disables auto dark mode detection */
-  disableAutoDarkMode(): void;
+  /** Enable/disable dark mode, accepts `false`, `true` or `auto` */
+  setDarkMode(mode: boolean | string): void;
   /** Initialize app. In case you disabled auto initialization with init: false parameter */
   init(): void;
   /** Load module */
diff --git a/src/core/components/app/app-class.js b/src/core/components/app/app-class.js
index f0ac70815d..bb8317ecd8 100644
--- a/src/core/components/app/app-class.js
+++ b/src/core/components/app/app-class.js
@@ -47,7 +47,7 @@ class Framework7 extends Framework7Class {
       lazyModulesPath: null,
       initOnDeviceReady: true,
       init: true,
-      autoDarkMode: false,
+      darkMode: false,
       iosTranslucentBars: true,
       iosTranslucentModals: true,
       component: undefined,
@@ -105,6 +105,7 @@ class Framework7 extends Framework7Class {
       passedParams,
       online: w.navigator.onLine,
       colors: app.params.colors,
+      darkMode: app.params.darkMode,
     });
 
     if (params.store) app.params.store = params.store;
@@ -292,6 +293,17 @@ class Framework7 extends Framework7Class {
     if (app.mq.light) app.mq.light.removeListener(app.colorSchemeListener);
   }
 
+  setDarkMode(mode) {
+    const app = this;
+    if (mode === 'auto') {
+      app.enableAutoDarkMode();
+    } else {
+      app.disableAutoDarkMode();
+      $('html')[mode ? 'addClass' : 'removeClass']('dark');
+      app.darkMode = mode;
+    }
+  }
+
   initAppComponent(callback) {
     const app = this;
     app.router.componentLoader(
@@ -326,9 +338,7 @@ class Framework7 extends Framework7Class {
       }
 
       // Auto Dark Mode
-      if (app.params.autoDarkMode) {
-        app.enableAutoDarkMode();
-      }
+      app.setDarkMode(app.params.darkMode);
 
       // Watch for online/offline state
       const window = getWindow();
diff --git a/src/vue/components/app.vue b/src/vue/components/app.vue
index bf81b73662..339619f074 100644
--- a/src/vue/components/app.vue
+++ b/src/vue/components/app.vue
@@ -26,7 +26,8 @@ export default {
     language: { type: String, default: undefined },
     routes: { type: Array, default: () => [] },
     store: Object,
-    autoDarkMode: { type: Boolean, default: undefined },
+    darkMode: { type: [Boolean, String], default: false },
+    colors: { type: Object, default: () => undefined },
     lazyModulesPath: { type: String, default: undefined },
     initOnDeviceReady: { type: Boolean, default: undefined },
     iosTranslucentBars: { type: Boolean, default: undefined },