Dark Mode Support

BladewindUI ships with support for dark mode for all components. The dark mode colour palette is defined in its tailwind.config.js file as shown below.

    
        // your-project/vendor/mkocansey/bladewind/tailwind.config.js
  theme: {
    extend: {
      colors: {
        ...
        dark: {
            100: '#f0f1f2',
            200: '#d2d4d7',
            300: '#a7aaad',
            400: '#6c7075',
            500: '#4a4e53',
            600: '#33373c',
            700: '#262a2f',
            800: '#1C1F24',
            900: '#101114',
            950: '#0a0b0d'
        },
        ...
      }
},
    
    

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

If you do not wish to use any of the TailwindCss default colours, you will need to define the full spectrum of colours from 100 to 900. 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.

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.

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'.