search

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

can't reproduce it :/ #25

Closed guilhermedelyra closed 3 years ago

guilhermedelyra commented 3 years ago

using svelte basic template...

Folder structure: ⤵️ ![image](https://user-images.githubusercontent.com/23236957/107454197-5512e700-6b2b-11eb-880e-d2a4134aa67c.png)
package.json ⤵️ ![image](https://user-images.githubusercontent.com/23236957/107454110-2dbc1a00-6b2b-11eb-8e71-18e4dee32632.png)
main.js ⤵️ ![image](https://user-images.githubusercontent.com/23236957/107454387-acb15280-6b2b-11eb-80a1-a84598255c9a.png)
themes.js ⤵️ ![image](https://user-images.githubusercontent.com/23236957/107454137-3ca2cc80-6b2b-11eb-8b7a-81f96a545d2c.png)
App.svelte ⤵️ ![image](https://user-images.githubusercontent.com/23236957/107454163-47f5f800-6b2b-11eb-8f77-986e01bb98d5.png)

Results:

Light ⤵️ ![image](https://user-images.githubusercontent.com/23236957/107454243-678d2080-6b2b-11eb-9cd5-d03c2d3dd3ff.png)
Dark ⤵️ ![image](https://user-images.githubusercontent.com/23236957/107454298-87244900-6b2b-11eb-8eb1-ee91ef5b5670.png)

Is there something I'm missing?

josefaidt commented 3 years ago

Hi @guilhermedelyra yes you'll need to add the following CSS to your App file

<style>
  :global(html) {
    background-color: var(--theme-colors-background);
    color: var(--theme-colors-text);
  }
</style>
guilhermedelyra commented 3 years ago

Hi @guilhermedelyra yes you'll need to add the following CSS to your App file

<style>
  :global(html) {
    background-color: var(--theme-colors-background);
    color: var(--theme-colors-text);
  }
</style>

Ohhh thank you! 😁