fix style

src/app/app.component.ts

@@ -5,6 +5,7 @@ import { environment } from '@env/environment';
 import { NzIconService } from 'ng-zorro-antd/icon';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { VERSION as VERSION_ZORRO } from 'ng-zorro-antd/version';
+import { ThemeService } from './theme.service';
 
 @Component({
   selector: 'app-root',
@@ -17,7 +18,8 @@ export class AppComponent implements OnInit {
     private router: Router,
     private titleSrv: TitleService,
     private modalSrv: NzModalService,
-    private iconService: NzIconService
+    private iconService: NzIconService,
+    private themeService: ThemeService
   ) {
     renderer.setAttribute(el.nativeElement, 'ng-alain-version', VERSION_ALAIN.full);
     renderer.setAttribute(el.nativeElement, 'ng-zorro-version', VERSION_ZORRO.full);
@@ -47,5 +49,14 @@ export class AppComponent implements OnInit {
         this.modalSrv.closeAll();
       }
     });
+    const screen: any = window.screen
+    var zoom = window.devicePixelRatio || screen.deviceXDPI / screen?.logicalXDPI;
+    console.log(zoom)
+    if (document.body.clientWidth >= 1280) {
+      if (zoom != 1 && zoom != 2 && zoom != 3) {
+        this.themeService.toggleTheme().then();
+      }
+    }
+    
   }
 }

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);
+  }
+}