xraylarac/tailwind-variable-theming

@rstacruz/tailwind-variable-theming

Small utility to define multiple themes using CSS variables

NB: This is an experimental micro-utility.

Usage

Define a theme using createTheme (1), then inject the config it generates into your project's Tailwind config (2).

// tailwind.config.js
const { createTheme } = require('@rstacruz/tailwind-variable-theming')
const { colors } = require('tailwindcss/defaultTheme')

// Define a theme [1]
const theme = createTheme({
  name: 'default',
  colors: {
    base: {
      bodyBg: colors.white,
      bodyText: colors.gray['900'],
    },
    input: {
      baseBg: colors.gray['100'],
      baseText: colors.gray['900'],
    },
  },
})

// Include the variables and the plugin to your Tailwind config [1]
module.exports = {
  theme: {
    extend: {
      colors: {
        ...theme.config.colors,
      },
    },
  },
  variants: {},
  plugins: [theme.plugin],
}

The plugin creates a utility which can be loaded onto :root.

:root {
  @apply theme-default;
}

Result

The config object (theme.config.colors) will define colors as CSS variables. This follows what Tailwind would recommend for switching themes (docs).

Input	Output
.box { background: theme('colors.base.bodyBg'); }	.box { background: var(--base-body-bg); }
.paragraph { @apply text-base-bodyBg; }	.paragraph { color: var(--base-body-bg); }

The plugin (theme.plugin) will create a utility to define those variables, which can be used in :root via @apply.

Input	Output
:root { @apply theme-default; }	:root { --base-body-bg: #fff; --base-body-text: #1a202c; --input-body-bg: #f7fafc; --input-body-text: #1a202c; }

Examples

Creating a dark theme

Two themes can be defined for default and dark themes.

// Define themes
const defaultTheme = createTheme({
  name: 'default',
  colors: {
    /*...*/
  },
})

const darkTheme = createTheme({
  name: 'dark',
  colors: {
    /*...*/
  },
})

// Include the variables and the plugin to your Tailwind config
module.exports = {
  theme: {
    extend: {
      colors: {
        // Only one will be needed here
        ...defaultTheme.config.colors,
      },
    },
  },
  variants: {},
  plugins: [defaultTheme.plugin, darkTheme.plugin],
}

CSS media queries can be used to define an alternate theme.

:root {
  @apply theme-default;

  @media (prefers-color-scheme: dark) {
    @apply theme-dark;
  }
}

Thanks

MIT