fix style

src/app/theme.service.ts

@@ -0,0 +1,73 @@
+import { Injectable } from '@angular/core';
+
+enum ThemeType {
+  compact = 'compact',
+  default = 'default',
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ThemeService {
+  currentTheme = ThemeType.default;
+
+  constructor() {}
+
+  private reverseTheme(theme: string): ThemeType {
+    return theme === ThemeType.compact ? ThemeType.default : ThemeType.compact;
+  }
+
+  private removeUnusedTheme(theme: ThemeType): void {
+    document.documentElement.classList.remove(theme);
+    const removedThemeStyle = document.getElementById(theme);
+    if (removedThemeStyle) {
+      document.head.removeChild(removedThemeStyle);
+    }
+  }
+
+  private loadCss(href: string, id: string): Promise<Event> {
+    return new Promise((resolve, reject) => {
+      const style01 = document.createElement('link');
+      style01.rel = 'stylesheet';
+      style01.href = 'compact.css';
+      style01.onload = resolve;
+      style01.onerror = reject;
+      document.body.after(style01);
+      
+      const style = document.createElement('link');
+      style.rel = 'stylesheet';
+      style.href = href;
+      style.onload = resolve;
+      style.onerror = reject;
+      document.body.after(style);
+
+      
+    });
+    
+  }
+
+  public loadTheme(firstLoad = true): Promise<Event> {
+    //const theme = this.currentTheme;
+    const theme = 'assets/style.compact';
+    if (firstLoad) {
+      document.documentElement.classList.add(theme);
+    }
+    return new Promise<Event>((resolve, reject) => {
+      this.loadCss(`${theme}.css`, theme).then(
+        (e) => {
+          if (!firstLoad) {
+            document.documentElement.classList.add(theme);
+          }
+          this.removeUnusedTheme(this.reverseTheme(theme));
+          resolve(e);
+        },
+        (e) => reject(e)
+      );
+    });
+  }
+
+  public toggleTheme(): Promise<Event> {
+    this.currentTheme = this.reverseTheme(this.currentTheme);
+    return this.loadTheme(false);
+  }
+}