Skip to main content

Styling & Logo

SaaSykit uses TailwindCSS, a utility-first CSS framework for rapidly building custom user interfaces. You can read more about it here.

SaaSykit also uses DaisyUI plugin for TailwindCSS, which adds a set of components and utilities to TailwindCSS that help avoid reinventing the wheel when it comes to UI elements.

Depending on the styling customization you want to do, you might need to edit one or more of the following files:

  • tailwind.common.js - this is where the common TailwindCSS configs are defined (like colors) are defined.
  • tailwind.config.js - this is where the TailwindCSS configuration for your website is stored.
  • tailwind.config.filament.js - this is where TailwindCSS configurations for Filament admin panel are stored.

Customizing colors​

If you want to edit the colors to match your brand colors, you will only need to edit the tailwind.common.js file.

module.exports = {
    colors: {
        primary: {
            '50': '#f1e9fc',
            '100': '#d2bcf7',
            '200': '#bd9cf3',
            '300': '#9f6eee',
            '400': '#8c52ea',
            '500': '#6f27e5',
            '600': '#6523d0',
            '700': '#4f1ca3',
            '800': '#3d157e',
            '900': '#2f1060',
            '950': '#1f0a3f',
        },

        secondary: {
            '50': '#f5fcff',
            '100': '#dff5ff',
            '200': '#cff0ff',
            '300': '#b9e9ff',
            '400': '#ace5ff',
            '500': '#97deff',
            '600': '#89cae8',
            '700': '#6b9eb5',
            '800': '#537a8c',
            '900': '#3f5d6b',
            '950': '#2c3c4f',
        }
    }
}

The colors object contains all the colors that are used in the UI. SaaSykit uses 2 colors by default: primary and secondary. Each color has 11 shades, from 50 to 950.

These colors will be imported into the other configuration files, like tailwind.config.js and tailwind.config.filament.js to be used everywhere, so you will need to edit them only in one place.

You can use an online service like UI Colors to help you generate your own color palette.

tip

If you don't want to use the secondary color, you can just set its values to the same as the primary color, but it's a good idea to have a different secondary color that complements your primary color for use in your UI.

Customizing fonts & other styles​

To customize the fonts, text-sizes, etc on your front-facing website, you will need to edit the tailwind.config.js file.

export default {
    theme: {
        extend: {
            fontFamily: {
                'sans': ['"Poppins"', ...defaultTheme.fontFamily.sans],
            }
        }
    }
}

Please check TailwindCSS documentation for more details on how to customize fonts.

Filament color editing.​

If you want to edit the colors used in the Filament admin panel, you will need to edit the App\Providers\Filament\DashboardPanelProvider class (for customer dashboard) or App\Providers\Filament\AdminPanelProvider class (for admin dashboard).

return $panel
    ->colors([
        'primary' => Color::Teal,
    ])

Check the Filament documentation for more details on how to customize the colors in Filament admin panel.

You need to prepare two PNG files of your logo, one is a "light" version and one is a "dark" version.

You need to save these files as public/images/logo-light.png and public/images/logo-dark.png respectively.

In case you want to change the naming and/or the format of your logo, you will need to change the namings in the app.php config file. (config/app.php)

'logo' => [
    'light' => 'logo-light.png',
    'dark' => 'logo-dark.png',
],

The logo-light.png is the light version of your logo, which should be viewed on darker backgrounds.

Example:

The logo-dark.png is the dark version of your logo and it should be viewed on lighter backgrounds.

Favicon​

You need to prepare a favicon for your website. This is the icon that will be displayed in the browser tab (.ico file).

You need to save this file as public/images/favicon.ico.

You can use an online service like Favicon.io to generate your favicon.

Social sharing cards​

You need to prepare a social sharing card for your website. This is the image that will be displayed when someone shares your website on social media (like Facebook, Twitter, etc).

You need to save these files as public/images/twitter-card.png and public/images/facebook-card.png, and they will be automatically used when someone shares your website on Twitter or Facebook.

For more information on the dimensions of these images, please check the Twitter Card documentation and Facebook Card documentation.