[Config]: Add a new configuration option to enable dark mode style. (#…

…893)
jeroennoten · May 13, 2021 · 6416913 · 6416913
1 parent bf7a7bf
commit 6416913
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 15 deletions.
diff --git a/config/adminlte.php b/config/adminlte.php
@@ -88,6 +88,7 @@
     'layout_fixed_sidebar' => null,
     'layout_fixed_navbar' => null,
     'layout_fixed_footer' => null,
+    'layout_dark_mode' => null,
 
     /*
     |--------------------------------------------------------------------------

diff --git a/src/Helpers/LayoutHelper.php b/src/Helpers/LayoutHelper.php
@@ -7,11 +7,11 @@
 class LayoutHelper
 {
     /**
-     * Set of tokens related to screen sizes.
+     * Set of tokens related to screen sizes/breakpoints.
      *
      * @var array
      */
-    protected static $screenSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
+    protected static $screenBreakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];
 
     /**
      * Check if layout topnav is enabled.
@@ -46,6 +46,7 @@ public static function makeBodyClasses()
         $classes = array_merge($classes, self::makeSidebarClasses());
         $classes = array_merge($classes, self::makeRightSidebarClasses());
         $classes = array_merge($classes, self::makeCustomBodyClasses());
+        $classes = array_merge($classes, self::makeDarkModeClasses());
 
         return trim(implode(' ', $classes));
     }
@@ -61,18 +62,18 @@ public static function makeBodyData()
 
         // Add data related to the "sidebar_scrollbar_theme" configuration.
 
-        $sb_theme_cfg = config('adminlte.sidebar_scrollbar_theme', 'os-theme-light');
+        $sbTheme = config('adminlte.sidebar_scrollbar_theme', 'os-theme-light');
 
-        if ($sb_theme_cfg != 'os-theme-light') {
-            $data[] = 'data-scrollbar-theme='.$sb_theme_cfg;
+        if ($sbTheme != 'os-theme-light') {
+            $data[] = "data-scrollbar-theme={$sbTheme}";
         }
 
         // Add data related to the "sidebar_scrollbar_auto_hide" configuration.
 
-        $sb_auto_hide = config('adminlte.sidebar_scrollbar_auto_hide', 'l');
+        $sbAutoHide = config('adminlte.sidebar_scrollbar_auto_hide', 'l');
 
-        if ($sb_auto_hide != 'l') {
-            $data[] = 'data-scrollbar-auto-hide='.$sb_auto_hide;
+        if ($sbAutoHide != 'l') {
+            $data[] = "data-scrollbar-auto-hide={$sbAutoHide}";
         }
 
         return trim(implode(' ', $data));
@@ -120,13 +121,13 @@ private static function makeLayoutClasses()
     /**
      * Make the set of classes related to a fixed responsive configuration.
      *
-     * @param string $section (navbar or footer)
+     * @param string $section The layout section (navbar or footer)
      * @return array
      */
     private static function makeFixedResponsiveClasses($section)
     {
         $classes = [];
-        $cfg = config('adminlte.layout_fixed_'.$section);
+        $cfg = config("adminlte.layout_fixed_{$section}");
 
         if ($cfg === true) {
             $cfg = ['xs' => true];
@@ -140,17 +141,41 @@ private static function makeFixedResponsiveClasses($section)
 
         // Make the set of responsive classes in relation to the config.
 
-        foreach ($cfg as $size => $enabled) {
-            if (in_array($size, self::$screenSizes)) {
-                $size = ($size === 'xs') ? $section : "{$size}-{$section}";
-                $fixed = $enabled ? 'fixed' : 'not-fixed';
-                $classes[] = "layout-{$size}-{$fixed}";
+        foreach ($cfg as $breakpoint => $enabled) {
+            if (in_array($breakpoint, self::$screenBreakpoints)) {
+                $classes[] = self::makeFixedResponsiveClass(
+                    $section, $breakpoint, $enabled
+                );
             }
         }
 
         return $classes;
     }
 
+    /**
+     * Make a responsive class for the navbar/footer fixed mode on a particular
+     * breakpoint token.
+     *
+     * @param string $section The layout section (navbar or footer)
+     * @param string $bp The screen breakpoint (xs, sm, md, lg, xl)
+     * @param bool $enabled Whether to enable fixed mode (true, false)
+     * @return string
+     */
+    private static function makeFixedResponsiveClass($section, $bp, $enabled)
+    {
+        // Create the class prefix.
+
+        $prefix = ($bp === 'xs') ? 'layout' : "layout-{$bp}";
+
+        // Create the class suffix.
+
+        $suffix = $enabled ? 'fixed' : 'not-fixed';
+
+        // Return the responsice class for fixed mode.
+
+        return "{$prefix}-{$section}-{$suffix}";
+    }
+
     /**
      * Make the set of classes related to the left sidebar configuration.
      *
@@ -211,4 +236,21 @@ private static function makeCustomBodyClasses()
 
         return $classes;
     }
+
+    /**
+     * Make the set of classes related to the dark mode.
+     *
+     * @return array
+     */
+    private static function makeDarkModeClasses()
+    {
+        $classes = [];
+        $cfg = config('adminlte.layout_dark_mode', false);
+
+        if (is_bool($cfg) && $cfg) {
+            $classes[] = 'dark-mode';
+        }
+
+        return $classes;
+    }
 }
diff --git a/tests/Helpers/LayoutHelperTest.php b/tests/Helpers/LayoutHelperTest.php
@@ -324,4 +324,19 @@ public function testMakeBodyClassesWithClassesBodyConfig()
         $this->assertStringContainsString('custom-body-class-1', $data);
         $this->assertStringContainsString('custom-body-class-2', $data);
     }
+
+    public function testMakeBodyClassesWithDarkModeConfig()
+    {
+        // Test config 'layout_dark_mode' => null.
+
+        config(['adminlte.layout_dark_mode' => null]);
+        $data = LayoutHelper::makeBodyClasses();
+        $this->assertStringNotContainsString('dark-mode', $data);
+
+        // Test config 'layout_dark_mode' => true.
+
+        config(['adminlte.layout_dark_mode' => true]);
+        $data = LayoutHelper::makeBodyClasses();
+        $this->assertStringContainsString('dark-mode', $data);
+    }
 }