Theme Customization

If you would like to have more customization to the theme this is the place for you.

We believe that Tailwind CSS have a great starter palette and that can fit most of the projects by default, and spur is allowing you to use them out of the box in your components.

When you have a fresh installation of Spur, by default we enable some basic colors which you are free to change to your liking

You can always change this configuration from config/spur.php to add, remove from the config.colors array

Below would be the default configuration that ship by default with Spur.

<?php

return [
    'config' => [
      'colors' => ['red', 'green', 'blue', 'yellow', 'indigo'],
    ]
];

If you adjust the config after adding the component you would need to re-fetch the component again using --force flag.

You can use any of these tailwind default palette colors in the color configuration and as `color` attribute to any component that can be colored

If you couldn't find colors to your liking from the default ones, you can customize your own to match your branding.

Spur provides 2 colors that you can customize primary, secondary

<?php

return [
  'config' => [
    'colors' => ['primary', 'secondary'],
  ]
];

You can enable any of these colors in the configuration, and afterwards you can configure the color with the same name in tailwind.config.js

Keep in mind to follow tailwind's pattern by defining the color knowing that 50 is the lightest shade, while 900 is the darkest, and 500 is the base color

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f7f8fb',
          100: '#e5e7f0',
          200: '#d1d5e5',
          300: '#bcbfd8',
          400: '#a4a3c9',
          500: '#8b86b6',
          600: '#706c9e',
          700: '#59587f',
          800: '#434464',
          900: '#2b283e',
        },
        secondary: {
          50: '#f7f9f6',
          100: '#e4f0e7',
          200: '#d2e7d8',
          300: '#c0ddc8',
          400: '#b0d2b7',
          500: '#9abb9f',
          600: '#809f85',
          700: '#6e8c70',
          800: '#5a775c',
          900: '#394a3d',
        },
      }
    },
  },
}

Now you can use these colors similar to using the default ones