feat(core): rename autoDarkMode parameter to darkMode which accep…

…ts false, true or 'auto', add `setDarkMode` app method

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 */

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();

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 },