Skip to content

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

Open
@mikwee

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions