feat(core): rename dark mode params, props, events and methods

nolimits4web · nolimits4web · commit e283e8b78c8b · 2021-10-05T12:46:39.000+03:00
Param: `autoDarkTheme` -&gt; `autoDarkMode`
Event: `darkThemeChange` -&gt; `darkModeChange`
Prop: `darkTheme` -&gt; `darkMode`
Methods:
- `enableAutoDarkTheme` -&gt; `enableAutoDarkMode`
- `disableAutoDarkTheme` -&gt; `disableAutoDarkMode`
diff --git a/src/core/components/app/app-class.d.ts b/src/core/components/app/app-class.d.ts
@@ -53,8 +53,8 @@ export interface Framework7Parameters {
   language?: string;
   /** Array with default routes to all views.. (default []) */
   routes?: Router.RouteParameters[];
-  /** Enables auto dark theme */
-  autoDarkTheme?: boolean;
+  /** Enables auto dark mode */
+  autoDarkMode?: boolean;
   /** 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) */
@@ -116,8 +116,8 @@ 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 `autoDarkTheme` enabled */
-  darkThemeChange: (isDark: boolean) => void;
+  /** Event will be fired on device preferred color scheme change. It has effect only when `autoDarkMode` enabled */
+  darkModeChange: (isDark: boolean) => void;
   /** Event will be fired when app goes online */
   online: () => void;
   /** Event will be fired when app goes offline */
@@ -145,8 +145,8 @@ interface Framework7 extends Framework7Class<Framework7Events> {
   rtl: boolean;
   /** Current app theme. Can be md, ios or aurora */
   theme: string;
-  /** Indicates whether the dark theme active or not. This property has effect only when `autoDarkTheme` enabled */
-  darkTheme: boolean;
+  /** Indicates whether the dark theme active or not. This property has effect only when `autoDarkMode` enabled */
+  darkMode: boolean;
   /** Object with app root data passed on intialization */
   data: any;
   /** Object with app root methods */
@@ -159,10 +159,10 @@ interface Framework7 extends Framework7Class<Framework7Events> {
   $: Dom7;
   /** App parameters */
   params: Framework7Parameters;
-  /** Enables auto dark theme detection */
-  enableAutoDarkTheme(): void;
-  /** Disables auto dark theme detection */
-  disableAutoDarkTheme(): void;
+  /** Enables auto dark mode detection */
+  enableAutoDarkMode(): void;
+  /** Disables auto dark mode detection */
+  disableAutoDarkMode(): 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
@@ -46,7 +46,7 @@ class Framework7 extends Framework7Class {
       lazyModulesPath: null,
       initOnDeviceReady: true,
       init: true,
-      autoDarkTheme: false,
+      autoDarkMode: false,
       iosTranslucentBars: true,
       iosTranslucentModals: true,
       component: undefined,
@@ -142,13 +142,13 @@ class Framework7 extends Framework7Class {
       }
       const html = document.querySelector('html');
       if (media === DARK) {
-        html.classList.add('theme-dark');
-        app.darkTheme = true;
-        app.emit('darkThemeChange', true);
+        html.classList.add('dark');
+        app.darkMode = true;
+        app.emit('darkModeChange', true);
       } else if (media === LIGHT) {
-        html.classList.remove('theme-dark');
-        app.darkTheme = false;
-        app.emit('darkThemeChange', false);
+        html.classList.remove('dark');
+        app.darkMode = false;
+        app.emit('darkModeChange', false);
       }
     };
     app.emit('mount');
@@ -163,7 +163,7 @@ class Framework7 extends Framework7Class {
     }
   }
 
-  enableAutoDarkTheme() {
+  enableAutoDarkMode() {
     const window = getWindow();
     const document = getDocument();
     if (!window.matchMedia) return;
@@ -174,17 +174,17 @@ class Framework7 extends Framework7Class {
       app.mq.light.addListener(app.colorSchemeListener);
     }
     if (app.mq.dark && app.mq.dark.matches) {
-      html.classList.add('theme-dark');
-      app.darkTheme = true;
-      app.emit('darkThemeChange', true);
+      html.classList.add('dark');
+      app.darkMode = true;
+      app.emit('darkModeChange', true);
     } else if (app.mq.light && app.mq.light.matches) {
-      html.classList.remove('theme-dark');
-      app.darkTheme = false;
-      app.emit('darkThemeChange', false);
+      html.classList.remove('dark');
+      app.darkMode = false;
+      app.emit('darkModeChange', false);
     }
   }
 
-  disableAutoDarkTheme() {
+  disableAutoDarkMode() {
     const window = getWindow();
     if (!window.matchMedia) return;
     const app = this;
@@ -225,8 +225,8 @@ class Framework7 extends Framework7Class {
       }
 
       // Auto Dark Theme
-      if (app.params.autoDarkTheme) {
-        app.enableAutoDarkTheme();
+      if (app.params.autoDarkMode) {
+        app.enableAutoDarkMode();
       }
 
       // Watch for online/offline state
