Theme

Компонент со слотом, предоставляющий переключение между цветовыми темами Дизайн-Системы.

Выбранное пользователем значение, сохраняется в использующем localStorage хранилище, синхронизирующемся между вкладками браузера.

enum Themes {
  default = 'default', // Значение по умолчанию
  dark = 'dark',
}

Использование

WARNING

Не забывайте указывать slot="main" на дочернем элементе-триггере!

При необходимости вы можете передать правила стилевой разметки в хост компонента через атрибут styles. Внимание!!! Это небезопасно!

HTML

Значение атрибута value передавать в разметку не надо.

<ds-theme styles="display: block" id="theme">
  <ds-icon
    id="button"
    icon="ecology"
    color="fargo"
    size="32"
    slot="main"
  ></ds-icon>
</ds-theme>

<script>
  const button = document.getElementById('button');
  if (button) {
    button.addEventListener('click', function () {
      const theme = document.getElementById('theme');
      if (theme) {
        if (theme.value === 'dark') theme.value = 'default';
        else theme.value = 'dark';
      }
    });
  }
</script>

React

import { useState, useCallback } from 'react';
import { Icon, Theme } from '@rir/ds-library';
import DS from '@rir/ds-library';

function Component() {
  const ds = new DS();

  const [theme, setTheme] = useState(ds.getState().theme);

  const onClick = useCallback(() => {
    if (theme === 'dark') {
      setTheme('default');
      return;
    }
    setTheme('dark');
  }, [theme]);

  return (
    <>
      <Theme value={theme} styles="display: block;">
        <Icon
          icon="ecology"
          color="fargo"
          size={32}
          slot="main"
          onClick={onClick}
        ></Icon>
      </Theme>
    </>
  );
}

export default Component;

Angular

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  template: `
<ds-theme styles="display: block" [value]="theme">
  <ds-icon
    icon="ecology"
    color="fargo"
    size="32"
    slot="main"
    (click)="click()"
  ></ds-icon>
</ds-theme>`,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
  theme = 'default';

  click() {
    if (this.theme === 'dark') this.theme = 'default';
    else this.theme = 'dark';
  }
}

Vue3

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const theme = ref('default');

    const setTheme = () => {
      if (theme.value === 'default') theme.value = 'dark';
      else theme.value = 'default';
    };

    return {
      theme,
      setTheme,
    };
  },
});
</script>

<template>
  <ds-theme styles="display: block;" :value="theme">
    <ds-icon
      icon="ecology"
      color="fargo"
      :size="32"
      slot="main"
      @click.prevent="setTheme()"
    ></ds-icon>
  </ds-theme>
</template>

API

Props

Name	Type	Description	Default
value	enum Themes	Тема которую использует ДС в данный момент	'default'
styles	String	"Небезопастная" строка для передачи правил CSS в компонент	''

Slots

Name	Description
main	Основной слот

Примеры проектов

React

Angular

Vue