Theme

Темы важны, так же важен способ взаимодействия с ними. Давайте с вами рассмотрим несколько популярных подходов использования тем.

EVG-Theme

Есть тема по умолчанию, с помощью которой вы можете использовать заготовленные цвета.

default

#FFFFFF

primary

#1E88E5

secondary

#757575

warn

#FB8C00

success

#43A047

fail

#E53935

background

#FFFFFF

surface

#FFFFFF

import { Button } from '@evg-b/evg-ui'

<Button color='default' variant='contained'>default</Button>

<Button color='primary' variant='contained'>primary</Button>

<Button color='secondary' variant='contained'>secondary</Button>

<Button color='warn' variant='contained'>warn</Button>

<Button color='success' variant='contained'>success</Button>

<Button color='fail' variant='contained'>fail</Button>

Custom Theme

В каждый компонент встроен объект Color который так же работает с темами в вашем приложении буквально за вас.

Всего лишь нужно создать --css-var определенного вида: --evg-${themeColor}

// css

:root {

--evg-primary: #7B1FA2;

--evg-success: rgb(85, 139, 47);

--evg-warn: 'orange900';

}

// css

// jsx

<Button color='primary' variant='contained'>primary</Button>

<Button color='success' variant='contained'>success</Button>

<Button color='warn' variant='contained'>warn</Button>

// jsx

Это все? Да, именно.

Несколько Theme

Давайте с вами создадим несколько тем. Для этого нам нужно так же создать --css-var с названием темы: --evg-${themeName}-${themeColor}

:root {

// default - мы переопределяем тему по умолчанию

--evg-primary: #7B1FA2;

// dark

--evg-dark-primary: #7B1FA2;

--evg-dark-surface: #292d3e;

}

Активируйте тему прямо на ходу из любого метса с помощью пользовательского хука setTheme(themeName). Если хук setTheme запустить без аргумента, то активной станет тема по умолчанию.

<Button onClick={() => setTheme()}>light</Button>

<Button onClick={() => setTheme('dark')}>dark</Button>