Возможности

• Автоматическое определение и установка текущей темы пользователя
• Установка темы
• Смена текущей темы на альтернативную

Установка

Используя npm:

$ npm i @unexp/usescheme

Используя yarn:

$ yarn add @unexp/usescheme

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

SchemeProvider

Для начала нужно обернуть приложение в SchemeProvider.

// index.js
import { SchemeProvider } from "@unexp/usescheme";

ReactDOM.render(
  <SchemeProvider>
    <App />
  </SchemeProvider>,
  document.getElementById("root")
);

Важно

SchemeProvider инкапсулирует внутри себя логику получения и установки темы от bridge. Он так же внутри себя работает с компонентом VKUI ConfigProvider, и принимает в себя все валидные для него свойства. Если ваше приложение уже обёрнуто в ConfigProvider, повторите эти шаги:

• Замените ConfigProvider на SchemeProvider
• Передайте ему пропсы, которые были до этого, исключая scheme и appearance

Было:

// index.js
ReactDOM.render(
  <ConfigProvider isWebView={true} scheme={...}>
    <App />
  </ConfigProvider>,
  document.getElementById("root")
);

Стало:

// index.js
import { SchemeProvider } from "@unexp/usescheme";

ReactDOM.render(
  <SchemeProvider isWebView={true}>
    <App />
  </SchemeProvider>,
  document.getElementById("root")
);

useScheme

Хук useScheme возвращает объект. Описание его свойств:

| Свойство | Описание | | ------ | ------ | | scheme | Содержит в себе текущую тему приложения (space_gray или bright_light) | | setScheme | Устанавливает текущую тему приложения (space_gray или bright_light) | | toggleScheme | Устанавливает альтернативную тему. |

Пример

// settings.js
import { useScheme } from "@unexp/usescheme";

export default function Settings() {
  const { scheme, toggleScheme } = useScheme();

  return (
    <Panel id="settings">
        <PanelHeader>Настройки</PanelHeader>
        
        <SimpleCell after={<Switch onChange={toggleScheme} checked={scheme === "space_gray"} />}>
            Тёмная тема
        </SimpleCell>
    </Panel>
  );
};