Aufschalten Thema Textfarbe

Question

Mein Problem

ich mein eigenes Thema und es funktioniert gut.

Aber ich bekomme schwarze Textfarbe auf orange (Akzent) -Taste, aber ich möchte weiße Farbe haben.

Meine Lösung

In @material/theme/_variables.scss wir Code wie dieses:

$mdc-theme-primary: #3f51b5 !default; /* Indigo 500 */ 
$mdc-theme-accent: #ff4081 !default; /* Pink A200 */ 
$mdc-theme-background: #fff !default; /* White */ 

/* Which set of text colors to use for each main theme color (light or dark) */ 
$mdc-theme-primary-tone: mdc-theme-light-or-dark($mdc-theme-primary); 
$mdc-theme-accent-tone: mdc-theme-light-or-dark($mdc-theme-accent); 
$mdc-theme-background-tone: mdc-theme-light-or-dark($mdc-theme-background); 

Aus dem obigen Code können wir zunächst drei params sehen !default haben, die als Standard verwenden bedeutet dies, wenn sie bereits deklariert überschreiben nicht.

Aus diesem Grund können wir die benutzerdefinierten Farben angeben.

Aber für Eigenschaften wie $mdc-theme-accent-tone sind wir gezwungen, die berechneten Werte zu verwenden. Wenn ich den obigen Code (Quellcode MDC)

$mdc-theme-accent-tone: mdc-theme-light-or-dark($mdc-theme-accent) !default; 

und in meinen Stilen

ändern

$mdc-theme-accent-tone : "light" 

Es funktioniert gut. Aber natürlich kann ich den Quellcode nicht ändern. Wie man das erreicht.

Answer 1

Ich erkannte, dass dies gemäß der Material-Design-Spezifikation ist. Daher ist es falsch, zu erwarten, dass eine Bestimmung überschrieben wird. Aber für alle praktischen Gründen das sie tun außer Kraft zu setzen:

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

:root { 
    --mdc-theme-text-primary-on-accent: white; 
} 

der Überbrückungs Stil Denken Sie daran, sollten nach dem Import mdc-Thema

geschrieben werden