Primary color change not working in Material.DARK

Flow
1

Primary color change do not works works in Material Dark.

This is my shared-styles file:

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/polymer/lib/elements/custom-style.html">
<link rel="import" href="../bower_components/vaadin-material-styles/color.html">
<link rel="import" href="../bower_components/vaadin-material-styles/typography.html">

<dom-module id="shared-styles">
    <template>
        <style include="material-color-light material-typography">

            :host {
                --material-primary-color: #FFA409;
            }

        </style>

    </template>
</custom-style>
</dom-module>

And this is an extract from the polymer component html file:

...
<div theme="dark">
	<div class="myclass">
			... vaadin components ...
	</div>
</div>
...

When I change to Material Light mode and remove theme=“dark” from div it works.

2

Since you are including the material-color-light style module, it defines the [theme~="dark"] selector which in turn redefines the --material-primary-color property ([source]
(https://github.com/vaadin/vaadin-material-styles/blob/master/color.html#L52-L60)).

So, to override both the light and dark primary color, you should do this:

<dom-module id="shared-styles">
    <template>
        <style include="material-color-light material-typography">

            :host,
			[theme~="dark"]
 {
                --material-primary-color: #FFA409;
            }

        </style>

    </template>
</custom-style>
</dom-module>

Instead of just the :host selector, you need to define the color for the [theme~="dark"] selector as well.

Be sure to check the color contrast, so that it conforms to WCAG 2.0 requirements :slight_smile: