From fbab5df6559be6391783cd0837bef70c212695eb Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Mon, 5 Dec 2022 14:06:42 +0800
Subject: [PATCH] docs: update Layout demo (#39255)

* docs: update Layout demo

* chore: code clean

* chore: update snapshot
---
 .../__snapshots__/demo-extend.test.ts.snap    | 57 +++++++-------
 .../__tests__/__snapshots__/demo.test.ts.snap | 57 +++++++-------
 components/layout/demo/basic.md               | 12 ---
 .../layout/demo/custom-trigger-debug.tsx      |  9 ++-
 components/layout/demo/custom-trigger.md      |  4 -
 components/layout/demo/custom-trigger.tsx     |  9 ++-
 components/layout/demo/fixed-sider.md         | 17 -----
 components/layout/demo/fixed-sider.tsx        | 76 ++++++++++---------
 components/layout/demo/fixed.md               | 19 -----
 components/layout/demo/fixed.tsx              | 68 ++++++++++-------
 components/layout/demo/responsive.md          | 14 ----
 components/layout/demo/responsive.tsx         | 76 ++++++++++---------
 components/layout/demo/side.md                | 18 -----
 components/layout/demo/side.tsx               | 11 ++-
 components/layout/demo/top-side-2.md          |  4 -
 components/layout/demo/top-side-2.tsx         | 74 +++++++++---------
 components/layout/demo/top-side.md            |  4 -
 components/layout/demo/top-side.tsx           | 64 +++++++++-------
 components/layout/demo/top.md                 |  7 --
 components/layout/demo/top.tsx                | 66 +++++++++-------
 components/layout/index.en-US.md              |  9 ---
 components/layout/index.zh-CN.md              |  9 ---
 22 files changed, 306 insertions(+), 378 deletions(-)

diff --git a/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
index 4ccce9523e..06e84c1200 100644
--- a/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -380,8 +380,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx extend context corr
     class="ant-layout site-layout"
   >
     <header
-      class="ant-layout-header site-layout-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
     >
       <span
         aria-label="menu-fold"
@@ -405,8 +405,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx extend context corr
       </span>
     </header>
     <main
-      class="ant-layout-content site-layout-background"
-      style="margin:24px 16px;padding:24px;min-height:280px"
+      class="ant-layout-content"
+      style="margin:24px 16px;padding:24px;min-height:280px;background:#ffffff"
     >
       Content
     </main>
@@ -423,7 +423,7 @@ exports[`renders ./components/layout/demo/fixed.tsx extend context correctly 1`]
     style="position:sticky;top:0;z-index:1;width:100%"
   >
     <div
-      class="logo"
+      style="float:left;width:120px;height:31px;margin:16px 24px 16px 0;background:rgba(255, 255, 255, 0.2)"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@@ -656,7 +656,7 @@ exports[`renders ./components/layout/demo/fixed.tsx extend context correctly 1`]
   </header>
   <main
     class="ant-layout-content site-layout"
-    style="padding:0 50px;margin-top:64px"
+    style="padding:0 50px"
   >
     <nav
       class="ant-breadcrumb"
@@ -702,8 +702,7 @@ exports[`renders ./components/layout/demo/fixed.tsx extend context correctly 1`]
       </ol>
     </nav>
     <div
-      class="site-layout-background"
-      style="padding:24px;min-height:380px"
+      style="padding:24px;min-height:380px;background:#ffffff"
     >
       Content
     </div>
@@ -729,7 +728,7 @@ exports[`renders ./components/layout/demo/fixed-sider.tsx extend context correct
       class="ant-layout-sider-children"
     >
       <div
-        class="logo"
+        style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -1350,16 +1349,15 @@ exports[`renders ./components/layout/demo/fixed-sider.tsx extend context correct
     style="margin-left:200px"
   >
     <header
-      class="ant-layout-header site-layout-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
     />
     <main
       class="ant-layout-content"
       style="margin:24px 16px 0;overflow:initial"
     >
       <div
-        class="site-layout-background"
-        style="padding:24px;text-align:center"
+        style="padding:24px;text-align:center;background:#ffffff"
       >
         <p>
           long content
@@ -1908,16 +1906,15 @@ exports[`renders ./components/layout/demo/responsive.tsx extend context correctl
     class="ant-layout"
   >
     <header
-      class="ant-layout-header site-layout-sub-header-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
     />
     <main
       class="ant-layout-content"
       style="margin:24px 16px 0"
     >
       <div
-        class="site-layout-background"
-        style="padding:24px;min-height:360px"
+        style="padding:24px;min-height:360px;background:#ffffff"
       >
         content
       </div>
@@ -1945,7 +1942,7 @@ exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`]
       class="ant-layout-sider-children"
     >
       <div
-        class="logo"
+        style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -2600,8 +2597,8 @@ exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`]
     class="ant-layout site-layout"
   >
     <header
-      class="ant-layout-header site-layout-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
     />
     <main
       class="ant-layout-content"
@@ -2639,8 +2636,7 @@ exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`]
         </ol>
       </nav>
       <div
-        class="site-layout-background"
-        style="padding:24px;min-height:360px"
+        style="padding:24px;min-height:360px;background:#ffffff"
       >
         Bill is a cat.
       </div>
@@ -3615,6 +3611,7 @@ exports[`renders ./components/layout/demo/top.tsx extend context correctly 1`] =
     </nav>
     <div
       class="site-layout-content"
+      style="background:#ffffff"
     >
       Content
     </div>
@@ -3915,12 +3912,12 @@ exports[`renders ./components/layout/demo/top-side.tsx extend context correctly
       </ol>
     </nav>
     <section
-      class="ant-layout site-layout-background"
-      style="padding:24px 0"
+      class="ant-layout"
+      style="padding:24px 0;background:#ffffff"
     >
       <aside
-        class="ant-layout-sider ant-layout-sider-dark site-layout-background"
-        style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+        class="ant-layout-sider ant-layout-sider-dark"
+        style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
       >
         <div
           class="ant-layout-sider-children"
@@ -5172,8 +5169,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
     class="ant-layout"
   >
     <aside
-      class="ant-layout-sider ant-layout-sider-dark site-layout-background"
-      style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+      class="ant-layout-sider ant-layout-sider-dark"
+      style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
     >
       <div
         class="ant-layout-sider-children"
@@ -6213,8 +6210,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
         </ol>
       </nav>
       <main
-        class="ant-layout-content site-layout-background"
-        style="padding:24px;margin:0;min-height:280px"
+        class="ant-layout-content"
+        style="padding:24px;margin:0;min-height:280px;background:#ffffff"
       >
         Content
       </main>
diff --git a/components/layout/__tests__/__snapshots__/demo.test.ts.snap b/components/layout/__tests__/__snapshots__/demo.test.ts.snap
index 84abce9d23..dcb33927f0 100644
--- a/components/layout/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/layout/__tests__/__snapshots__/demo.test.ts.snap
@@ -247,8 +247,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx correctly 1`] = `
     class="ant-layout site-layout"
   >
     <header
-      class="ant-layout-header site-layout-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
     >
       <span
         aria-label="menu-fold"
@@ -272,8 +272,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx correctly 1`] = `
       </span>
     </header>
     <main
-      class="ant-layout-content site-layout-background"
-      style="margin:24px 16px;padding:24px;min-height:280px"
+      class="ant-layout-content"
+      style="margin:24px 16px;padding:24px;min-height:280px;background:#ffffff"
     >
       Content
     </main>
@@ -290,7 +290,7 @@ exports[`renders ./components/layout/demo/fixed.tsx correctly 1`] = `
     style="position:sticky;top:0;z-index:1;width:100%"
   >
     <div
-      class="logo"
+      style="float:left;width:120px;height:31px;margin:16px 24px 16px 0;background:rgba(255, 255, 255, 0.2)"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@@ -379,7 +379,7 @@ exports[`renders ./components/layout/demo/fixed.tsx correctly 1`] = `
   </header>
   <main
     class="ant-layout-content site-layout"
-    style="padding:0 50px;margin-top:64px"
+    style="padding:0 50px"
   >
     <nav
       class="ant-breadcrumb"
@@ -425,8 +425,7 @@ exports[`renders ./components/layout/demo/fixed.tsx correctly 1`] = `
       </ol>
     </nav>
     <div
-      class="site-layout-background"
-      style="padding:24px;min-height:380px"
+      style="padding:24px;min-height:380px;background:#ffffff"
     >
       Content
     </div>
@@ -452,7 +451,7 @@ exports[`renders ./components/layout/demo/fixed-sider.tsx correctly 1`] = `
       class="ant-layout-sider-children"
     >
       <div
-        class="logo"
+        style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -720,16 +719,15 @@ exports[`renders ./components/layout/demo/fixed-sider.tsx correctly 1`] = `
     style="margin-left:200px"
   >
     <header
-      class="ant-layout-header site-layout-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
     />
     <main
       class="ant-layout-content"
       style="margin:24px 16px 0;overflow:initial"
     >
       <div
-        class="site-layout-background"
-        style="padding:24px;text-align:center"
+        style="padding:24px;text-align:center;background:#ffffff"
       >
         <p>
           long content
@@ -1101,16 +1099,15 @@ exports[`renders ./components/layout/demo/responsive.tsx correctly 1`] = `
     class="ant-layout"
   >
     <header
-      class="ant-layout-header site-layout-sub-header-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
     />
     <main
       class="ant-layout-content"
       style="margin:24px 16px 0"
     >
       <div
-        class="site-layout-background"
-        style="padding:24px;min-height:360px"
+        style="padding:24px;min-height:360px;background:#ffffff"
       >
         content
       </div>
@@ -1138,7 +1135,7 @@ exports[`renders ./components/layout/demo/side.tsx correctly 1`] = `
       class="ant-layout-sider-children"
     >
       <div
-        class="logo"
+        style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -1356,8 +1353,8 @@ exports[`renders ./components/layout/demo/side.tsx correctly 1`] = `
     class="ant-layout site-layout"
   >
     <header
-      class="ant-layout-header site-layout-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
     />
     <main
       class="ant-layout-content"
@@ -1395,8 +1392,7 @@ exports[`renders ./components/layout/demo/side.tsx correctly 1`] = `
         </ol>
       </nav>
       <div
-        class="site-layout-background"
-        style="padding:24px;min-height:360px"
+        style="padding:24px;min-height:360px;background:#ffffff"
       >
         Bill is a cat.
       </div>
@@ -1699,6 +1695,7 @@ exports[`renders ./components/layout/demo/top.tsx correctly 1`] = `
     </nav>
     <div
       class="site-layout-content"
+      style="background:#ffffff"
     >
       Content
     </div>
@@ -1855,12 +1852,12 @@ exports[`renders ./components/layout/demo/top-side.tsx correctly 1`] = `
       </ol>
     </nav>
     <section
-      class="ant-layout site-layout-background"
-      style="padding:24px 0"
+      class="ant-layout"
+      style="padding:24px 0;background:#ffffff"
     >
       <aside
-        class="ant-layout-sider ant-layout-sider-dark site-layout-background"
-        style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+        class="ant-layout-sider ant-layout-sider-dark"
+        style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
       >
         <div
           class="ant-layout-sider-children"
@@ -2171,8 +2168,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx correctly 1`] = `
     class="ant-layout"
   >
     <aside
-      class="ant-layout-sider ant-layout-sider-dark site-layout-background"
-      style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+      class="ant-layout-sider ant-layout-sider-dark"
+      style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
     >
       <div
         class="ant-layout-sider-children"
@@ -2415,8 +2412,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx correctly 1`] = `
         </ol>
       </nav>
       <main
-        class="ant-layout-content site-layout-background"
-        style="padding:24px;margin:0;min-height:280px"
+        class="ant-layout-content"
+        style="padding:24px;margin:0;min-height:280px;background:#ffffff"
       >
         Content
       </main>
diff --git a/components/layout/demo/basic.md b/components/layout/demo/basic.md
index 4e5be478ab..6e2fb2a9cc 100644
--- a/components/layout/demo/basic.md
+++ b/components/layout/demo/basic.md
@@ -15,12 +15,6 @@ Classic page layouts.
   color: #fff;
   background: #7dbcea;
 }
-[data-theme="dark"] #components-layout-demo-basic .ant-layout-header {
-  background: #6aa0c7;
-}
-[data-theme="dark"] #components-layout-demo-basic .ant-layout-footer {
-  background: #6aa0c7;
-}
 #components-layout-demo-basic .ant-layout-footer {
   line-height: 1.5;
 }
@@ -29,18 +23,12 @@ Classic page layouts.
   line-height: 120px;
   background: #3ba0e9;
 }
-[data-theme="dark"] #components-layout-demo-basic .ant-layout-sider {
-  background: #3499ec;
-}
 #components-layout-demo-basic .ant-layout-content {
   min-height: 120px;
   color: #fff;
   line-height: 120px;
   background: rgba(16, 142, 233, 1);
 }
-[data-theme="dark"] #components-layout-demo-basic .ant-layout-content {
-  background: #107bcb;
-}
 #components-layout-demo-basic > .code-box-demo > .ant-layout + .ant-layout {
   margin-top: 48px;
 }
diff --git a/components/layout/demo/custom-trigger-debug.tsx b/components/layout/demo/custom-trigger-debug.tsx
index cea718e6e7..c6ed4d4df3 100644
--- a/components/layout/demo/custom-trigger-debug.tsx
+++ b/components/layout/demo/custom-trigger-debug.tsx
@@ -9,7 +9,7 @@ import {
   UserOutlined,
 } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Layout, Menu } from 'antd';
+import { Layout, Menu, theme } from 'antd';
 
 const { Header, Sider, Content } = Layout;
 
@@ -66,6 +66,9 @@ const items: MenuProps['items'] = [
 
 const App: React.FC = () => {
   const [collapsed, setCollapsed] = useState(true);
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
 
   return (
     <Layout>
@@ -80,18 +83,18 @@ const App: React.FC = () => {
         />
       </Sider>
       <Layout>
-        <Header className="site-layout-background" style={{ padding: 0 }}>
+        <Header style={{ padding: 0, background: colorBgContainer }}>
           {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
             className: 'trigger',
             onClick: () => setCollapsed(!collapsed),
           })}
         </Header>
         <Content
-          className="site-layout-background"
           style={{
             margin: '24px 16px',
             padding: 24,
             minHeight: 280,
+            background: colorBgContainer,
           }}
         >
           Content
diff --git a/components/layout/demo/custom-trigger.md b/components/layout/demo/custom-trigger.md
index 98827a3967..9b0d61d787 100644
--- a/components/layout/demo/custom-trigger.md
+++ b/components/layout/demo/custom-trigger.md
@@ -24,8 +24,4 @@ If you want to use a customized trigger, you can hide the default one by setting
   margin: 16px;
   background: rgba(255, 255, 255, 0.3);
 }
-
-#components-layout-demo-custom-trigger .site-layout .site-layout-background {
-  background: #fff;
-}
 ```
diff --git a/components/layout/demo/custom-trigger.tsx b/components/layout/demo/custom-trigger.tsx
index 76a8ab9453..bf436c5ac0 100644
--- a/components/layout/demo/custom-trigger.tsx
+++ b/components/layout/demo/custom-trigger.tsx
@@ -6,12 +6,15 @@ import {
   UserOutlined,
   VideoCameraOutlined,
 } from '@ant-design/icons';
-import { Layout, Menu } from 'antd';
+import { Layout, Menu, theme } from 'antd';
 
 const { Header, Sider, Content } = Layout;
 
 const App: React.FC = () => {
   const [collapsed, setCollapsed] = useState(false);
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
 
   return (
     <Layout>
@@ -41,18 +44,18 @@ const App: React.FC = () => {
         />
       </Sider>
       <Layout className="site-layout">
-        <Header className="site-layout-background" style={{ padding: 0 }}>
+        <Header style={{ padding: 0, background: colorBgContainer }}>
           {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
             className: 'trigger',
             onClick: () => setCollapsed(!collapsed),
           })}
         </Header>
         <Content
-          className="site-layout-background"
           style={{
             margin: '24px 16px',
             padding: 24,
             minHeight: 280,
+            background: colorBgContainer,
           }}
         >
           Content
diff --git a/components/layout/demo/fixed-sider.md b/components/layout/demo/fixed-sider.md
index c90b786223..f19e70e0d1 100644
--- a/components/layout/demo/fixed-sider.md
+++ b/components/layout/demo/fixed-sider.md
@@ -5,20 +5,3 @@
 ## en-US
 
 When dealing with long content, a fixed sider can provide a better user experience.
-
-```css
-#components-layout-demo-fixed-sider .logo {
-  height: 32px;
-  margin: 16px;
-  background: rgba(255, 255, 255, 0.2);
-}
-#components-layout-demo-fixed-sider .site-layout .site-layout-background {
-  background: #fff;
-}
-```
-
-<style>
-  [data-theme="dark"] .site-layout .site-layout-background {
-    background: #141414;
-  }
-</style>
diff --git a/components/layout/demo/fixed-sider.tsx b/components/layout/demo/fixed-sider.tsx
index bf6db0ffa4..82be9021cf 100644
--- a/components/layout/demo/fixed-sider.tsx
+++ b/components/layout/demo/fixed-sider.tsx
@@ -10,7 +10,7 @@ import {
   VideoCameraOutlined,
 } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Layout, Menu } from 'antd';
+import { Layout, Menu, theme } from 'antd';
 
 const { Header, Content, Footer, Sider } = Layout;
 
@@ -29,40 +29,46 @@ const items: MenuProps['items'] = [
   label: `nav ${index + 1}`,
 }));
 
-const App: React.FC = () => (
-  <Layout hasSider>
-    <Sider
-      style={{
-        overflow: 'auto',
-        height: '100vh',
-        position: 'fixed',
-        left: 0,
-        top: 0,
-        bottom: 0,
-      }}
-    >
-      <div className="logo" />
-      <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
-    </Sider>
-    <Layout className="site-layout" style={{ marginLeft: 200 }}>
-      <Header className="site-layout-background" style={{ padding: 0 }} />
-      <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
-        <div className="site-layout-background" style={{ padding: 24, textAlign: 'center' }}>
-          <p>long content</p>
-          {
-            // indicates very long content
-            Array.from({ length: 100 }, (_, index) => (
-              <React.Fragment key={index}>
-                {index % 20 === 0 && index ? 'more' : '...'}
-                <br />
-              </React.Fragment>
-            ))
-          }
-        </div>
-      </Content>
-      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  return (
+    <Layout hasSider>
+      <Sider
+        style={{
+          overflow: 'auto',
+          height: '100vh',
+          position: 'fixed',
+          left: 0,
+          top: 0,
+          bottom: 0,
+        }}
+      >
+        <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
+        <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
+      </Sider>
+      <Layout className="site-layout" style={{ marginLeft: 200 }}>
+        <Header style={{ padding: 0, background: colorBgContainer }} />
+        <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
+          <div style={{ padding: 24, textAlign: 'center', background: colorBgContainer }}>
+            <p>long content</p>
+            {
+              // indicates very long content
+              Array.from({ length: 100 }, (_, index) => (
+                <React.Fragment key={index}>
+                  {index % 20 === 0 && index ? 'more' : '...'}
+                  <br />
+                </React.Fragment>
+              ))
+            }
+          </div>
+        </Content>
+        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+      </Layout>
     </Layout>
-  </Layout>
-);
+  );
+};
 
 export default App;
diff --git a/components/layout/demo/fixed.md b/components/layout/demo/fixed.md
index 721ded4ea8..b68792873d 100644
--- a/components/layout/demo/fixed.md
+++ b/components/layout/demo/fixed.md
@@ -5,22 +5,3 @@
 ## en-US
 
 Fixed Header is generally used to fix the top navigation to facilitate page switching.
-
-```css
-#components-layout-demo-fixed .logo {
-  float: left;
-  width: 120px;
-  height: 31px;
-  margin: 16px 24px 16px 0;
-  background: rgba(255, 255, 255, 0.2);
-}
-#components-layout-demo-fixed .site-layout .site-layout-background {
-  background: #fff;
-}
-```
-
-<style>
-[data-theme="dark"] .site-layout .site-layout-background {
-  background: #141414;
-}
-</style>
diff --git a/components/layout/demo/fixed.tsx b/components/layout/demo/fixed.tsx
index 5c7aa4abce..79d2901f73 100644
--- a/components/layout/demo/fixed.tsx
+++ b/components/layout/demo/fixed.tsx
@@ -1,34 +1,46 @@
 import React from 'react';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';
 
 const { Header, Content, Footer } = Layout;
 
-const App: React.FC = () => (
-  <Layout>
-    <Header style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
-      <div className="logo" />
-      <Menu
-        theme="dark"
-        mode="horizontal"
-        defaultSelectedKeys={['2']}
-        items={new Array(3).fill(null).map((_, index) => ({
-          key: String(index + 1),
-          label: `nav ${index + 1}`,
-        }))}
-      />
-    </Header>
-    <Content className="site-layout" style={{ padding: '0 50px', marginTop: 64 }}>
-      <Breadcrumb style={{ margin: '16px 0' }}>
-        <Breadcrumb.Item>Home</Breadcrumb.Item>
-        <Breadcrumb.Item>List</Breadcrumb.Item>
-        <Breadcrumb.Item>App</Breadcrumb.Item>
-      </Breadcrumb>
-      <div className="site-layout-background" style={{ padding: 24, minHeight: 380 }}>
-        Content
-      </div>
-    </Content>
-    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
-  </Layout>
-);
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  return (
+    <Layout>
+      <Header style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
+        <div
+          style={{
+            float: 'left',
+            width: 120,
+            height: 31,
+            margin: '16px 24px 16px 0',
+            background: 'rgba(255, 255, 255, 0.2)',
+          }}
+        />
+        <Menu
+          theme="dark"
+          mode="horizontal"
+          defaultSelectedKeys={['2']}
+          items={new Array(3).fill(null).map((_, index) => ({
+            key: String(index + 1),
+            label: `nav ${index + 1}`,
+          }))}
+        />
+      </Header>
+      <Content className="site-layout" style={{ padding: '0 50px' }}>
+        <Breadcrumb style={{ margin: '16px 0' }}>
+          <Breadcrumb.Item>Home</Breadcrumb.Item>
+          <Breadcrumb.Item>List</Breadcrumb.Item>
+          <Breadcrumb.Item>App</Breadcrumb.Item>
+        </Breadcrumb>
+        <div style={{ padding: 24, minHeight: 380, background: colorBgContainer }}>Content</div>
+      </Content>
+      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+    </Layout>
+  );
+};
 
 export default App;
diff --git a/components/layout/demo/responsive.md b/components/layout/demo/responsive.md
index 3a50b89dd7..ee8ecb0d81 100644
--- a/components/layout/demo/responsive.md
+++ b/components/layout/demo/responsive.md
@@ -16,18 +16,4 @@ Layout.Sider supports responsive layout.
   margin: 16px;
   background: rgba(255, 255, 255, 0.2);
 }
-
-#components-layout-demo-responsive .site-layout-sub-header-background {
-  background: #fff;
-}
-
-#components-layout-demo-responsive .site-layout-background {
-  background: #fff;
-}
 ```
-
-<style>
-  [data-theme="dark"] .site-layout-sub-header-background {
-    background: #141414;
-  }
-</style>
diff --git a/components/layout/demo/responsive.tsx b/components/layout/demo/responsive.tsx
index 35f47ebf82..33d859935a 100644
--- a/components/layout/demo/responsive.tsx
+++ b/components/layout/demo/responsive.tsx
@@ -1,45 +1,49 @@
 import React from 'react';
 import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
-import { Layout, Menu } from 'antd';
+import { Layout, Menu, theme } from 'antd';
 
 const { Header, Content, Footer, Sider } = Layout;
 
-const App: React.FC = () => (
-  <Layout>
-    <Sider
-      breakpoint="lg"
-      collapsedWidth="0"
-      onBreakpoint={(broken) => {
-        console.log(broken);
-      }}
-      onCollapse={(collapsed, type) => {
-        console.log(collapsed, type);
-      }}
-    >
-      <div className="logo" />
-      <Menu
-        theme="dark"
-        mode="inline"
-        defaultSelectedKeys={['4']}
-        items={[UserOutlined, VideoCameraOutlined, UploadOutlined, UserOutlined].map(
-          (icon, index) => ({
-            key: String(index + 1),
-            icon: React.createElement(icon),
-            label: `nav ${index + 1}`,
-          }),
-        )}
-      />
-    </Sider>
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  return (
     <Layout>
-      <Header className="site-layout-sub-header-background" style={{ padding: 0 }} />
-      <Content style={{ margin: '24px 16px 0' }}>
-        <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
-          content
-        </div>
-      </Content>
-      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+      <Sider
+        breakpoint="lg"
+        collapsedWidth="0"
+        onBreakpoint={(broken) => {
+          console.log(broken);
+        }}
+        onCollapse={(collapsed, type) => {
+          console.log(collapsed, type);
+        }}
+      >
+        <div className="logo" />
+        <Menu
+          theme="dark"
+          mode="inline"
+          defaultSelectedKeys={['4']}
+          items={[UserOutlined, VideoCameraOutlined, UploadOutlined, UserOutlined].map(
+            (icon, index) => ({
+              key: String(index + 1),
+              icon: React.createElement(icon),
+              label: `nav ${index + 1}`,
+            }),
+          )}
+        />
+      </Sider>
+      <Layout>
+        <Header style={{ padding: 0, background: colorBgContainer }} />
+        <Content style={{ margin: '24px 16px 0' }}>
+          <div style={{ padding: 24, minHeight: 360, background: colorBgContainer }}>content</div>
+        </Content>
+        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+      </Layout>
     </Layout>
-  </Layout>
-);
+  );
+};
 
 export default App;
diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md
index 84ceff397b..ef1954abf6 100644
--- a/components/layout/demo/side.md
+++ b/components/layout/demo/side.md
@@ -13,21 +13,3 @@ Two-columns layout. The sider menu can be collapsed when horizontal space is lim
 Generally, the mainnav is placed on the left side of the page, and the secondary menu is placed on the top of the working area. Contents will adapt the layout to the viewing area to improve the horizontal space usage, while the layout of the whole page is not stable.
 
 The level of the aside navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents.
-
-```css
-#components-layout-demo-side .logo {
-  height: 32px;
-  margin: 16px;
-  background: rgba(255, 255, 255, 0.3);
-}
-
-#components-layout-demo-side .site-layout .site-layout-background {
-  background: #fff;
-}
-```
-
-<style>
-  [data-theme="dark"] .site-layout .site-layout-background {
-    background: #141414;
-  }
-</style>
diff --git a/components/layout/demo/side.tsx b/components/layout/demo/side.tsx
index 1e3b5a4ad9..9a6a98dc83 100644
--- a/components/layout/demo/side.tsx
+++ b/components/layout/demo/side.tsx
@@ -7,7 +7,7 @@ import {
   UserOutlined,
 } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';
 
 const { Header, Content, Footer, Sider } = Layout;
 
@@ -41,21 +41,24 @@ const items: MenuItem[] = [
 
 const App: React.FC = () => {
   const [collapsed, setCollapsed] = useState(false);
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
 
   return (
     <Layout style={{ minHeight: '100vh' }}>
       <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
-        <div className="logo" />
+        <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
         <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
       </Sider>
       <Layout className="site-layout">
-        <Header className="site-layout-background" style={{ padding: 0 }} />
+        <Header style={{ padding: 0, background: colorBgContainer }} />
         <Content style={{ margin: '0 16px' }}>
           <Breadcrumb style={{ margin: '16px 0' }}>
             <Breadcrumb.Item>User</Breadcrumb.Item>
             <Breadcrumb.Item>Bill</Breadcrumb.Item>
           </Breadcrumb>
-          <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
+          <div style={{ padding: 24, minHeight: 360, background: colorBgContainer }}>
             Bill is a cat.
           </div>
         </Content>
diff --git a/components/layout/demo/top-side-2.md b/components/layout/demo/top-side-2.md
index 0ea4993b05..638204f3b1 100644
--- a/components/layout/demo/top-side-2.md
+++ b/components/layout/demo/top-side-2.md
@@ -19,8 +19,4 @@ Both the top navigation and the sidebar, commonly used in application site.
   float: right;
   margin: 16px 0 16px 24px;
 }
-
-#components-layout-demo-top-side-2 .site-layout-background {
-  background: #fff;
-}
 ```
diff --git a/components/layout/demo/top-side-2.tsx b/components/layout/demo/top-side-2.tsx
index 0b90ce8d87..211633611f 100644
--- a/components/layout/demo/top-side-2.tsx
+++ b/components/layout/demo/top-side-2.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';
 
 const { Header, Content, Sider } = Layout;
 
@@ -30,41 +30,47 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
   },
 );
 
-const App: React.FC = () => (
-  <Layout>
-    <Header className="header">
-      <div className="logo" />
-      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
-    </Header>
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  return (
     <Layout>
-      <Sider width={200} className="site-layout-background">
-        <Menu
-          mode="inline"
-          defaultSelectedKeys={['1']}
-          defaultOpenKeys={['sub1']}
-          style={{ height: '100%', borderRight: 0 }}
-          items={items2}
-        />
-      </Sider>
-      <Layout style={{ padding: '0 24px 24px' }}>
-        <Breadcrumb style={{ margin: '16px 0' }}>
-          <Breadcrumb.Item>Home</Breadcrumb.Item>
-          <Breadcrumb.Item>List</Breadcrumb.Item>
-          <Breadcrumb.Item>App</Breadcrumb.Item>
-        </Breadcrumb>
-        <Content
-          className="site-layout-background"
-          style={{
-            padding: 24,
-            margin: 0,
-            minHeight: 280,
-          }}
-        >
-          Content
-        </Content>
+      <Header className="header">
+        <div className="logo" />
+        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
+      </Header>
+      <Layout>
+        <Sider width={200} style={{ background: colorBgContainer }}>
+          <Menu
+            mode="inline"
+            defaultSelectedKeys={['1']}
+            defaultOpenKeys={['sub1']}
+            style={{ height: '100%', borderRight: 0 }}
+            items={items2}
+          />
+        </Sider>
+        <Layout style={{ padding: '0 24px 24px' }}>
+          <Breadcrumb style={{ margin: '16px 0' }}>
+            <Breadcrumb.Item>Home</Breadcrumb.Item>
+            <Breadcrumb.Item>List</Breadcrumb.Item>
+            <Breadcrumb.Item>App</Breadcrumb.Item>
+          </Breadcrumb>
+          <Content
+            style={{
+              padding: 24,
+              margin: 0,
+              minHeight: 280,
+              background: colorBgContainer,
+            }}
+          >
+            Content
+          </Content>
+        </Layout>
       </Layout>
     </Layout>
-  </Layout>
-);
+  );
+};
 
 export default App;
diff --git a/components/layout/demo/top-side.md b/components/layout/demo/top-side.md
index 348bbf4603..7c3d0e5900 100644
--- a/components/layout/demo/top-side.md
+++ b/components/layout/demo/top-side.md
@@ -19,8 +19,4 @@ Both the top navigation and the sidebar, commonly used in documentation site.
   float: right;
   margin: 16px 0 16px 24px;
 }
-
-#components-layout-demo-top-side .site-layout-background {
-  background: #fff;
-}
 ```
diff --git a/components/layout/demo/top-side.tsx b/components/layout/demo/top-side.tsx
index 07c94906fe..1a5933230c 100644
--- a/components/layout/demo/top-side.tsx
+++ b/components/layout/demo/top-side.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';
 
 const { Header, Content, Footer, Sider } = Layout;
 
@@ -30,33 +30,39 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
   },
 );
 
-const App: React.FC = () => (
-  <Layout>
-    <Header className="header">
-      <div className="logo" />
-      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
-    </Header>
-    <Content style={{ padding: '0 50px' }}>
-      <Breadcrumb style={{ margin: '16px 0' }}>
-        <Breadcrumb.Item>Home</Breadcrumb.Item>
-        <Breadcrumb.Item>List</Breadcrumb.Item>
-        <Breadcrumb.Item>App</Breadcrumb.Item>
-      </Breadcrumb>
-      <Layout className="site-layout-background" style={{ padding: '24px 0' }}>
-        <Sider className="site-layout-background" width={200}>
-          <Menu
-            mode="inline"
-            defaultSelectedKeys={['1']}
-            defaultOpenKeys={['sub1']}
-            style={{ height: '100%' }}
-            items={items2}
-          />
-        </Sider>
-        <Content style={{ padding: '0 24px', minHeight: 280 }}>Content</Content>
-      </Layout>
-    </Content>
-    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
-  </Layout>
-);
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  return (
+    <Layout>
+      <Header className="header">
+        <div className="logo" />
+        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
+      </Header>
+      <Content style={{ padding: '0 50px' }}>
+        <Breadcrumb style={{ margin: '16px 0' }}>
+          <Breadcrumb.Item>Home</Breadcrumb.Item>
+          <Breadcrumb.Item>List</Breadcrumb.Item>
+          <Breadcrumb.Item>App</Breadcrumb.Item>
+        </Breadcrumb>
+        <Layout style={{ padding: '24px 0', background: colorBgContainer }}>
+          <Sider style={{ background: colorBgContainer }} width={200}>
+            <Menu
+              mode="inline"
+              defaultSelectedKeys={['1']}
+              defaultOpenKeys={['sub1']}
+              style={{ height: '100%' }}
+              items={items2}
+            />
+          </Sider>
+          <Content style={{ padding: '0 24px', minHeight: 280 }}>Content</Content>
+        </Layout>
+      </Content>
+      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+    </Layout>
+  );
+};
 
 export default App;
diff --git a/components/layout/demo/top.md b/components/layout/demo/top.md
index 8daa32345f..b5ffbe9e79 100644
--- a/components/layout/demo/top.md
+++ b/components/layout/demo/top.md
@@ -16,7 +16,6 @@ Top-bottom structure is conform with the top-bottom viewing habit, it's a classi
 .site-layout-content {
   min-height: 280px;
   padding: 24px;
-  background: #fff;
 }
 #components-layout-demo-top .logo {
   float: left;
@@ -30,9 +29,3 @@ Top-bottom structure is conform with the top-bottom viewing habit, it's a classi
   margin: 16px 0 16px 24px;
 }
 ```
-
-<style>
-  [data-theme="dark"] .site-layout-content {
-    background: #141414;
-  }
-</style>
diff --git a/components/layout/demo/top.tsx b/components/layout/demo/top.tsx
index 4ce8c2f8da..ccb0292ac5 100644
--- a/components/layout/demo/top.tsx
+++ b/components/layout/demo/top.tsx
@@ -1,35 +1,43 @@
 import React from 'react';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';
 
 const { Header, Content, Footer } = Layout;
 
-const App: React.FC = () => (
-  <Layout className="layout">
-    <Header>
-      <div className="logo" />
-      <Menu
-        theme="dark"
-        mode="horizontal"
-        defaultSelectedKeys={['2']}
-        items={new Array(15).fill(null).map((_, index) => {
-          const key = index + 1;
-          return {
-            key,
-            label: `nav ${key}`,
-          };
-        })}
-      />
-    </Header>
-    <Content style={{ padding: '0 50px' }}>
-      <Breadcrumb style={{ margin: '16px 0' }}>
-        <Breadcrumb.Item>Home</Breadcrumb.Item>
-        <Breadcrumb.Item>List</Breadcrumb.Item>
-        <Breadcrumb.Item>App</Breadcrumb.Item>
-      </Breadcrumb>
-      <div className="site-layout-content">Content</div>
-    </Content>
-    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
-  </Layout>
-);
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  return (
+    <Layout className="layout">
+      <Header>
+        <div className="logo" />
+        <Menu
+          theme="dark"
+          mode="horizontal"
+          defaultSelectedKeys={['2']}
+          items={new Array(15).fill(null).map((_, index) => {
+            const key = index + 1;
+            return {
+              key,
+              label: `nav ${key}`,
+            };
+          })}
+        />
+      </Header>
+      <Content style={{ padding: '0 50px' }}>
+        <Breadcrumb style={{ margin: '16px 0' }}>
+          <Breadcrumb.Item>Home</Breadcrumb.Item>
+          <Breadcrumb.Item>List</Breadcrumb.Item>
+          <Breadcrumb.Item>App</Breadcrumb.Item>
+        </Breadcrumb>
+        <div className="site-layout-content" style={{ background: colorBgContainer }}>
+          Content
+        </div>
+      </Content>
+      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+    </Layout>
+  );
+};
 
 export default App;
diff --git a/components/layout/index.en-US.md b/components/layout/index.en-US.md
index 222342567c..3f9668c0f9 100644
--- a/components/layout/index.en-US.md
+++ b/components/layout/index.en-US.md
@@ -126,12 +126,3 @@ The sidebar.
   xxl: '1600px',
 }
 ```
-
-<style>
-  [data-theme="dark"] .site-layout-background {
-    background: #141414;
-  }
-  [data-theme="dark"] .site-layout-header-background {
-    background: #1f1f1f;
-  }
-</style>
diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md
index 3fca43cd3f..14021ad8ed 100644
--- a/components/layout/index.zh-CN.md
+++ b/components/layout/index.zh-CN.md
@@ -127,12 +127,3 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAA
   xxl: '1600px',
 }
 ```
-
-<style>
-  [data-theme="dark"] .site-layout-background {
-    background: #141414;
-  }
-  [data-theme="dark"] .site-layout-header-background {
-    background: #1f1f1f;
-  }
-</style>