Default Colors

Herozi simplifies customization by using Bootstrap's SCSS variables. Colors and styles are controlled through the variable.scss file, making it easy to update and modify predefined color sets. SCSS files are organized in the (resources/assets/scss) folder. To ensure smooth future updates, we recommend adding custom styles to the custom.scss file rather than modifying core files.

Quick customization of layout using scss.

You can make changes in the resources/assets/scss/_variables.scss file.

$primary:           $indigo;
$secondary:         $gray-400;
$success:           $green;
$info:              $cyan;
$warning:           $yellow;
$danger:            $red;
$light:             $gray-200;
$dark:              $gray-900;

How to Update or Add New Brand Colors for the Admin Panel

We’ve provided some preset brand colors. If you want to add a new color for your brand, simply add it to the $primary-colors map. This will automatically update all necessary elements with your new brand color.

Example code for defining primary colors with a custom color:

// Define base primary colors
$primary-colors: (
    "primary":      map-get($theme-colors, "primary"),
    "secondary":    map-get($theme-colors, "secondary"),
    "success":      map-get($theme-colors, "success"),
    "info":         map-get($theme-colors, "info"),
    "warning":      map-get($theme-colors, "warning"),
    "danger":       map-get($theme-colors, "danger"),
    "blue":         $blue,
    "purple":       $purple,
    "pink":         $pink,
    "orange":       $orange,
    "teal":         $teal,
    "custom-color"  #d946ef // Example custom color
);

For any issues, ensure to clear your browser cache or check for conflicting styles.