diff --git a/src/lib/ui/learning-objects/content/Lab.svelte b/src/lib/ui/learning-objects/content/Lab.svelte index abb19599..ca87a7ab 100644 --- a/src/lib/ui/learning-objects/content/Lab.svelte +++ b/src/lib/ui/learning-objects/content/Lab.svelte @@ -57,7 +57,7 @@ <div class="max-w-l flex"> <div class="mr-2 hidden h-auto w-72 lg:block"> - <div class="card bg-surface-100 dark:bg-surface-950 sticky top-6 m-2 h-auto rounded-xl py-4"> + <div class="card bg-surface-100 dark:bg-surface-950 dark:border-primary-500 border-[1px] sticky top-6 m-2 h-auto rounded-xl py-4"> <nav class="nav-list"> <ul> {@html lab.navbarHtml} diff --git a/src/lib/ui/themes/LayoutMenu.svelte b/src/lib/ui/themes/LayoutMenu.svelte index b75b293d..c1906799 100644 --- a/src/lib/ui/themes/LayoutMenu.svelte +++ b/src/lib/ui/themes/LayoutMenu.svelte @@ -6,8 +6,12 @@ import { layout } from "$lib/runes"; import MenuItem from "$lib/ui/utils/MenuItem.svelte"; + let selectedTheme = localStorage.getItem("selectedTheme") || "tutors"; + function changeTheme(theme: string): void { setTheme(theme); + selectedTheme = theme; + localStorage.setItem("selectedTheme", theme); } function toggleDisplayMode(): void { @@ -45,7 +49,7 @@ <h6>Themes</h6> <ul class="list"> {#each themes as theme} - <MenuItem type="lightMode" text={theme.name} onClick={() => changeTheme(theme.name)} /> + <MenuItem type="lightMode" isActive={selectedTheme === theme.name} text={theme.name} onClick={() => changeTheme(theme.name)}/> {/each} </ul> {/snippet} diff --git a/src/lib/ui/utils/MenuItem.svelte b/src/lib/ui/utils/MenuItem.svelte index 3c03d787..6542c818 100644 --- a/src/lib/ui/utils/MenuItem.svelte +++ b/src/lib/ui/utils/MenuItem.svelte @@ -6,18 +6,19 @@ link?: string; targetStr?: string; onClick?: () => void; + isActive?: boolean; } - let { type, link, text, targetStr, onClick }: Props = $props(); + let { type, link, text, targetStr, onClick, isActive = false}: Props = $props(); </script> -<li class="option !p-0 hover:preset-tonal"> +<li class="option !p-0"> {#if link} - <a href={link} class="btn flex w-full justify-between" target={targetStr}> + <a href={link} class="btn flex w-full justify-between group {isActive ? 'bg-gray-200 dark:bg-gray-700' : 'hover:preset-tonal'}" target={targetStr}> <div class="ml-2">{text}</div> <Icon {type} /> </a> {:else} - <button class="btn flex w-full justify-between" onclick={onClick}> + <button class="btn flex w-full justify-between group {isActive ? 'bg-gray-200 dark:bg-gray-700' : 'hover:preset-tonal'}" onclick={onClick}> <div class="ml-2">{text}</div> <Icon {type} /> </button>