@_themis/usescheme 中文文档教程

Question

Возможности

• Установка темы
• Смена текущей темы на альтернативную

Установка

Используя npm:

$ npm i @_themis/usescheme

Используя 纱线:

$ yarn add @_themis/usescheme

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

SchemeProvider

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

// index.js
import { SchemeProvider } from "@_themis/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 "@_themis/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 "@_themis/usescheme";

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

  return (
    <Panel id="settings">
        <PanelHeader>Настройки</PanelHeader>

        <SimpleCell after={<Switch onClick={toggleScheme} checked={scheme === "space_gray"} />}>
            Тёмная тема
        </SimpleCell>
    </Panel>
  );
};