react-vario-theme

react-vario-theme is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the ThemeVarioProvider context.

Features

• 💡 Easily define themes in a TypeScript object
• 🌟 Singular Source of Truth
• 🔄 Instant theme switching
• 🎨 Access theme colors in react using ThemeProvider
• 💫 Supports multiple themes
• 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind
• 🤖 Built-in TypeScript support for strong typing

Usage

1. Define your theme

Create a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. Important: To make sure that your theme will work as intended use it in its own file, for example theme.ts

import { ThemeType } from "react-vario-theme";

export const varoTheme = {
  colors: {
    light: {
      primary: "#007bff",
      accent: {
        1: colorVariants({
          color: colors.accent[1],
          variants: { hover: -10, active: -10 },
          additionalColors: { text: colors.text.light },
        }),
      },
      text: {
        default: "#000000",
        link: "#007bff",
      },
    },
    dark: {
      text: {
        default: "#ffffff",
        link: "#007bff",
      },
    },
  },
  padding: {
    sm: "5px",
    md: "10px",
    lg: "20px",
  },
} as const satisfies ThemeType;

2. Generate css variables

npx react-vario-theme compile "path to your theme object" "path and name of the css/sass file you want to create" When the css variables are generated they can be used in css or in react using the theme context provider.

Compile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss
Watch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch

3. Optional: Tailwind support

You can get all your theme css variables in tailwind using "tailwindTheme"

import { tailwindColors, tailwindTheme } from "react-vario-theme";
import { type Config } from "tailwindcss";
import { varoTheme } from "./src/styles/theme";

export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: tailwindTheme(varoTheme),
  plugins: [],
} satisfies Config;

3. Use VarioThemeProvider

Wrap your application with the VarioThemeProvider.

import { varoTheme } from "~/styles/theme";
import { VarioThemeProvider } from "react-vario-theme";

const App = () => {
  return (
    <VarioThemeProvider theme={varoTheme}>
      <Component {...pageProps} />
    </VarioThemeProvider>
  );
};

4. Access Theme Variables

You can now access theme variables anywhere within your components.

import { useVarioTheme } from "react-vario-theme";
import { varoTheme } from "~/styles/theme";
const MyComponent = () => {
  const { theme, colorScheme, changeColorScheme } =
    useVarioTheme<typeof varoTheme>();

  return (
    <button
      style={{ backgroundColor: theme.colors.primary }}
    >
      Click Me
    </button>
  );
};

API

VarioThemeProvider

Props:

• theme: The theme object containing key-value pairs of CSS variables.

useVarioTheme<T>()

Returns:

• theme, colorScheme, changeColorScheme: An object containing the colors and variables of the theme, strongly typed with TypeScript when using typeof. All the variables will be equal to the css variable generated by react-vario-theme compile

UTIL Functions

Utils to help create your theme object

• generateValues
• lighten
• darken
• colorVariants
• brightnessVariants
• flatten
• flattenColors
• rgbToHex
• hexToRgb
• generateColors

generateValues<Count>(value, multiplier, text, count)

This function generates a dictionary (object) of values based on the specified count. It takes four parameters:

• value: The initial value.
• multiplier: A multiplier applied to each subsequent value.
• text: A text suffix added to each value.
• count: The number of values to generate.

It returns an object where keys are numbered from 1 to count, and values are calculated based on the formula value * multiplier^index + text.

lighten(hex, percent)

This function lightens a given hex color by a specified percentage. It takes two parameters:

• hex: The input hex color code (e.g., "#RRGGBB").
• percent: The percentage by which to lighten the color.

It returns a new hex color code that is lighter by the specified percentage.

darken(hex, percent)

This function darkens a given hex color by a specified percentage. It takes two parameters:

• hex: The input hex color code (e.g., "#RRGGBB").
• percent: The percentage by which to darken the color.

It returns a new hex color code that is darker by the specified percentage.

colorVariants(input)

This function generates color variants based on a primary color. It takes an object input with the following properties:

• color: The primary color.
• variants: An object with keys representing variant names and values representing the percentage of lightening for each variant.
• additionalColors (optional): An object with additional color names and their corresponding hex values.

It returns an object with color variants based on the primary color and additional colors if provided.

brightnessVariants(color, variants)

This function generates brightness variants of a given color. It takes two parameters:

• color: The input hex color code (e.g., "#RRGGBB").
• variants: An object with keys representing variant names and values representing the percentage of lightening for each variant.

It returns an object with brightness variants of the input color.

flatten(obj, prefix)

This function flattens a nested object into a flat object with keys formatted as ${prefix}-${nestedKey}. It takes two parameters:

• obj: The nested object to be flattened.
• prefix: A prefix to prepend to the keys.

It returns a flat object with flattened keys.

flattenColors(obj)

This is a specific use of the flatten function with the prefix "color-". It flattens an object with nested color definitions.

rgbToHex(r, g, b)

This function converts RGB color values to a hex color code. It takes three parameters:

• r: The red component (0-255).
• g: The green component (0-255).
• b: The blue component (0-255).

It returns a hex color code (e.g., "#RRGGBB").

hexToRgb(hex)

This function converts a hex color code to RGB color values. It takes one parameter:

• hex: The input hex color code (e.g., "#RRGGBB").

It returns an object with r, g, and b properties representing the RGB values.

generateColors(hex, count, reverse?)

This function generates an array of hex color codes based on the specified count. It takes three parameters:

• hex: The initial hex color code (e.g., "#RRGGBB").
• count: The number of color codes to generate.
• reverse (optional): A boolean flag to reverse the order of generated colors (default is false).

It returns an array of hex color codes, either in ascending or descending order, based on the provided parameters.