diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index 361939f7c27..72b156fafe0 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -462,6 +462,7 @@ export class Content implements ComponentInterface {
         role={isMainContent ? 'main' : undefined}
         class={createColorClasses(this.color, {
           [mode]: true,
+          'content-fullscreen': this.fullscreen,
           'content-sizing': hostContext('ion-popover', this.el),
           overscroll: forceOverscroll,
           [`content-${rtl}`]: true,
diff --git a/core/src/components/content/test/fullscreen/content.e2e.ts b/core/src/components/content/test/fullscreen/content.e2e.ts
index d0d0d1f4e5d..8fb7e9a9f22 100644
--- a/core/src/components/content/test/fullscreen/content.e2e.ts
+++ b/core/src/components/content/test/fullscreen/content.e2e.ts
@@ -13,5 +13,38 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
 
       await expect(page).toHaveScreenshot(screenshot(`content-fullscreen`));
     });
+
+    /**
+     * The content-fullscreen class is added when fullscreen is true. The
+     * fullscreen attribute is not reflected in Angular, Vue, or React, so
+     * the class is needed for users to create custom themes.
+     */
+    test('should have content-fullscreen class when fullscreen is true', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-content fullscreen>
+          <p>Hello</p>
+        </ion-content>
+      `,
+        config
+      );
+
+      const content = page.locator('ion-content');
+      await expect(content).toHaveClass(/content-fullscreen/);
+    });
+
+    test('should not have content-fullscreen class when fullscreen is false', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-content>
+          <p>Hello</p>
+        </ion-content>
+      `,
+        config
+      );
+
+      const content = page.locator('ion-content');
+      await expect(content).not.toHaveClass(/content-fullscreen/);
+    });
   });
 });