Theme Generator

Design and personalize your own unique theme with ease and make it truly yours. Tailor every detail to reflect your style and preferences!

FlyonUI Theme Generator

You can add custom themes to the tailwind.config.js file within the flyonui > themes array. This page allows you to select desired color values and preview how components will appear with your chosen palette.

Additionally, you can define optional colors to gain finer control over specific elements, such as button focus states or button text colors.

Visit the Colors page for a complete list of available color names.

For a detailed guide on customizing design elements like border-radius or animations, check out the Themes page.

tailwind.config.js

module.exports = {
flyonui: {
  themes: [
    {
      mytheme: {Pick
        
            },
    },
  ],
},
plugins: [
  require('flyonui'),
],
//...
}

Preview

Colors

Icons