Andreas Reinhold / reiniandClaude Opus 5
b48e879254
tests / lint (push) Successful in 1m0s
tests / feature (8.4) (push) Successful in 1m0s
tests / feature (8.5) (push) Successful in 1m1s
tests / browser (safari, webkit) (push) Successful in 1m59s
tests / browser (chrome, chromium) (push) Successful in 1m49s
tests / browser (firefox, firefox) (push) Successful in 1m54s
Colour, shape, type, elevation and motion as tokens and Tailwind utilities; `php artisan material:scheme`, which generates an app's colour roles with Google's material-color-utilities (spec 2025); the theme head script with light, dark and system and its Alpine store; Google Sans Flex; every Material Symbol (4,135, outlined and filled) drawn by <x-icon> without blade-icons; all 35 M3 Expressive shapes, ported from androidx, as <x-shape>; the x-figure directive; the Toasts concern; DesignGuard for applications' tests; and a showcase with every token, both themes side by side and an icon search. Colour utilities are `@theme inline`, so a section with its own data-theme repaints; without it they resolve once on :root. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
66 lines
2.6 KiB
PHP
66 lines
2.6 KiB
PHP
{{-- The theme, decided before the first paint. Include it in <head>, ahead of @vite.
|
|
|
|
It reads the visitor's choice from localStorage (`livewire-material.theme.storage_key`):
|
|
`light`, `dark` or `system`, falling back to `theme.default`. `system` follows the
|
|
operating system, now and whenever it changes. The result is written to
|
|
<html data-theme>, which is the only thing the stylesheet keys on; the choice itself is
|
|
<html data-theme-choice>, where `$store.theme` picks it up.
|
|
|
|
A value under one of `theme.legacy_keys` — an earlier toggle's key, which may be
|
|
JSON-encoded (maryUI's `"dark"`) — is adopted once and removed. Nothing is written for a
|
|
visitor who never chose, so changing `theme.default` later reaches them too.
|
|
|
|
<html> survives wire:navigate, so this only has to run on a full load. --}}
|
|
|
|
@php
|
|
$theme = config('livewire-material.theme');
|
|
|
|
$settings = [
|
|
'default' => in_array($theme['default'] ?? null, ['light', 'dark', 'system'], true) ? $theme['default'] : 'system',
|
|
'key' => $theme['storage_key'] ?? 'material-theme',
|
|
'legacy' => array_values($theme['legacy_keys'] ?? []),
|
|
];
|
|
@endphp
|
|
|
|
<script>
|
|
(function (settings) {
|
|
var root = document.documentElement;
|
|
var media = window.matchMedia('(prefers-color-scheme: dark)');
|
|
var valid = function (value) { return value === 'light' || value === 'dark' || value === 'system'; };
|
|
var choice = settings.default;
|
|
|
|
try {
|
|
var stored = localStorage.getItem(settings.key);
|
|
|
|
if (valid(stored)) {
|
|
choice = stored;
|
|
} else {
|
|
settings.legacy.forEach(function (key) {
|
|
var legacy = (localStorage.getItem(key) || '').replace(/"/g, '');
|
|
|
|
if (valid(legacy)) {
|
|
choice = legacy;
|
|
localStorage.setItem(settings.key, legacy);
|
|
}
|
|
|
|
localStorage.removeItem(key);
|
|
});
|
|
}
|
|
} catch (e) {
|
|
// Private windows and blocked site data throw on access; the default stands.
|
|
}
|
|
|
|
var apply = function () {
|
|
var current = root.getAttribute('data-theme-choice');
|
|
|
|
root.setAttribute('data-theme', current === 'system' ? (media.matches ? 'dark' : 'light') : current);
|
|
};
|
|
|
|
root.setAttribute('data-theme-key', settings.key);
|
|
root.setAttribute('data-theme-choice', choice);
|
|
apply();
|
|
|
|
media.addEventListener('change', apply);
|
|
})(@json($settings));
|
|
</script>
|