Темизация и CSS переменные

Riot.js предоставляет гибкий подход к созданию компонент с локальными стилями и позволяет легко внедрять динамическую темизацию через CSS переменные. Это особенно полезно для поддержания единого визуального стиля приложения и возможности изменять тему на лету без полной перезагрузки интерфейса.

Использование CSS переменных в компонентах

CSS переменные (Custom Properties) поддерживаются в современных браузерах и позволяют определять значения стилей, которые можно изменять динамически. В Riot.js переменные удобно использовать в <style> блоке компонентов:

<theme-switcher>
  <style>
    :host {
      --primary-color: #3498db;
      --secondary-color: #2ecc71;
      --font-size: 16px;
      display: block;
      padding: 1em;
      background-color: var(--primary-color);
      color: white;
      font-size: var(--font-size);
    }

    button {
      background-color: var(--secondary-color);
      border: none;
      padding: 0.5em 1em;
      cursor: pointer;
      font-size: var(--font-size);
    }
  </style>

  <div>
    <p>Текущая тема применяется через CSS переменные.</p>
    <button oncl ick={changeTheme}>Сменить тему</button>
  </div>

  <script>
    export default {
      changeTheme() {
        const root = this.root;
        root.style.setProperty('--primary-color', '#e74c3c');
        root.style.setProperty('--secondary-color', '#f1c40f');
        root.style.setProperty('--font-size', '18px');
      }
    }
  </script>
</theme-switcher>

В этом примере ключевой момент — использование метода style.setProperty для динамической подмены CSS переменных. Это позволяет переключать цвета и размеры элементов без перерисовки всего DOM.

Глобальные и локальные переменные

Riot.js поддерживает два уровня применения переменных:

  • Глобальные CSS переменные: определяются на уровне :root и доступны во всех компонентах приложения.

    :root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

    Такой подход удобен для централизованного управления темами.

  • Локальные CSS переменные: определяются внутри конкретного компонента с использованием :host или селекторов компонента. Локальные переменные перекрывают глобальные значения, что позволяет создавать уникальные стили для отдельных блоков.

Динамическая темизация через состояние компонента

Riot.js позволяет использовать реактивное состояние для управления темой. Это особенно актуально при переключении светлой и тёмной темы:

<app-theme>
  <style>
    :host {
      --background: white;
      --text-color: black;
      display: block;
      padding: 2em;
      background-color: var(--background);
      color: var(--text-color);
      transition: background-color 0.3s, color 0.3s;
    }
  </style>

  <div>
    <p>Текущая тема: {theme}</p>
    <button oncl ick={toggleTheme}>Переключить тему</button>
  </div>

  <script>
    export default {
      state: {
        theme: 'light'
      },

      toggleTheme() {
        if (this.state.theme === 'light') {
          this.state.theme = 'dark';
          this.root.style.setProperty('--background', '#2c3e50');
          this.root.style.setProperty('--text-color', '#ecf0f1');
        } else {
          this.state.theme = 'light';
          this.root.style.setProperty('--background', 'white');
          this.root.style.setProperty('--text-color', 'black');
        }
        this.update();
      }
    }
  </script>
</app-theme>

Ключевой момент здесь — реактивное обновление состояния компонента через this.update(), что позволяет синхронизировать визуальное состояние с внутренними переменными.

Наследование и каскадирование

CSS переменные в Riot.js наследуются по стандартным правилам CSS. Это означает, что дочерние элементы могут использовать переменные, определённые в родительском компоненте:

<parent-theme>
  <style>
    :host {
      --button-color: #3498db;
    }
  </style>

  <child-button></child-button>
</parent-theme>

<child-button>
  <style>
    button {
      background-color: var(--button-color);
      color: white;
      padding: 0.5em 1em;
      border: none;
      cursor: pointer;
    }
  </style>

  <button>Кнопка</button>
</child-button>

Такое каскадирование обеспечивает централизованное управление стилями и упрощает поддержку большого количества компонентов.

Смешивание тем и локальных настроек

Riot.js допускает комбинирование глобальных тем с локальными модификациями:

this.root.style.setProperty('--primary-color', 'var(--theme-primary-color)');
this.root.style.setProperty('--secondary-color', 'var(--theme-secondary-color)');

Это позволяет легко внедрять дизайн-систему с предопределёнными переменными и при этом адаптировать отдельные компоненты под конкретные задачи.

Анимации и переходы при смене темы

CSS переменные совместимы с переходами и анимациями, что позволяет создавать плавные эффекты при изменении темы:

:host {
  --bg-color: #ffffff;
  --text-color: #000000;
  transition: background-color 0.5s ease, color 0.5s ease;
}

Изменение значения переменной через setProperty автоматически запускает анимацию для всех стилей, использующих эту переменную.

Итоговые рекомендации по темизации

  • Использовать глобальные переменные для основных цветов и шрифтов.
  • Определять локальные переменные в компонентах для кастомизации отдельных блоков.
  • Управлять темой через реактивное состояние и style.setProperty.
  • Использовать переходы и анимации для плавного изменения визуального состояния.
  • Структурировать темы как объект с предопределёнными значениями для лёгкого масштабирования.

Эти подходы делают Riot.js мощным инструментом для построения визуально гибких и адаптивных интерфейсов.

Оглавление