Theme Customization

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

Spur Colors

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.

Enabled By Default

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

Red Green Blue Yellow Indigo

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'],
    ]
];
config/spur.php

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

All Available Colors

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

Color Components
red
Badge
orange
Badge
amber
Badge
yellow
Badge
lime
Badge
green
Badge
emerald
Badge
teal
Badge
cyan
Badge
sky
Badge
blue
Badge
indigo
Badge
violet
Badge
purple
Badge
fuchsia
Badge
pink
Badge
rose
Badge

Custom Colors

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

Adding Custom Colors

Spur provides 2 colors that you can customize primary, secondary

<?php

return [
  'config' => [
    'colors' => ['primary', 'secondary'],
  ]
];
config/spur.php

Configuring custom colors

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',
        },
      }
    },
  },
}
tailwind.config.js

Using Custom Colors

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

Color Components
primary
Badge
secondary
Badge