Dark Mode Support

BladewindUI ships with support for dark mode for all components. The colors.gray palette is used for BladewindUI's dark mode as defined in its tailwind.config.js file.

    
        // your-project/vendor/mkocansey/bladewind/tailwind.config.js
  theme: {
    extend: {
      colors: {
        ...
        dark: colors.gray,
        ...
      }
},
    
    

To change the colour used for dark mode, simply define an overwriting value in your project's tailwind.config.js.

    
        // your-project/tailwind.config.js
  theme: {
    extend: {
      colors: {
        ...
        dark: colors.slate,
        ...
      }
},
    
    

BladewindUI does not use specific colours for its dark mode definitions, instead, it uses the dark alias, thus, any colour defined for the dark key in the config file will be used.

From the example above, dark mode will now use the slate palette instead of gray.

Base Colour and DarkMode Selector

Base Colour

Considering every user can have their own base colour when building for dark mode support, the BladewindUI components had to make an assumption of a base dark mode colour and build on top of that. We built on top the colour scale of bg-dark-700. This means, in dark mode, we assume your main container has a background colour of bg-dark-700. Where dark is replaced with the colour defined in your tailwind.config.js for dark: colors.gray. The background colour of this documentation website is bg-gray-700.

darkMode Selector

The dark mode classes in BladewindUI are compiled using darkMode: 'class' in the tailwind.config.js. It is important to use the same in your project's tailwind.config.js to ensure the styles take effect. The styles will likely not work if you compile with darkMode: 'media'.