Skip to content

Commit 4d12957

Browse files
MauricioFauthMauricioFauth
authored
Merge pull request #18649 from MauricioFauth/theme-color-mode-toggle
Add color mode toggle at the top nav bar
2 parents ae8aaea + c93ea96 commit 4d12957

5 files changed

Lines changed: 72 additions & 7 deletions

File tree

‎js/src/main.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { Config } from './modules/config.ts';
99
import checkNumberOfFields from './modules/functions/checkNumberOfFields.ts';
1010
import onloadNavigation from './modules/navigation/event-loader.ts';
1111
import { onloadFunctions, teardownFunctions } from './modules/functions/event-loader.ts';
12+
import { ThemeColorModeToggle } from './modules/themes-manager.ts';
1213

1314
AJAX.registerOnload('main.js', () => AJAX.removeSubmitEvents());
1415
$(AJAX.loadEventHandler());
@@ -48,8 +49,14 @@ $(() => checkNumberOfFields());
4849

4950
AJAX.registerTeardown('main.js', () => {
5051
PageSettings.off();
52+
53+
const themeColorModeToggle = document.getElementById('themeColorModeToggle') as HTMLSelectElement;
54+
themeColorModeToggle?.removeEventListener('change', ThemeColorModeToggle);
5155
});
5256

5357
AJAX.registerOnload('main.js', () => {
5458
PageSettings.on();
59+
60+
const themeColorModeToggle = document.getElementById('themeColorModeToggle') as HTMLSelectElement;
61+
themeColorModeToggle?.addEventListener('change', ThemeColorModeToggle);
5562
});

‎js/src/modules/themes-manager.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,21 @@ export const ThemesManager = {
1111
});
1212
}
1313
};
14+
15+
function setColorModeToHtmlTag (themeColorMode: string): void {
16+
const htmlTag = document.querySelector('html');
17+
htmlTag.dataset.bsTheme = themeColorMode;
18+
}
19+
20+
export const ThemeColorModeToggle: EventListenerObject = {
21+
handleEvent: (): void => {
22+
const toggleSelect = document.getElementById('themeColorModeToggle') as HTMLSelectElement;
23+
setColorModeToHtmlTag(toggleSelect.options.item(toggleSelect.selectedIndex).value);
24+
const toggleForm = toggleSelect.form;
25+
const formData = new FormData(toggleForm);
26+
formData.set('ajax_request', '1');
27+
$.post(toggleForm.action, Object.fromEntries(formData.entries())).done(function (data): void {
28+
setColorModeToHtmlTag(data.themeColorMode);
29+
});
30+
}
31+
};

‎libraries/classes/Controllers/ThemeSetController.php‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,12 @@ public function __invoke(ServerRequest $request): void
2828
{
2929
$theme = $request->getParsedBodyParam('set_theme');
3030
if (! $GLOBALS['cfg']['ThemeManager'] || ! is_string($theme) || $theme === '') {
31+
if ($request->isAjax()) {
32+
$this->response->addJSON('themeColorMode', '');
33+
34+
return;
35+
}
36+
3137
$this->response->redirect('index.php?route=/' . Url::getCommonRaw([], '&'));
3238

3339
return;
@@ -47,6 +53,12 @@ public function __invoke(ServerRequest $request): void
4753
$preferences['config_data']['ThemeDefault'] = $theme;
4854
$this->userPreferences->save($preferences['config_data']);
4955

56+
if ($request->isAjax()) {
57+
$this->response->addJSON('themeColorMode', $this->themeManager->theme->getColorMode());
58+
59+
return;
60+
}
61+
5062
$this->response->redirect('index.php?route=/' . Url::getCommonRaw([], '&'));
5163
}
5264
}

‎libraries/classes/Header.php‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,8 @@ public function getDisplay(): string
275275
$baseDir = defined('PMA_PATH_TO_BASEDIR') ? PMA_PATH_TO_BASEDIR : '';
276276
$themePath = $GLOBALS['theme'] instanceof Theme ? $GLOBALS['theme']->getPath() : '';
277277
$themeColorMode = $GLOBALS['theme'] instanceof Theme ? $GLOBALS['theme']->getColorMode() : 'light';
278+
$themeColorModes = $GLOBALS['theme'] instanceof Theme ? $GLOBALS['theme']->getColorModes() : [];
279+
$themeId = $GLOBALS['theme'] instanceof Theme ? $GLOBALS['theme']->getId() : '';
278280
$version = self::getVersionParameter();
279281

280282
// The user preferences have been merged at this point
@@ -364,6 +366,8 @@ public function getDisplay(): string
364366
'messages' => $messages,
365367
'recent_table' => $recentTable,
366368
'theme_color_mode' => $themeColorMode,
369+
'theme_color_modes' => $themeColorModes,
370+
'theme_id' => $themeId,
367371
]);
368372
}
369373

‎templates/header.twig‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,37 @@
3939

4040
{% if is_menu_enabled and server > 0 %}
4141
{{ menu|raw }}
42-
<span id="page_nav_icons" class="d-print-none">
43-
<span id="lock_page_icon"></span>
44-
<span id="page_settings_icon">
45-
{{ get_image('s_cog', 'Page-related settings'|trans) }}
46-
</span>
47-
<a id="goto_pagetop" href="#">{{ get_image('s_top', 'Click on the bar to scroll to top of page'|trans) }}</a>
48-
</span>
42+
<div id="page_nav_icons" class="row row-cols-sm-auto align-items-center d-print-none">
43+
{% if theme_color_modes|length > 1 %}
44+
<div class="col-12">
45+
<form method="post" action="{{ url('/themes/set') }}" class="disableAjax">
46+
{{ get_hidden_inputs() }}
47+
<input type="hidden" name="set_theme" value="{{ theme_id }}">
48+
<select class="form-select form-select-sm" name="themeColorMode" id="themeColorModeToggle" aria-label="{{ 'Color mode for the theme'|trans }}">
49+
{% for color_mode in theme_color_modes %}
50+
<option value="{{ color_mode }}"{{ theme_color_mode == color_mode ? ' selected' }}>
51+
{%- if color_mode == 'light' -%}
52+
{% trans %}Light{% context %}Light color mode of the theme{% endtrans %}
53+
{%- elseif color_mode == 'dark' -%}
54+
{% trans %}Dark{% context %}Dark color mode of the theme{% endtrans %}
55+
{%- else -%}
56+
{{ color_mode|title }}
57+
{%- endif -%}
58+
</option>
59+
{% endfor %}
60+
</select>
61+
</form>
62+
</div>
63+
{% endif %}
64+
65+
<div class="col-12">
66+
<span id="lock_page_icon"></span>
67+
<span id="page_settings_icon">
68+
{{ get_image('s_cog', 'Page-related settings'|trans) }}
69+
</span>
70+
<a id="goto_pagetop" href="#">{{ get_image('s_top', 'Click on the bar to scroll to top of page'|trans) }}</a>
71+
</div>
72+
</div>
4973
{% endif %}
5074

5175
{{ console|raw }}

0 commit comments

Comments
 (0)