Как динамически скинировать приложение Polymer

В приложении Polymer я хочу дать пользователям возможность выбрать определенную тему из предоставленного набора. Предположим, что в элементе-оболочке у меня есть свойство с именем "theme", которое содержит такие значения, как "темный", "светлый", и т. д. Я хотел бы включить определенный файл с пользовательскими стилями в зависимости от этого значения.

Итак, у меня есть элемент my-app-wrapper, который включает некоторые другие, если пользователь не аутентифицирован, или элемент с именем my-app для тех, кто аутентифицирован. Теперь я попытался реорганизовать его, чтобы у меня был новый элемент с именем my-app-dark, который расширяет my-app и просто добавляет импорт в нужные мне пользовательские стили.

Итак, в файле, скажем, dark.html у меня есть что-то вроде:

<custom-style>
  <style is="custom-style">
    html {
      --custom-theme: {
        --app-primary-color: #990AE3;
        --app-secondary-color: var(--paper-deep-orange-500);
      }
      ;
    }
  </style>
</custom-style>

А в my-app-wrapper у меня что-то вроде этого:

<template is="dom-if" if="[[_equals(theme, 'dark')]]" restamp>
  <my-app-dark></my-app-dark>
</template>
<template is="dom-if" if="[[!_includes(themes, theme)]]" restamp>
  <my-app></my-app>
</template>

Проблема здесь в том, что в элементе-оболочке мне нужно импортировать как my-app, так и my-app-dark. Таким образом, даже если у меня есть этот оператор if и я использую my-app, пользовательский стиль, импортированный my-app-dark, все еще загружается и применяет свои стили.

Мое единственное ограничение заключается в том, что я не могу использовать ленивый импорт и загружать файл с помощью Polymer.importHref, но даже если бы я мог, импорт произошел бы после анализа правил CSS, поэтому он не работал бы. .


javascript polymer polymer-2.x
person mishu    schedule 17.01.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я экспериментировал со сменой темы в полимере 1.x, используя события и изменяя тему программно. В основном файле may-app.html я задаю цвета переменным в элементе хоста:

<style include="shared-styles">
    :host {
         --some-color: black;
     }
</style>

Эти значения цвета css использовались во всех дочерних элементах. Когда было вызвано событие change-theme, я использовал this.customStyle['--some-color'] = 'white'; и Polymer.updateStyles();, чтобы применить изменение цвета.

_onChangeTheme() {
    if (this.darkTheme) {
        //change to light theme
        this.customStyle['--some-color'] = 'white';
        this.set('darkTheme', false);
    } else {
        //change to dark theme
        this.customStyle['--some-color'] = 'black';
        this.set('darkTheme', true);
    }
    Polymer.updateStyles();
}

В Polymer 2 это, вероятно, должно выглядеть примерно так:

_onChangeTheme() {
    if (this.darkTheme) {
        //change to light theme
        this.updateStyles('--some-color','white');
        this.set('darkTheme', false);
    } else {
        //change to dark theme
        this.updateStyles('--some-color','black');
        this.set('darkTheme', true);
    }
}
person Amit Merin    schedule 17.01.2018
comment
кажется, что this. customStyle не определено (по крайней мере, в Polymer 2).. но я буду копать глубже, основываясь на этом, спасибо за ваше предложение - person mishu; 17.01.2018
comment
по ссылке на документы, которые вы прислали мне в Slack-канале Polymer (polymer-project.org/2.0/docs/) Я увидел, что мне нужно вызывать updateStyles только с объектом в качестве параметра, у которого есть ключи для значений, которые я хочу обновить.. так что Большое спасибо за вашу помощь, это + вызов AJAX для получения файла для конкретной темы сделали свое дело - person mishu; 17.01.2018

arrow_upward
0
arrow_downward

Самый простой способ — просто установить класс для одного из верхних элементов, а затем использовать CSS.

<style>
  .some-top-element.dark {
    background-color: #000
    color: #fff;
  }

  .some-top-element.light {
     background-color: #fff;
     color: #000;
  }
</style>

<div class$="some-top-element [[theme]]">

Измените свойство theme, чтобы установить новый класс CSS. Это так просто. Обратите внимание на $ в свойстве класса.

person Rickard Elimää    schedule 20.01.2018