Theming

Using tailwindcss with the theme package for theming.


To maintain a consistent look and feel across the application, this project uses Material Design as the design system. This is achieved by using Tailwind CSS as the utility-first CSS framework for generating a consistent design system that can be easily customized.

How to customize the theme

By default, the theme is set to the default Material Design theme. To customize the theme, you can modify the tailwind.config.js and pass in the custom theme object to the andoreui() function.

tailwind.config.js
module.exports = {
  ...,
  plugins: [
    require('@andore-ui/theme')({
      theme: {
        colors: {
          primary:{
            DEFAULT: '#FF0000',
          }
        },
      },
    }),
  ],
};

This example will override only the primary color of the theme.


theme property

As we saw in the previous example, the theme object is passed to the andoreui() function. You can customize the following properties of the theme:


  • animation: The animations of the theme.
  • borderRadius: The border radius scale of the theme.
  • boxShadow: The box shadow scale of the theme.
  • colors: The color palette of the theme.
  • spacing: The spacing scale of the theme.

tailwind.config.js
module.exports = {
    ...,
    plugins: [
        require('@andore-ui/theme')({
            theme:{
                colors: {
                    primary:{
                        DEFAULT: '#FF0000',
                    },
                    secondary:{
                        DEFAULT: '#00FF00',
                    },
                },
            }
        }),
    ],
};

enabledCssVariables property

By default, the andoreui plugin does not generate CSS variables for the theme. If you want to enable CSS variables for the theme, you can set the enabledCssVariables property to true.

tailwind.config.js
module.exports = {
  ...,
  plugins: [
    require('@andore-ui/theme')({
      enabledCssVariables: true,
    }),
  ],
};

This will generate CSS variables for the theme colors. For example, the primary default color will be available as a CSS variable named --aui-primary.

All colors will be available as CSS variables prefixed with --aui-[color]-.