How can one change colors in this theme?

[tabacitu]

We should figure it out and add docs for it in this theme's README. I am 100% sure someone will need to do this, soon.

Here are the docs we used in v5:

---

Change the colors

Change primary color from purple to blue

We thought you might want to do this. Purple isn't for everybody. That's why Backpack 4.1.57+ comes with two bundle CSS files: bundle.css and blue-bundle.css. That second file does exactly what you expect - changes the primary color from electric purple to blue. That's it. In order to use it, go to your config/backpack/base.php and use that file instead:

'styles' => [
-        'packages/backpack/base/css/bundle.css',
+        'packages/backpack/base/css/blue-bundle.css',

That's it. Now go to your browser and refresh, you should see blue buttons and text everywhere, instead of purple.

Custom colors for primary, secondary, success, warning etc.

This assumes you have:

• Backpack 4.1.57+ (check with php artisan backpack:version) and its assets published (otherwise run php artisan vendor:publish --provider="Backpack\CRUD\BackpackServiceProvider" --tag=public --force);
• a working Laravel install with NPM and Laravel Mix;

Add Backstrap, Noty and Animate.css as dev-dependencies to your project:

npm install --dev
npm i @digitallyhappy/backstrap --save-dev
npm i noty --save-dev
npm i animate.css@3.7.2 --save-dev

Then create a SCSS file for that custom bundle you want. We recommend doing it in resources/scss/custom-backpack-bundle.scss. Then customize this file to your liking:

// create a bundle CSS file for the an alternative Backstrap style (blue instead of purple for primary color)

@import "node_modules/@digitallyhappy/backstrap/src/scss/_backstrap_colors";

$primary:       $black !default; // <--- For eg. This will make all buttons and texts black instead of purple
$secondary:     $gray-300 !default;
$success:       $green !default;
$info:          $blue !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-200 !default;
$dark:          $black !default;

$hover-color: rgba(105, 171, 239, 0.12);
$border-color: rgba(0, 40, 100, 0.12);
$muted-bg-color: rgba(0, 0, 0, 0.02);

$theme-colors: () !default;
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "default":    $secondary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "notice":     $info,
    "warning":    $warning,
    "danger":     $danger,
    "error":      $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);

@import "node_modules/@digitallyhappy/backstrap/src/scss/_backstrap_miscellaneous";

@import "node_modules/@coreui/coreui/scss/coreui";
@import "node_modules/@digitallyhappy/backstrap/src/scss/_custom";
@import "node_modules/@digitallyhappy/backstrap/src/scss/_noty";
@import "node_modules/animate.css/source/_base";
@import "node_modules/noty/src/noty";

Now add the command to your webpack.mix.js file to compile this new SASS file:

// create a custom Backpack bundle CSS, with custom colors
mix.sass('resources/scss/custom-backpack-bundle.scss', 'public/css/')
    .options({
      processCssUrls: false
    });

And run npm run dev. If SASS is not a dev-requirement in your project already, Mix will add it automatically and ask you to run npm run dev again. Do that if necessary.

Your result should say "webpack compiled successfully". If so, you can now use that new bundle file in all your Backpack pages by going to config/backpack/base.php and changing the main bundle CSS file that Backpack uses... with your own:

    'styles' => [
-        'packages/backpack/base/css/bundle.css',
+        'css/custom-backpack-bundle.css',

[tabacitu]

I think @promatik would be a good match for this.

[timosofokus]

Any news on this? I'd like to change the primary color