Merge pull request #7105 from coollabsio/light-mode-wtf
fix: light mode wtf
This commit is contained in:
commit
bc3deeed03
3 changed files with 235 additions and 230 deletions
|
|
@ -124,7 +124,7 @@ @utility menu {
|
||||||
}
|
}
|
||||||
|
|
||||||
@utility menu-item {
|
@utility menu-item {
|
||||||
@apply flex gap-3 items-center px-2 py-1 w-full text-sm sm:pr-0 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300 min-w-fit sm:min-w-64;
|
@apply flex gap-3 items-center px-2 py-1 w-full text-sm sm:pr-0 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300 min-w-fit sm:min-w-64 text-black dark:text-neutral-400;
|
||||||
}
|
}
|
||||||
|
|
||||||
@utility menu-item-active {
|
@utility menu-item-active {
|
||||||
|
|
@ -220,7 +220,7 @@ @utility title {
|
||||||
}
|
}
|
||||||
|
|
||||||
@utility subtitle {
|
@utility subtitle {
|
||||||
@apply pt-2 pb-9;
|
@apply pt-2 pb-9 text-neutral-500 dark:text-neutral-400;
|
||||||
}
|
}
|
||||||
|
|
||||||
@utility fullscreen {
|
@utility fullscreen {
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,8 @@
|
||||||
localStorage.setItem('pageWidth', 'full');
|
localStorage.setItem('pageWidth', 'full');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}" x-cloak class="mx-auto" :class="pageWidth === 'full' ? '' : 'max-w-7xl'">
|
}" x-cloak class="mx-auto text-neutral-800 dark:text-white"
|
||||||
|
:class="pageWidth === 'full' ? '' : 'max-w-7xl'">
|
||||||
<div class="relative z-50 lg:hidden" :class="open ? 'block' : 'hidden'" role="dialog" aria-modal="true">
|
<div class="relative z-50 lg:hidden" :class="open ? 'block' : 'hidden'" role="dialog" aria-modal="true">
|
||||||
<div class="fixed inset-0 bg-black/80" x-on:click="open = false"></div>
|
<div class="fixed inset-0 bg-black/80" x-on:click="open = false"></div>
|
||||||
<div class="fixed inset-y-0 right-0 h-full flex">
|
<div class="fixed inset-y-0 right-0 h-full flex">
|
||||||
|
|
@ -45,16 +46,18 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sticky top-0 z-40 flex items-center justify-between px-4 py-4 gap-x-6 sm:px-6 lg:hidden bg-white/95 dark:bg-base/95 backdrop-blur-sm border-b border-neutral-300/50 dark:border-coolgray-200/50">
|
<div
|
||||||
|
class="sticky top-0 z-40 flex items-center justify-between px-4 py-4 gap-x-6 sm:px-6 lg:hidden bg-white/95 dark:bg-base/95 backdrop-blur-sm border-b border-neutral-300/50 dark:border-coolgray-200/50">
|
||||||
<div class="flex items-center gap-3 flex-shrink-0">
|
<div class="flex items-center gap-3 flex-shrink-0">
|
||||||
<a href="/" class="text-xl font-bold tracking-wide dark:text-white hover:opacity-80 transition-opacity">Coolify</a>
|
<a href="/"
|
||||||
|
class="text-xl font-bold tracking-wide dark:text-white hover:opacity-80 transition-opacity">Coolify</a>
|
||||||
<livewire:switch-team />
|
<livewire:switch-team />
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="-m-2.5 p-2.5 dark:text-warning" x-on:click="open = !open">
|
<button type="button" class="-m-2.5 p-2.5 dark:text-warning" x-on:click="open = !open">
|
||||||
<span class="sr-only">Open sidebar</span>
|
<span class="sr-only">Open sidebar</span>
|
||||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24">
|
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24">
|
||||||
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
d="M4 6h16M4 12h16M4 18h16" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -6,13 +6,15 @@
|
||||||
const t = localStorage.theme || 'dark';
|
const t = localStorage.theme || 'dark';
|
||||||
const d = t === 'dark' || (t === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);
|
const d = t === 'dark' || (t === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);
|
||||||
document.documentElement.classList[d ? 'add' : 'remove']('dark');
|
document.documentElement.classList[d ? 'add' : 'remove']('dark');
|
||||||
|
document.documentElement.setAttribute('data-theme', d ? 'dark' : 'light');
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta name="robots" content="noindex">
|
<meta name="robots" content="noindex">
|
||||||
<meta name="theme-color" content="#101010" id="theme-color-meta" />
|
<meta name="theme-color" content="#ffffff" id="theme-color-meta" />
|
||||||
<meta name="color-scheme" content="dark light" />
|
<meta name="color-scheme" content="dark light" />
|
||||||
<meta name="Description" content="Coolify: An open-source & self-hostable Heroku / Netlify / Vercel alternative" />
|
<meta name="Description" content="Coolify: An open-source & self-hostable Heroku / Netlify / Vercel alternative" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue