Color utilities
Instead of using hard-coded Tailwind CSS colors, I decided to use bg-theme-...
and text-theme...
instead of bg-red-...
or text-red-...
.
This way, where the application accent color is.
Configuration
You can customize the default theme color for your project by changing the theme
extended color in tailwind.config.js
:
tailwind.config.js
...
module.exports = {
...
theme: {
extend: {
colors: {
...
theme: {
50: colors.blue[50],
100: colors.blue[100],
200: colors.blue[200],
300: colors.blue[300],
400: colors.blue[400],
500: colors.blue[500],
600: colors.blue[600],
700: colors.blue[700],
800: colors.blue[800],
900: colors.blue[900],
},
},
},
},
...
};
Light Mode Samples
Blue
![Theme color blue](/_next/static/media/theme-color-blue.6de2c77270400e808f4e97782975d0b0.png)
Indigo
![Theme color indigo](/_next/static/media/theme-color-indigo.9b4fa4605f0e7bc4bd6b6b11ea53123c.png)
Red
![Theme color red](/_next/static/media/theme-color-red.c91580d5918c895a5cadc8dc3bc8f6cc.png)
Rose
![Theme color rose](/_next/static/media/theme-color-rose.91a30ba04c72f5507c111e9c0aece391.png)
Green
![Theme color green](/_next/static/media/theme-color-green.53b9bf5f508f66d581d8cc9ededa5c63.png)
Teal
![Theme color teal](/_next/static/media/theme-color-teal.19556433e465f4f7eb19a47cdc773b62.png)
Dark Mode Samples
Blue
![Theme color blue - Dark Mode](/_next/static/media/theme-color-blue-dark.0df13d19872b843a86ded569dc1675fe.png)
Indigo
![Theme color indigo - Dark Mode](/_next/static/media/theme-color-indigo-dark.3bdf426010c20e16c6b114f0b4bb13fa.png)
Red
![Theme color red - Dark Mode](/_next/static/media/theme-color-red-dark.8fd7add959f9bf15f1cd44750402a453.png)
Rose
![Theme color rose - Dark Mode](/_next/static/media/theme-color-rose-dark.66580d798cc9c5a83f070a8203a39cb3.png)
Green
![Theme color green - Dark Mode](/_next/static/media/theme-color-green-dark.5e45d57fa6eb8a283e78464e206cce0e.png)
Teal
![Theme color teal - Dark Mode](/_next/static/media/theme-color-teal-dark.e579eb79e12a5b459336e5050a21e205.png)