@horus.dev/tw-dynamic-themes NPM

@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-themes

Getting 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.js file. 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 dark class. 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 getVariables function from the @horus.dev/tw-dynamic-themes/runtime module. 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 accent color 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.

Acknowledgments

culori

@everything-registry/sub-chunk-401

0.0.3

5 months ago

0.0.2

5 months ago

0.0.1

5 months ago