主题设置

主题是设计用户界面 (UI) 的关键元素。它使您能够在整个应用程序中应用一致的美感，从而增强用户体验并保持视觉一致性。

颜色设置

你可以通过 Resolid React UI 的 TailwindCSS 预设 来定制主题的颜色。Resolid React UI 内置了 light 和 dark 颜色主题

编辑 tailwind.config.js 文件

import resolidTailwind from "@resolid/tailwind";

export default {
  presets: [resolidTailwind.preset({
    themes: {
      // 这里可以定义自己的主题颜色或者覆盖 light 和 dark 主题颜色
    }
  })],
  content: ["./node_modules/@resolid/react-ui/dist/*.{js,cjs}", "./src/**/*.{html,js,jsx,ts,tsx,mdx}"],
  theme: {
    extend: {
      colors: {
        // 这里你可以向默认调色板添加全新的颜色
      }
    }
  }
};

默认颜色

black

#1f2328

white

#ffffff

gray

#f6f8fa

100

#eaeef2

200

#d0d7de

300

#afb8c1

400

#8590A2

500

#6e7781

600

#57606a

700

#424a53

800

#32383f

900

#24292f

blue

#ddf4ff

100

#b6e3ff

200

#80ccff

300

#54aeff

400

#218bff

500

#0969da

600

#0550ae

700

#033d8b

800

#0a3069

900

#002155

green

#dafbe1

100

#aceebb

200

#6fdd8b

300

#4ac26b

400

#2da44e

500

#1a7f37

600

#116329

700

#044f1e

800

#003d16

900

#002d11

red

#ffebe9

100

#ffcecb

200

#ffaba8

300

#ff8182

400

#fa4549

500

#cf222e

600

#a40e26

700

#82071e

800

#660018

900

#4c0014

yellow

#fff8c5

100

#fae17d

200

#eac54f

300

#d4a72c

400

#bf8700

500

#9a6700

600

#7d4e00

700

#633c01

800

#4d2d00

900

#3b2300

purple

#fbefff

100

#ecd8ff

200

#d8b9ff

300

#c297ff

400

#a475f9

500

#8250df

600

#6639ba

700

#512a97

800

#3e1f79

900

#2e1461

深色模式

默认情况下，Resolid React UI 的组件都兼容深色模式。

Resolid React UI 将颜色模式存储在 localStorage 中，并将 className 附加到 body 以确保颜色模式持久。

您可以使用 useColorModeState 和 useColorModeDispatch Hook 轻松构建颜色模式按钮。

const colorMode = useColorModeState();
const setColorMode = useColorModeDispatch();

return (<Button variant={"soft"} onClick={()=> setColorMode(colorMode == 'dark' ? 'light' : 'dark')} color={"neutral"} square>
  <SpriteIcon name={colorMode == 'dark' ? 'sun' : 'moon'} />
</Button>)

SSR 防闪烁

我们不会将 light 作为每个人的默认设置，而是检查他们是否在系统设置中设置了媒体首选项。如果他们说他们更喜欢深色模式，我们可以使用深色作为初始状态。

复杂性的出现是因为我们使用服务器端渲染（SSR）。当服务器计算初始状态时，它不会知道用户的媒体偏好应该是什么 - 它必须等待客户端来计算。

我们需要在 HTML Body 的头部添加一个 ColorModeScript 组件。组件是阻塞的，因此它将在渲染正文的其余部分之前运行。我们可以用它来确保我们最初的水合前状态与水合后状态相匹配。

import { ColorModeScript } from '@resolid/react-ui';

function App() {

  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        {/* ... */}
      </head>
      <body>
        <ColorModeScript />
        {/* ... */}
      </body>
    </html>
  );
}