josefaidt / svelte-themer

A theming engine for your Svelte apps using CSS Variables, persisted.
https://svelte-themer.vercel.app/
MIT License
140 stars 14 forks source link

Uncaught TypeError: getContext(...) is undefined #34

Closed AnicetNgrt closed 3 years ago

AnicetNgrt commented 3 years ago

Hello,

svelte-themer 0.4.9 as a dev dependency, sveltejs/template.

Getting an error because getContext('theme') is undefined when trying to implement my own theme toggle button. Note that using the provided ThemeToggle everything worked.

// App.svelte
<script>
    import { ThemeWrapper } from 'svelte-themer'
    import ThemeButton from './components/ThemeButton.svelte'
    import themes from './themes.js'
</script>

<ThemeWrapper themes="{themes}">
    <main>
        <p>Hello</p>
        <ThemeButton />
    </main>
</ThemeWrapper>

<style>
    :global(html) {
        background-color: var(--theme-colors-background, initial);
        color: var(--theme-colors-text, initial);
    }
</style>
// components/ThemeButton.svelte
<script>
    import { getContext } from 'svelte'
    let { toggle, current, theme } = getContext('theme')
</script>

<button on:click="{toggle}">
    <slot>{$current}</slot>
</button>

Am I doing anything wrong?

Thanks

josefaidt commented 3 years ago

Hey @AnicetNgrt :wave: I just published 0.4.10 which sets the context on component initialization instead of reactively.