Customize theme

MijnUI comes with two predefined themes: light and dark. The themes are highly flexible, allowing you to tailor them to meet your project's unique needs. You can also create entirely new themes based on the default ones.

Each theme is built using Layout Tokens and Color Tokens, providing you with a comprehensive framework for customization.

Customizing Layout

Layout tokens allow you to modify key aspects of your application, such as spacing, font sizes, line heights, border radii, and more. These tokens can be applied globally across all themes or scoped to a specific theme.

Global Layout Customization

To demonstrate, let’s reduce the border radius, set thinner borders, and make disabled elements more opaque globally. Here's how to update your tailwind.config.ts:

import { mijnui } from "@mijn-ui/react-theme"
 
/** @type {import('tailwindcss').Config} */
export default {
  plugins: [
    mijnui({
      layout: {
        disabledOpacity: "0.3", // opacity-[0.3]
        radius: {
          small: "2px", // rounded-small
          medium: "4px", // rounded-medium
          large: "6px", // rounded-large
        },
        borderWidth: { 
          small: "1px", // border-small
          medium: "1px", // border-medium
          large: "2px", // border-large
        },
      },
      themes: {
        light: {},
        dark: {},
      },
    }),
  ],
};

As MijnUI components employ layout tokens, the modifications will be reflected across all components that utilize them. For instance, the Button component uses the radius token to set the border radius and the borderWidth token to define the border width when the variant is bordered.

So let's see how the Button component looks like after the changes.

import { Button } from "@mijn-ui/react-button";
 
export default function App() {
  return (
    <div className="flex gap-4">
      <Button variant="outlined" radius="md">
        Button
      </Button>
      <Button disabled color="primary" radius="md">
        Disabled
      </Button>
    </div>
  );
}

Customizing Colors

You can also customize color tokens, such as primary and focus, to create a unique look for your application. Here's an example of modifying the dark theme in your tailwind.config.ts:

import { mijnui } from "@mijn-ui/react-theme"
 
/** @type {import('tailwindcss').Config} */
export default {
  plugins: [
    mijnui({
      themes: {
        dark: {
          colors: { 
            primary: { 
              DEFAULT: "82 85% 67%", 
              foreground: "0 0% 0%", 
            }, 
            focus: "82 85% 67%", 
          }, 
        },
      },
    }),
  ],
};

import { Button } from "@mijn-ui/react-button";
 
export default function App() {
  return (
    <div className="flex gap-4">
      <Button color="primary" variant="filled">Filled</Button>
      <Button color="primary" variant="ghost">Ghost</Button>
    </div>
  );
}

🎉 That’s it! You’ve successfully customized the default theme. Check out the Colors section for more details about default colors and available tokens.