@ devtools-ds/主题

这个项目中的每个UI组件都包含多个浏览器的主题. 这些主题是使用 主题 软件包,它允许我们在光和暗模式下指定多个浏览器的主题.

此软件包包含用于使用浏览器主题的颜色、类型和反应工具.

安装

npm i @devtools-ds/themes
# or with yarn
yarn add @devtools-ds/themes

实例

主题提供

你可以用这个 ThemeProvider 为所有人设定主题的组件 @devtools-ds 其下组件.

import { ThemeProvider } from "@devtools-ds/themes";

<ThemeProvider theme={"chrome"} colorScheme={"light"}>
  <YourApp />
</ThemeProvider>;

自动提供主题

我们还提供 AutoThemeProvider,它将自动设置主题和颜色方案 @devtools-ds 基于用户浏览器和首选颜色方案的组件.

<AutoThemeProvider>
  <div id="my-app">
    <ObjectInspector />
  </div>
</AutoThemeProvider>

你总是可以覆盖 AutoThemeProvider 像一个普通的 ThemeProvider。 。 。 .

<AutoThemeProvider theme="firefox">
  <div id="my-app">
    <ObjectInspector />
  </div>
</AutoThemeProvider>

你也可以拥有 AutoThemeProvider 自动更改背景颜色和文本颜色,以匹配当前浏览器和颜色方案。 在暗模式下,这意味着背景颜色会是浏览器的暗背景和浅色文本.

<AutoThemeProvider autoStyle>
  <div id="my-app">
    <ObjectInspector />
  </div>
</AutoThemeProvider>

使用主题

如果你想建立自己的组件 杠杆 ThemeProvider,我们有一个钩子 可以让你得到当前的主题.

import { useTheme } from "@devtools-ds/themes";

const { currentTheme, currentColorScheme } = useTheme(
  { theme, colorScheme },
  styles
);

变量

我们创造了一些主题变量,这些变量具有不同浏览器的共同颜色. 这些都作为联署材料存放。 您可以在 Browser Themes 故事书里的故事.

import { chrome, firefox } from "@devtools-ds/themes";

chrome.light.gray01;
firefox.dark.blue02;