re-add theme as ptrs broken fixed ipad theme

This commit is contained in:
Mark Gregory
2026-09-08 09:34:10 +01:00
parent 81e64a1c9a
commit aa23914353
8 changed files with 405 additions and 320 deletions
@@ -14,9 +14,31 @@
<script>
(function () {
var ua = navigator.userAgent || '';
if (/(iPad|iPhone|iPod)/.test(ua) && /OS 12[_\d]*/.test(ua)) {
document.documentElement.className += (document.documentElement.className ? ' ' : '') + 'ios12';
var isIOS12 = /(iPad|iPhone|iPod).*OS 12[_\.]/.test(ua);
if (isIOS12) {
document.documentElement.className += (document.documentElement.className ? ' ' : '') + 'hd-ios12';
}
if (!isIOS12) return;
function applyAppearance(value) {
var dark = value === 'dark' || (value === 'system' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
if (dark) document.documentElement.classList.add('dark');
else document.documentElement.classList.remove('dark');
document.documentElement.setAttribute('data-hd-appearance', value);
}
var stored = 'system';
try { stored = localStorage.getItem('flux.appearance') || localStorage.getItem('appearance') || 'system'; } catch (e) {}
applyAppearance(stored);
window.hdSetAppearance = function (value) {
try {
localStorage.setItem('flux.appearance', value);
localStorage.setItem('appearance', value);
} catch (e) {}
applyAppearance(value);
};
}());
</script>
<title>{{ filled($title ?? null) ? $title.' - '.config('app.name', 'Laravel') : config('app.name', 'Laravel') }}</title>
@@ -66,55 +88,4 @@
$viteAssets = array_values(array_unique($viteAssets));
@endphp
@vite($viteAssets)
@fluxAppearance
<script>
(function () {
var root = document.documentElement;
var key = 'hd.appearance';
var media = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
function stored() {
try { return localStorage.getItem(key) || 'system'; } catch (e) { return 'system'; }
}
function isDark(mode) {
return mode === 'dark' || (mode === 'system' && media && media.matches);
}
function syncButtons(mode) {
var buttons = document.querySelectorAll('[data-hd-appearance-value]');
for (var i = 0; i < buttons.length; i++) {
var active = buttons[i].getAttribute('data-hd-appearance-value') === mode;
buttons[i].setAttribute('aria-pressed', active ? 'true' : 'false');
if (active) buttons[i].classList.add('is-active');
else buttons[i].classList.remove('is-active');
}
}
function apply(mode) {
if (isDark(mode)) root.classList.add('dark');
else root.classList.remove('dark');
root.setAttribute('data-hd-appearance', mode);
syncButtons(mode);
}
window.HDTheme = {
get: stored,
set: function (mode) {
if (mode !== 'light' && mode !== 'dark' && mode !== 'system') return;
try { localStorage.setItem(key, mode); } catch (e) {}
apply(mode);
},
apply: function () { apply(stored()); }
};
apply(stored());
if (media) {
var onChange = function () { if (stored() === 'system') apply('system'); };
if (media.addListener) media.addListener(onChange);
else if (media.addEventListener) media.addEventListener('change', onChange);
}
document.addEventListener('DOMContentLoaded', function () { apply(stored()); });
document.addEventListener('livewire:navigated', function () { apply(stored()); });
}());
</script>
@fluxAppearance