diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
index f80a2a020e..90cefd54c7 100644
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -23,7 +23,6 @@ import { NotificationsService } from '../shared/notifications/notifications.serv
 import { SelectableListService } from '../shared/object-list/selectable-list/selectable-list.service';
 import { ObjectSelectService } from '../shared/object-select/object-select.service';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
-import { CSSVariableService } from '../shared/sass-helper/css-variable.service';
 import { SidebarService } from '../shared/sidebar/sidebar.service';
 import { UploaderService } from '../shared/uploader/uploader.service';
 import { SectionFormOperationsService } from '../submission/sections/form/section-form-operations.service';
@@ -257,7 +256,6 @@ const PROVIDERS = [
   DefaultChangeAnalyzer,
   ArrayMoveChangeAnalyzer,
   ObjectSelectService,
-  CSSVariableService,
   MenuService,
   ObjectUpdatesService,
   SearchService,
diff --git a/src/app/shared/sass-helper/css-variable.service.ts b/src/app/shared/sass-helper/css-variable.service.ts
index af40c634fd..0190a05036 100644
--- a/src/app/shared/sass-helper/css-variable.service.ts
+++ b/src/app/shared/sass-helper/css-variable.service.ts
@@ -5,7 +5,7 @@ import { AddAllCSSVariablesAction, AddCSSVariableAction, ClearCSSVariablesAction
 import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
 import { buildPaginatedList, PaginatedList } from '../../core/data/paginated-list.model';
 import { Observable } from 'rxjs';
-import { hasValue } from '../empty.util';
+import { hasValue, isNotEmpty } from '../empty.util';
 import { KeyValuePair } from '../key-value-pair.model';
 import { PageInfo } from '../../core/shared/page-info.model';
 import { CSSVariablesState } from './css-variable.reducer';
@@ -13,7 +13,9 @@ import { CSSVariablesState } from './css-variable.reducer';
 /**
  * This service deals with adding and retrieving CSS variables to and from the store
  */
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class CSSVariableService {
   isSameDomain = (styleSheet) => {
     // Internal style blocks won't have an href value
@@ -88,31 +90,35 @@ export class CSSVariableService {
    * ex; [{key: "--color-accent", value: "#b9f500"}, {key: "--color-text", value: "#252525"}, ...]
    */
   getCSSVariablesFromStylesheets(document: Document): KeyValuePair<string, string>[] {
-    // styleSheets is array-like, so we convert it to an array.
-    // Filter out any stylesheets not on this domain
-    return [...document.styleSheets]
-      .filter(this.isSameDomain)
-      .reduce(
-        (finalArr, sheet) =>
-          finalArr.concat(
-            // cssRules is array-like, so we convert it to an array
-            [...sheet.cssRules].filter(this.isStyleRule).reduce((propValArr, rule: any) => {
-              const props = [...rule.style]
-                .map((propName) => {
-                    return {
-                      key: propName.trim(),
-                      value: rule.style.getPropertyValue(propName).trim()
-                    } as KeyValuePair<string, string>;
-                  }
-                )
-                // Discard any props that don't start with "--". Custom props are required to.
-                .filter(({ key }: KeyValuePair<string, string>) => key.indexOf('--') === 0);
+    if (isNotEmpty(document.styleSheets)) {
+      // styleSheets is array-like, so we convert it to an array.
+      // Filter out any stylesheets not on this domain
+      return [...document.styleSheets]
+        .filter(this.isSameDomain)
+        .reduce(
+          (finalArr, sheet) =>
+            finalArr.concat(
+              // cssRules is array-like, so we convert it to an array
+              [...sheet.cssRules].filter(this.isStyleRule).reduce((propValArr, rule: any) => {
+                const props = [...rule.style]
+                  .map((propName) => {
+                      return {
+                        key: propName.trim(),
+                        value: rule.style.getPropertyValue(propName).trim()
+                      } as KeyValuePair<string, string>;
+                    }
+                  )
+                  // Discard any props that don't start with "--". Custom props are required to.
+                  .filter(({ key }: KeyValuePair<string, string>) => key.indexOf('--') === 0);
 
-              return [...propValArr, ...props];
-            }, [])
-          ),
-        []
-      );
+                return [...propValArr, ...props];
+              }, [])
+            ),
+          []
+        );
+    } else {
+      return [];
+    }
   }
 }
 
diff --git a/src/modules/app/server-init.service.ts b/src/modules/app/server-init.service.ts
index 9f6aa65921..903bd91b7c 100644
--- a/src/modules/app/server-init.service.ts
+++ b/src/modules/app/server-init.service.ts
@@ -18,7 +18,6 @@ import { LocaleService } from '../../app/core/locale/locale.service';
 import { Angulartics2DSpace } from '../../app/statistics/angulartics/dspace-provider';
 import { MetadataService } from '../../app/core/metadata/metadata.service';
 import { BreadcrumbsService } from '../../app/breadcrumbs/breadcrumbs.service';
-import { CSSVariableService } from '../../sass-helper/css-variable.service';
 import { ThemeService } from '../../app/shared/theme-support/theme.service';
 import { take } from 'rxjs/operators';
 
@@ -37,7 +36,6 @@ export class ServerInitService extends InitService {
     protected angulartics2DSpace: Angulartics2DSpace,
     protected metadata: MetadataService,
     protected breadcrumbsService: BreadcrumbsService,
-    protected cssService: CSSVariableService,
     protected themeService: ThemeService,
   ) {
     super(