facebook
diff --git a/‎packages/docusaurus-theme-classic/src/theme/Footer/Layout/index.tsx‎
Lines changed: 2 additions & 1 deletion b/‎packages/docusaurus-theme-classic/src/theme/Footer/Layout/index.tsx‎
Lines changed: 2 additions & 1 deletion
diff --git a/‎packages/docusaurus-theme-classic/src/theme/Footer/Links/MultiColumn/index.tsx‎
Lines changed: 7 additions & 1 deletion b/‎packages/docusaurus-theme-classic/src/theme/Footer/Links/MultiColumn/index.tsx‎
Lines changed: 7 additions & 1 deletion
diff --git a/‎packages/docusaurus-theme-classic/src/theme/Layout/index.tsx‎
Lines changed: 1 addition & 0 deletions b/‎packages/docusaurus-theme-classic/src/theme/Layout/index.tsx‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts‎
Lines changed: 11 additions & 2 deletions b/‎packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts‎
Lines changed: 11 additions & 2 deletions
@@ -7,6 +7,7 @@
 
 import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
 import type {Props} from '@theme/Footer/Layout';
 
 export default function FooterLayout({
@@ -17,7 +18,7 @@ export default function FooterLayout({
 }: Props): ReactNode {
   return (
     <footer
-      className={clsx('footer', {
+      className={clsx(ThemeClassNames.layout.footer.container, 'footer', {
         'footer--dark': style === 'dark',
       })}>
       <div className="container container-fluid">
 
@@ -7,6 +7,7 @@
 
 import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
 import LinkItem from '@theme/Footer/LinkItem';
 import type {Props} from '@theme/Footer/Links/MultiColumn';
 
@@ -30,7 +31,12 @@ function ColumnLinkItem({item}: {item: ColumnItemType}) {
 
 function Column({column}: {column: ColumnType}) {
   return (
-    <div className={clsx('col footer__col', column.className)}>
+    <div
+      className={clsx(
+        ThemeClassNames.layout.footer.column,
+        'col footer__col',
+        column.className,
+      )}>
       <div className="footer__title">{column.title}</div>
       <ul className="footer__items clean-list">
         {column.items.map((item, i) => (
 
@@ -48,6 +48,7 @@ export default function Layout(props: Props): ReactNode {
       <div
         id={SkipToContentFallbackId}
         className={clsx(
+          ThemeClassNames.layout.main,
           ThemeClassNames.wrapper.main,
           styles.mainWrapper,
           wrapperClassName,
 
@@ -27,15 +27,18 @@ export const ThemeClassNames = {
 
     mdxPage: 'mdx-page',
   },
+
+  // TODO Docusaurus v4: remove old classes?
   wrapper: {
-    main: 'main-wrapper',
+    main: 'main-wrapper', // replaced by theme-layout-main
     // TODO these wrapper class names are now quite useless
     // TODO do breaking change later in 3.0
     // we already add plugin name/id class on <html>: that's enough
     blogPages: 'blog-wrapper',
     docsPages: 'docs-wrapper',
     mdxPages: 'mdx-wrapper',
   },
+
   common: {
     editThisPage: 'theme-edit-this-page',
     lastUpdated: 'theme-last-updated',
@@ -62,7 +65,13 @@ export const ThemeClassNames = {
         panel: 'theme-layout-navbar-sidebar-panel',
       },
     },
-    // TODO add other stable classNames here
+    main: {
+      container: 'theme-layout-main',
+    },
+    footer: {
+      container: 'theme-layout-footer',
+      column: 'theme-layout-footer-column',
+    },
   },
 
   /**