Question 45784 in CSS Question posted in
Some basic documentation can be found here.

Svelte SMUI, retrieve theme colors in javascript – CSS

I am using SMUI with svelte and in SCSS I have set the theme colors:

@use 'sass:color';

@use '@material/theme/color-palette';

@use '@material/theme/index' as theme with (
  $primary: #ef8611,
  $secondary: color.scale(#8aace1, $lightness: 90%),
  $surface: #333,
  $background: #fff,
  $error: color-palette.$red-900
);

The value of $primary should then then be stored in bare css variable --mdc-theme-primary but it seems not to be…

The Question is simple:

How can I get the color value of $primary from scss to JavaScript ? is it possible ?

Tags:

2

Answers


  1. 0 
    getComputedStyle(document.documentElement)
    .getPropertyValue('--mdc-theme-primary');
    Login or Signup to reply.
  2. 0

    SCSS Theme File:

        // bare css to scss
    :root {
      --mdc-theme-primary: #ef8611;
    }
    
    @use '@material/theme/index' as theme with (
      $primary: var(--mdc-theme-primary)
    );

        // SCSS to Bare CSS
    @use '@material/theme/index' as theme with (
      $primary: #ef8611
    );

    :root {
        --mdc-theme-primary: #{theme.$primary};
    }

        // To use the variable in css
    button {
     background-color: var(--mdc-theme-primary);
    }

    In Javascript:

        const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--mdc-theme-primary');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search