Change Primary Color

[BlumDev92]

How is it possible to change the primary color?

I already tried to edit the /resources/sass/_variables.scss file by changing the purple color and adding $primary: #.... to the file.
After editing the _variables.scss file I ran npm run dev
But it had no effect.

Any suggestions? Thanks!

[rarestoma]

Hi @BlumDev92,

Thank you for working with our products. Did you modify the color inside the $primary color or added a new variable?

All the best,
Rares

[BlumDev92]

Sorry for the late answer!

This is how the file looks like:

`// Body
$body-bg: #f8fafc;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;`

I tried to add $primary: #123456; to the end of the file and also i tried to change $purple. But both had no effect.

EDIT:
I just recognized that running npm run dev changes the css/app.css file and not the argon/css/argon.css file. Is it possible to change that?

[teamupdivision]

Hello @BlumDev92
The theme is not using the argon/css/argon.css file. If you want to use npm run dev please replace the css/app.css with argon/css/argon.css in the

css include calls.

[BlumDev92]

But when I change something in the argon/css/argon.css file , for example the .btn-primarycolor - it works! So it does use the argon/css/argon.css file, right?

What are the steps to change the primary color from purple to red? I'm confused now what kind of files the templates uses and how to correctly change the color.

thanks

[Ghitu]

Hello @BlumDev92. Sorry, it's the other way around.

The theme is not using the css/app.css file. If you want to use npm run dev please replace argon/css/argon.css with css/app.css in the css include calls.

[BlumDev92]

I tried that, but when I change <link type="text/css" href="{{ asset('argon') }}/css/argon.css?v=1.0.0" rel="stylesheet"> to <link type="text/css" href="css/app.css" rel="stylesheet"> all the styles are gone and the page looks just like a normal bootstrap page...

How it is possible to apply the _variables.scss file changes to the argon/css/argon.css file? Do I need a other command instead of npm run dev ?

I'm so confused... sorry about that :-(

[teamupdivision]

Hello @BlumDev92
There were no SCSS files previously, we added them in the resources/assets/scss folder.
Please download again and check it out.
Thank you

[BlumDev92]

That worked!
Thanks