Skeleton Next - Update 5 - Theme Generator #2544
Replies: 1 comment 2 replies
-
|
I was playing a bit with the style, it is really cool. But I'm surprised: surface color "Mid" changes both the background color and the margin color of the box, but I can't use it to just have a white background and a grey border. Am I missing something, or will it be possible to do such changes later? Similarly, I can't find how to decouple the colors of some components only, for instance I find it very heavy to have all forms with a background color, but I do like having the last "total" line of arrays with a color. Would be great to be able to change this, ideally directly from the editor. |
Beta Was this translation helpful? Give feedback.
-
|
@tobiasBora I'd recommend watching the video walkthrough where I demonstrate how this operates. You can definitely have a pure white background, and I show this here: https://www.youtube.com/watch?v=cccorwki0-M&feature=youtu.be
These sorts of meta changes go beyond the scope of the themes and generator. The theme is meant to serve as a baseline or foundation for your app, not the end all be all solution for styling. In my latest walkthrough I also show off a "theme enhancement" technique, which involves abstracting classes. This might be closer to what you're after: https://www.youtube.com/watch?v=SiTaFCQ-xd0 There's a lot more we want to cover regarding styling, so keep an eye out for more dedicated guides around this topic in the future! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks a lot! |
Beta Was this translation helpful? Give feedback.
-
Hey everyone, Chris here from the Skeleton crew! This post is part of an ongoing series of updates as we progress towards Skeleton v3 (aka Skeleton "Next"). We're excited to share some exciting updates today, including a first look at the new v3 Theme Generator and early preview of a few of our newest themes.
As usual, we've provide a quick summary post below, as well as an in-depth video walkthrough.
Useful Links
Theme Generator
The big update for today is of course the introduction of the new v3 theme generator. In additional to being a new standalone site, this comes with a slew of new options and features. This greatly expands your ability to update and customize themes to your heart's content.
The most critical updates include:
Keep in mind this represents only the base theme itself, and not the entire application design. However, we do have plans to continue to grow and expand the generator's features over time with a number of useful additions.
Themes
Using the new generator, we've created a handful of new styles to preview on the Skeleton documentation website. See the picker at the top-right. This will remain in effect for all page features, and of course supports light/dark mode. While theme selection may be limited currently, we expect this to grow over time, including: new fonts, background images, and more. Keep an eye out for these additions over time.
New Components
Finally, we also have new new components for Skeleton v3, including support for both React and Svelte:
App Bars
https://next.skeleton.dev/docs/components/app-bar/react
Avatars
https://next.skeleton.dev/docs/components/avatar/react
What's Next
With themes and theme generation now established, this enables us to resume work on our Tailwind plugin, resolving a few outstanding issues and helping provide better color balance per theme. Beyond that, we expect to see an uptick in component contributions soon, as well as more complex features such as integrations and support for modals, popups, and more.
Beta Was this translation helpful? Give feedback.
All reactions