Customize Theme

SeeYouUI provides theme configuration capabilities, allowing you to customize theme colors as needed.

Tip

The current theme is Light. You can toggle it via the top right corner of the documentation.

Global Dark Mode

Dark mode takes effect globally by default, changing all SeeYouUI components on the page to a dark style.

🎈 You only need to add two lines of code in manifest.json:

H5

"h5" : {
    "darkmode" : true,
    "themeLocation" : "theme.json",
},

app

"app-plus" : {
    "darkmode" : true,
    "themeLocation" : "theme.json",
},

mini Program

"mp-weixin" : {
    "darkmode" : true,
    "themeLocation" : "theme.json",
},

Okay! Restart the project, try switching your phone's Light/Dark mode, and see the effect!

Dynamic Switching

SeeYouUI provides the useTheme Hook. You can use the useTheme method in your code to switch themes.

Note

Due to WeChat Mini Program limitations, useTheme does not currently support Mini Programs.

import { useTheme } from "see-u-ui";

const theme = useTheme();
theme.setTheme("dark");
theme.setTheme("light");

Customize Theme

todo...