eswyft/4in1_ws_web
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pre-load dark theme on server if user's system theme is dark and website's theme is auto

Browse Source
This commit is contained in:
E. S. 2024-11-03 18:19:53 +03:00
parent 679e9e2f5e
commit 4211df5125
4 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
engine/skin.php
View File

@ -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,

19
htdocs/js/common/35-theme-switcher.js
View File

@ -109,13 +109,15 @@ var ThemeSwitcher = (function() {
});
var left = names.length;
names.forEach(function(name) {
StaticManager.loadStyle(name, 'dark', once(function(e) {
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())

4
lib/themes.php
View File

@ -39,3 +39,7 @@ function getUserTheme(): string {
$val = 'auto';
return $val;
}
function isUserSystemThemeDark(): bool {
return ($_COOKIE['theme-system-value'] ?? '') === 'dark';
}

8
skin/base.phps
View File

@ -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 <<<HTML
<title>{$title}</title>
<script type="text/javascript">window.appConfig = {$app_config};</script>
{$ctx->meta($meta)}
{$ctx->renderStatic($static, $theme)}
{$ctx->renderStatic($static, $theme, $is_system_theme_dark)}
</head>
<body{$ctx->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