# LSK ux subrepo: @lskjs/theme

- Цвета и шрифты можно глобально использовать с помощью пропсов
- 1 раз выбиранная палитра цветов и можно использовать её на всех подобных проектах, не надо придумывать каждый раз и подбирать дизайн
- Eсли захочешь её заменить, все цвета с помощью переменных меняются в 1 файле

Чтобы подключить и использовать нашу тему из пакета @lskjs/theme во всем проекте:

## Default 

1. `npm i @lskjs/theme`
2. Прокинуть тему в начальную точку приложения ( Layout, App, Uapp )
```jsx
export default class Uapp extends BaseUapp {
  theme = theme
```
или
 ```jsx
<ThemeProvider theme={theme}>

</ThemeProvider>
```
2. Использование в Styled Components
```jsx
import getTheme from '@lskjs/theme/getTheme';

getTheme(props.theme, 'colors.primary')
```

## Custom

Если нужно переопределить стандартную тему, необходимо дополнительно:

Добавить в проект файл theme.js , в котором:

```js
import theme from '@lskjs/theme';

export default {
  ...theme,
  colors: {
    ...theme.colors,

  },
};


export default {
  ...theme,
  colors: {
    ...theme.colors,
    primary: '#333333',
    secondary: '#f39c12',
    lightGrey: '#f1f1f1',
    greyText: '#b5b5b5',
    darkBackground: '#1a1a1a',
    ...
  },
  fonts: {
    ...theme.fonts,
    fontFamily: ... ,
    fontFamily2: ... ,
  }
  whiteSpace: 'pre-line',
};
```