Skip to content

Commit ef46df7

Browse files
emmadesilvaemmadesilva
authored
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
2 parents 7d3c202 + 1dc8fe0 commit ef46df7

File tree

8 files changed

+96
-2
lines changed

8 files changed

+96
-2
lines changed

‎RELEASE_NOTES.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ This serves two purposes:
1111

1212
### Added
1313
- Added support for using HTML comments to create Markdown code block filepath labels in https://github.com/hydephp/develop/pull/1693
14+
- Added a config option to disable the theme toggle buttons to automatically use browser settings in https://github.com/hydephp/develop/pull/1697
1415
- 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
1516

1617
### Changed

‎config/hyde.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -483,4 +483,7 @@
483483
'hydefront_version' => \Hyde\Framework\Services\AssetService::HYDEFRONT_VERSION,
484484
'hydefront_cdn_url' => \Hyde\Framework\Services\AssetService::HYDEFRONT_CDN_URL,
485485

486+
// Should the theme toggle buttons be displayed in the layouts?
487+
'theme_toggle_buttons' => true,
488+
486489
];

‎docs/digging-deeper/customization.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -325,6 +325,20 @@ use \Hyde\Framework\Services\AssetService;
325325
'hydefront_cdn_url' => AssetService::HYDEFRONT_CDN_URL,
326326
```
327327

328+
### `theme_toggle_buttons`
329+
330+
>info This feature was added in HydePHP v1.7.0
331+
332+
This setting allows you to enable or disable the theme toggle buttons in the navigation menu.
333+
334+
```php
335+
// filepath config/hyde.php
336+
'theme_toggle_buttons' => true,
337+
```
338+
339+
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,
340+
setting this setting to `false` will make so that the buttons will not show up in the app layout nor the documentation layout;
341+
instead the appropriate color scheme will be automatically applied based on the browser system settings.
328342

329343
## Blade Views
330344

‎packages/framework/config/hyde.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -483,4 +483,7 @@
483483
'hydefront_version' => \Hyde\Framework\Services\AssetService::HYDEFRONT_VERSION,
484484
'hydefront_cdn_url' => \Hyde\Framework\Services\AssetService::HYDEFRONT_CDN_URL,
485485

486+
// Should the theme toggle buttons be displayed in the layouts?
487+
'theme_toggle_buttons' => true,
488+
486489
];

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@if(Features::hasDarkmode())
1+
@if(Features::hasDarkmode() && Features::hasThemeToggleButtons())
22
<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">
33
<span class="sr-only">Toggle dark theme</span>
44
<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‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,11 @@ public static function hasDarkmode(): bool
8989
return static::enabled(Feature::Darkmode);
9090
}
9191

92+
public static function hasThemeToggleButtons(): bool
93+
{
94+
return static::hasDarkmode() && Config::getBool('hyde.theme_toggle_buttons', true);
95+
}
96+
9297
/**
9398
* Torchlight is by default enabled automatically when an API token
9499
* is set in the .env file but is disabled when running tests.

‎packages/framework/tests/Feature/ConfigurableFeaturesTest.php‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,43 @@ public function testCanGenerateSitemapHelperReturnsFalseIfSitemapsAreDisabledInC
5858
$this->assertFalse(Features::sitemap());
5959
}
6060

61+
public function testHasThemeToggleButtonsReturnsTrueWhenDarkmodeEnabledAndConfigTrue()
62+
{
63+
// Enable dark mode and set hyde.theme_toggle_buttons config option to true
64+
Features::mock('darkmode', true);
65+
config(['hyde.theme_toggle_buttons' => true]);
66+
67+
$this->assertTrue(Features::hasThemeToggleButtons());
68+
}
69+
70+
public function testHasThemeToggleButtonsReturnsFalseWhenDarkmodeDisabled()
71+
{
72+
// Disable dark mode
73+
Features::mock('darkmode', false);
74+
// It doesn't matter what the config value is here
75+
76+
$this->assertFalse(Features::hasThemeToggleButtons());
77+
}
78+
79+
public function testHasThemeToggleButtonsReturnsFalseWhenConfigFalse()
80+
{
81+
// Enable dark mode
82+
Features::mock('darkmode', true);
83+
// Set hyde.theme_toggle_buttons config option to false
84+
config(['hyde.theme_toggle_buttons' => false]);
85+
86+
$this->assertFalse(Features::hasThemeToggleButtons());
87+
}
88+
89+
public function testHasThemeToggleButtonsReturnsTrueWhenDarkmodeEnabledAndConfigNotSet()
90+
{
91+
// Enable dark mode
92+
Features::mock('darkmode', true);
93+
// Config option not set, default value assumed to be true
94+
95+
$this->assertTrue(Features::hasThemeToggleButtons());
96+
}
97+
6198
public function testToArrayMethodReturnsMethodArray()
6299
{
63100
$array = (new Features)->toArray();
@@ -80,10 +117,11 @@ public function testToArrayMethodContainsAllSettings()
80117
$this->assertArrayHasKey('markdown-pages', $array);
81118
$this->assertArrayHasKey('documentation-pages', $array);
82119
$this->assertArrayHasKey('darkmode', $array);
120+
$this->assertArrayHasKey('theme-toggle-buttons', $array);
83121
$this->assertArrayHasKey('documentation-search', $array);
84122
$this->assertArrayHasKey('torchlight', $array);
85123

86-
$this->assertCount(8, $array);
124+
$this->assertCount(9, $array);
87125
}
88126

89127
public function testFeaturesCanBeMocked()

‎packages/framework/tests/Feature/DarkmodeFeatureTest.php‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,4 +108,34 @@ public function testDarkModeThemeButtonIsHiddenInDocumentationPagesWhenDisabled(
108108
$this->assertStringNotContainsString('title="Toggle theme"', $view);
109109
$this->assertStringNotContainsString('<script>if (localStorage.getItem(\'color-theme\') === \'dark\'', $view);
110110
}
111+
112+
public function testDarkModeThemeButtonIsHiddenWhenThemeToggleIsDisabled()
113+
{
114+
Config::set('hyde.theme_toggle_buttons', false);
115+
116+
$view = view('hyde::layouts/page')->with([
117+
'title' => 'foo',
118+
'content' => 'foo',
119+
'routeKey' => 'foo',
120+
])->render();
121+
122+
$this->assertStringNotContainsString('title="Toggle theme"', $view);
123+
$this->assertStringContainsString('<script>if (localStorage.getItem(\'color-theme\') === \'dark\'', $view);
124+
}
125+
126+
public function testDarkModeThemeButtonIsHiddenFromDocumentationPagesWhenThemeToggleIsDisabled()
127+
{
128+
Config::set('hyde.theme_toggle_buttons', false);
129+
130+
view()->share('page', new DocumentationPage());
131+
132+
$view = view('hyde::layouts/docs')->with([
133+
'title' => 'foo',
134+
'content' => 'foo',
135+
'routeKey' => 'foo',
136+
])->render();
137+
138+
$this->assertStringNotContainsString('title="Toggle theme"', $view);
139+
$this->assertStringContainsString('<script>if (localStorage.getItem(\'color-theme\') === \'dark\'', $view);
140+
}
111141
}

0 commit comments

Comments
 (0)