add change dynamic theme color

This commit is contained in:
nikita 2025-09-28 04:20:20 +06:00
parent d81ed86920
commit 8a36bed032

View file

@ -2,6 +2,8 @@
dropdownOpen: false,
search: '',
allEntries: [],
darkColorContent: getComputedStyle($el).getPropertyValue('--color-base'),
whiteColorContent: getComputedStyle($el).getPropertyValue('--color-white'),
init() {
this.mounted();
// Load all entries when component initializes
@ -45,11 +47,16 @@
const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
const userSettings = localStorage.getItem('theme') || 'dark';
localStorage.setItem('theme', userSettings);
const themeMetaTag = document.querySelector('meta[name=theme-color]');
if (userSettings === 'dark') {
document.documentElement.classList.add('dark');
themeMetaTag.setAttribute('content', this.darkColorContent);
this.theme = 'dark';
} else if (userSettings === 'light') {
document.documentElement.classList.remove('dark');
themeMetaTag.setAttribute('content', this.whiteColorContent);
this.theme = 'light';
} else if (darkModePreference) {
this.theme = 'system';
@ -302,7 +309,7 @@ class="inline-flex items-center gap-1 hover:text-coolgray-500">
<span x-text="entry.title"></span>
<x-external-link />
</a></span>
<span x-show="entry.tag_name === '{{ $currentVersion }}'"
<span x-show="entry.tag_name === '{{ $currentVersion }}'"
class="px-2 py-1 text-xs font-semibold bg-success text-white rounded-sm">
CURRENT VERSION
</span>