STWUI Themes
Create your themes the way you want them.
How to use STWUI Themes? STWUI comes with a light and dark theme, which you can use with no extra effort. Each theme defines a set of colors which will be used on all STWUI components. To use a theme, add data-theme attribute to your html tag:
<html data-theme="dark"></html>
Basic Themes
To utilize the light and dark themes with no changes modify your tailwind.config.cjs
file with the following:
module.exports = {
// ...
stwui: {
themes: ['light', 'dark']
}
};
If you don't want to use a theme, simply do not include it in the themes array.
How to use a theme only for a section of a page?
Add data-theme="THEME_NAME" to any element and everything inside will have your theme. You can nest themes and there is no limit! You can force a section of your HTML to only use a specific theme.
<html data-theme="dark">
<div data-theme="light">
This div will always use light theme
<span data-theme="my-awesome-theme">This span will always use retro theme!</span>
</div>
</html>
How to add a new custom theme?
You can add a new theme from tailwind.config.cjs
file. In the below example,
I added a new theme called mytheme and I'm also including light and dark
themes.
• The first theme (mytheme) will be the default
theme.
• dark theme will be the default theme fordark
mode.
In the below example, I have the required colors. All other colors will be generated
automatically (Like the color of button when you focus on it or the color of text on a
primary
button).
module.exports = {
//...
stwui: {
themes: [
{
mytheme: {
// Required
primary: '#2563eb',
default: '#E4E6EB',
danger: '#dc2626',
surface: '#ffffff',
background: '#F0F2F5',
border: '#E8E9EC',
hover: '#000000'
// Optional
primary-hover: '#1d4ed8',
primary-content: '#ffffff',
default-hover: '#f3f4f6',
default-content: '#1f2937',
danger-hover: '#b91c1c',
danger-content: '#ffffff',
content: '#050505',
secondary-content: '#545455',
info-content: '#1d4ed8',
info: '#3b82f6',
info-secondary-content: '#2563eb',
info-icon: '#60a5fa',
success-content: '#166534',
success: '#22c55e',
success-secondary-content: '#15803d',
success-icon: '#4ade80',
error-content: '#991b1b',
error: '#ef4444',
error-secondary-content: '#b91c1c',
error-icon: '#f87171',
warn-content: '#854d0e',
warn: '#eab308'
warn-secondary-content: '#a16207',
warn-icon: '#facc15'
},
},
"dark",
"light",
],
},
}
How to customize an existing theme?
In your tailwind.config.cjs
, you can require an existing STWUI theme
and override some colors. In the below example, I require and spread light
theme and change its
primary
and primary-hover colors:
module.exports = {
//...
stwui: {
themes: [
'light',
{
dark: {
...require("stwui/plugin/colors/themes")["[data-theme=dark]"],
primary: '#000000',
primary-hover: '#DDDDDD'
}
}
]
}
};