/*
color-theme: default reference: https://tailwindcss.com/docs/customizing-colors Minimal color options and variations. Almost all color variations can be played based off the few.
*/ :root {
--color-primary: #3b82f6; /* blue-400 */ --color-secondary: #2563eb; /* blue-600 */ --color-accent: #fb923c; /* orange-400 */ --background-color: #fafafa; /* gray-50 */ --background-color-alt: #f4f4f5; /* gray-100 */ --background-color-highlight: #e4e4e7; /* gray-200 */ --text-color: #3f3f46; /* gray-700 */ --text-color-alt: #52525b; /* gray-600 */
}
- data-theme=“dark”
-
{
--color-primary: #fb923c; /* orange-400 */ --color-secondary: #f59e0b; /* orange-500 */ --color-accent: #3b82f6; /* blue-400 */ --background-color: #52525b; /* gray-600 */ --background-color-alt: #3f3f46; /* gray-700 */ --background-color-highlight: #27272a; /* gray-800 */ --text-color: #e4e4e7; /* gray-200 */ --text-color-alt: #f4f4f5; /* gray-100 */
}
/* tbd: let's combined system preference with the mode */ /*@media (prefers-color-scheme: dark) {
:root { }
}*/