rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add change dynamic theme color

Browse source
This commit is contained in:
nikita 2025-09-28 04:20:20 +06:00
parent d81ed86920
commit 8a36bed032
1 changed files with 8 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
resources/views/livewire/settings-dropdown.blade.php
View file

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