Theming
The theming feature in YeSvelte allows you to customize the appearance of the components to
match your project's design system or visual preferences. By following our standard class naming
conventions, you can easily create your own themes using CSS.
YeSvelte follows a standard naming convention for CSS class names, making it simple to apply
your custom styles. The class names are designed to target specific elements and states within
the components.
for example assume Button component, for default .y-button class is
applied, and you can customize style of all buttons, by overriding .y-button class.
and also unique classes are applied for different states of component. for each css property,
.{prefix}-{component}-{key}-{value} is applied.
will generate:
Boolean properties
and for boolean properties, .{prefix}-{component}-{key} is applied.
will generate:
We provide tabler and DaisyUI themes, for documentation site you can check using top-right
select input.
to customize components you simply override css class of components.
Note:
to override styles of components, sometimes you will need to use !important.
if you are interested to create custom themes, you can create new issue at
our Github repo, we will provide more detailed information.