如何在 Chakra UI 主题中设置原色？

Question

我想在我的主题中设置主色和次色。js/theme.ts.有什么办法吗？

我习惯于在我的 React 项目中使用 Material UI 组件。可以在那里设置 'primary' 和 'secondary' 的调色板。

我的意思是这样的：

export const theme = createTheme({
  palette: {
    primary: {
      main: "#7bb9e8"
    },
    secondary: {
      main: "#eb7f7f"
    }
  }
})

Answer 1

您可以customize the theme以任何可能的方式:

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  colors: {
    primary: {
      main: "#7bb9e8"
    },
    secondary: {
      main: "#eb7f7f"
    }
  }
});

然后把这个主题传给ChakraProvider

//index.js

    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>

并且您将能够使用自己的颜色通过 useTheme 挂钩访问主题：

import { useTheme } from "@chakra-ui/react";
...
  const theme = useTheme();
...
<Button bg={theme.colors.primary.main}>Button</Button>

或者全局覆盖组件样式inside the component object

Demo

Answer 2

一旦定义了所有颜色的阴影，就可以将自定义颜色用作组件的 colorSheme:

const theme = extendTheme({
   colors: {
     primary: {
      main: "#7bb9e8",
      50: "#e3f2fd",
      100: "#bbdefb",
      200: "#90caf9",
      300: "#64b5f6",
      400: "#42a5f5",
      500: "#2196f3",
      600: "#1e88e5",
      700: "#1976d2",
      800: "#1565c0",
      900: "#0d47a1"
    }
  }
});

你的组件：

<Button colorScheme="primary">Button</Button>

Demo

Answer 3

根据本节：https://chakra-ui.com/docs/styled-system/theming/customize-theme#using-theme-extensions

您不必到处都通过 color='primary'。

只需创建自定义主题，然后将主要颜色设置为默认颜色。

此示例说明如何将青色设置为每个组件的默认颜色。

const theme = extendTheme(
  {
    colors: {
      primary: baseTheme.colors.cyan
    },
    breakpoints,
  },
  withDefaultColorScheme({
    colorScheme: 'primary'
  }),
);

Answer 4

您可以使用 default 和 _dark 属性设置两种原色变体。它将根据实际颜色模式（light/dark 主题）使用。

import { extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  initialColorMode: 'light',
  semanticTokens: {
    colors: {
      text: {
        default: '#16161D',
        _dark: '#ade3b8',
      },
      primary: {
        default: '#FF0080',
        _dark: '#fbec8f',
      },
})

export default theme

如何在 Chakra UI 主题中设置原色？

How can I set a primary color in Chakra UI theme?

themes

reactjs

chakra-ui