Merge pull request #1697 from hydephp/add-automatic-dark-mode-option

Add a config option to disable theme toggle buttons to automatically use browser settings

RELEASE_NOTES.md

@@ -11,6 +11,7 @@ This serves two purposes:
 
 ### Added
 - Added support for using HTML comments to create Markdown code block filepath labels in https://github.com/hydephp/develop/pull/1693
+- Added a config option to disable the theme toggle buttons to automatically use browser settings in https://github.com/hydephp/develop/pull/1697
 - You can now specify which path to open when using the `--open` option in the serve command in https://github.com/hydephp/develop/pull/1694
 
 ### Changed

config/hyde.php

@@ -483,4 +483,7 @@
     'hydefront_version' => \Hyde\Framework\Services\AssetService::HYDEFRONT_VERSION,
     'hydefront_cdn_url' => \Hyde\Framework\Services\AssetService::HYDEFRONT_CDN_URL,
 
+    // Should the theme toggle buttons be displayed in the layouts?
+    'theme_toggle_buttons' => true,
+
 ];

docs/digging-deeper/customization.md

@@ -325,6 +325,20 @@ use \Hyde\Framework\Services\AssetService;
 'hydefront_cdn_url' => AssetService::HYDEFRONT_CDN_URL,
 ```
 
+### `theme_toggle_buttons`
+
+>info This feature was added in HydePHP v1.7.0
+
+This setting allows you to enable or disable the theme toggle buttons in the navigation menu.
+
+```php
+// filepath config/hyde.php
+'theme_toggle_buttons' => true,
+```
+
+If the `Feature::Darkmode` setting is disabled in the `features` array in the same file, this won't do anything, but if darkmode is enabled,
+setting this setting to `false` will make so that the buttons will not show up in the app layout nor the documentation layout;
+instead the appropriate color scheme will be automatically applied based on the browser system settings.
 
 ## Blade Views
 

packages/framework/config/hyde.php

@@ -483,4 +483,7 @@
     'hydefront_version' => \Hyde\Framework\Services\AssetService::HYDEFRONT_VERSION,
     'hydefront_cdn_url' => \Hyde\Framework\Services\AssetService::HYDEFRONT_CDN_URL,
 
+    // Should the theme toggle buttons be displayed in the layouts?
+    'theme_toggle_buttons' => true,
+
 ];

packages/framework/resources/views/components/navigation/theme-toggle-button.blade.php

@@ -1,4 +1,4 @@
-@if(Features::hasDarkmode())
+@if(Features::hasDarkmode() && Features::hasThemeToggleButtons())
     <button @click="toggleTheme" {{ $attributes->merge(['class' => 'theme-toggle-button flex items-center px-2 py-1 hover:text-gray-700 dark:text-gray-200']) }} title="Toggle theme">
         <span class="sr-only">Toggle dark theme</span>
         <svg width="1.25rem" height="1.25rem" class="w-5 h-5 hidden dark:block" fill="#FFFFFF" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>

packages/framework/src/Facades/Features.php

@@ -89,6 +89,11 @@ public static function hasDarkmode(): bool
         return static::enabled(Feature::Darkmode);
     }
 
+    public static function hasThemeToggleButtons(): bool
+    {
+        return static::hasDarkmode() && Config::getBool('hyde.theme_toggle_buttons', true);
+    }
+
     /**
      * Torchlight is by default enabled automatically when an API token
      * is set in the .env file but is disabled when running tests.

packages/framework/tests/Feature/ConfigurableFeaturesTest.php

@@ -58,6 +58,43 @@ public function testCanGenerateSitemapHelperReturnsFalseIfSitemapsAreDisabledInC
         $this->assertFalse(Features::sitemap());
     }
 
+    public function testHasThemeToggleButtonsReturnsTrueWhenDarkmodeEnabledAndConfigTrue()
+    {
+        // Enable dark mode and set hyde.theme_toggle_buttons config option to true
+        Features::mock('darkmode', true);
+        config(['hyde.theme_toggle_buttons' => true]);
+
+        $this->assertTrue(Features::hasThemeToggleButtons());
+    }
+
+    public function testHasThemeToggleButtonsReturnsFalseWhenDarkmodeDisabled()
+    {
+        // Disable dark mode
+        Features::mock('darkmode', false);
+        // It doesn't matter what the config value is here
+
+        $this->assertFalse(Features::hasThemeToggleButtons());
+    }
+
+    public function testHasThemeToggleButtonsReturnsFalseWhenConfigFalse()
+    {
+        // Enable dark mode
+        Features::mock('darkmode', true);
+        // Set hyde.theme_toggle_buttons config option to false
+        config(['hyde.theme_toggle_buttons' => false]);
+
+        $this->assertFalse(Features::hasThemeToggleButtons());
+    }
+
+    public function testHasThemeToggleButtonsReturnsTrueWhenDarkmodeEnabledAndConfigNotSet()
+    {
+        // Enable dark mode
+        Features::mock('darkmode', true);
+        // Config option not set, default value assumed to be true
+
+        $this->assertTrue(Features::hasThemeToggleButtons());
+    }
+
     public function testToArrayMethodReturnsMethodArray()
     {
         $array = (new Features)->toArray();
@@ -80,10 +117,11 @@ public function testToArrayMethodContainsAllSettings()
         $this->assertArrayHasKey('markdown-pages', $array);
         $this->assertArrayHasKey('documentation-pages', $array);
         $this->assertArrayHasKey('darkmode', $array);
+        $this->assertArrayHasKey('theme-toggle-buttons', $array);
         $this->assertArrayHasKey('documentation-search', $array);
         $this->assertArrayHasKey('torchlight', $array);
 
-        $this->assertCount(8, $array);
+        $this->assertCount(9, $array);
     }
 
     public function testFeaturesCanBeMocked()

packages/framework/tests/Feature/DarkmodeFeatureTest.php

@@ -108,4 +108,34 @@ public function testDarkModeThemeButtonIsHiddenInDocumentationPagesWhenDisabled(
         $this->assertStringNotContainsString('title="Toggle theme"', $view);
         $this->assertStringNotContainsString('<script>if (localStorage.getItem(\'color-theme\') === \'dark\'', $view);
     }
+
+    public function testDarkModeThemeButtonIsHiddenWhenThemeToggleIsDisabled()
+    {
+        Config::set('hyde.theme_toggle_buttons', false);
+
+        $view = view('hyde::layouts/page')->with([
+            'title' => 'foo',
+            'content' => 'foo',
+            'routeKey' => 'foo',
+        ])->render();
+
+        $this->assertStringNotContainsString('title="Toggle theme"', $view);
+        $this->assertStringContainsString('<script>if (localStorage.getItem(\'color-theme\') === \'dark\'', $view);
+    }
+
+    public function testDarkModeThemeButtonIsHiddenFromDocumentationPagesWhenThemeToggleIsDisabled()
+    {
+        Config::set('hyde.theme_toggle_buttons', false);
+
+        view()->share('page', new DocumentationPage());
+
+        $view = view('hyde::layouts/docs')->with([
+            'title' => 'foo',
+            'content' => 'foo',
+            'routeKey' => 'foo',
+        ])->render();
+
+        $this->assertStringNotContainsString('title="Toggle theme"', $view);
+        $this->assertStringContainsString('<script>if (localStorage.getItem(\'color-theme\') === \'dark\'', $view);
+    }
 }