diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html
similarity index 88%
rename from npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.html
rename to npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html
index 8801240bbf..95f259225c 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html
@@ -1,4 +1,4 @@
-<div #container id="abp-error" class="error">
+<div #container id="abp-http-error-container" class="error" [style.backgroundColor]="backgroundColor">
   <button *ngIf="!hideCloseIcon" id="abp-close-button" type="button" class="close mr-2" (click)="destroy()">
     <span aria-hidden="true">&times;</span>
   </button>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.scss
similarity index 87%
rename from npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.scss
rename to npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.scss
index a98b5a3ca6..b9f7690a5b 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.scss
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.scss
@@ -1,7 +1,6 @@
 .error {
   position: fixed;
   top: 0;
-  background-color: #fff;
   width: 100vw;
   height: 100vh;
   z-index: 999999;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts
similarity index 81%
rename from npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.ts
rename to npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts
index 70ddce726e..35ef50bf2a 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts
@@ -1,25 +1,26 @@
 import { Config, takeUntilDestroy } from '@abp/ng.core';
 import {
   AfterViewInit,
+  ApplicationRef,
   Component,
   ComponentFactoryResolver,
   ElementRef,
   EmbeddedViewRef,
+  Injector,
   OnDestroy,
+  OnInit,
   Type,
   ViewChild,
-  ApplicationRef,
-  Injector,
 } from '@angular/core';
 import { fromEvent, Subject } from 'rxjs';
 import { debounceTime, filter } from 'rxjs/operators';
 
 @Component({
-  selector: 'abp-error',
-  templateUrl: './error.component.html',
-  styleUrls: ['error.component.scss'],
+  selector: 'abp-http-error-wrapper',
+  templateUrl: './http-error-wrapper.component.html',
+  styleUrls: ['http-error-wrapper.component.scss'],
 })
-export class ErrorComponent implements AfterViewInit, OnDestroy {
+export class HttpErrorWrapperComponent implements AfterViewInit, OnDestroy, OnInit {
   appRef: ApplicationRef;
 
   cfRes: ComponentFactoryResolver;
@@ -38,6 +39,8 @@ export class ErrorComponent implements AfterViewInit, OnDestroy {
 
   hideCloseIcon = false;
 
+  backgroundColor: string;
+
   @ViewChild('container', { static: false })
   containerRef: ElementRef<HTMLDivElement>;
 
@@ -45,6 +48,10 @@ export class ErrorComponent implements AfterViewInit, OnDestroy {
     return this.status ? `[${this.status}]` : '';
   }
 
+  ngOnInit() {
+    this.backgroundColor = window.getComputedStyle(document.body).getPropertyValue('background-color');
+  }
+
   ngAfterViewInit() {
     if (this.customComponent) {
       const customComponentRef = this.cfRes.resolveComponentFactory(this.customComponent).create(this.injector);
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts b/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts
index ec0d3ac808..e4663c38aa 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts
@@ -15,7 +15,7 @@ import { Navigate, RouterError, RouterState, RouterDataResolved } from '@ngxs/ro
 import { Actions, ofActionSuccessful, Store } from '@ngxs/store';
 import { Observable, Subject } from 'rxjs';
 import snq from 'snq';
-import { ErrorComponent } from '../components/error/error.component';
+import { HttpErrorWrapperComponent } from '../components/http-error-wrapper/http-error-wrapper.component';
 import { HttpErrorConfig, ErrorScreenErrorCodes } from '../models/common';
 import { Toaster } from '../models/toaster';
 import { ConfirmationService } from '../services/confirmation.service';
@@ -45,7 +45,7 @@ export const DEFAULT_ERROR_MESSAGES = {
 
 @Injectable({ providedIn: 'root' })
 export class ErrorHandler {
-  componentRef: ComponentRef<ErrorComponent>;
+  componentRef: ComponentRef<HttpErrorWrapperComponent>;
 
   constructor(
     private actions: Actions,
@@ -196,11 +196,11 @@ export class ErrorHandler {
     );
   }
 
-  createErrorComponent(instance: Partial<ErrorComponent>) {
+  createErrorComponent(instance: Partial<HttpErrorWrapperComponent>) {
     const renderer = this.rendererFactory.createRenderer(null, null);
     const host = renderer.selectRootElement(document.body, true);
 
-    this.componentRef = this.cfRes.resolveComponentFactory(ErrorComponent).create(this.injector);
+    this.componentRef = this.cfRes.resolveComponentFactory(HttpErrorWrapperComponent).create(this.injector);
 
     for (const key in this.componentRef.instance) {
       if (this.componentRef.instance.hasOwnProperty(key)) {
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/error.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/error.component.spec.ts
index 05e303e4c9..1d1f256c68 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/tests/error.component.spec.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/error.component.spec.ts
@@ -1,14 +1,14 @@
 import { SpectatorHost, createHostFactory } from '@ngneat/spectator/jest';
-import { ErrorComponent } from '../components/error/error.component';
+import { HttpErrorWrapperComponent } from '../components/http-error-wrapper/http-error-wrapper.component';
 import { LocalizationPipe } from '@abp/ng.core';
 import { Store } from '@ngxs/store';
 import { Renderer2, ElementRef } from '@angular/core';
 import { Subject } from 'rxjs';
 
 describe('ErrorComponent', () => {
-  let spectator: SpectatorHost<ErrorComponent>;
+  let spectator: SpectatorHost<HttpErrorWrapperComponent>;
   const createHost = createHostFactory({
-    component: ErrorComponent,
+    component: HttpErrorWrapperComponent,
     declarations: [LocalizationPipe],
     mocks: [Store],
     providers: [
@@ -18,7 +18,7 @@ describe('ErrorComponent', () => {
   });
 
   beforeEach(() => {
-    spectator = createHost('<abp-error></abp-error>');
+    spectator = createHost('<abp-http-error-wrapper></abp-http-error-wrapper>');
     spectator.component.destroy$ = new Subject();
   });
 
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/error.handler.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/error.handler.spec.ts
index d3265691de..88ae00a874 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/tests/error.handler.spec.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/error.handler.spec.ts
@@ -22,14 +22,17 @@ describe('ErrorHandler', () => {
     component: DummyComponent,
     imports: [CoreModule, ThemeSharedModule.forRoot(), NgxsModule.forRoot([])],
     stubsEnabled: false,
-    routes: [{ path: '', component: DummyComponent }, { path: 'account/login', component: RouterOutletComponent }],
+    routes: [
+      { path: '', component: DummyComponent },
+      { path: 'account/login', component: RouterOutletComponent },
+    ],
   });
 
   beforeEach(() => {
     spectator = createComponent();
     store = spectator.get(Store);
 
-    const abpError = document.querySelector('abp-error');
+    const abpError = document.querySelector('abp-http-error-wrapper');
     if (abpError) document.body.removeChild(abpError);
   });
 
@@ -133,14 +136,17 @@ describe('ErrorHandler with custom error component', () => {
       ErrorModule,
     ],
     stubsEnabled: false,
-    routes: [{ path: '', component: DummyComponent }, { path: 'account/login', component: RouterOutletComponent }],
+    routes: [
+      { path: '', component: DummyComponent },
+      { path: 'account/login', component: RouterOutletComponent },
+    ],
   });
 
   beforeEach(() => {
     spectator = createComponent();
     store = spectator.get(Store);
 
-    const abpError = document.querySelector('abp-error');
+    const abpError = document.querySelector('abp-http-error-wrapper');
     if (abpError) document.body.removeChild(abpError);
   });
 
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
index f9cf4097cd..7464df328a 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
@@ -8,7 +8,7 @@ import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.componen
 import { ButtonComponent } from './components/button/button.component';
 import { ChartComponent } from './components/chart/chart.component';
 import { ConfirmationComponent } from './components/confirmation/confirmation.component';
-import { ErrorComponent } from './components/error/error.component';
+import { HttpErrorWrapperComponent } from './components/http-error-wrapper/http-error-wrapper.component';
 import { LoaderBarComponent } from './components/loader-bar/loader-bar.component';
 import { ModalComponent } from './components/modal/modal.component';
 import { SortOrderIconComponent } from './components/sort-order-icon/sort-order-icon.component';
@@ -42,7 +42,7 @@ export function appendScript(injector: Injector) {
     ButtonComponent,
     ChartComponent,
     ConfirmationComponent,
-    ErrorComponent,
+    HttpErrorWrapperComponent,
     LoaderBarComponent,
     ModalComponent,
     TableEmptyMessageComponent,
@@ -63,7 +63,7 @@ export function appendScript(injector: Injector) {
     TableSortDirective,
   ],
   providers: [DatePipe],
-  entryComponents: [ErrorComponent],
+  entryComponents: [HttpErrorWrapperComponent],
 })
 export class ThemeSharedModule {
   constructor(private errorHandler: ErrorHandler) {}