Use :host instead of :root to declare theme color variables

[1mehal]

Current Behavior

I'm using Skeleton to build a Chrome Extension (so using skeleton in shadow-dom), and colors are not working, because :root css value refers to a document, I would suggest switching to use :host variable, if it wouldn't break anything

Expected Behavior

When using Skeleton in shadow-dom container - colors should work

Steps To Reproduce

No response

Link to Reproduction / Stackblitz

No response

More Information

No response

[endigo9740]

@1mehal current we only provide support for Skeleton on SvelteKit. We mention this right at the top of the install page:

That said, I have heard of others using Skeleton to create Chrome extensions in the past, and this is the first I've heard of this issue specifically. I might encourage reviewing if there's any other options available on your end.

Additionally I'm willing to keep this open for a bit to test the :host option. My immediate concern would be that this might introduce a breaking change. If that's the case, this would have to be reserved for a major release.

So I just want to make sure I express clear expectations here - we're open to test this, but cannot promise we'll move forward with this at this time.

[1mehal]

@endigo9740 I do use skeleton with SveleKit
My suggestion is to switch to :host instead of root, I did it for my build and everything seems to be working fine

[endigo9740]

I do use skeleton with SveleKit

Gotcha. I think other users making extensions started with a simple Vite project with just Svelte (sans SvelteKit).

My suggestion is to switch to :host instead of root, I did it for my build and everything seems to be working fine

Right, but we have a responsibility to keep Skeleton working for everyone. Not just you and your project. We typically put a lot of consideration into changes that might have sweeping changes or introduce regressions or new edge cases.

On a different note, I'm going to ping one of our regular contributors that I seem to recall having setup a starter project for creating a Skeleton app for use in building Chrome extensions. He might be able to provide more guidance here.

@luke-hagar-sp @LukeHagar any help here?

[endigo9740]

Here it is, this is an article Luke authored:

https://dev.to/lukehagar/building-a-chrome-extension-with-sveltekit-3kb

Let me know if this helps at all.

[1mehal]

@endigo9740 I very well aware and respect your responsibility and do respect it!
Again, just to be clear: when I use Skeleton and rendering elements in shadowDom and styles are loosing their colors because they are declared under :root, when I switch to declaration under :host-> everything works
I couldn't find a reference, but seems to me fallback of :host, when there is no shadowDom, is to select :root, but you might now better.

[endigo9740]

In an effort to prepare for Skeleton v3, we're consolidate some related issues down to a single ticket. This will ensure that we can see the full context of requests when the time comes to refactor and update this feature going forward. If you wish to add additional feedback or suggestions, please so here:

• NEXT: New Theme Generator #1142