re-add theme as ptrs broken fixed ipad theme

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
@@ -1,4 +1,5 @@
-<header class="hd-settings-heading">
-    <h1>{{ __('Settings') }}</h1>
-    <p>{{ __('Manage your profile and account settings') }}</p>
-</header>
+<div class="relative mb-6 w-full">
+    <flux:heading size="xl" level="1">{{ __('Settings') }}</flux:heading>
+    <flux:subheading size="lg" class="mb-6">{{ __('Manage your profile and account settings') }}</flux:subheading>
+    <flux:separator variant="subtle" />
+</div>