ThemeObject - Kube Design

快速上手

定制

Theme Object

Kubed的主题对象是一个包含了一系列主题配置的对象，它包含了颜色、布局、字体等属性

1
interface KubedTheme {
2
  /** 主题名称*/
3
  type: string;
4
  /** 配置字体和默认字号*/
5
  font: KubedThemeFont;
6
  /** 可以定义间距、控件大小、圆角等*/
7
  layout: KubedThemeLayout;
8
  /** 调色板，自定义主题颜色*/
9
  palette: KubedThemePalette;
10
  /** 设置响应式断点*/
11
  breakpoints: KubedThemeBreakpoints;
12
  /** 设置阴影、透明度、线条样式等*/
13
  expressiveness: KubedThemeExpressiveness;
14
}

使用

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

Kubed的调色板是一个包含了一系列颜色配置的对象，它包含了主题的颜色、背景色、文本色等属性。可以通过palette属性来配置主题的颜色。 KubedDesign的主色调是绿色，你可以通过设置palette.colors.green来改变主色调(但是只支持rbg、rgba、hex),也可以直接设置primary

() => {
const customDarkTheme = themeUtils.createFromDark({
    type: "customDark",
    palette: {
      colors: {
        green: ["#E3FAFC", "#C5F6FA", "#99E9F2", "#66D9E8", "#3BC9DB"],
      },
    //  primary: "#3BC9DB",
    }
  });
 return <KubedConfigProvider themes={[customDarkTheme]} themeType={"customDark"}>
      <Button color="primary" shadow>
        button
      </Button>
    </KubedConfigProvider>;
};

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

Kubed的布局是一个包含了一系列间距、控件大小、圆角等属性的对象

() => {
const customDarkTheme = themeUtils.createFromDark({
    type: "customDark",
    layout: {
      inputSizes: {
        xs:'16px',
        sm: "24px",
        md: "32px",
        lg: "40px",
        xl: "48px",
      },
    },
  });
 return  <KubedConfigProvider themes={[customDarkTheme]} themeType={"customDark"}>
      <Button color='primary' size="xs">KubeSphere</Button>
      <Button color='primary' size="sm">KubeSphere</Button>
      <Button color='primary' size="md">KubeSphere</Button>
      <Button color='primary' size="lg">KubeSphere</Button>
      <Button color='primary' size="xl">KubeSphere</Button>
    </KubedConfigProvider>;
};

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

Kubed的expressiveness是一个包含了按钮阴影、透明度、线条样式等属性的对象

() => {
const customDarkTheme = themeUtils.createFromDark({
    type: "customDark",
    expressiveness: {
      buttonShadow: () => "10px 10px 10px #5e9b7d",
    },
  });
 return  <KubedConfigProvider themes={[customDarkTheme]} themeType={"customDark"}>
      <Button color="primary" shadow>
        button
      </Button>
    </KubedConfigProvider>;
};

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

Colors

#f9fbfd

#eff4f9

#e3e9ef

#ccd3db

#abb4be

#6b7b95

#4a5974

#36435c

#242e42

#181d28

#c7deef

#7eb8dc

#329dce

#3385b0

#326e93

#c4e6d4

#a2d8bb

#55bc8a

#479e88

#3b747a

#ffe1be

#ffc781

#f5a623

#e0992c

#8d663e

#fae7e5

#ea8573

#ca2621

#ab2F29

#8c3231