@horus.dev/tw-dynamic-themes
v0.0.3
Published
Dynamic themes for TailwindCSS
Downloads
16
Readme
@horus.dev/tw-dynamic-themes
This package provides a simple way to add dynamic themes to your Tailwind project.
Install the package
pnpm add @horus.dev/tw-dynamic-themesGetting Started
This package assumes a standard Tailwind setup, so make sure you have Tailwind installed and configured in your project before continuing.
- Choose your accent color and add it to your
tailwind.config.jsfile. Example:
import type { Config } from "tailwindcss";
import colors from "tailwindcss/colors";
import { dynamicTwClasses } from "@horus.dev/tw-dynamic-themes/tailwind";
const config: Config = {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
"index.html",
],
darkMode: "class",
theme: {
extend: {
colors: {
accent: dynamicTwClasses("accent", 40),
// These are not required, but recommended since it's
// best to use semantic names for your colors.
danger: colors.red,
success: colors.green,
},
},
},
};
export default config;- Within your app's main CSS file, add the following to ensure outline colors are updated when the theme changes:
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
@apply outline-accent-500 dark:outline-accent-400;
}- Dark mode is defined with the
darkclass. If you want to use dark mode, make sure to pass it to the HTML element. Example:
<html class="dark">
...
</html>- On page load, we need to set the theme. To do this, we need to call the
getVariablesfunction from the@horus.dev/tw-dynamic-themes/runtimemodule. Example:
import { getVariables } from "@horus.dev/tw-dynamic-themes/runtime";
async function bootstrap() {
const hue = localStorage.getItem("hue") ?? "40";
const variables = getVariables({ baseName: "accent", hue: Number(hue) });
Object.entries(variables).forEach(([key, value]) => {
document.documentElement.style.setProperty(key, value);
});
// Load your app here
}
bootstrap();- All set, with that code you should be able to use the
accentcolor in your Tailwind classes. Example:
<button
class="bg-accent-500 hover:bg-accent-600 text-white font-bold py-2 px-4 rounded"
>
Button
</button>Using a hue picker
This package doesn't provide a hue picker, but the original demo used the simple-hue-picker/react module. Ensure to import it dynamically with React.lazy to avoid loading it when it's not needed.