Angular Universal Support

README.md

@@ -24,19 +24,17 @@ Inspired by the awesome [use-dark-mode](https://github.com/donavon/use-dark-mode
 
 ## Installation
 
-To use angular-dark-mode in your project install it via npm:
+1. Install via npm: `npm i angular-dark-mode` or yarn: `yarn add angular-dark-mode`
+2. Add `DarkModeModule` (to provide default options):
 
-```
-npm i angular-dark-mode
-```
-
-or if you are using yarn:
-
-```
-yarn add angular-dark-mode
+```ts
+@NgModule({
+  imports: [DarkModeModule],
+})
+export class AppModule {}
 ```
 
-and add `angular-dark-mode.js` file to `angular.json` scripts section:
+3. Add `angular-dark-mode.js` file to `angular.json` scripts section:
 
 ```json
 {
@@ -157,13 +155,9 @@ It is often useful to transition the changes between dark and light modes, and m
 
 ```css
 /* styles.css */
-...
-
 body:not(.dark-mode-preloading) {
   transition: all 0.3s linear;
 }
-
-...
 ```
 
 ## Contributors

angular.json

@@ -26,8 +26,7 @@
         "@schematics/angular:interceptor": {
           "skipTests": true
         },
-        "@schematics/angular:module": {
-        },
+        "@schematics/angular:module": {},
         "@schematics/angular:pipe": {
           "skipTests": true
         },
@@ -42,7 +41,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/angular-dark-mode-app",
+            "outputPath": "dist/angular-dark-mode-app/browser",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -104,6 +103,63 @@
           "options": {
             "browserTarget": "angular-dark-mode-app:build"
           }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/angular-dark-mode-app/server",
+            "main": "src/server.ts",
+            "tsConfig": "tsconfig.server.json",
+            "optimization": false,
+            "sourceMap": true,
+            "extractLicenses": false
+          },
+          "configurations": {
+            "production": {
+              "outputHashing": "media",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "sourceMap": false,
+              "extractLicenses": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve-ssr": {
+          "builder": "@nguniversal/builders:ssr-dev-server",
+          "configurations": {
+            "development": {
+              "browserTarget": "angular-dark-mode-app:build",
+              "serverTarget": "angular-dark-mode-app:server"
+            },
+            "production": {
+              "browserTarget": "angular-dark-mode-app:build:production",
+              "serverTarget": "angular-dark-mode-app:server:production"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "prerender": {
+          "builder": "@nguniversal/builders:prerender",
+          "options": {
+            "routes": ["/"]
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular-dark-mode-app:build:production",
+              "serverTarget": "angular-dark-mode-app:server:production"
+            },
+            "development": {
+              "browserTarget": "angular-dark-mode-app:build:development",
+              "serverTarget": "angular-dark-mode-app:server:development"
+            }
+          },
+          "defaultConfiguration": "production"
         }
       }
     },

package.json

@@ -23,7 +23,11 @@
     "clean": "rimraf dist",
     "semantic-release": "semantic-release",
     "contributors:add": "all-contributors add",
-    "contributors:generate": "all-contributors generate"
+    "contributors:generate": "all-contributors generate",
+    "dev:ssr": "ng run angular-dark-mode-app:serve-ssr",
+    "serve:ssr": "node dist/angular-dark-mode-app/server/main.js",
+    "build:ssr": "ng build && ng run angular-dark-mode-app:server",
+    "prerender": "ng run angular-dark-mode-app:prerender"
   },
   "dependencies": {
     "@angular/animations": "~12.1.1",
@@ -33,8 +37,11 @@
     "@angular/forms": "~12.1.1",
     "@angular/platform-browser": "~12.1.1",
     "@angular/platform-browser-dynamic": "~12.1.1",
+    "@angular/platform-server": "^12.2.0",
     "@angular/router": "~12.1.1",
+    "@nguniversal/express-engine": "^12.1.0",
     "all-contributors-cli": "^6.20.0",
+    "express": "^4.15.2",
     "rxjs": "~6.6.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
@@ -45,8 +52,10 @@
     "@angular/compiler-cli": "~12.1.1",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@nguniversal/builders": "^12.1.0",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.0",
+    "@types/express": "^4.17.0",
     "@types/jest": "^26.0.14",
     "@types/jest-when": "^2.7.1",
     "@types/node": "^12.11.1",

projects/angular-dark-mode/src/lib/dark-mode.module.ts

@@ -0,0 +1,16 @@
+import { NgModule, PLATFORM_ID } from '@angular/core';
+import {
+  DARK_MODE_DEFAULT_OPTIONS,
+  defaultOptionsFactory,
+} from './default-options';
+
+@NgModule({
+  providers: [
+    {
+      provide: DARK_MODE_DEFAULT_OPTIONS,
+      useFactory: defaultOptionsFactory,
+      deps: [PLATFORM_ID],
+    },
+  ],
+})
+export class DarkModeModule {}

projects/angular-dark-mode/src/lib/dark-mode.service.ts

@@ -8,8 +8,9 @@ import {
 import { BehaviorSubject, Observable } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { DARK_MODE_OPTIONS } from './dark-mode-options';
-import { defaultOptions } from './default-options';
+import { DARK_MODE_DEFAULT_OPTIONS } from './default-options';
 import { isNil } from './isNil';
+import { LocalStorageService } from './local-storage.service';
 import { MediaQueryService } from './media-query.service';
 import { DarkModeOptions } from './types';
 
@@ -22,6 +23,8 @@ export class DarkModeService {
   constructor(
     private rendererFactory: RendererFactory2,
     private mediaQueryService: MediaQueryService,
+    private localStorageService: LocalStorageService,
+    @Inject(DARK_MODE_DEFAULT_OPTIONS) defaultOptions: DarkModeOptions,
     // prettier-ignore
     @Optional() @Inject(DARK_MODE_OPTIONS) private providedOptions: DarkModeOptions | null
   ) {
@@ -46,16 +49,24 @@ export class DarkModeService {
 
   enable(): void {
     const { element, darkModeClass, lightModeClass } = this.options;
-    this.renderer.removeClass(element, lightModeClass);
-    this.renderer.addClass(element, darkModeClass);
+
+    if (element) {
+      this.renderer.removeClass(element, lightModeClass);
+      this.renderer.addClass(element, darkModeClass);
+    }
+
     this.saveDarkModeToStorage(true);
     this.darkModeSubject$.next(true);
   }
 
   disable(): void {
     const { element, darkModeClass, lightModeClass } = this.options;
-    this.renderer.removeClass(element, darkModeClass);
-    this.renderer.addClass(element, lightModeClass);
+
+    if (element) {
+      this.renderer.removeClass(element, darkModeClass);
+      this.renderer.addClass(element, lightModeClass);
+    }
+
     this.saveDarkModeToStorage(false);
     this.darkModeSubject$.next(false);
   }
@@ -71,11 +82,16 @@ export class DarkModeService {
   }
 
   private saveDarkModeToStorage(darkMode: boolean): void {
-    localStorage.setItem(this.options.storageKey, JSON.stringify({ darkMode }));
+    this.localStorageService.setItem(
+      this.options.storageKey,
+      JSON.stringify({ darkMode })
+    );
   }
 
   private getDarkModeFromStorage(): boolean | null {
-    const storageItem = localStorage.getItem(this.options.storageKey);
+    const storageItem = this.localStorageService.getItem(
+      this.options.storageKey
+    );
 
     if (storageItem) {
       try {
@@ -93,12 +109,14 @@ export class DarkModeService {
   }
 
   private removePreloadingClass(): void {
-    // defer to next tick
-    setTimeout(() => {
-      this.renderer.removeClass(
-        this.options.element,
-        this.options.preloadingClass
-      );
-    });
+    if (this.options.element) {
+      // defer to next tick
+      setTimeout(() => {
+        this.renderer.removeClass(
+          this.options.element,
+          this.options.preloadingClass
+        );
+      });
+    }
   }
 }

projects/angular-dark-mode/src/lib/default-options.ts

@@ -1,12 +1,20 @@
+import { isPlatformBrowser } from '@angular/common';
+import { InjectionToken } from '@angular/core';
 import { DarkModeOptions } from './types';
 
-/**
- * Default options used in DarkModeService
- */
-export const defaultOptions: DarkModeOptions = {
-  darkModeClass: 'dark-mode',
-  lightModeClass: 'light-mode',
-  preloadingClass: 'dark-mode-preloading',
-  storageKey: 'dark-mode',
-  element: document.body,
-};
+export const DARK_MODE_DEFAULT_OPTIONS = new InjectionToken<DarkModeOptions>(
+  'DARK_MODE_DEFAULT_OPTIONS'
+);
+
+/*  eslint-disable-next-line @typescript-eslint/ban-types */
+export function defaultOptionsFactory(platformId: Object): DarkModeOptions {
+  const isBrowser = isPlatformBrowser(platformId);
+
+  return {
+    darkModeClass: 'dark-mode',
+    lightModeClass: 'light-mode',
+    preloadingClass: 'dark-mode-preloading',
+    storageKey: 'dark-mode',
+    element: isBrowser ? document.body : null,
+  };
+}

projects/angular-dark-mode/src/lib/local-storage.service.ts

@@ -0,0 +1,19 @@
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class LocalStorageService {
+  constructor(@Inject(DOCUMENT) private document: Document | null) {}
+
+  setItem(key: string, value: string): void {
+    this.localStorage?.setItem(key, value);
+  }
+
+  getItem(key: string): ReturnType<Storage['getItem']> {
+    return this.localStorage?.getItem(key) ?? null;
+  }
+
+  get localStorage(): Storage | null {
+    return this.document?.defaultView?.localStorage ?? null;
+  }
+}

projects/angular-dark-mode/src/lib/media-query.service.ts

@@ -1,13 +1,25 @@
-import { Injectable } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
 import { prefersDarkSchemeQuery } from './media-query';
 
 @Injectable({ providedIn: 'root' })
 export class MediaQueryService {
+  private readonly isBrowser: boolean;
+
+  /*  eslint-disable-next-line @typescript-eslint/ban-types */
+  constructor(@Inject(PLATFORM_ID) platformId: Object) {
+    this.isBrowser = isPlatformBrowser(platformId);
+  }
+
   matchMedia(query: string): MediaQueryList {
     return window.matchMedia(query);
   }
 
   prefersDarkMode(): boolean {
-    return this.matchMedia(prefersDarkSchemeQuery).matches;
+    if (this.isBrowser) {
+      return this.matchMedia(prefersDarkSchemeQuery).matches;
+    }
+
+    return false;
   }
 }