2017-08-17 1 views
1

ich mein Sheet mit Variable innerhalb importieren möchten:Wie Sheet importieren dynamisch Polymer 2,0

<dom-module id="colors-palette"> 
    <template> 
    <style> 
    :host { 
     --dark-gray: #263238; 
     --light-gray: #e6ebed; 
     --light-blue: #00bcd4; 
     --autovision-blue: #174291; 

     --background-box-number-applications: red; 
     --color-box-number-applications: orange; 
    } 
    </style> 
</template> 
</dom-module> 

Ich will es dynamisch tun. Meine Ordnerstruktur ist:

-themes 
    -theme1 
     -style.html 
    -theme2 
     -style.html 
    -theme3 
     -style.html 

ich das Thema erkennen, wenn meine-App bereit ist, und danach habe ich versuchen, meinen Stil wie dies in der Ready-Funktion zu importieren:

Polymer.importHref(this.resolveUrl('../themes/' + this.getCurrentTheme() + '/colors-palette.html')); 

Die Datei geladen wird, aber die var im Stil in my-app.html ändert sich nicht:

app-header { 
    background-color: var(--dark-gray); 
} 

Und ich habe diesen Fehler in der Konsole bekam:

kann nicht Stil Daten in Modul namens Farben-Palette

Jede Idee finden? Oder muss ich sonst etwas tun?

Vielen Dank

Antwort

1

Ihre colors-palette.html sollte nur die Stile enthalten sie global für HTML-Einstellung.

<custom-style> 
    <style is="custom-style"> 
     html { 
      --dark-gray: #263238; 
      --light-gray: #e6ebed; 
      --light-blue: #00bcd4; 
      --autovision-blue: #174291; 

      --background-box-number-applications: red; 
      --color-box-number-applications: orange; 
     } 
    </style> 
</custom-style> 
+0

Perfekt, es funktioniert wie ein Charme. Vielen Dank !!! –

Verwandte Themen