Layout.Header light theme

[Kamahl19]

What problem does this feature solve?

Layout.Header background color is set to dark

ant-design/components/layout/style/index.ts

Line 220 in d80fa29

colorBgHeader: '#001529',

and there is no theme prop or any token which could change this.

Menu has a theme prop. When we render Menu inside Layout.Header we should be able to set both either to light or dark theme so that they work together nicely.

Here is a simple demo https://codesandbox.io/s/header-content-footer-antd-5-1-6-forked-c1e3u4?file=/demo.tsx

What does the proposed API look like?

<Layout.Header theme="light | dark" />

[NadirBakhsh]

@Kamahl19

You are right here that we need to build this feature, But I observe that if we use a theme prop for the header it will contain white color, here we face more issues it mixes with the second section if it has white color, so if give white color to the header need also heard shadow or border which is identify this is a header section

[leo220yuyaodog]

I also meet the problom. In ConfigProvider, I set the defaultAlgorithm, but the Header in layout is dark.

[MadCcc]

Trace in #38975