Theme Object

Kubed theme is an object containing a series of theme configurations, which include properties for colors, layout, fonts, and more.

1
interface KubedTheme {
2
  /** Theme name */
3
  type: string;
4
  /** Configure the font and default font size */
5
  font: KubedThemeFont;
6
  /** You can define spacing, control sizes, border radius, and other layout-related properties */
7
  layout: KubedThemeLayout;
8
  /** The color palette, where you can customize the theme colors */
9
  palette: KubedThemePalette;
10
  /** Set the responsive breakpoints */
11
  breakpoints: KubedThemeBreakpoints;
12
  /** Configure shadows, opacities, and line styles */
13
  expressiveness: KubedThemeExpressiveness;
14
}

Usage

1
import { KubedConfigProvider, Button, themeUtils } from "@kubed/components"
2
function App() {
3
  const customDarkTheme = themeUtils.createFromDark({
4
    type: "customDark",
5
    palette: {
6
      colors: {
7
        green: ["#E9EDFC", "#E9EDFC", "#E9EDFC", "#E9EDFC", "#E9EDFC"],
8
      },
9
    },
10
    layout: {
11
      inputSizes: {
12
        sm: "24px",
13
      },
14
    },
15
    expressiveness: {
16
      buttonShadow: () => "10px 10px 10px hotpink",
17
    },
18
  })
19
  return (
20
    <KubedConfigProvider themes={[customDarkTheme]} themeType={"customDark"}>
21
      <Button color="primary" shadow>
22
        button
23
      </Button>
24
    </KubedConfigProvider>
25
  )
26
}

Theme properties

palette

The color palette for Kubed is an object containing a series of color configurations, including properties for the theme's colors, backgrounds, text colors, and more. You can configure the theme's colors through the palette property. In KubedDesign, the primary color is green. You can change the primary color by setting the palette.colors.green property, using RGB, RGBA, or hex values. Alternatively, you can directly set the primary property

1
() => {
2
const customDarkTheme = themeUtils.createFromDark({
3
    type: "customDark",
4
    palette: {
5
      colors: {
6
        green: ["#E3FAFC", "#C5F6FA", "#99E9F2", "#66D9E8", "#3BC9DB"],
7
      },
8
    //  primary: "#3BC9DB",
9
    }
10
  });
11
 return <KubedConfigProvider themes={[customDarkTheme]} themeType={"customDark"}>
12
      <Button color="primary" shadow>
13
        button
14
      </Button>
15
    </KubedConfigProvider>;
16
};
17

layout

The layout in Kubed is an object containing a series of properties for spacing, control sizes, border radius, and other layout-related settings

1
() => {
2
const customDarkTheme = themeUtils.createFromDark({
3
    type: "customDark",
4
    layout: {
5
      inputSizes: {
6
        xs:'16px',
7
        sm: "24px",
8
        md: "32px",
9
        lg: "40px",
10
        xl: "48px",
11
      },
12
    },
13
  });
14
 return  <KubedConfigProvider themes={[customDarkTheme]} themeType={"customDark"}>
15
      <Button color='primary' size="xs">KubeSphere</Button>
16
      <Button color='primary' size="sm">KubeSphere</Button>
17
      <Button color='primary' size="md">KubeSphere</Button>
18
      <Button color='primary' size="lg">KubeSphere</Button>
19
      <Button color='primary' size="xl">KubeSphere</Button>
20
    </KubedConfigProvider>;
21
};
22

expressiveness

The expressiveness in Kubed is an object containing properties for button shadows, opacities, line styles, and other expressive design elements

1
() => {
2
const customDarkTheme = themeUtils.createFromDark({
3
    type: "customDark",
4
    expressiveness: {
5
      buttonShadow: () => "10px 10px 10px #5e9b7d",
6
    },
7
  });
8
 return  <KubedConfigProvider themes={[customDarkTheme]} themeType={"customDark"}>
9
      <Button color="primary" shadow>
10
        button
11
      </Button>
12
    </KubedConfigProvider>;
13
};
14