logo
v2.5.12

Dark Mode Support

BladewindUI ships with support for dark mode for all components. The colors.slate 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.slate,
        ...
      }
},
    
    

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.gray,
        ...
      }
},
    
    

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 gray palette instead of slate.