Colors & Themes
You can customize colors and themes in your project. You can change the colors of the theme by changing the properties in the src/tailwind.config.js file.
Step.1 : Updating Colors
You can update colors by changing the properties in the src/tailwind.config.js file.
js
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: "#F6F8FF",
100: "#EDF0FF",
200: "#D1DAFE",
300: "#B4C2FD",
400: "#8092FF",
500: "#4669FA",
600: "#3F5EDF",
700: "#2A3F96",
800: "#203071",
900: "#151F49",
},
secondary: {
50: "#F9FAFB",
100: "#F4F5F7",
200: "#E5E7EB",
300: "#D2D6DC",
400: "#9FA6B2",
500: "#A0AEC0",
600: "#475569",
700: "#334155",
800: "#1E293B",
900: "#0F172A",
},
},
},
},
};
Step.2 : Updating Themes
There are only two themes in the template. light and dark. You can choose any of these themes.