Changing spark default colors the right way

I want to change the default colors which Spark comes with.

I know i can't just override the default colors in my css but i wonder if is there a better practice. Like overriding the spark-aurelius/resources/assets/sass/_variables.scss file in somewhere or anything like that.

I can only think about modifying the main import:

// app.scss
// @import "./../../../vendor/laravel/spark-aurelius/resources/assets/sass/spark";
@import "./imports";

// imports.scss
// @import 'variables';
@import 'mycustomvariables';
@import '~bootstrap/scss/bootstrap';
@import '~sweetalert/dist/sweetalert.css';
@import 'custom';

// Vue Cloak
[v-cloak] {
  display: none;
}

body {
  direction: ltr;
}
...

What would you do?

Thanks.

martinbean

7 years ago

Best Answer

Level 80

@bufferoverflow I don’t have a Spark 6 licence, but I’m hoping the variables in the source Sass files are post-fixed with !default. If they are, then in your application’s Sass file, include custom variables first and the Spark styles after:

// resources/assets/sass/app.scss
@import "variables"; // resources/assets/sass/_variables.scss
@import "absolute/path/to/spark";

Your variables will then take precedence over Spark’s defaults when compiled by Mix.

1 like

bufferoverflow

7 years ago

Level 7

Oh true! Forgot to set the vars before the include. Working perfectly, thanks man!

1 like

martinbean

7 years ago

Level 80

@bufferoverflow Glad to help :)

Please or to participate in this conversation.