Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to update a component based on the theme? #56

Open
mikwee opened this issue Feb 27, 2024 · 0 comments
Open

How to update a component based on the theme? #56

mikwee opened this issue Feb 27, 2024 · 0 comments

Comments

@mikwee
Copy link

mikwee commented Feb 27, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant