MDC-Web CSS theme colors not defined

Question

When running locally my front end i inspect button element and the color --mdc-theme-primary is not defined even when it is.

Inspecting the element:

Index.html:

<button class="mdc-tab mdc-tab--active" aria-selected="true" tabindex="0">
    <span class="mdc-tab__content">
        <span class="mdc-tab__text-label">Home</span>
    </span>
</button>

Firefox Inspect element result, --mdc-theme-primary not defined using fallback value:

.mdc-tab--active .mdc-tab__text-label {
    color: #e3f2fd;//this line is disabled in console is dashed
    color: var(--mdc-theme-primary, #e3f2fd);
}

Using the Theming Guide! I've set up my files as follows:

_themecolor.scss

$mdc-theme-primary: #e3f2fd;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #0d48a1;
$mdc-theme-on-secondary: rgb(235, 15, 33);
$mdc-theme-surface: #000000;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #000000;
$mdc-theme-on-background: #442C2E;

_variables.scss (for completion, not needed for this)

.topAppBar-margin-fix {
    top: 0;
    left: 0;
}

app.scss

@import "./_themecolor";
@import "./_variables";


@import "@material/top-app-bar/mdc-top-app-bar";

@import "@material/typography/mdc-typography";

@import "@material/button/mdc-button";

@import "@material/tab-bar/mdc-tab-bar";
@import "@material/tab-bar/mixins";
@import "@material/tab-scroller/mdc-tab-scroller";
@import "@material/tab-indicator/mdc-tab-indicator";
@import "@material/tab-indicator/mixins";
@import "@material/tab/mdc-tab";
@import "@material/tab/mixins";

.mdc-tab__text-label{
  //@include mdc-tab-active-text-label-color(on-primary);
  //--mdc-theme-primary: red;
  //--mdc-theme-primary: $mdc-theme-on-secondary;
}

body {
    color: blue;

  }

app.js

import {MDCTabBar} from '@material/tab-bar';

const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));

import {MDCTabScroller} from '@material/tab-scroller';

const tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));

import {MDCTab} from '@material/tab';

const tab = new MDCTab(document.querySelector('.mdc-tab'));

Serving this site inside the scroll bar the color of the Home label in the button is the fallback color and not the primary color or whatever i set with the mixin. I tried:

case a)

.mdc-tab__text-label{
       @include mdc-tab-active-text-label-color(on-primary);
}

case b)

.mdc-tab__text-label{
       --mdc-theme-primary: red;
}

case c)

.mdc-tab__text-label{
       --mdc-theme-primary: $mdc-theme-on-secondary;
}

case a) tried using also a simple color as "red" and still the color used is the fallback one.

case b) works as intended being red.

case c) the label color is black instead of red as the $mdc-theme-on-secondary defined in themecolor.scss

Also tried a) b) and c) using

.mdc-tab--active .mdc-tab__text-label{
       //repeating each case, only working the one with "red" value.
}

Errors i think i do:

1- I am using the wrong mixin for setting label color.

2- I am using the defined color variable in themecolor.scc wrong cause i don't know css.

3- There is a problem with my includes.

4- Are my SASS variables not being compiled?

Question why the --mdc-theme-primary is not defined? And why i cant point to the colors defined in themecolor.scss?

Any help is appreciated.

score 3 · Answer 1 · answered Jun 12 '19 at 15:54

I fixed this by doing something isn't explained in the guide. When you want to use theming you have to import the theme component into your project, as follows:

app.scss

@import "./_themecolor";
@import "./_variables";

//----add these lines after custom imports-----
@import "@material/theme/mdc-theme";
@import "@material/theme/mixins";
//---------------------------------------------

@import "@material/top-app-bar/mdc-top-app-bar";

Nothing else is needed all the colors will be defined.

Thank ypou. I hpe this help newcomers.

For me what worked was [ as described in docs here in step 3 https://material.io/develop/web/docs/theming] @use "@material/theme" with ( $primary: #9c27b0, $secondary: #76ff03, $background: #fff, ); — Kumudu, Dec 17 '20 at 17:00

MDC-Web CSS theme colors not defined

1 Answers1