Theme Use CSS Variables or TailwindCSS to use the theme.
You can choose between using CSS variables or Tailwind CSS utility classes for
theming.
What's a Theme? A theme is web design manages the front-end design, establishing the overall appearance and functionality by managing its front-end design. Themes determine all design components: page layouts, backgrounds, color palettes, headers and footers, positioning, sizing, and typography.
Usage After installing the library, you can either use the theme by CSS Variables or TailwindCSS utility classes.
CSS Variables I've made it super easy to customize. All you need is 2 selectors, html {} and html.dark {}. The second one is for customizing the theme if you're using dark mode.
.html {
--base-primary: 222.2 47.4% 11.2%;
}
The background color of the following component will be hsl(var(--base-primary)).
Note : As if you're not using the theme in your tailwind.config.js, you must use the theme as following only when you're not using the theme in the components:
<div class="bg-[hsl(var(--base-primary)]">Hello</div>
But, if it is a LuxeyUI Component, it looks something like this:
<div class="bg-base-primary">Hello</div>
The good thing is that, you don't need to write bg-base-primary here, because in a primary button, it was already done.
CSS variables must be defined without color space function. See the Tailwind CSS documentation for more information.
List of Variables Here is the full list of the variables, use it as your need and especially customization.
:root {
--layout-background: 0 0% 100%;
--layout-foreground: 201.8 24.4% 8.8%;
--layout-divider: 0 0% 6.7% / 0.15;
--layout-focus: 212 100% 46.7%;
--content-1: 0 0% 100%;
--content-2: 240 4.8% 95.9%;
--content-3: 240 5.9% 90%;
--content-4: 240 4.9% 83.9%;
--base-default: 240 4.9% 83.9%;
--base-foreground: 240 4% 9.8%;
--base-foreground-light: 240 2.1% 18.8%;
--base-primary: 212 100% 46.7%;
--base-secondary: 270 66.7% 47.1%;
--base-success: 146 79.5% 43.9%;
--base-warning: 37 91.3% 55.1%;
--base-danger: 339.2 90.4% 51.2%;
--default-50: 0 0% 98%;
--default-100: 240 4.8% 95.9%;
--default-200: 240 5.9% 90%;
--default-300: 240 4.9% 83.9%;
--default-400: 240 5% 64.9%;
--default-500: 240 3.8% 46.1%;
--default-600: 240 5.2% 33.9%;
--default-700: 240 5.3% 26.1%;
--default-800: 240 3.7% 15.9%;
--default-900: 240 5.9% 10%;
--primary-50: 212.5 92.3% 94.9%;
--primary-100: 211.8 92.5% 89.6%;
--primary-200: 211.8 92.5% 79.2%;
--primary-300: 212.2 92.5% 68.8%;
--primary-400: 212.1 92.5% 58.4%;
--primary-500: 212 100% 46.7%;
--primary-600: 212.1 100% 38.4%;
--primary-700: 212.2 100% 28.8%;
--primary-800: 211.8 100% 19.2%;
--primary-900: 211.8 100% 9.6%;
--secondary-50: 270 61.5% 94.9%;
--secondary-100: 270 59.3% 89.4%;
--secondary-200: 270 59.3% 78.8%;
--secondary-300: 270 59.3% 68.2%;
--secondary-400: 270 59.3% 57.6%;
--secondary-500: 270 66.7% 47.1%;
--secondary-600: 270 66.7% 37.6%;
--secondary-700: 270 66.7% 28.2%;
--secondary-800: 270 66.7% 18.8%;
--secondary-900: 270 66.7% 9.4%;
--success-50: 146.7 64.3% 94.5%;
--success-100: 145.7 61.4% 88.8%;
--success-200: 146.2 61.7% 77.5%;
--success-300: 145.8 62.6% 66.5%;
--success-400: 146 62.4% 55.1%;
--success-500: 146 79.5% 43.9%;
--success-600: 146 79.9% 35.1%;
--success-700: 145.8 79.3% 26.5%;
--success-800: 146.2 79.8% 17.5%;
--success-900: 145.7 77.8% 8.8%;
--warning-50: 54.5 91.7% 95.3%;
--warning-100: 37.1 91.3% 91%;
--warning-200: 37.1 91.3% 82%;
--warning-300: 37 91.2% 73.1%;
--warning-400: 37 91.3% 64.1%;
--warning-500: 37 91.3% 55.1%;
--warning-600: 37 74.2% 44.1%;
--warning-700: 37 74% 33.1%;
--warning-800: 37.1 75% 22%;
--warning-900: 37.1 75% 11%;
--danger-50: 339.1 92% 95.1%;
--danger-100: 340 91.8% 90.4%;
--danger-200: 339.3 90% 80.4%;
--danger-300: 339.1 90.6% 70.8%;
--danger-400: 339 90% 60.8%;
--danger-500: 339.2 90.4% 51.2%;
--danger-600: 339 86.5% 40.8%;
--danger-700: 339.1 86% 30.8%;
--danger-800: 339.3 86.5% 20.4%;
--danger-900: 340 84.9% 10.4%;
&.dark {
--layout-background: 0 0% 0%;
--layout-foreground: 210 5.6% 92.9%;
--layout-divider: 0 0% 100% / 0.15;
--content-1: 240 5.9% 10%;
--content-2: 240 3.7% 15.9%;
--content-3: 240 5.3% 26.1%;
--content-4: 240 5.2% 33.9%;
--base-default: 240 5.3% 26.1%;
--base-foreground: 240 4.8% 95.9%;
--base-foreground-light: 240 5.9% 90%;
--base-secondary: 270 59.3% 57.6%;
--default-900: 0 0% 98%;
--default-800: 240 4.8% 95.9%;
--default-700: 240 5.9% 90%;
--default-600: 240 4.9% 83.9%;
--default-500: 240 5% 64.9%;
--default-400: 240 3.8% 46.1%;
--default-300: 240 5.2% 33.9%;
--default-200: 240 5.3% 26.1%;
--default-100: 240 3.7% 15.9%;
--default-50: 240 5.9% 10%;
--primary-900: 212.5 92.3% 94.9%;
--primary-800: 211.8 92.5% 89.6%;
--primary-700: 211.8 92.5% 79.2%;
--primary-600: 212.2 92.5% 68.8%;
--primary-500: 212.1 92.5% 58.4%;
--primary-400: 212 100% 46.7%;
--primary-300: 212.1 100% 38.4%;
--primary-200: 212.2 100% 28.8%;
--primary-100: 211.8 100% 19.2%;
--primary-50: 211.8 100% 9.6%;
--secondary-900: 270 61.5% 94.9%;
--secondary-800: 270 59.3% 89.4%;
--secondary-700: 270 59.3% 78.8%;
--secondary-600: 270 59.3% 68.2%;
--secondary-500: 270 59.3% 57.6%;
--secondary-400: 270 66.7% 47.1%;
--secondary-300: 270 66.7% 37.6%;
--secondary-200: 270 66.7% 28.2%;
--secondary-100: 270 66.7% 18.8%;
--secondary-50: 270 66.7% 9.4%;
--success-900: 146.7 64.3% 94.5%;
--success-800: 145.7 61.4% 88.8%;
--success-700: 146.2 61.7% 77.5%;
--success-600: 145.8 62.6% 66.5%;
--success-500: 146 62.4% 55.1%;
--success-400: 146 79.5% 43.9%;
--success-300: 146 79.9% 35.1%;
--success-200: 145.8 79.3% 26.5%;
--success-100: 146.2 79.8% 17.5%;
--success-50: 145.7 77.8% 8.8%;
--warning-900: 54.5 91.7% 95.3%;
--warning-800: 37.1 91.3% 91%;
--warning-700: 37.1 91.3% 82%;
--warning-600: 37 91.2% 73.1%;
--warning-500: 37 91.3% 64.1%;
--warning-400: 37 91.3% 55.1%;
--warning-300: 37 74.2% 44.1%;
--warning-200: 37 74% 33.1%;
--warning-100: 37.1 75% 22%;
--warning-50: 37.1 75% 11%;
--danger-900: 339.1 92% 95.1%;
--danger-800: 340 91.8% 90.4%;
--danger-700: 339.3 90% 80.4%;
--danger-600: 339.1 90.6% 70.8%;
--danger-500: 339 90% 60.8%;
--danger-400: 339.2 90.4% 51.2%;
--danger-300: 339 86.5% 40.8%;
--danger-200: 339.1 86% 30.8%;
--danger-100: 339.3 86.5% 20.4%;
--danger-50: 340 84.9% 10.4%;
}
}Expand
Note : See the Colors page on NextUI to learn more about the colors.
Adding new Colors To add new colors, you need to add them to your CSS file and to your tailwind.config.js file.
:root {
--custom: 38 92% 50%;
--custom-foreground: 48 96% 89%;
}
:root.dark {
--custom: 48 96% 89%;
--custom-foreground: 38 92% 50%;
}
module.exports = {
theme: {
extend: {
colors: {
warning: "hsl(var(--warning))",
"warning-foreground": "hsl(var(--warning-foreground))",
},
},
},
};
You can now use the custom utility class in your components.
<div className="bg-warning text-warning-foreground" />
tailwind.config.js To use the default theme more efficiently without writing those CSS Variables in your CSS file, copy & paste the following code in your tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "class",
content: ["./index.html", "./node_modules/luxeyui/dist/all.min.js"],
theme: {
extend: {
colors: {
layout: {
background:
"hsla(var(--layout-background) / <alpha-value>)",
foreground:
"hsla(var(--layout-foreground) / <alpha-value>)",
divider: "hsla(var(--layout-divider))",
focus: "hsla(var(--layout-focus) / <alpha-value>)",
},
content: {
1: "hsla(var(--content-1) / <alpha-value>)",
2: "hsla(var(--content-2) / <alpha-value>)",
3: "hsla(var(--content-3) / <alpha-value>)",
4: "hsla(var(--content-4) / <alpha-value>)",
},
base: {
default: "hsla(var(--base-default) / <alpha-value>)",
foreground: "hsla(var(--base-foreground) / <alpha-value>)",
foreground_light:
"hsla(var(--base-foreground-light) / <alpha-value>)",
primary: "hsla(var(--base-primary) / <alpha-value>)",
secondary: "hsla(var(--base-secondary) / <alpha-value>)",
success: "hsla(var(--base-success) / <alpha-value>)",
warning: "hsla(var(--base-warning) / <alpha-value>)",
danger: "hsla(var(--base-danger) / <alpha-value>)",
},
default: {
50: "hsla(var(--default-50) / <alpha-value>)",
100: "hsla(var(--default-100) / <alpha-value>)",
200: "hsla(var(--default-200) / <alpha-value>)",
300: "hsla(var(--default-300) / <alpha-value>)",
400: "hsla(var(--default-400) / <alpha-value>)",
500: "hsla(var(--default-500) / <alpha-value>)",
600: "hsla(var(--default-600) / <alpha-value>)",
700: "hsla(var(--default-700) / <alpha-value>)",
800: "hsla(var(--default-800) / <alpha-value>)",
900: "hsla(var(--default-900) / <alpha-value>)",
},
primary: {
50: "hsla(var(--primary-50) / <alpha-value>)",
100: "hsla(var(--primary-100) / <alpha-value>)",
200: "hsla(var(--primary-200) / <alpha-value>)",
300: "hsla(var(--primary-300) / <alpha-value>)",
400: "hsla(var(--primary-400) / <alpha-value>)",
500: "hsla(var(--primary-500) / <alpha-value>)",
600: "hsla(var(--primary-600) / <alpha-value>)",
700: "hsla(var(--primary-700) / <alpha-value>)",
800: "hsla(var(--primary-800) / <alpha-value>)",
900: "hsla(var(--primary-900) / <alpha-value>)",
},
secondary: {
50: "hsla(var(--secondary-50) / <alpha-value>)",
100: "hsla(var(--secondary-100) / <alpha-value>)",
200: "hsla(var(--secondary-200) / <alpha-value>)",
300: "hsla(var(--secondary-300) / <alpha-value>)",
400: "hsla(var(--secondary-400) / <alpha-value>)",
500: "hsla(var(--secondary-500) / <alpha-value>)",
600: "hsla(var(--secondary-600) / <alpha-value>)",
700: "hsla(var(--secondary-700) / <alpha-value>)",
800: "hsla(var(--secondary-800) / <alpha-value>)",
900: "hsla(var(--secondary-900) / <alpha-value>)",
},
success: {
50: "hsla(var(--success-50) / <alpha-value>)",
100: "hsla(var(--success-100) / <alpha-value>)",
200: "hsla(var(--success-200) / <alpha-value>)",
300: "hsla(var(--success-300) / <alpha-value>)",
400: "hsla(var(--success-400) / <alpha-value>)",
500: "hsla(var(--success-500) / <alpha-value>)",
600: "hsla(var(--success-600) / <alpha-value>)",
700: "hsla(var(--success-700) / <alpha-value>)",
800: "hsla(var(--success-800) / <alpha-value>)",
900: "hsla(var(--success-900) / <alpha-value>)",
},
warning: {
50: "hsla(var(--warning-50) / <alpha-value>)",
100: "hsla(var(--warning-100) / <alpha-value>)",
200: "hsla(var(--warning-200) / <alpha-value>)",
300: "hsla(var(--warning-300) / <alpha-value>)",
400: "hsla(var(--warning-400) / <alpha-value>)",
500: "hsla(var(--warning-500) / <alpha-value>)",
600: "hsla(var(--warning-600) / <alpha-value>)",
700: "hsla(var(--warning-700) / <alpha-value>)",
800: "hsla(var(--warning-800) / <alpha-value>)",
900: "hsla(var(--warning-900) / <alpha-value>)",
},
danger: {
50: "hsla(var(--danger-50) / <alpha-value>)",
100: "hsla(var(--danger-100) / <alpha-value>)",
200: "hsla(var(--danger-200) / <alpha-value>)",
300: "hsla(var(--danger-300) / <alpha-value>)",
400: "hsla(var(--danger-400) / <alpha-value>)",
500: "hsla(var(--danger-500) / <alpha-value>)",
600: "hsla(var(--danger-600) / <alpha-value>)",
700: "hsla(var(--danger-700) / <alpha-value>)",
800: "hsla(var(--danger-800) / <alpha-value>)",
900: "hsla(var(--danger-900) / <alpha-value>)",
},
},
scale: { 97: "0.97" },
borderRadius: { 14: "14px" },
},
},
plugins: [],
};Expand
Now you can freely use the utility classes in your html like this:
<div
class="bg-base-primary rounded-14 hover:scale-97 focus:outline-layout-focus"
>
Hello
</div>
I recommend using HSL colors for theming but you can also use other color formats if you prefer but it'll be a headache to customize.
See the Tailwind CSS documentation for more information on using rgb, rgba or hsl colors.