Search code examples
csssveltesveltekitcss-variables

How to use global CSS variables with Svelte


As you can see on the image below, my css variables is defined but doesn't shown up on the screen. On my react app it was worked but now it seems it cannot read my css variables. I have defined a lot of 5-colored themes and I want to switch between them. Easiest way that I know is using css variables... screenshot

I tried;

  • importing global.css file in app.html via in ,
  • importing global.css file in +layout.svelte
  • using :global()
  • and defining them in +layout.svelte file with tag as a result nothing is changed

Solution

  • All your colors are enclosed in quotes, that's just invalid CSS syntax.
    (Did you copy that from same CSS-in-JS definition?)