logo-icon
STW UI

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 
<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:

CODE 
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 
<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).

CODE 
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:

CODE 
module.exports = {
	//...
   stwui: {
		themes: [
         'light', 
         {
            dark: {
				...require("stwui/plugin/colors/themes")["[data-theme=dark]"],
				primary: '#000000',
				primary-hover: '#DDDDDD'
			}
         }
      ]
	}
};