Theme Colours

BladewindUI ships with twelve colours from the TailwindCSS palette. The default colour used for the BladewindUI components is blue.

 

You can tell from the palette above that BladewindUI uses Emerald for its green and Amber for its yellow. As stated earlier, the default colour used for the BladewindUI components is blue. If your primary theme is not blue, you can change this in a few steps. This assumes you have some basic knowledge of Tailwind CSS.

Below if the tailwind.config.js file that ships with the library.

    
        // your-project/vendor/mkocansey/bladewind/tailwind.config.js
  theme: {
    extend: {
      colors: {
        primary: colors.blue,
        secondary: colors.slate,
        dark: colors.slate,
        success: colors.emerald,
        error: colors.red,
        warning: colors.amber,
        info: colors.blue
      }
},
    
    

To change the colours used above, simply define overwriting values in your project's tailwind.config.js.

    
        // your-project/tailwind.config.js
  theme: {
    extend: {
      colors: {
        primary: colors.indigo,
        secondary: colors.zinc,
        dark: colors.gray,
        success: colors.green,
        error: colors.rose,
        warning: colors.orange,
        info: colors.blue
      }
},
    
    

All components use the colour defined in the primary key above to display their background colour. This makes it easy for all components to quickly blend in to your preferred theme. From the example above, now all components will use shades of indigo as their background colour instead of blue.

If you are feeling geeky

The changes to the Tailwind config should be enough to get you your right colours. If however, for some reason you are in your geeky elements and prefer to access all the uncompiled BladewindUI CSS files, you can run the command below.

        
            php artisan vendor:publish --provider="Mkocansey\Bladewind\BladewindServiceProvider" --tag=bladewind-assets --force
        

You should now have in your public directory, a vendor > bladewind > assets folder containing all the uncompiled tailwind css files. You can modify these files to suit your theme specification. Refer to this article if you are not familiar with compiling assets in Laravel.