Colors

MijnUI's plugin allows you to customize the color palette of your theme, including primary, secondary, accent, and more. These color configurations are applied globally across all components, ensuring a consistent look and feel throughout your application.

Default Color Palette

MijnUI provides a default color palette designed for most use cases. Colors are categorized into base, common, and status, each serving specific UI needs.

• Base Colors: Fundamental colors for your application.

• Common Colors: Frequently used colors for UI elements.

• Status Colors: Colors indicating different statuses.

Base Colors

Common Colors

Status Colors

Customizing Colors

You can customize the theme colors by defining them in the themes object within the mijnui plugin configuration. Below is an example of how to configure colors for both light and dark themes, as well as a custom theme:

  themes: {
    light: {
      colors: { 
        background: "220 14% 96%", 
        foreground: "0 0% 0%", 
        primary: { 
          DEFAULT: "29 100% 52%", 
          foreground: "0 0% 100%", 
        }, 
        // ... rest of the colors
      },
    },
    dark: {
      colors: {
        background: "0 0% 4%", 
        foreground: "0 0% 96%", 
        primary: { 
          DEFAULT: "29 100% 52%", 
          foreground: "0 0% 100%", 
        }, 
        // ... rest of the colors
      }
    },
    mytheme: {
      colors: {
        extend: "dark",
        colors: { 
          primary: { 
            DEFAULT: "82, 85%, 67%", 
            foreground: "0 0% 0%", 
          }, 
          ring: "0 0% 0%"
        }
      }
    }
  },

Using Default Colors

The default color palette can be applied throughout your project, including text, background, and border colors. This makes it easy to maintain consistency in your UI.

<div className="bg-default text-primary rounded-small px-2 py-1">
  This is a default color box
</div>

Importing Colors

You can access default colors in your TypeScript files by importing them from: @mijn-ui/react-theme

import { defaultColors } from "@mijn-ui/react-theme";
 
console.log(defaultColors.dark.warning.DEFAULT); // #EAB308
console.log(defaultColors.light.primary.DEFAULT); // #F97316

Using CSS Variables

MijnUI generates CSS variables for each color following the format --prefix-colorname-shade. By default, the prefix is mijnui, but you can customize it by setting the prefix option in your configuration:

export default {
  plugins: [
    mijnui({
      prefix: "myapp", 
    }),
  ],
}

Then you can use the CSS variables in your CSS files.

/* With default prefix */
.my-component {
  background-color: hsl(var(--mijnui-primary));
}
/*  With custom prefix */
.my-component {
  background-color: hsl(var(--myapp-primary));
}