Theme

Learn how to use themes in MijnUI to create consistent and visually appealing user interfaces.

What is a Theme

A theme in MijnUI is a collection of predefined styles, including colors, layout attributes, and UI components. Themes ensure visual consistency across your application, making it easier to manage and scale your design system.

Setup

Note:

If you're using pnpm with a monorepo architecture, ensure your configuration points to the ROOT node_modules directory.

Install Required Dependencies

npm install tailwindcss-animate

Configure tailwind.config.ts

tailwind.config.ts

import { mijnui } from "@mijn-ui/react-theme"
import animationPlugin from "tailwindcss-animate"
 
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ...
    // make sure it's pointing to the ROOT node_module
    "./node_modules/@mijn-ui/react-theme/dist/**/*.js", 
  ],
  darkMode: "class", 
  plugins: [animationPlugin, mijnui({})], 
}

Usage

Once your tailwind.config.ts is configured, you can start using the predefined CSS variables in your components. Here's an example:

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>

      <body className="dark bg-background text-foreground">{children}</body>
    </html>
  )
}

Note:

For more details on customizing colors, check out the Colors section.

Default Plugin Options

export default {
  plugins: [
    mijnui({
      prefix: "mijnui", // prefix for themes variables
      defaultTheme: "light", // default theme from the themes object
      defaultExtendTheme: "light", // default theme to extend on custom themes
      layout: {}, // common layout tokens (applied to all themes)
      themes: {
        light: {
          layout: {}, // light theme layout tokens
          colors: {}, // light theme colors
        },
        dark: {
          layout: {}, // dark theme layout tokens
          colors: {}, // dark theme colors
        },
        // ... custom themes
      },
    }),
  ],
}

Themes Options

These are the options that you can use to apply custom configurations to your themes.

export default {
  plugins: [
    mijnui({
      themes: {
        light: {
          layout: {}, 
          colors: {} 
        },
        dark: {
          layout: {}, 
          colors: {} 
        },
        ... // custom themes
      }
    })
  ]
}

Nested themes

MijnUI supports nested themes, allowing you to apply different themes to different sections of your application:

<html class="dark">
  ...
  <div class="light">...</div>
  <div class="purple-dark">...</div>
</html>

Theme based variants

MijnUI supports nested themes, enabling you to apply different themes to specific sections of your application:

// In dark theme, background will be dark and text will be light.
// In light theme, background will be light and text will be dark.
 
<div class="dark dark:bg-gray-800 dark:text-white bg-white text-black">
  ...
  <div>Text color changes based on theme</div>
</div>
 
<div class="light light:bg-gray-100 light:text-black bg-black text-white">
  ...
  <div>Text color changes based on theme</div>
</div>

API Reference

The following table provides an overview of the various attributes you can use when working with themes in MijnUI:

Attribute	Type	Description	Default
prefix	`string`	The prefix for the css variables.	`mijnui`
defaultTheme	`light` \| `dark`	The default theme to use.	`light`
defaultExtendTheme	`light` \| `dark`	The default theme to extend.	`light`
layout	LayoutTheme	The layout definitions.	-
themes	ConfigThemes	The theme definitions.	-

Types

ConfigThemes

type ConfigTheme = {
  extend?: "light" | "dark"; // base theme to extend
  layout?: LayoutTheme; // see LayoutTheme
  colors?: ThemeColors; // see ThemeColors
};
 
type ConfigThemes = Record<string, ConfigTheme>;

LayoutTheme

type BaseThemeUnit = {
  small?: string;
  medium?: string;
  large?: string;
};
 
type FontThemeUnit = {
  small?: string;
  medium?: string;
  large?: string;
  tiny?: string;
};
 
interface LayoutTheme {
  /**
   * The default font size applied across the components.
   */
  fontSize?: FontThemeUnit;
  /**
   * The default line height applied across the components.
   */
  lineHeight?: FontThemeUnit;
  /**
   * The default radius applied across the components.
   * we recommend to use `rem` units.
   */
  radius?: BaseThemeUnit;
  /**
   * A number between 0 and 1 that is applied as opacity-[value] when
   * the component is hovered.
   */
  hoverOpacity?: string | number
  /**
   * A number between 0 and 1 that is applied as opacity-[value] when
   * the component is disabled.
   */
  disabledOpacity?: string | number;
  /**
   * The default height applied to the divider component.
   * we recommend to use `px` units.
   */
  dividerWeight?: string;
  /**
   * The border width applied across the components.
   */
  borderWidth?: BaseThemeUnit;
  /**
   * The box shadow applied across the components.
   */
  boxShadow?: BaseThemeUnit;
}

Note:

Note:

On this page