diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx
index b149884102..6f91833a8a 100644
--- a/components/layout/Sider.tsx
+++ b/components/layout/Sider.tsx
@@ -9,6 +9,7 @@ import omit from 'rc-util/lib/omit';
 import isNumeric from '../_util/isNumeric';
 import { ConfigContext } from '../config-provider';
 import { LayoutContext } from './context';
+import useStyle from './style/sider';
 
 const dimensionMaxMap = {
   xs: '479.98px',
@@ -97,6 +98,12 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>((props, ref) => {
     onCollapse?.(value, type);
   };
 
+  // =========================== Prefix ===========================
+  const { getPrefixCls } = useContext(ConfigContext);
+  const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
+
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
+
   // ========================= Responsive =========================
   const responsiveHandlerRef = useRef<(mql: MediaQueryListEvent | MediaQueryList) => void>();
   responsiveHandlerRef.current = (mql: MediaQueryListEvent | MediaQueryList) => {
@@ -145,10 +152,7 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>((props, ref) => {
     handleSetCollapsed(!collapsed, 'clickTrigger');
   };
 
-  const { getPrefixCls } = useContext(ConfigContext);
-
   const renderSider = () => {
-    const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
     const divProps = omit(otherProps, ['collapsed']);
     const rawWidth = collapsed ? collapsedWidth : width;
     // use "px" as fallback unit for width
@@ -200,6 +204,8 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>((props, ref) => {
         [`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0,
       },
       className,
+      hashId,
+      cssVarCls,
     );
     return (
       <aside className={siderCls} {...divProps} style={divStyle} ref={ref}>
@@ -211,7 +217,9 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>((props, ref) => {
 
   const contextValue = React.useMemo(() => ({ siderCollapsed: collapsed }), [collapsed]);
 
-  return <SiderContext.Provider value={contextValue}>{renderSider()}</SiderContext.Provider>;
+  return wrapCSSVar(
+    <SiderContext.Provider value={contextValue}>{renderSider()}</SiderContext.Provider>,
+  );
 });
 
 if (process.env.NODE_ENV !== 'production') {
diff --git a/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
index c8b1ed2c2b..6db430ccdd 100644
--- a/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -165,7 +165,15 @@ exports[`renders components/layout/demo/component-token.tsx extend context corre
   >
     <aside
       class="ant-layout-sider ant-layout-sider-dark"
-      style="background: rgb(255, 255, 255); flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
+      style="flex: 0 0 32px; max-width: 32px; min-width: 32px; width: 32px;"
+    >
+      <div
+        class="ant-layout-sider-children"
+      />
+    </aside>
+    <aside
+      class="ant-layout-sider ant-layout-sider-dark"
+      style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
     >
       <div
         class="ant-layout-sider-children"
@@ -174,7 +182,7 @@ exports[`renders components/layout/demo/component-token.tsx extend context corre
           class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
           data-menu-list="true"
           role="menu"
-          style="height: 100%; border-right: 0;"
+          style="border-right: 0;"
           tabindex="0"
         >
           <li
diff --git a/components/layout/__tests__/__snapshots__/demo.test.ts.snap b/components/layout/__tests__/__snapshots__/demo.test.ts.snap
index 5720dad579..5b8f11546e 100644
--- a/components/layout/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/layout/__tests__/__snapshots__/demo.test.ts.snap
@@ -163,7 +163,15 @@ exports[`renders components/layout/demo/component-token.tsx correctly 1`] = `
   >
     <aside
       class="ant-layout-sider ant-layout-sider-dark"
-      style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+      style="flex:0 0 32px;max-width:32px;min-width:32px;width:32px"
+    >
+      <div
+        class="ant-layout-sider-children"
+      />
+    </aside>
+    <aside
+      class="ant-layout-sider ant-layout-sider-dark"
+      style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
     >
       <div
         class="ant-layout-sider-children"
@@ -172,7 +180,7 @@ exports[`renders components/layout/demo/component-token.tsx correctly 1`] = `
           class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
           data-menu-list="true"
           role="menu"
-          style="height:100%;border-right:0"
+          style="border-right:0"
           tabindex="0"
         >
           <li
diff --git a/components/layout/demo/component-token.tsx b/components/layout/demo/component-token.tsx
index 8e2dd2bfc1..e9a47de94f 100644
--- a/components/layout/demo/component-token.tsx
+++ b/components/layout/demo/component-token.tsx
@@ -40,7 +40,7 @@ const App: React.FC = () => {
             headerHeight: 64,
             headerPadding: `0 24px`,
             headerColor: colorBgContainer,
-            siderBg: colorBgContainer,
+            siderBg: '#800080',
           },
         },
       }}
@@ -51,12 +51,23 @@ const App: React.FC = () => {
           <div style={{ marginInlineStart: 24, fontSize: 24 }}>Ant Design</div>
         </Header>
         <Layout>
-          <Sider width={200} style={{ background: colorBgContainer }}>
+          <ConfigProvider
+            theme={{
+              components: {
+                Layout: {
+                  siderBg: 'red',
+                },
+              },
+            }}
+          >
+            <Sider width={32} />
+          </ConfigProvider>
+          <Sider width={200}>
             <Menu
               mode="inline"
               defaultSelectedKeys={['1']}
               defaultOpenKeys={['sub1']}
-              style={{ height: '100%', borderRight: 0 }}
+              style={{ borderRight: 0 }}
               items={items2}
             />
           </Sider>
diff --git a/components/layout/style/index.ts b/components/layout/style/index.ts
index 33071f490c..acd362e836 100644
--- a/components/layout/style/index.ts
+++ b/components/layout/style/index.ts
@@ -4,7 +4,6 @@ import type { CSSObject } from '@ant-design/cssinjs';
 
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks } from '../../theme/internal';
-import genLayoutLightStyle from './light';
 
 export interface ComponentToken {
   /** @deprecated Use headerBg instead */
@@ -103,23 +102,14 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
     antCls, // .ant
     componentCls, // .ant-layout
     colorText,
-    triggerColor,
     footerBg,
-    triggerBg,
     headerHeight,
     headerPadding,
     headerColor,
     footerPadding,
-    triggerHeight,
-    zeroTriggerHeight,
-    zeroTriggerWidth,
-    motionDurationMid,
-    motionDurationSlow,
     fontSize,
-    borderRadius,
     bodyBg,
     headerBg,
-    siderBg,
   } = token;
 
   return {
@@ -148,98 +138,6 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
         flex: '0 0 auto',
       },
 
-      [`${componentCls}-sider`]: {
-        position: 'relative',
-
-        // fix firefox can't set width smaller than content on flex item
-        minWidth: 0,
-        background: siderBg,
-        transition: `all ${motionDurationMid}, background 0s`,
-
-        '&-children': {
-          height: '100%',
-          // Hack for fixing margin collapse bug
-          // https://github.com/ant-design/ant-design/issues/7967
-          // solution from https://stackoverflow.com/a/33132624/3040605
-          marginTop: -0.1,
-          paddingTop: 0.1,
-
-          [`${antCls}-menu${antCls}-menu-inline-collapsed`]: {
-            width: 'auto',
-          },
-        },
-
-        '&-has-trigger': {
-          paddingBottom: triggerHeight,
-        },
-
-        '&-right': {
-          order: 1,
-        },
-
-        '&-trigger': {
-          position: 'fixed',
-          bottom: 0,
-          zIndex: 1,
-          height: triggerHeight,
-          color: triggerColor,
-          lineHeight: unit(triggerHeight),
-          textAlign: 'center',
-          background: triggerBg,
-          cursor: 'pointer',
-          transition: `all ${motionDurationMid}`,
-        },
-
-        '&-zero-width': {
-          '> *': {
-            overflow: 'hidden',
-          },
-
-          '&-trigger': {
-            position: 'absolute',
-            top: headerHeight,
-            insetInlineEnd: token.calc(zeroTriggerWidth).mul(-1).equal(),
-            zIndex: 1,
-            width: zeroTriggerWidth,
-            height: zeroTriggerHeight,
-            color: triggerColor,
-            fontSize: token.fontSizeXL,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: siderBg,
-            borderStartStartRadius: 0,
-            borderStartEndRadius: borderRadius,
-            borderEndEndRadius: borderRadius,
-            borderEndStartRadius: 0,
-
-            cursor: 'pointer',
-            transition: `background ${motionDurationSlow} ease`,
-
-            '&::after': {
-              position: 'absolute',
-              inset: 0,
-              background: 'transparent',
-              transition: `all ${motionDurationSlow}`,
-              content: '""',
-            },
-
-            '&:hover::after': {
-              background: `rgba(255, 255, 255, 0.2)`,
-            },
-
-            '&-right': {
-              insetInlineStart: token.calc(zeroTriggerWidth).mul(-1).equal(),
-              borderStartStartRadius: borderRadius,
-              borderStartEndRadius: 0,
-              borderEndEndRadius: 0,
-              borderEndStartRadius: borderRadius,
-            },
-          },
-        },
-      },
-      // Light
-      ...genLayoutLightStyle(token),
       // RTL
       '&-rtl': {
         direction: 'rtl',
@@ -320,10 +218,12 @@ export const prepareComponentToken: GetDefaultToken<'Layout'> = (token) => {
 };
 
 // ============================== Export ==============================
+export const DEPRECATED_TOKENS: [keyof ComponentToken, keyof ComponentToken][] = [
+  ['colorBgBody', 'bodyBg'],
+  ['colorBgHeader', 'headerBg'],
+  ['colorBgTrigger', 'triggerBg'],
+];
+
 export default genStyleHooks('Layout', (token) => [genLayoutStyle(token)], prepareComponentToken, {
-  deprecatedTokens: [
-    ['colorBgBody', 'bodyBg'],
-    ['colorBgHeader', 'headerBg'],
-    ['colorBgTrigger', 'triggerBg'],
-  ],
+  deprecatedTokens: DEPRECATED_TOKENS,
 });
diff --git a/components/layout/style/light.ts b/components/layout/style/light.ts
deleted file mode 100644
index c4c52ebe34..0000000000
--- a/components/layout/style/light.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-
-import type { LayoutToken } from '.';
-import type { GenerateStyle } from '../../theme/internal';
-
-const genLayoutLightStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
-  const { componentCls, bodyBg, lightSiderBg, lightTriggerBg, lightTriggerColor } = token;
-
-  return {
-    [`${componentCls}-sider-light`]: {
-      background: lightSiderBg,
-
-      [`${componentCls}-sider-trigger`]: {
-        color: lightTriggerColor,
-        background: lightTriggerBg,
-      },
-
-      [`${componentCls}-sider-zero-width-trigger`]: {
-        color: lightTriggerColor,
-        background: lightTriggerBg,
-        border: `1px solid ${bodyBg}`, // Safe to modify to any other color
-        borderInlineStart: 0,
-      },
-    },
-  };
-};
-
-export default genLayoutLightStyle;
diff --git a/components/layout/style/sider.ts b/components/layout/style/sider.ts
new file mode 100644
index 0000000000..46b79ba51c
--- /dev/null
+++ b/components/layout/style/sider.ts
@@ -0,0 +1,147 @@
+import { unit } from '@ant-design/cssinjs';
+import type { CSSObject } from '@ant-design/cssinjs';
+
+import { DEPRECATED_TOKENS, prepareComponentToken } from '.';
+import type { LayoutToken } from '.';
+import type { GenerateStyle } from '../../theme/interface';
+import { genStyleHooks } from '../../theme/internal';
+
+const genSiderStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
+  const {
+    componentCls,
+    siderBg,
+    motionDurationMid,
+    motionDurationSlow,
+    antCls,
+    triggerHeight,
+    triggerColor,
+    triggerBg,
+    headerHeight,
+    zeroTriggerWidth,
+    zeroTriggerHeight,
+    borderRadius,
+    lightSiderBg,
+    lightTriggerColor,
+    lightTriggerBg,
+    bodyBg,
+  } = token;
+
+  return {
+    [`${componentCls}`]: {
+      position: 'relative',
+
+      // fix firefox can't set width smaller than content on flex item
+      minWidth: 0,
+      background: siderBg,
+      transition: `all ${motionDurationMid}, background 0s`,
+
+      '&-has-trigger': {
+        paddingBottom: triggerHeight,
+      },
+
+      '&-right': {
+        order: 1,
+      },
+
+      [`${componentCls}-children`]: {
+        height: '100%',
+        // Hack for fixing margin collapse bug
+        // https://github.com/ant-design/ant-design/issues/7967
+        // solution from https://stackoverflow.com/a/33132624/3040605
+        marginTop: -0.1,
+        paddingTop: 0.1,
+
+        [`${antCls}-menu${antCls}-menu-inline-collapsed`]: {
+          width: 'auto',
+        },
+      },
+
+      [`${componentCls}-trigger`]: {
+        position: 'fixed',
+        bottom: 0,
+        zIndex: 1,
+        height: triggerHeight,
+        color: triggerColor,
+        lineHeight: unit(triggerHeight),
+        textAlign: 'center',
+        background: triggerBg,
+        cursor: 'pointer',
+        transition: `all ${motionDurationMid}`,
+      },
+
+      '&-zero-width': {
+        '> *': {
+          overflow: 'hidden',
+        },
+
+        [`${componentCls}-trigger`]: {
+          position: 'absolute',
+          top: headerHeight,
+          insetInlineEnd: token.calc(zeroTriggerWidth).mul(-1).equal(),
+          zIndex: 1,
+          width: zeroTriggerWidth,
+          height: zeroTriggerHeight,
+          color: triggerColor,
+          fontSize: token.fontSizeXL,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: siderBg,
+          borderStartStartRadius: 0,
+          borderStartEndRadius: borderRadius,
+          borderEndEndRadius: borderRadius,
+          borderEndStartRadius: 0,
+
+          cursor: 'pointer',
+          transition: `background ${motionDurationSlow} ease`,
+
+          '&::after': {
+            position: 'absolute',
+            inset: 0,
+            background: 'transparent',
+            transition: `all ${motionDurationSlow}`,
+            content: '""',
+          },
+
+          '&:hover::after': {
+            background: `rgba(255, 255, 255, 0.2)`,
+          },
+
+          '&-right': {
+            insetInlineStart: token.calc(zeroTriggerWidth).mul(-1).equal(),
+            borderStartStartRadius: borderRadius,
+            borderStartEndRadius: 0,
+            borderEndEndRadius: 0,
+            borderEndStartRadius: borderRadius,
+          },
+        },
+      },
+
+      // Light
+      '&-light': {
+        background: lightSiderBg,
+
+        [`${componentCls}-trigger`]: {
+          color: lightTriggerColor,
+          background: lightTriggerBg,
+        },
+
+        [`${componentCls}-zero-width-trigger`]: {
+          color: lightTriggerColor,
+          background: lightTriggerBg,
+          border: `1px solid ${bodyBg}`, // Safe to modify to any other color
+          borderInlineStart: 0,
+        },
+      },
+    },
+  };
+};
+
+export default genStyleHooks(
+  ['Layout', 'Sider'],
+  (token) => [genSiderStyle(token)],
+  prepareComponentToken,
+  {
+    deprecatedTokens: DEPRECATED_TOKENS,
+  },
+);
diff --git a/package.json b/package.json
index 0aed1d4672..1c62f95570 100644
--- a/package.json
+++ b/package.json
@@ -353,7 +353,7 @@
     },
     {
       "path": "./dist/antd-with-locales.min.js",
-      "limit": "500 KiB",
+      "limit": "501 KiB",
       "gzip": true
     }
   ],