KubedConfigProvider

Provide the subject context objects, internationalization context, and custom color schemes. This must be used in the root directory of the application and can only be used once.

Usage

1
import { KubedConfigProvider } from "@kubed/components";
2

3
<KubedConfigProvider themeType={'dark'} locale={'zh'}>
4
  <App />
5
</KubedConfigProvider>;

Props

1
interface Props {
2
  /** your application **/
3
  children: React.ReactNode;
4
  /** Custom theme **/
5
  themes?: Array<KubedTheme>;
6
  /** Dark/light theme, or the name of a custom theme. **/
7
  themeType?: string | 'dark' | 'light';
8
  /** The current language,default support 'en', 'zh', 'zh-tw', 'es' **/
9
  locale?: Locale;
10
  /**  extend your locals **/
11
  extendLocales?: Record<Locale, ILocale>;
12
}

Custom theme

Pass the theme objects to the themes property to customize the theme, which will be merged with the default theme and used across all components.

1
import { KubedConfigProvider, Button, themeUtils } from "@kubed/components"
2
function App() {
3
  const customDarkTheme = themeUtils.createFromDark({
4
    type: "customDark",
5
    palette: {
6
      accents_1: "#1098AD",
7
      accents_2: "#3BC9DB",
8
    },
9
  })
10
  const customLightTheme = themeUtils.createFromLight({
11
    type: "customLight",
12
    palette: {
13
      accents_1: "#F76707",
14
      accents_2: "#FFA94D",
15
    },
16
  })
17
  const [themeType, setThemeType] = useState("customDark")
18
  return (
19
    <KubedConfigProvider
20
      themes={[customDarkTheme, customLightTheme]}
21
      themeType={themeType}
22
    >
23
      <Button
24
        onClick={() => {
25
          if (themeType === "customDark") {
26
            setThemeType("customLight")
27
          } else {
28
            setThemeType("customDark")
29
          }
30
        }}
31
      >
32
        button
33
      </Button>
34
    </KubedConfigProvider>
35
  )
36
}