Replies: 3 comments 3 replies
-
|
Hey @3goats since this is a question I've moved your issue over to the Discussions section here on our repo. Per your issue, if I understand the ask, you're wanting to override the theme in a localized fashion for a select portion of the page? Is that correct? If so the answer is yes, this is possible. In fact, we use this technique to generate the theme previews under Preset Themes here: Here's the source for how that operates: It's exactly what you would expect The thing not shown here is you have to ensure you have multiple themes registered in your layout.css file. We discuss this process here: So the general idea is:
Let me know if this helps! |
Beta Was this translation helpful? Give feedback.
-
|
Yes exactly - basically I have some custom Svelte components that I'm using Skeleton to provide the UI elements. The components are then used in Astro/Starlight project. However, the UI elements seem to be inheriting the overall styles/theming from the Astro/Starlight environment. So I would like the ability to style/theme them directly within the components. |
Beta Was this translation helpful? Give feedback.
-
|
Ahh I see, so you're using Starlight, not just Astro directly. Hmm, unfortunately if Starlight has their own style system I can't guarantee it'll play well with Skeleton. There's not really great mechanics in place to isolate components in general (Skeleton or otherwise) from adopting the inherited styles from their surrounding scope. Global or otherwise. It may not be the advice you want, but we originally considered using Starlight for our own doc sites, but very quickly opted for Astro alone. There's been a couple pain points, but overall we came away VERY pleased with Astro itself. Maybe take a look at our source and see if if it could work for you? Everything is MIT licensed so take whatever you find! :) What I'll say is at present we don't support Starlight, but I'll keep an ear out. If there's enough interest we can consider looking some kind of integration guide. Assuming this is technically possible. I'd need to do some research to confirm one way or the other. |
Beta Was this translation helpful? Give feedback.
-
|
OK so I did some experimentation. Here's my Svelte component. If I set the <script lang="ts">
import { Tabs } from '@skeletonlabs/skeleton-svelte';
</script>
<div data-theme="crimson" class="space-y-4">
<div class="flex gap-4">
<button type="button" class="btn preset-filled-primary-500">Button</button>
<button type="button" class="btn preset-tonal-primary">Button</button>
<button type="button" class="btn preset-outlined-primary-500">Button</button>
</div>
<div class="flex gap-4">
<button type="button" class="btn preset-filled-secondary-500">Button</button>
<button type="button" class="btn preset-tonal-secondary">Button</button>
<button type="button" class="btn preset-outlined-secondary-500">Button</button>
</div>
<div class="flex gap-4">
<button type="button" class="btn preset-filled-tertiary-500">Button</button>
<button type="button" class="btn preset-tonal-tertiary">Button</button>
<button type="button" class="btn preset-outlined-tertiary-500">Button</button>
</div>
<div class="flex gap-4">
<button type="button" class="btn preset-filled-success-500">Button</button>
<button type="button" class="btn preset-tonal-success">Button</button>
<button type="button" class="btn preset-outlined-success-500">Button</button>
</div>
<div class="flex gap-4">
<button type="button" class="btn preset-filled-warning-500">Button</button>
<button type="button" class="btn preset-tonal-warning">Button</button>
<button type="button" class="btn preset-outlined-warning-500">Button</button>
</div>
<div class="flex gap-4">
<button type="button" class="btn preset-filled-error-500">Button</button>
<button type="button" class="btn preset-tonal-error">Button</button>
<button type="button" class="btn preset-outlined-error-500">Button</button>
</div>
<div class="flex gap-4">
<button type="button" class="btn preset-filled-surface-500">Button</button>
<button type="button" class="btn preset-tonal-surface">Button</button>
<button type="button" class="btn preset-outlined-surface-500">Button</button>
</div>
</div>
<div data-theme="crimson"class="space-y-4">
<Tabs defaultValue="overview">
<Tabs.List>
<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
<Tabs.Trigger value="features">Key features</Tabs.Trigger>
<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
<Tabs.Indicator />
</Tabs.List>
<Tabs.Content value="overview">
A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to
deeper docs.
</Tabs.Content>
<Tabs.Content value="features">
List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility, theming,
integrations).
</Tabs.Content>
<Tabs.Content value="activity">
Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
actionable.
</Tabs.Content>
</Tabs>
</div> |
Beta Was this translation helpful? Give feedback.
-
|
@3goats unfortunately I'm not really sure I can provide any further help here. There's no magic on Skeleton's end. This works simply through CSS scoping. Here's an extremely minimal example: https://play.tailwindcss.com/AyJVMhnIPI
The reason for this is the default theme value is blue, then whatever the closest wrapping You can even try reversing the This is exactly how Skeleton themes are setup. Default While themes use their own respective data-attribute to define "overrides": So if scoping is not working as expected here, something else may be at play. It could be an artifact of how Astro renders things. The island architecture might be worth looking into for example: As well as the various options for component hydration: But I know it is possible for this to work in some manner, as the theme selected on our documentation is using this technique. The only difference is the attributes is set WITHIN the component, rather than a wrapping element. All Skeleton components can take custom attributes, so you might try setting this directly on the tab component itself like this: If the above doesn't help, I might suggest taking my minimal example to Astro's support and explaining what you're trying to do. Maybe create a minimal reproduction without Skeleton. They might be able to provide further support. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks Chris - I did take a look at this and did try applying the data-theme attribute directly WITHIN the component, but it still seems to get overridden.
I managed to get a pretty good solution going using Ark and by individually styling with tailwind within the component- not as convenient as I would have liked but gets me going for now until I get some more time to revisit using Skeleton.
Appreciate you prompt reply’s.
Carl
… On 19 Mar 2026, at 14:42, Chris Simmons ***@***.***> wrote:
@3goats <https://github.com/3goats> unfortunately I'm not really sure I can provide any further help here. This works simply through CSS scoping. Here's an extremely minimal example:
https://play.tailwindcss.com/AyJVMhnIPI
If both data-theme attributes are the custom color uses the blue @theme value
If the foo theme attribute is wrapped, it sets the test color to red
If the bar theme attribute is wrapped within, it sets the test color to green
The reason for this is the default theme value is blue, then whatever the last/closet wrapping data-attribute takes precedence.
You can even try reversing the foo and bar themes to see this play out.
This is exactly how Skeleton themes are setup.
Default @theme colors are set here:
https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton/src/base/theme.css#L48
While themes use their own respective data-attribute to define "overrides":
https://github.com/skeletonlabs/skeleton/tree/main/packages/skeleton/src/themes
So if scoping is not working as expected here, something else may be at play. It could be an artifact of how Astro renders things. The island architecture might be worth looking into for example:
https://docs.astro.build/en/concepts/islands/
As well as the various options for hydration:
https://docs.astro.build/en/guides/framework-components/#hydrating-interactive-components
But I know it is possible for this to work in some manner, as the theme selected on our documentation is using this technique. The only difference is the attributes is set WITHIN the component, rather than a wrapping element.
—
Reply to this email directly, view it on GitHub <#4302 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEHTBZMCL4YL25N33CXVWL4RQBLRAVCNFSM6AAAAACWXCKFJKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMMRRGAYDCNI>.
You are receiving this because you were mentioned.
|
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi, hopefully this is a fairly quick question. Is there a way to set the 'data-theme' attribute against elements other than than the HTML element e.g a Div. I'm building some Astro components in svelte that I need to style independently to the main layout.
I was able to achieve my objective using Zag, however I would like toga e some pre-styled components.
Beta Was this translation helpful? Give feedback.
All reactions