• customization
  • Themes

customization

Themes

Discover how to customize the default theme and understand the fundamentals of theming in FlyonUI.

FlyonUI Themes

How to use FlyonUI themes?

FlyonUI comes with several themes that you can use effortlessly. Each theme defines a set of colors applied across all FlyonUI elements. To use a theme, add its name in tailwind.config.js and activate it by adding the data-theme attribute to the HTML tag:

module.exports = {
  //...
  flyonui: {
    themes: ["light", "dark", "gourmet"]
  }
}


<html data-theme="gourmet"></html>

List of themes

light
A
A
A
A
A
A
A
dark
A
A
A
A
A
A
A
gourmet
A
A
A
A
A
A
A
corporate
A
A
A
A
A
A
A
luxury
A
A
A
A
A
A
A
soft
A
A
A
A
A
A
A

module.exports = {
  //...
  flyonui: {
    themes: ["light", "dark", "gourmet", "corporate", "luxury", "soft"]
  }
}

The default theme is light (or dark for dark mode), but you can change the default theme from tailwind.config.js .

Font family 


module.exports = {
  //...
  flyonui: {
    themes: [
      "light", // Default font family
      "dark", // Default font family
      "gourmet", // fontFamily: 'Rubik'
      "corporate", // fontFamily: 'Public Sans'
      "luxury", // fontFamily: 'Archivo'
      "soft" // fontFamily: 'Montserrat'
    ]
  }
}

The light and dark themes use the default font-sans font family, as specified in the official Tailwind documentation. To customize the default font family, refer to the Tailwind guide.

The following font families are important when using the gourmet, corporate, luxury, or soft themes.

<head>
  <!-- Gourmet : 'Rubik' -->
  <link
    href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
    rel="stylesheet"
  />
  <!-- Corporate : 'Public Sans' -->
  <link
    href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
    rel="stylesheet"
  />
  <!-- Luxury : 'Archivo' -->
  <link
    href="https://fonts.googleapis.com/css?family=Archivo:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
    rel="stylesheet"
  />
  <!-- Soft : 'Montserrat' -->
  <link
    href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
    rel="stylesheet"
  />
</head>

How to remove unused themes?

You can include only the themes you want in your project, reducing the size of your CSS file. In the example below:

  • gourmet will be the default theme for light mode.
  • dark will be the default theme for dark mode.
  • soft can be applied to any HTML tag using data-theme='soft'.
module.exports = {
  flyonui: {
    themes: ["gourmet", "dark", "soft"]
  }
}

How to disable all themes?

If you only want the default light and dark themes, set the themes config to false.

module.exports = {
  //...
  flyonui: {
    themes: false
  }
}

If you don’t want to include any themes and wish to disable all colors, set the themes config to an empty array.

module.exports = {
  //...
  flyonui: {
    themes: []
  }
}

How to use a theme only for a section of a page?

Add data-theme='THEME_NAME' to any element, and everything inside will adopt that theme. You can nest themes without any limits, forcing specific sections to use distinct themes.

<html data-theme="dark">
  <div data-theme="light">
    This div will always use the light theme.
    <span data-theme="corporate">This span will always use the corporate theme!</span>
  </div>
</html>

How to add a new custom theme?

You can add a new theme in the tailwind.config.js file. In the example below, we added a new theme called mytheme, and we’re also including the dark and gourmet themes.

  • The first theme (mytheme) will be the default theme.
  • The dark theme will be the default for dark mode.

Here, we define the necessary colors. Other colors (like button focus or text color on a primary button) will be generated automatically.

module.exports = {
  //...
  flyonui: {
    themes: [
      {
        mytheme: {
          primary: "#a991f7",
          secondary: "#f6d860",
          accent: "#37cdbe",
          neutral: "#3d4451",
          "base-100": "#ffffff"
        }
      },
      "dark",
      "gourmet"
    ]
  }
}

CSS variables in FlyonUI themes

FlyonUI themes offer a few optional CSS variables for customizing design elements per theme:

module.exports = {
  //...
  flyonui: {
    themes: [
      {
        mytheme: {
          primary: "#a991f7",
          secondary: "#f6d860",
          accent: "#37cdbe",
          neutral: "#3d4451",
          "base-100": "#ffffff",

          "--rounded-box": "1rem", // border-radius for large boxes
          "--rounded-btn": "0.5rem", // border-radius for buttons
          "--rounded-tooltip": "1.9rem", // border-radius for tooltip
          "--animation-btn": "0.25s", // button click animation duration
          "--animation-input": "0.2s", // input animation duration (e.g., checkboxes, switch)
          "--btn-focus-scale": "0.95", // button scale transform on focus
          "--border-btn": "1px", // button border width
          "--tab-border": "1px", // tab border width
          "--tab-radius": "0.5rem" // tab border-radius
        }
      }
    ]
  }
}

Custom CSS for a FlyonUI theme

You can apply custom styles to FlyonUI themes using CSS:

[data-theme="mytheme"] .btn {
  border-width: 2px;
  border-color: black;
}

How to customize an existing theme?

In your tailwind.config.js, you can require an existing FlyonUI theme and override certain colors. In the example below, we require and spread the light theme, then modify its primary and secondary colors:

module.exports = {
  //...
  flyonui: {
    themes: [
      {
        light: {
          ...require("flyonui/src/theming/themes")["light"],
          primary: "blue",
          secondary: "teal"
        }
      }
    ]
  }
}

How to add custom styles for a specific theme?

You can write custom styles for your elements for a specific theme. In this example, the .btn-twitter class will have the style only when the light theme is active.

module.exports = {
  //...
  flyonui: {
    themes: [
      {
        light: {
          ...require("flyonui/src/theming/themes")["light"],
          ".btn-twitter": {
            "background-color": "#1EA1F1",
            "border-color": "#1EA1F1"
          },
          ".btn-twitter:hover": {
            "background-color": "#1C96E1",
            "border-color": "#1C96E1"
          }
        }
      }
    ]
  }
}

How to apply Tailwind's 'dark:' selector for specific themes?

FlyonUI can be configured to use Tailwind’s dark: selector. To achieve this, modify your tailwind.config.js file to include the darkMode parameter. The dark: selector will apply to the FlyonUI theme you designate as dark. In the example below, the ’luxury’ theme is the dark theme:

module.exports = {
  content: ['./src/**/*.{astro,html,svelte,vue,js,ts,jsx,tsx}'],
  plugins: [require('flyonui')],
  theme: { ... },
  flyonui: {
    themes: ['soft', 'luxury']
  },
  darkMode: ['class', '[data-theme="luxury"]']
}