# @eisgs/theme-provider

> `value` отвечает за выбранную тему.

Latest version **0.0.8** (published 2023-03-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @eisgs/theme-provider
pnpm add @eisgs/theme-provider
yarn add @eisgs/theme-provider
bun add @eisgs/theme-provider
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2023-03-02 |
| First published | 2021-12-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | traidersu, krll_mdntsv, lzdyd |

## Links

- npm: https://www.npmjs.com/package/@eisgs/theme-provider
- npm.io page: https://npm.io/package/@eisgs/theme-provider

## Recent versions

- 0.0.8 (latest) — 2023-03-02
- 0.0.7 — 2022-10-27
- 0.0.6 — 2022-07-19
- 0.0.5 — 2022-06-02
- 0.0.3 — 2022-02-24
- 0.0.2 — 2022-01-26
- 0.0.1 — 2021-12-29

## README

### ThemeProvider

`value` отвечает за выбранную тему.

Нажимая на переключатель в боковом меню, можно выбрать одно из двух доступных значений - `eisgs` или `igs`.

Если в проекте используется цветовая тема, отличная от `eisgs`, то необходимо обернуть приложение в `ThemeProvider` с указанием нужного значения:

```flow js
<ThemeProvider value="igs">
  <App />
</ThemeProvider>
```

По умолчанию для всех компонентов установлена тема `eisgs`, поэтому в случае использования данной темы, оборачивать приложение в `ThemeProvider` необязательно.

Чтобы получить значения цветов и теней для текущей темы в своем компоненте, нужно использовать хук `useTheme`.

Все цвета и тени, зависящие от темы, представлены ниже:

```jsx
import { useTheme } from '@eisgs/theme-provider';
import { Typography } from '@eisgs/typography';

const { value: theme } = useTheme();
const palette = Object.keys(theme);

const getThemeItemStyles = (key) => ({
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-between',
  width: 100,
  height: 100,
  padding: 24,
  backgroundColor: theme[key],
  borderRadius: 12,
  border: `1px solid ${theme.M2}`,
  boxSizing: 'border-box',
  overflow: 'hidden',
  boxShadow: theme[key],
});

const listStyles = {
  display: 'flex',
  flexWrap: 'wrap',
};

const itemStyles = {
  margin: 20,
};

const textStyles = `margin-bottom: 8px;`;

const shadesOfGrey = palette.filter((key) => ['G1', 'G2', 'G3', 'G4', 'G4', 'G5', 'white'].includes(key));
const monochrome = palette.filter((key) => ['M1', 'M2', 'M3', 'M4', 'M5', 'M6'].includes(key));
const accent = palette.filter((key) => ['greenMain', 'greenHover', 'L1', 'L2', 'L3'].includes(key));
const system = palette.filter((key) => ['red', 'lightRed', 'green', 'lightGreen', 'blue', 'lightBlue', 'yellow', 'lightYellow'].includes(key));
const shadows = palette.filter((key) => ['shadow1', 'shadow2', 'shadow3', 'shadow4'].includes(key));

const colorsToRender = [
  {
    name: 'Shades Of Grey',
    items: shadesOfGrey,
  },
  {
    name: 'Monochrome',
    items: monochrome,
  },
  {
    name: 'Accent',
    items: accent,
  },
  {
    name: 'System',
    items: system,
  },
  {
    name: 'Shadows',
    items: shadows,
  },
];

<>
  {colorsToRender.map(({ name, items }) => (
    <div key={name}>
      <Typography type="h3">
        {name}
      </Typography>
      
      <div style={listStyles}>
        {items.map((key) => {
          const value = theme[key];

          return (
            <div style={itemStyles} key={key}>
              <div>
                <Typography weight="bold" type="p1" styles={textStyles} tag="span">
                  {key}
                </Typography>
                <Typography styles={textStyles}>{value}</Typography>
              </div>
              <div style={getThemeItemStyles(key)} />
            </div>
          );
        })}
      </div>
    </div>
  ))}
</>
```

---
_Source: https://npm.io/package/@eisgs/theme-provider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._