diff --git a/src/app/showcase/layout/app.main.component.ts b/src/app/showcase/layout/app.main.component.ts
index 42e41aacd9a..8f763bf77bc 100644
--- a/src/app/showcase/layout/app.main.component.ts
+++ b/src/app/showcase/layout/app.main.component.ts
@@ -12,7 +12,7 @@ import { AppTopBarComponent } from './topbar/app.topbar.component';
 @Component({
     selector: 'app-main',
     template: `
-        <div class="layout-wrapper" [ngClass]="containerClass">
+        <div class="layout-wrapper" [ngClass]="containerClass" [attr.data-p-theme]="theme">
             <app-news></app-news>
             <app-topbar (onDarkModeSwitch)="toggleDarkMode()"></app-topbar>
             <app-config (onDarkModeSwitch)="toggleDarkMode()"></app-config>
@@ -52,6 +52,10 @@ export class AppMainComponent {
         return this.configService.state.menuActive;
     }
 
+    get theme(): string {
+        return this.configService.config.theme;
+    }
+
     get containerClass() {
         return {
             'layout-news-active': this.isNewsActive,
diff --git a/src/app/showcase/layout/doc/app.docapitable.component.ts b/src/app/showcase/layout/doc/app.docapitable.component.ts
index 6e28b847ff3..a380380cc78 100644
--- a/src/app/showcase/layout/doc/app.docapitable.component.ts
+++ b/src/app/showcase/layout/doc/app.docapitable.component.ts
@@ -1,6 +1,7 @@
 import { Location } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewContainerRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, ViewContainerRef } from '@angular/core';
 import { Router } from '@angular/router';
+import { AppConfigService } from '../../service/appconfigservice';
 
 @Component({
     selector: 'app-docapitable',
@@ -53,8 +54,8 @@ import { Router } from '@angular/router';
                                 </ng-container>
                                 <span
                                     [ngClass]="{
-                                        'doc-option-dark': config.darkMode && entry[0] === 'default',
-                                        'doc-option-light': !config.darkMode && entry[0] === 'default',
+                                        'doc-option-dark': isDarkMode && entry[0] === 'default',
+                                        'doc-option-light': !isDarkMode && entry[0] === 'default',
                                         'doc-option-default': entry[0] === 'default',
                                         'doc-option-description': entry[0] === 'description'
                                     }"
@@ -105,7 +106,11 @@ export class AppDocApiTable {
 
     @Input() isInterface: boolean = false;
 
-    constructor(public viewContainerRef: ViewContainerRef, public router: Router, public location: Location, private cd: ChangeDetectorRef) {}
+    constructor(public viewContainerRef: ViewContainerRef, public router: Router, public location: Location, private configService: AppConfigService) {}
+
+    isDarkMode(): boolean {
+        return this.configService.config.darkMode;
+    }
 
     navigate(event, param) {
         if (typeof window !== undefined) {