Skip to content

Add skeleton-5.css #888

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MrVauxs wants to merge 4 commits into
base: main
Choose a base branch
from
+25 −0
Open

Add skeleton-5.css #888

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e852dba
Refactor color variables in skeleton-5.css
MrVauxs Jul 20, 2026
b4a4555
Make the surface-content work on default dark mode
MrVauxs Jul 20, 2026
b2702fa
Add changeset
MrVauxs Jul 20, 2026
6effaad
Update skeleton-5.css
MrVauxs Jul 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/bold-cats-cry.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'layerchart': patch
---

Added skeleton-5.css
20 changes: 20 additions & 0 deletions packages/layerchart/src/lib/styles/skeleton-5.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
@import './core.css';

.lc-root-container {
--color-primary: var(--color-primary-500);

--color-surface-100: var(--color-surface-50-950);
--color-surface-200: var(--color-surface-100);
--color-surface-300: var(--color-surface-200);
--color-surface-content: light-dark(
var(--typo-base--color-light),
var(--typo-base--color-dark)
);
Comment on lines +9 to +12

@techniq techniq Jul 20, 2026

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

haven't typically used light-dark() for light/default color and typically just set to light mode by default.

shouldn't technically matter and has descent browser support (2 years+, Safari 17.5+)

@MrVauxs MrVauxs Jul 20, 2026 •
edited
Loading

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The problem is that Tailwind uses prefers-color-scheme by default which makes picking one break the other. And Skeleton 5 does not have one variable for color anymore, it has to be explicitly light or dark.

@techniq techniq Jul 20, 2026

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, I think Skeleton hasn't had a single variable for color since at least 3.x (the main reason we use html.dark to swap variables, unlike the other integrations like shadcn-svelte, daisy-ui, etc which are much simplier).

Using light-dark() will make font color work, but in that vein we'd probably want to do the same for the surface colors (as if you're not using <html class="dark"> you could get --typo-base--color-dark for text in dark mode but also the light surface-* colors.

https://www.skeleton.dev/docs/svelte/guides/mode

Will take a little experimentation to make sure prefers-color-scheme and html.dark works if we go down this path. I've always preferred using html.dark since typically a user with light/dark modes for their site also have an explicit toggle (see also: https://www.skeleton.dev/docs/svelte/guides/cookbook/light-switch).

Regardless, we can iterate on this. Also the integration styles (skeleton-5.css, etc) are provided to streamline setup but also are more a reference if you handle things differently (such as using another strategy like <html data-mode="dark">)


html.dark & {
--color-surface-100: var(--color-surface-700);
--color-surface-200: var(--color-surface-800);
--color-surface-300: var(--color-surface-900);
--color-surface-content: var(--typo-base--color-dark);
}
}
Loading