定制主题

使用主题自定义 Nex UI，您可以改变颜色，排版等更多。

主题可以让整个应用程序保持一致的外观和感觉，您可以定制组件的所有设计元素，以满足您的业务或品牌的特定需求。

为了使各个应用之间的风格更加一致，可以选择浅色主题类型和深色主题类型。默认情况下，组件使用浅色主题类型。

Nex UI Provider

Nex UI 内置了默认的主题，通过 NexUIProvider 的 theme 属性可将自定义主题应用到您的应用程序中。

也可以通过 defineTheme 函数生成主题，将其返回值作为属性传递给 NexUIProvider.theme。


import { defineTheme, NexUIProvider } from '@nex-ui/react'
 
const theme = defineTheme({
  tokens: {
    black: '#000',
    sky: {
      50: '#f0f9ff',
      100: '#dff2fe',
      200: '#b8e6fe',
      300: '#74d4ff',
      400: '#00bcff',
      500: '#00a6f4',
      600: '#00a6f4',
      700: '#0069a8',
      800: '#00598a',
      900: '#024a71',
    },
  },
})
 
export default function App() {
  return (
    <NexUIProvider theme={theme}>
      <Button>button</Button>
    </NexUIProvider>
  )
}

可配置的主题属性

更改主题配置属性是使 Nex UI 满足需求的最有效方法。下列涵盖了所有的主题属性：

向主题中添加额外属性，这样您就能在其他各处使用这些属性了。通过上述链接可查看更多信息。


import { defineTheme } from '@nex-ui/react'
 
const theme = defineTheme({
  tokens: {
    colors: {
      black: '#1a1e23',
      blue: {
        500: '#006FEE',
      },
    },
  },
  semanticTokens: {
    colors: {
      primary: '#338EF7',
      text: {
        heading: '#0f172b',
        body: '#314158',
      },
    },
  },
})

嵌套主题

您可以嵌套使用 NexUIProvider 实现局部组件主题的更换。


import { NexUIProvider, defineTheme } from '@nex-ui/react'
 
const outerTheme = defineTheme({
  components: {
    Checkbox: {
      defaultProps: {
        color: 'red',
      },
    },
  },
})
 
const innerTheme = defineTheme({
  components: {
    Checkbox: {
      defaultProps: {
        color: 'green',
      },
    },
  },
})
 
export default function App() {
  return (
    <NexUIProvider theme={outerTheme}>
      <Checkbox defaultChecked />
      <NexUIProvider theme={innerTheme}>
        <Checkbox defaultChecked />
      </NexUIProvider>
    </NexUIProvider>
  )
}

嵌套 NexUIProvider 唯有 theme.components 和 theme.primaryThemeColor 属性有效，其他属性仅在顶层 NexUIProvider 有效。

组件主题色

组件的主题色可以通过 theme.primaryThemeColor 属性进行配置。


import { NexUIProvider, defineTheme } from '@nex-ui/react'
import { Button } from '@nex-ui/react'
 
const theme = defineTheme({
  primaryThemeColor: 'orange',
})
 
export default function App() {
  return (
    <NexUIProvider theme={theme}>
      <Checkbox defaultChecked />
      <Switch defaultChecked />
      <Button>Button</Button>
    </NexUIProvider>
  )
}

API

defineTheme

defineTheme(options) => theme

根据选项生成一个主题。然后，将其作为属性传递给主题提供器。

NexUIProviderProps

Prop	Type	Default	Description
children	ReactNode	-	组件树。
prefix	string	'nex-ui'	CSS 变量和组件类名的前缀。
theme	Theme	-	自定义主题，通常为 `defineTheme` 的返回值。
colorScheme	Omit<ColorSchemeProviderProps, 'children'>	-	颜色方案。