diff --git a/engine/skin.php b/engine/skin.php
index ebfc704..cf38312 100644
--- a/engine/skin.php
+++ b/engine/skin.php
@@ -38,6 +38,8 @@ function render($f, ...$vars): void {
if ($theme != 'auto' && !themeExists($theme))
$theme = 'auto';
+ $is_system_theme_dark = $theme == 'auto' && isUserSystemThemeDark();
+
$layout_ctx = skin('base');
$lang = [];
@@ -52,6 +54,7 @@ function render($f, ...$vars): void {
$html = $layout_ctx->layout(
static: $SkinState->static,
theme: $theme,
+ is_system_theme_dark: $is_system_theme_dark,
title: $title,
opts: $SkinState->options,
js: $js,
diff --git a/htdocs/js/common/35-theme-switcher.js b/htdocs/js/common/35-theme-switcher.js
index 05479d3..ac2e167 100644
--- a/htdocs/js/common/35-theme-switcher.js
+++ b/htdocs/js/common/35-theme-switcher.js
@@ -109,13 +109,15 @@ var ThemeSwitcher = (function() {
});
var left = names.length;
- names.forEach(function(name) {
- StaticManager.loadStyle(name, 'dark', once(function(e) {
- left--;
- if (left === 0)
- callback();
- }));
- })
+ if (names.length) {
+ names.forEach(function (name) {
+ StaticManager.loadStyle(name, 'dark', once(function (e) {
+ left--;
+ if (left === 0)
+ callback();
+ }));
+ })
+ } else callback();
}
/**
@@ -162,11 +164,15 @@ var ThemeSwitcher = (function() {
var prevSystemState = systemState;
systemState = dark;
- if (modes[currentModeIndex] !== 'auto')
+ if (modes[currentModeIndex] !== 'auto') {
+ unsetCookie('theme-system-value');
return;
+ }
- if (systemState !== prevSystemState)
+ if (systemState !== prevSystemState) {
changeTheme(systemState);
+ setCookie('theme-system-value', dark ? 'dark' : 'light');
+ }
};
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
@@ -186,6 +192,11 @@ var ThemeSwitcher = (function() {
}
currentModeIndex = (currentModeIndex + 1) % modes.length;
+ if (modes[currentModeIndex] !== 'auto')
+ unsetCookie('theme-system-value');
+ else
+ setCookie('theme-system-value', systemState ? 'dark' : 'light');
+
switch (modes[currentModeIndex]) {
case 'auto':
if (systemState !== null && systemState !== isDarkModeApplied())
diff --git a/lib/themes.php b/lib/themes.php
index f9b9857..dabe7aa 100644
--- a/lib/themes.php
+++ b/lib/themes.php
@@ -39,3 +39,7 @@ function getUserTheme(): string {
$val = 'auto';
return $val;
}
+
+function isUserSystemThemeDark(): bool {
+ return ($_COOKIE['theme-system-value'] ?? '') === 'dark';
+}
\ No newline at end of file
diff --git a/skin/base.phps b/skin/base.phps
index d7b4cf0..f11c4ac 100644
--- a/skin/base.phps
+++ b/skin/base.phps
@@ -5,7 +5,7 @@ namespace skin\base;
use SkinContext;
use Stringable;
-function layout($ctx, $title, $unsafe_body, $static, $meta, $js, $opts, $unsafe_lang, $theme, $exec_time, $admin_email, $svg_defs) {
+function layout($ctx, $title, $unsafe_body, $static, $meta, $js, $opts, $unsafe_lang, $theme, $is_system_theme_dark, $exec_time, $admin_email, $svg_defs) {
global $config;
$app_config = jsonEncode([
'domain' => $config['domain'],
@@ -30,7 +30,7 @@ return <<{$title}
{$ctx->meta($meta)}
- {$ctx->renderStatic($static, $theme)}
+ {$ctx->renderStatic($static, $theme, $is_system_theme_dark)}
if_true($body_class, ' class="'.implode(' ', $body_class).'"')}>
{$ctx->if_true($svg_defs, fn() => $ctx->renderSVGIcons($svg_defs))}
@@ -120,10 +120,10 @@ function meta($ctx, $meta) {
}, $meta));
}
-function renderStatic($ctx, $static, $theme) {
+function renderStatic($ctx, $static, $theme, $is_system_theme_dark) {
global $config;
$html = [];
- $dark = $theme == 'dark';
+ $dark = $theme == 'dark' || $is_system_theme_dark;
$ctx->styleNames = [];
foreach ($static as $name) {
// javascript