[webapp] update ui theme

Signed-off-by: tomsun28 <tomsun28@outlook.com>

web-app/src/app/routes/alert/alert-center/alert-center.component.less

@@ -1,3 +1,5 @@
+@import "~src/styles/theme";
+
 :host ::ng-deep app-toolbar {
   .center-content {
     display: flex;
@@ -71,19 +73,9 @@
   perspective: 1200px;
 }
 
-:root {
-  --background-color: #fff;
-  --text-color: #333;
-}
-
-[data-theme='dark'] {
-  --background-color: #1e1e1e;
-  --text-color: #fff;
-}
-
 .alert-card {
   position: relative;
-  background: var(--background-color);
+  background: @common-background-color;
   border-radius: 4px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   transition: all 0.3s;
@@ -219,7 +211,6 @@
 
             .alert-content {
               font-size: 13px;
-              color: var(--text-color);
               line-height: 1.5;
             }
           }
@@ -394,3 +385,11 @@
 .alert-card:nth-child(2) { animation-delay: 0.15s; }
 .alert-card:nth-child(3) { animation-delay: 0.2s; }
 .alert-card:nth-child(n+4) { animation-delay: 0.25s; }
+
+[data-theme='dark'] {
+  :host {
+    .alert-card {
+      background-color: @common-background-color-dark;
+    }
+  }
+}

web-app/src/app/routes/alert/alert-integration/alert-integration.component.less

@@ -1,30 +1,21 @@
-:root {
-  --background-color: #fff;
-  --text-color: #333;
-}
-
-[data-theme='dark'] {
-  --background-color: #1e1e1e;
-  --text-color: #fff;
-}
+@import "~src/styles/theme";
 
 .alert-integration-container {
   display: flex;
   height: 100%;
-  background: var(--background-color);
+  background: @common-background-color;
   border-radius: 4px;
 
   .data-sources {
     width: 240px;
     border-right: 1px solid #f0f0f0;
     padding: 16px;
-    background: var(--background-color);
+    background: @common-background-color;
 
     h2 {
       margin-bottom: 16px;
       font-size: 16px;
       font-weight: 500;
-      color: var(--text-color);
     }
 
     .source-list {
@@ -49,10 +40,6 @@
           height: 24px;
           margin-right: 8px;
         }
-
-        span {
-          color: var(--text-color);
-        }
       }
     }
   }
@@ -61,26 +48,36 @@
     flex: 1;
     padding: 24px;
     overflow-y: auto;
-    background: var(--background-color);
+    background: @common-background-color;
 
     h2 {
       margin-bottom: 24px;
       font-size: 20px;
       font-weight: 500;
-      color: var(--text-color);
     }
   }
 }
 
 [data-theme='dark'] {
-  .source-list {
-    .source-item {
-      &:hover {
-        background: rgba(255, 255, 255, 0.1);
+  :host {
+    .alert-integration-container {
+      background: @common-background-color-dark;
+      .data-sources {
+        background: @common-background-color-dark;
       }
+      .doc-content {
+        background: @common-background-color-dark;
+      }
+      .source-list {
+        .source-item {
+          &:hover {
+            background: rgba(255, 255, 255, 0.4);
+          }
 
-      &.active {
-        background: rgba(255, 255, 255, 0.2);
+          &.active {
+            background: rgba(255, 255, 255, 0.6);
+          }
+        }
       }
     }
   }

web-app/src/app/routes/dashboard/dashboard.component.html

@@ -306,7 +306,7 @@
         [delay]="300"
         [zoomOnHover]="{ scale: 1.4, transitionTime: 0.6, delay: 0.4 }"
         [overflow]="false"
-        [background]="'white no-repeat fixed center'"
+        [background]="theme == 'dark' ? '#141414' : 'white'"
       >
       </angular-tag-cloud>
     </nz-spin>

web-app/src/app/routes/dashboard/dashboard.component.less

@@ -1,4 +1,3 @@
-@import '@delon/theme/index';
 :host ::ng-deep {
   .ant-timeline {
     .ant-timeline-label {

web-app/src/app/routes/dashboard/dashboard.component.ts

@@ -34,6 +34,7 @@ import { AlertService } from '../../service/alert.service';
 import { CollectorService } from '../../service/collector.service';
 import { MonitorService } from '../../service/monitor.service';
 import { TagService } from '../../service/tag.service';
+import { ThemeService } from '../../service/theme.service';
 import { formatTagName } from '../../shared/utils/common-util';
 
 @Component({
@@ -51,9 +52,11 @@ export class DashboardComponent implements OnInit, OnDestroy {
     private collectorSvc: CollectorService,
     @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService,
     private router: Router,
+    private themeSvc: ThemeService,
     private cdr: ChangeDetectorRef
   ) {}
 
+  theme: string = 'default';
   // Tag Word Cloud
   wordCloudData: CloudData[] = [];
   wordCloudDataLoading: boolean = false;
@@ -178,6 +181,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   alertContentLoading: boolean = false;
 
   ngOnInit(): void {
+    this.theme = this.themeSvc.getTheme() || 'default';
     this.appsCountTheme = {
       title: {
         text: `{a|${this.i18nSvc.fanyi('dashboard.monitors.title')}}`,

web-app/src/app/routes/setting/define/define.component.html

@@ -27,7 +27,7 @@
 <nz-divider></nz-divider>
 
 <nz-layout style="height: 100vh; overflow: hidden">
-  <nz-sider nzTheme="light" style="height: 100%; overflow: hidden" [nzTrigger]="null">
+  <nz-sider [nzTheme]="theme == 'dark' ? 'dark' : 'light'" style="height: 100%; overflow: hidden" [nzTrigger]="null">
     <app-monitor-select-menu
       [loading]="menuLoading"
       [data]="appMenusArr"
@@ -107,7 +107,7 @@
         [nzOriginalText]="originalCode"
         [(ngModel)]="code"
         [nzEditorMode]="'diff'"
-        [nzEditorOption]="{ language: 'yaml', theme: 'vs-dark', folding: true, automaticLayout: true }"
+        [nzEditorOption]="{ language: 'yaml', theme: 'vs', folding: true, automaticLayout: true }"
       ></nz-code-editor>
     </div>
   </nz-content>

web-app/src/app/routes/setting/define/define.component.ts

@@ -28,6 +28,7 @@ import { finalize } from 'rxjs/operators';
 
 import { AppDefineService } from '../../../service/app-define.service';
 import { GeneralConfigService } from '../../../service/general-config.service';
+import { ThemeService } from '../../../service/theme.service';
 
 @Component({
   selector: 'app-define',
@@ -44,6 +45,7 @@ export class DefineComponent implements OnInit {
     private startUpSvc: StartupService,
     private route: ActivatedRoute,
     private router: Router,
+    private themeSvc: ThemeService,
     @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService
   ) {}
 
@@ -54,7 +56,8 @@ export class DefineComponent implements OnInit {
   loading = false;
   code: string = '';
   originalCode: string = '';
-  dark: boolean = true;
+  dark: boolean = false;
+  theme: string = 'default';
   currentApp: any = null;
   saveLoading = false;
   deleteLoading = false;
@@ -66,6 +69,7 @@ export class DefineComponent implements OnInit {
         this.loadAppDefineContent(this.currentApp);
       }
     });
+    this.theme = this.themeSvc.getTheme() || 'default';
     this.loadMenus();
     this.code = `${this.i18nSvc.fanyi('define.new.code')}\n\n\n\n\n`;
     this.originalCode = this.i18nSvc.fanyi('define.new.code');

web-app/src/app/routes/setting/tags/tags.component.less

@@ -1,4 +1,4 @@
-@import '@delon/theme/index';
+@import "~src/styles/theme";
 
 .tag-cards-container {
   padding: 24px 0;
@@ -51,21 +51,8 @@
     align-items: center;
     justify-content: center;
     margin-bottom: 8px;
-
-    .tag-name {
-      font-size: 18px;
-      padding: 4px 8px;
-      border-radius: 4px;
-      margin: 0;
-      font-weight: 500;
-      line-height: 1.4;
-      text-align: center;
-      background: rgba(255, 255, 255, 0.8);
-    }
   }
-
   .tag-description {
-    color: rgba(35, 34, 34, 0.65);
     font-size: 12px;
     margin: 0;
     display: -webkit-box;
@@ -78,31 +65,27 @@
   }
 }
 
-.tag-card {
-  :global {
-    .ant-card-body {
-      padding: 12px;
-    }
-  }
-}
-
 .tag-content {
   min-height: 80px;
   display: flex;
   flex-direction: column;
 }
 
-.tag-header {
-  margin-bottom: 8px;
+.tag-name {
+  font-size: 18px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  margin: 0;
+  font-weight: 500;
+  line-height: 1.4;
+  text-align: center;
+  background: @common-background-color;
 }
 
-.tag-description {
-  font-size: 12px;
-  color: rgba(0, 0, 0, 0.65);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  line-height: 1.5;
+[data-theme='dark'] {
+  :host {
+    .tag-name {
+      background: @common-background-color-dark;
+    }
+  }
 }

web-app/src/app/service/theme.service.ts

@@ -69,5 +69,6 @@ export class ThemeService {
 
     // add new theme
     this.doc.body.appendChild(style);
+    this.doc.body.setAttribute('data-theme', theme);
   }
 }

web-app/src/styles/theme.less

@@ -24,6 +24,11 @@
 @alain-default-aside-nav-selected-text-color: #3f51b5;
 //@scrollbar-table-enabled: true;
 @router-animation-enabled: true;
+@common-background-color: #fff;
+@common-background-color-dark: #141414;
+@common-tint-gray: #f2f2f2;
+@common-tint-gray-dark: #333;
+@common-tint-border: #eee;
 
 .br-4,
 .ant-btn,