Ctrl + k


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.

if you are interested to create custom themes, you can create new issue at our Github repo, we will provide more detailed information.
© 2024 YeSvelte. All Rights Reserved