Allow for global customization of themes

N00nDay / stwui

Opinionated yet customizable Svelte-TailwindCSS component library

MIT License

447 stars 21 forks source link

Currently, the library forces the user to either to use the existing light and dark themes baked in, recreate each component for reuse with their own style, or overwrite each class they don't want every single time they use a component. This is not ideal and I have been working on a solution for this and have finally landed on a solid plan to move forward. Theming will be handled via css variables or in the stwui.theme object in your tailwind.config.cjs.

tailwind.config.cjs

stwui: {
  themes: [
    'light',
    'dark'
    {
      myCustomTheme: {
        primary: 'myPrimaryColor',
        danger: 'myDangerColor',
        ...
        --some-variable: 'someValue'
      }
    }
  ]
}

This will be a breaking change and will take significant work to finish and when upgrading your projects will most likely cause styling breakage.

I will be using this Issue to track my progress for anyone that is interested in tracking it. I will also be posting a Discussion Announcement when I am close to the release detailing all the changes and how to migrate your existing projects.

Components

Documentation

Done!

Library

[x] Accordion

[x] Alert

[x] Autocomplete

[x] Avatar

[x] AvatarGroup

[x] Badge

[x] Breadcrumbs

[x] Button

[x] ButtonGroup

[x] Card

[x] Carousel

[x] Checkbox

[x] Chip

[x] Currency

[x] Datepicker

[x] Divider

[x] Drawer

[x] Dropdown

[x] Empty

[x] Feed

[x] FilePicker

[x] FilePreview

[x] Grid

[x] Icon

[x] Input

[x] InputNumber

[x] Layout

[x] Lightbox

[x] List

[x] Media

[x] Menu

[x] Modal

[x] Notification

[x] Pagination

[x] Post

[x] Progress

[x] Radio

[x] Rating

[x] Select

[x] Slider

[x] Statistic

[x] Steps

[x] Swap

[x] Table

[x] Tabs

[x] TextArea

[x] Timeline

[x] Toggle