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 Color Tokens, providing you with a comprehensive framework for color customization.

Customizing Colors

You can customize color tokens, such as primary and secondary, 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%", 
            }, 
            secondary: { 
              DEFAULT: "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>
  );
}