Open
Description
I'm trying to change the logo based on the theme. For that, I wrote this component:
<script lang="ts">
import { onMount } from 'svelte'
import { tick } from 'svelte/internal'
import { theme } from '../store/theme'
async function printTheme() {
await tick();
console.log("Logo theme: " + $theme);
}
let path;
theme.subscribe(theme => {
switch (theme) {
case 'dark':
console.log("Dark theme triggered");
path = '/assets/Ein Sof Dark.svg'; // White logo
case 'light':
console.log("Light theme triggered");
path = '/assets/Ein Sof.svg'; // Black logo
}
printTheme();
});
onMount(() => {
printTheme();
});
</script>
<img class="header__logo-img" src={path} alt="The Ein Sof logo"/>
For some reason, the logo stays black, even when the theme is dark. This is the terminal output:
14:55:17 [200] / 27ms
Dark theme triggered
Light theme triggered
Logo theme: dark
Can you perhaps help me understand how the theme works? Thanks.
Metadata
Assignees
Labels
No labels
Activity