dark mode js

resources/assets/dcat/js/dcat-app.js

@@ -23,6 +23,7 @@ import AssetsLoader from './extensions/AssetsLoader'
 import Slider from './extensions/Slider'
 import Color from './extensions/Color'
 import Validator from './extensions/Validator'
+import DarkMode from './extensions/DarkMode'
 
 import Menu from './bootstrappers/Menu'
 import Footer from './bootstrappers/Footer'
@@ -50,6 +51,8 @@ function extend (Dcat) {
     new Color(Dcat);
     // 表单验证器
     new Validator(Dcat);
+    // 黑色主题切换
+    new DarkMode(Dcat);
 
     // 加载进度条
     Dcat.NP = NProgress;

resources/assets/dcat/js/extensions/DarkMode.js

@@ -0,0 +1,52 @@
+
+export default class DarkMode {
+    constructor(Dcat) {
+        this.options = {
+            sidebar_dark: Dcat.config.sidebar_dark,
+            dark_mode: Dcat.config.dark_mode,
+            class: {
+                dark: 'dark-mode',
+                sidebarLight: 'sidebar-light-primary',
+                sidebarDark: 'sidebar-dark-white',
+            }
+        };
+
+        Dcat.darkMode = this;
+
+        if (this.options.dark_mode) {
+            this.switch(true)
+        }
+    }
+
+    toggle() {
+        if ($('body').hasClass(this.options.class.dark)) {
+            this.display(false)
+        } else {
+            this.display(true)
+        }
+    }
+
+    display(show) {
+        let $document = $(document),
+            $body = $('body'),
+            $sidebar = $('.main-menu .main-sidebar'),
+            options = this.options,
+            cls = options.class;
+
+        if (show) {
+            $body.addClass(cls.dark);
+            $sidebar.removeClass(cls.sidebarLight).addClass(cls.sidebarDark);
+
+            $document.trigger('dark-mode.shown');
+
+            return;
+        }
+
+        $body.removeClass(cls.dark);
+        if (! options.sidebar_dark) {
+            $sidebar.addClass(cls.sidebarLight).removeClass(cls.sidebarDark);
+        }
+
+        $document.trigger('dark-mode.hide');
+    }
+}

resources/assets/dcat/sass/components/_menu.scss

@@ -26,7 +26,6 @@
       font-size: 1.55rem;
       -webkit-animation: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 fadein;
       animation: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 fadein;
-      font-weight: 300;
     }
 
     .nav-item {

resources/assets/dcat/sass/theme/_dark.scss

@@ -158,6 +158,14 @@ body.dark-mode {
     }
   }
 
+  .main-menu {
+    .navbar-header {
+      .logo-lg {
+        font-weight: 300;
+      }
+    }
+  }
+
 
   // ------ dropdown
   .dropdown-toggle {

src/Admin.php

@@ -22,6 +22,7 @@ use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Event;
 use Illuminate\Support\Fluent;
+use Illuminate\Support\Str;
 
 /**
  * Class Admin.
@@ -490,6 +491,8 @@ class Admin
         static::$jsVariables['token'] = csrf_token();
         static::$jsVariables['lang'] = __('admin.client') ?: [];
         static::$jsVariables['colors'] = static::color()->all();
+        static::$jsVariables['dark_mode'] = Str::contains(config('admin.layout.body_class'), 'dark-mode');
+        static::$jsVariables['sidebar_dark'] = config('admin.layout.sidebar_dark');
 
         return json_encode(static::$jsVariables);
     }

src/Widgets/DarkModeSwitcher.php

@@ -36,37 +36,26 @@ HTML;
 
     protected function addScript()
     {
-        $default = $this->defaultDarkMode ? 'true' : 'false';
-        $darkSidebar = config('admin.layout.sidebar_dark') ? 'true' : 'false';
-
-        $script = <<<JS
+        $script = <<<'JS'
 (function() {
     var storage = localStorage || {setItem:function () {}, getItem: function () {}},
+        darkMode = Dcat.darkMode,
         key = 'dcat-admin-theme-mode',
         mode = storage.getItem(key),
-        body = $('body'),
-        sidebar = $('.main-menu .main-sidebar'),
         icon = $('.dark-mode-switcher i');
-        darkSidebar = {$darkSidebar},
-        defaultDark = {$default};
-    
+
     function switchMode(dark) {
         if (dark) {
-            body.addClass('dark-mode');
-            sidebar.removeClass('sidebar-light-primary').addClass('sidebar-dark-white');
             icon.addClass('icon-sun').removeClass('icon-moon');
-            
+            darkMode.display(true);
             return;
         }
         
-        body.removeClass('dark-mode');
+        darkMode.display(false);
         icon.removeClass('icon-sun').addClass('icon-moon');
-        if (! darkSidebar) {
-            sidebar.addClass('sidebar-light-primary').removeClass('sidebar-dark-white');
-        }
     }
     
-    if (mode === 'dark' || (! mode && defaultDark)) {
+    if (mode === 'dark') {
         switchMode(true);
     } else if (mode === 'def') {
         switchMode(false)