CODEWITHSUNDEEP
javascripthtmlangularsass
vinuta
vinuta

Reputation: 423

Dynamically add colors in $theme-colors in Scss Functions Angular

I'm trying to add dynamic color through javascript using variables and then trying to use scss functions for that color, but I am getting below errors

Module build failed(from. / node_modules / sass - loader / dist / cjs.js):
  SassError: $color2: var (--
    default -primary - color) is not a color.╷
106│ @return mix($color - base, $color, $level * $theme - color - interval);│ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ╵
node_modules\ bootstrap\ scss\ _functions.scss 106: 11 theme - color - level()
node_modules\ bootstrap\ scss\ _tables.scss 101: 38 @import
node_modules\ bootstrap\ scss\ bootstrap.scss 17: 9 @import
src\ styles.scss 38: 9 @import
src\ app\ locations\ containers\ locations\ locations.component.scss 1: 9 root stylesheet

Below is the approach I am using to add the color dynamically

document.documentElement.style.setProperty('--default-primary-color', "#dd9e9e");

@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';
@import '../node_modules/bootstrap/scss/mixins';

$primary-color: var(--default-primary-color);

$theme-colors: ( // "primary": #e4b5b1,
// "primary": #00b4b4,
'primary': var(--default-primary-color), 
);

.btn-secondary {
  background: theme-color("primary");
  border-color: theme-color("primary");
}

In the above code, I need to add the dynamic value to theme-colors

also if I add directly the $primary-color by not using the themes-color then it's working but I want to use theme-color

.primary-background {
  background-color: $primary-color; // works
}

the above approach will work .primary-background {
  background-color: theme-color("primary"); //-> doesn't work
}

I tried to find many approaches but didn't find any solution for them

Please help me as I m stuck here and not able to continue.

if this approach doesn't work please suggest any other approach using ngrx or any other method.

Upvotes: 2

Views: 2922

Answers (3)

king
king

Reputation: 302

@vinuta, You could rewrite it to match what is below and confirm if it works.

@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';
@import '../node_modules/bootstrap/scss/mixins';
    
// colors
:root {
  --primary: #2F80ED;
  --secondary: #FF0000;
}

$theme-colors: () !default;
$theme-colors: map-merge(
  (
    "primary": var(--primary),
    "secondary": var(--secondary),
  ),
  $theme-colors
 );

// Additionally; The function that handles the theme colors 
@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
} 
// You would usually have this, among other functions in a separate functions.scss file and imported after the variables import)

Theming Bootstrap

Upvotes: 1

Hossein Azizdokht
Hossein Azizdokht

Reputation: 1005

I think you must define color in :root

document.documentElement.style.setProperty('--default-primary-color', "green");
  
 :root {
    --default-primary-color: red;
}
h1{color:var(--default-primary-color)}
<h1>Hello World</h1>

Upvotes: 2

Daphaz
Daphaz

Reputation: 506

you can use map-get like

@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';
@import '../node_modules/bootstrap/scss/mixins';

$primary-color: var(--default-primary-color);

$theme-colors: ( 
  "primary": $primary-color,
);

.primary-background {
  background-color: map-get($theme-colors,"primary");
}

Upvotes: 0

Related Questions