feat(frontend): fix sidebar color (#2541)

* feat(frontend): fix sidebar color

* feat(frontend): fix sidebar color

* feat(frontend): fix sidebar theme switch
This commit is contained in:
Faton Ramadani
2023-11-02 14:01:06 +01:00
committed by GitHub
parent 92b25a7274
commit 26e2fec4e2
2 changed files with 32 additions and 29 deletions
@@ -95,34 +95,35 @@
<Icon class="pr-0.5" data={faCog} /> Superadmin workspace
</button>
</div>
<div class="py-1" role="none">
<button
on:click={() => {
if (!document.documentElement.classList.contains('dark')) {
document.documentElement.classList.add('dark')
window.localStorage.setItem('dark-mode', 'dark')
} else {
document.documentElement.classList.remove('dark')
window.localStorage.setItem('dark-mode', 'light')
}
}}
class={twMerge(
'text-secondary block text-left px-4 py-2 font-normal text-sm hover:bg-surface-hover hover:text-primary w-full',
'flex flex-row items-center gap-1'
)}
role="menuitem"
tabindex="-1"
>
{#if darkMode}
<Sun class="w-4 h-4" />
{:else}
<Moon class="w-4 h-4" />
{/if}
Switch theme
</button>
</div>
{/if}
<div class="py-1" role="none">
<button
on:click={() => {
if (!document.documentElement.classList.contains('dark')) {
document.documentElement.classList.add('dark')
window.localStorage.setItem('dark-mode', 'dark')
} else {
document.documentElement.classList.remove('dark')
window.localStorage.setItem('dark-mode', 'light')
}
}}
class={twMerge(
'text-secondary block text-left px-4 py-2 font-normal text-sm hover:bg-surface-hover hover:text-primary w-full',
'flex flex-row items-center gap-1'
)}
role="menuitem"
tabindex="-1"
>
{#if darkMode}
<Sun class="w-4 h-4" />
{:else}
<Moon class="w-4 h-4" />
{/if}
Switch theme
</button>
</div>
<div class="py-1" role="none">
<MenuItem>
<button
@@ -173,7 +173,7 @@
>
<div
class={classNames(
'fixed inset-0 bg-[#202125] bg-opacity-75 transition-opacity ease-linear duration-300 z-40 !dark',
'fixed inset-0 dark:bg-[#1e232e] bg-[#202125] bg-opacity-75 transition-opacity ease-linear duration-300 z-40 !dark',
menuOpen ? 'opacity-100' : 'opacity-0'
)}
/>
@@ -211,7 +211,7 @@
</svg>
</button>
</div>
<div class="bg-[#202125] h-full !dark">
<div class="dark:bg-[#1e232e] bg-[#202125] h-full !dark">
<div
class="flex gap-x-2 flex-shrink-0 p-4 font-semibold text-gray-200 w-10"
class:w-40={!isCollapsed}
@@ -239,7 +239,9 @@
devOnly ? '!hidden' : ''
)}
>
<div class="flex-1 flex flex-col min-h-0 h-screen shadow-lg bg-[#202125] !dark">
<div
class="flex-1 flex flex-col min-h-0 h-screen shadow-lg dark:bg-[#1e232e] bg-[#202125] !dark"
>
<button
on:click={() => {
goto('/')