Darken function for css theming - Error: argument `$color` of `darken($color, $amount)` must be a color

Question

I'm trying to add an option to change the site colour. So, I have a color field which is working fine but the problem is I need to change the colour to 10% darker when the mouse is hover. The function darken says the first argument must be a color.

Error: argument `$color` of `darken($color, $amount)` must be a color

My code is the following:

:root {
  --main-colour: #f06d06;
}

$colour-primary: var(--main-colour);


.btn {
    background-color: $colour-primary;

    &:hover {
       background-color: darken($colour-primary, 10%);
    }
}

I need the variable --main-colour because this will be used to change the colour in real time.

Any ideas?

Many thanks

Answer 1

var(--main-colour) is an CSS function that is interpolated at runtime (so it will be resolved AFTER the compilation of SCSS). SCSS is compiled, therefore all its functions are calculated before and doesnt change run-time.

The problem in your code happens because darken function requires a valid color to perform calculations on, and during compilation time all it gets is var(--main-colour) and not the color itself. (darken is an SCSS function, and not a CSS function, so it cannot be changed runtime).

Answer 2

That problem comes from Bootstrap.

If you are working with a framework like React or angular, remember to import the function before the variables.

@import 'functions';
@import 'variables';

Answer 3

As already answered, not possible. However, in some cases filter: brightness(90%); could be a workaround. More on CSS filters here.