Merge pull request #10344 from jwangyangls/fix-css-load-1

Add theme of dark
2024-12-19 23:28:20 +01:00 · 2019-12-26 17:19:26 +08:00 · 2019-12-26 17:19:26 +08:00 · d01c852698
commit d01c852698
parent 3f53aa9476 ecef852407
58 changed files with 391 additions and 100 deletions
--- a/src/portal/angular.json
+++ b/src/portal/angular.json
@ -15,6 +15,7 @@
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
+            "extractCss": true,
            "assets": [
              "src/images",
              "src/favicon.ico",
@ -27,7 +28,17 @@
              "node_modules/swagger-ui/dist/swagger-ui.css",
              "node_modules/prismjs/themes/prism-solarizedlight.css",
              "src/global.scss",
-              "src/styles.css"
+              "src/styles.css",
+              {
+                "input": "src/css/dark-theme.scss",
+                "bundleName": "dark-theme",
+                "lazy": true
+              },
+              {
+                "input": "src/css/light-theme.scss",
+                "bundleName": "light-theme",
+                "lazy": true
+              }
            ],
            "scripts": [
              "node_modules/core-js/client/shim.min.js",
--- a/src/portal/package-lock.json
+++ b/src/portal/package-lock.json
@ -8333,7 +8333,7 @@
            "dependencies": {
                "form-data": {
                    "version": "1.0.1",
-                    "resolved": "http://registry.npmjs.org/form-data/-/form-data-1.0.1.tgz",
+                    "resolved": "https://registry.npmjs.org/form-data/-/form-data-1.0.1.tgz",
                    "integrity": "sha1-rjFduaSQf6BlUCMEpm13M0de43w=",
                    "requires": {
                        "async": "^2.0.1",
@ -10251,7 +10251,7 @@
        },
        "next-tick": {
            "version": "1.0.0",
-            "resolved": "http://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
+            "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
            "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
        },
        "ng-packagr": {
@ -12874,7 +12874,7 @@
        },
        "reselect": {
            "version": "2.5.4",
-            "resolved": "http://registry.npmjs.org/reselect/-/reselect-2.5.4.tgz",
+            "resolved": "https://registry.npmjs.org/reselect/-/reselect-2.5.4.tgz",
            "integrity": "sha1-t9I/3wC4P6etAnlUb427vXZccEc="
        },
        "resolve": {
@ -13496,7 +13496,7 @@
        },
        "serialize-error": {
            "version": "2.1.0",
-            "resolved": "http://registry.npmjs.org/serialize-error/-/serialize-error-2.1.0.tgz",
+            "resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-2.1.0.tgz",
            "integrity": "sha1-ULZ51WNc34Rme9yOWa9OW4HV9go="
        },
        "serialize-javascript": {
--- a/src/portal/src/app/app.component.ts
+++ b/src/portal/src/app/app.component.ts
@ -19,18 +19,29 @@ import { CookieService } from 'ngx-cookie';

 import { SessionService } from './shared/session.service';
 import { AppConfigService } from './app-config.service';
+import { ThemeService } from './theme.service';
+import { themeArray, ThemeInterface } from './theme';
+import { clone } from '../lib/utils/utils';
+
+const HAS_STYLE_MODE: string = 'styleModeLocal';

@Component({
    selector: 'harbor-app',
    templateUrl: 'app.component.html'
 })
 export class AppComponent {
+    themeArray: ThemeInterface[] = clone(themeArray);
+
+    styleMode: string = this.themeArray[0].showStyle;
    constructor(
        private translate: TranslateService,
        private cookie: CookieService,
        private session: SessionService,
        private appConfigService: AppConfigService,
-        private titleService: Title) {
+        private titleService: Title,
+        public theme: ThemeService
+
+        ) {
        // Override page title
        let key: string = "APP_TITLE.HARBOR";
        if (this.appConfigService.isIntegrationMode()) {
@ -40,5 +51,20 @@ export class AppComponent {
        translate.get(key).subscribe((res: string) => {
            this.titleService.setTitle(res);
        });
+        this.setTheme();
+    }
+    setTheme () {
+        let styleMode = this.themeArray[0].showStyle;
+        const localHasStyle = localStorage && localStorage.getItem(HAS_STYLE_MODE);
+        if (localHasStyle) {
+            styleMode = localStorage.getItem(HAS_STYLE_MODE);
+        } else {
+            localStorage.setItem(HAS_STYLE_MODE, styleMode);
+        }
+        this.themeArray.forEach((themeItem) => {
+            if (themeItem.showStyle === styleMode) {
+                this.theme.loadStyle(themeItem.currentFileName);
+            }
+        });
    }
 }
--- a/src/portal/src/app/app.module.ts
+++ b/src/portal/src/app/app.module.ts
@ -46,7 +46,6 @@ import { ProjectQuotasComponent } from './project-quotas/project-quotas.componen
 import { HarborLibraryModule } from "../lib/harbor-library.module";
 import { HTTP_INTERCEPTORS } from '@angular/common/http';

-
 registerLocaleData(zh, 'zh-cn');
 registerLocaleData(es, 'es-es');
 registerLocaleData(localeFr, 'fr-fr');
@ -95,10 +94,10 @@ export function getCurrentLanguage(translateService: TranslateService) {
        {
            provide: APP_INITIALIZER,
            useFactory: initConfig,
-        deps: [ AppConfigService, SkinableConfig],
+            deps: [AppConfigService, SkinableConfig],
            multi: true
        },
-      {provide: LOCALE_ID, useValue: "en-US"},
+        { provide: LOCALE_ID, useValue: "en-US" },
        { provide: HTTP_INTERCEPTORS, useClass: InterceptHttpService, multi: true }

    ],
@ -107,4 +106,4 @@ export function getCurrentLanguage(translateService: TranslateService) {
    ],
    bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule { }
--- a/src/portal/src/app/base/global-search/search.component.scss
+++ b/src/portal/src/app/base/global-search/search.component.scss
@ -19,12 +19,6 @@
    position: relative;
 }

-.search-title {
-    font-size: 28px;
-    letter-spacing: normal;
-    color: #000;
-}
-
 .search-close {
    position: absolute;
    right: 24px;
--- a/src/portal/src/app/base/harbor-shell/harbor-shell.component.html
+++ b/src/portal/src/app/base/harbor-shell/harbor-shell.component.html
@ -8,11 +8,12 @@
            </span>
        </div>
        <div class="clr-col-2 right">
-            <a class="all-scanners" href="#" routerLink="/harbor/interrogation-services/scanners">{{'SCANNER.ALL_SCANNERS' | translate }}</a>
+            <a class="all-scanners" href="#"
+                routerLink="/harbor/interrogation-services/scanners">{{'SCANNER.ALL_SCANNERS' | translate }}</a>
            <clr-icon (click)="closeInfo()" class="close-icon" shape="times" size="24"></clr-icon>
        </div>
    </div>
-    <global-message  [isAppLevel]="true"></global-message>
+    <global-message [isAppLevel]="true" ></global-message>
    <navigator (showAccountSettingsModal)="openModal($event)" (showDialogModalAction)="openModal($event)"></navigator>
    <div class="content-container">
        <div class="content-area" [class.container-override]="showSearch"
@ -42,7 +43,8 @@
                            <clr-icon shape="users" clrVerticalNavIcon></clr-icon>
                            {{'SIDE_NAV.SYSTEM_MGMT.USER' | translate}}
                        </a>
-                        <a *ngIf='isLdapMode || isHttpAuthMode || isOidcMode' clrVerticalNavLink routerLink="/harbor/groups" routerLinkActive="active">
+                        <a *ngIf='isLdapMode || isHttpAuthMode || isOidcMode' clrVerticalNavLink
+                            routerLink="/harbor/groups" routerLinkActive="active">
                            <clr-icon shape="users" clrVerticalNavIcon></clr-icon>
                            {{'SIDE_NAV.SYSTEM_MGMT.GROUP' | translate}}
                        </a>
@ -54,7 +56,8 @@
                            <clr-icon shape="cloud-traffic" clrVerticalNavIcon></clr-icon>
                            {{'SIDE_NAV.SYSTEM_MGMT.REPLICATION' | translate}}
                        </a>
-                        <a *ngIf="!withAdmiral" clrVerticalNavLink routerLink="/harbor/labels" routerLinkActive="active">
+                        <a *ngIf="!withAdmiral" clrVerticalNavLink routerLink="/harbor/labels"
+                            routerLinkActive="active">
                            <clr-icon shape="tag" clrVerticalNavIcon></clr-icon>
                            {{'CONFIG.LABEL' | translate }}
                        </a>
@ -84,6 +87,7 @@
                    </button>
                </a>
            </div>
+
        </clr-vertical-nav>
        <hbr-operation-model *ngIf="isUserExisting"></hbr-operation-model>
    </div>
--- a/src/portal/src/app/base/harbor-shell/harbor-shell.component.ts
+++ b/src/portal/src/app/base/harbor-shell/harbor-shell.component.ts
@ -39,16 +39,16 @@ const YES: string = 'yes';

 export class HarborShellComponent implements OnInit, OnDestroy {

-    @ViewChild(AccountSettingsModalComponent, {static: false})
+    @ViewChild(AccountSettingsModalComponent, { static: false })
    accountSettingsModal: AccountSettingsModalComponent;

-    @ViewChild(PasswordSettingComponent, {static: false})
+    @ViewChild(PasswordSettingComponent, { static: false })
    pwdSetting: PasswordSettingComponent;

-    @ViewChild(NavigatorComponent, {static: false})
+    @ViewChild(NavigatorComponent, { static: false })
    navigator: NavigatorComponent;

-    @ViewChild(AboutDialogComponent, {static: false})
+    @ViewChild(AboutDialogComponent, { static: false })
    aboutDialog: AboutDialogComponent;

    // To indicator whwther or not the search results page is displayed
@ -62,14 +62,14 @@ export class HarborShellComponent implements OnInit, OnDestroy {
    isHttpAuthMode: boolean;
    showScannerInfo: boolean = false;
    scannerDocUrl: string = SCANNERS_DOC;
-
    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private session: SessionService,
        private searchTrigger: SearchTriggerService,
        private appConfigService: AppConfigService,
-        private scannerService: ConfigScannerService) { }
+        private scannerService: ConfigScannerService
+    ) { }

    ngOnInit() {
        if (this.appConfigService.isLdapMode()) {
--- a/src/portal/src/app/base/navigator/navigator.component.html
+++ b/src/portal/src/app/base/navigator/navigator.component.html
@ -44,5 +44,16 @@
            </clr-dropdown-menu>
        </clr-dropdown>
        <a href="javascript:void(0)" id="aboutMenu" class="nav-link nav-text nav-about-link" (click)="openAboutDialog()" *ngIf="!isSessionValid">{{'ACCOUNT_SETTINGS.ABOUT' | translate}}</a>
+        <div class="nav-divider"></div>
+        <ng-container *ngFor="let theme of themeArray;let i=index">
+            <ng-container *ngIf="theme.showStyle === styleMode">
+                <a class="nav-link nav-icon theme-select"
+                    (click)="themeChanged(theme)">
+                    <clr-icon size="20" *ngIf="styleMode ==='DARK'" shape="sun" class="is-solid"></clr-icon>
+                    <clr-icon size="20" *ngIf="styleMode ==='LIGHT'" shape="moon" class="is-solid"></clr-icon>
+                    {{ theme.text | translate }}
+                </a>
+            </ng-container>
+        </ng-container>
    </div>
 </clr-header>
--- a/src/portal/src/app/base/navigator/navigator.component.scss
+++ b/src/portal/src/app/base/navigator/navigator.component.scss
@ -68,3 +68,27 @@
 .dropdown-lang {
    padding-right: 1.3rem;
 }
+.header {
+    .header-actions {
+        .theme-select {
+            width: 5.4rem;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            height: 100%;
+            font-size: 14px;
+            letter-spacing: 1px;
+            cursor: pointer;
+            &:hover {
+                opacity: 1;
+            }
+            clr-icon {
+                position: static;
+                transform: none;
+                margin-right: .2rem;
+                min-width: 20px;
+            }
+        } 
+    } 
+}
+
--- a/src/portal/src/app/base/navigator/navigator.component.ts
+++ b/src/portal/src/app/base/navigator/navigator.component.ts
@ -26,6 +26,10 @@ import { SearchTriggerService } from '../global-search/search-trigger.service';
 import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
 import { SkinableConfig } from "../../skinable-config.service";
 import { CommonRoutes } from "../../../lib/entities/shared.const";
+import { ThemeInterface, themeArray } from '../../theme';
+import { clone } from '../../../lib/utils/utils';
+import { ThemeService } from '../../theme.service';
+const HAS_STYLE_MODE: string = 'styleModeLocal';

@Component({
    selector: 'navigator',
@ -42,7 +46,9 @@ export class NavigatorComponent implements OnInit {
    appTitle: string = 'APP_TITLE.HARBOR';
    customStyle: { [key: string]: any };
    customProjectName: { [key: string]: any };
+    themeArray: ThemeInterface[] = clone(themeArray);

+    styleMode = this.themeArray[0].showStyle;
    constructor(
        private session: SessionService,
        private router: Router,
@ -52,6 +58,7 @@ export class NavigatorComponent implements OnInit {
        private appConfigService: AppConfigService,
        private msgHandler: MessageHandlerService,
        private searchTrigger: SearchTriggerService,
+        public theme: ThemeService,
        private skinableConfig: SkinableConfig) {
    }

@ -79,6 +86,8 @@ export class NavigatorComponent implements OnInit {
        if (this.appConfigService.getConfig().read_only) {
            this.msgHandler.handleReadOnly();
        }
+        // set local in app
+        this.styleMode = localStorage.getItem(HAS_STYLE_MODE);
    }

    public get isSessionValid(): boolean {
@ -187,4 +196,10 @@ export class NavigatorComponent implements OnInit {
    registryAction(): void {
        this.searchTrigger.closeSearch(true);
    }
+
+    themeChanged(theme) {
+        this.styleMode = theme.mode;
+        this.theme.loadStyle(theme.toggleFileName);
+        localStorage.setItem(HAS_STYLE_MODE, this.styleMode);
+    }
 }
--- a/src/portal/src/app/global-message/message.component.html
+++ b/src/portal/src/app/global-message/message.component.html
@ -1,4 +1,4 @@
-<div [class.alert-app-level]="!isAppLevel">
+<div [class.alert-app-level]="!isAppLevel" [hidden]="!globalMessageOpened">
    <clr-alert  [clrAlertType]="globalMessage.type" [clrAlertAppLevel]="isAppLevel" [(clrAlertClosed)]="!globalMessageOpened" (clrAlertClosedChange)="onClose()">
        <div class="alert-item">
            <span class="alert-text">{{message}}</span>
--- a/src/portal/src/app/interrogation-services/interrogation-services.component.html
+++ b/src/portal/src/app/interrogation-services/interrogation-services.component.html
@ -1,5 +1,5 @@
 <h2 class="custom-h2" sub-header-title>{{'SIDE_NAV.SYSTEM_MGMT.INTERROGATION_SERVICES' | translate}}</h2>
-<nav class="subnav sub-nav-bg-color mt-1">
+<nav class="mt-1">
    <ul class="nav">
        <li class="nav-item">
            <a class="nav-link" routerLink="scanners" routerLinkActive="active">{{'SCANNER.SCANNERS' | translate }}</a>
--- a/src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.component.html
+++ b/src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.component.html
@ -1,4 +1,4 @@
-<div>
+<div class="version-position">
    <div class="row flex-items-xs-between">
        <div class="col-xs-4">
            <div class="title-container">
@ -150,7 +150,7 @@
                </div>
            </a>
        </div>
-        <div *ngIf="loading">
+        <div *ngIf="loading" class="center-x">
            <span class="vertical-helper"></span>
            <span class="spinner"></span>
        </div>
--- a/src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.component.scss
+++ b/src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.component.scss
@ -103,3 +103,16 @@ hbr-resource-label-signpost {
    height: 100%;
    vertical-align: middle;
 }
+
+.center-x {
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    top: 6.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.version-position {
+    position: relative;
+}
--- a/src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.html
+++ b/src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.html
@ -63,7 +63,7 @@
            </clr-datagrid>
        </div>
    </div>
-    <div *ngIf="isCardView" class="row card-container">
+    <div *ngIf="isCardView" class="row card-container version-position">
        <div *ngFor="let item of charts;" class="chart-card">
            <a let i=index; class="card clickable" (click)="onChartClick(item)">
                <div class="card-header">
@ -88,7 +88,7 @@
                </div>
            </a>
        </div>
-        <div *ngIf="loading">
+        <div *ngIf="loading" class="center-x">
            <span class="vertical-helper"></span>
            <span class="spinner"></span>
        </div>
--- a/src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.scss
+++ b/src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.scss
@ -103,7 +103,7 @@ clr-modal {

    .file-browser-btn {
        margin-left: 15px;
-        max-width: 32%;
+        max-width: 34%;
    }
 }

@ -121,3 +121,16 @@ button {
    justify-content: center;
    align-items: center;
 }
+
+.center-x {
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    top: 2.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.version-position {
+    position: relative;
+}
--- a/src/portal/src/app/project/project-detail/project-detail.component.scss
+++ b/src/portal/src/app/project/project-detail/project-detail.component.scss
@ -21,7 +21,6 @@
  color: #007cbb;
  font-size: 16px;
  cursor: pointer;
-  background: #fafafa;
  padding: 5px;
  border-radius: 2px;
 }
--- a/src/portal/src/app/project/robot-account/add-robot/add-robot.component.html
+++ b/src/portal/src/app/project/robot-account/add-robot/add-robot.component.html
@ -6,7 +6,7 @@
        <form #robotForm="ngForm">
            <section class="form-block">
                <div class="clr-row">
-                    <div class="clr-col-3 permission">
+                    <div class="clr-col-3 permission permission-dark">
                        <label class="col-md-3 required">
                            {{'ROBOT_ACCOUNT.NAME' | translate}}
                        </label>
@ -34,7 +34,7 @@
                    </div>
                </div>
                <div class="clr-row mt-1">
-                    <div class="clr-col-3 permission">
+                    <div class="clr-col-3 permission permission-dark">
                        <label class="col-md-3">{{'REPLICATION.DESCRIPTION' |translate}}</label>
                    </div>
                    <div class="clr-col padding-left-0">
@ -48,7 +48,7 @@
                    </div>
                </div>
                <div class="clr-row mt-1">
-                    <div class="clr-col-3 permission">
+                    <div class="clr-col-3 permission permission-dark">
                        <label class="col-md-3">
                            {{'ROBOT_ACCOUNT.PERMISSIONS' | translate}}
                        </label>
--- a/src/portal/src/app/project/summary/summary.component.html
+++ b/src/portal/src/app/project/summary/summary.component.html
@ -1,4 +1,4 @@
-<div class="summary display-flex" *ngIf="summaryInformation">
+<div class="summary summary-dark display-flex" *ngIf="summaryInformation">
  <div class="summary-left">
    <div class="display-flex project-detail pt-1">
      <h5 class="mt-0 width-7-5">{{'SUMMARY.PROJECT_REPOSITORY' | translate}}</h5>
--- a/src/portal/src/app/project/tag-feature-integration/immutable-tag/immutable-tag.component.html
+++ b/src/portal/src/app/project/tag-feature-integration/immutable-tag/immutable-tag.component.html
@ -25,7 +25,7 @@
                    </div>
                    <div class="clr-col">
                        <span>
-                           <clr-icon *ngIf="!rule?.disabled" class="color-green" shape="success-standard"></clr-icon>
+                           <clr-icon *ngIf="!rule?.disabled" class="color-green color-white-dark" shape="success-standard"></clr-icon>
                           <clr-icon id="{{'disable-icon'+i}}" *ngIf="rule?.disabled" class="color-red" shape="error-standard"></clr-icon>
                        </span>
                        <span class="rule-name ml-5">
--- a/src/portal/src/app/project/tag-feature-integration/immutable-tag/immutable-tag.component.scss
+++ b/src/portal/src/app/project/tag-feature-integration/immutable-tag/immutable-tag.component.scss
@ -15,9 +15,6 @@
  opacity: 0;
  z-index: 999;
 }
-.label-left {
-  color: #000;
-}
 .v-center {
  height: 48px;
  line-height: 48px;
--- a/src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.html
+++ b/src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.html
@ -30,7 +30,7 @@
                    </div>
                    <div class="clr-col">
                        <span>
-                           <clr-icon *ngIf="!rule?.disabled" class="color-green" shape="success-standard"></clr-icon>
+                           <clr-icon *ngIf="!rule?.disabled" class="color-green color-white-dark" shape="success-standard"></clr-icon>
                           <clr-icon *ngIf="rule?.disabled" class="color-red" shape="error-standard"></clr-icon>
                        </span>
                        <span class="rule-name ml-5">
--- a/src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.scss
+++ b/src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.scss
@ -48,9 +48,7 @@
  display: flex;
  align-items: center;
 }
-.label-left {
-  color: #000;
-}
+
 .v-center {
  height: 48px;
  line-height: 48px;
--- a/src/portal/src/app/repository/tag-detail/tag-detail-page.component.scss
+++ b/src/portal/src/app/repository/tag-detail/tag-detail-page.component.scss
@ -2,7 +2,6 @@
  cursor: pointer;
  color: #007cbb;
  font-size: 16px;
-  background: #fafafa;
  padding: 5px;
  border-radius: 2px;
  margin-right: 5px;
--- a/src/portal/src/app/repository/tag-repository/tag-repository.component.scss
+++ b/src/portal/src/app/repository/tag-repository/tag-repository.component.scss
@ -3,12 +3,10 @@
    cursor: pointer;
    color: #007cbb;
    font-size: 16px;
-    background: #fafafa;
    padding: 5px;
    border-radius: 2px;
    margin-right: 5px;
 }
-
 .back-icon {
    color: gray;
 }
--- a/src/portal/src/app/shared/about-dialog/about-dialog.component.scss
+++ b/src/portal/src/app/shared/about-dialog/about-dialog.component.scss
@ -4,13 +4,9 @@
    font-weight: 500;
 }

-.about-build {
-    font-size: 14px;
-    color: #565656;
-}
-
 .dialog-body {
    display:flex;
+    padding-left: 0;
 }

 .content {
--- a/src/portal/src/app/shared/confirmation-dialog/confirmation-dialog.component.scss
+++ b/src/portal/src/app/shared/confirmation-dialog/confirmation-dialog.component.scss
@ -4,14 +4,12 @@

 .confirmation-title {
    line-height: 24px;
-    color: #000000;
    font-size: 22px;
    margin-top: 0;
 }

 .confirmation-content {
    font-size: 14px;
-    color: #565656;
    line-height: 24px;
    display: inline-block;
    vertical-align: middle;
--- a/src/portal/src/app/shared/gauge/gauge.component.html
+++ b/src/portal/src/app/shared/gauge/gauge.component.html
@ -3,7 +3,7 @@
        <div class="esxc-gauge-circle-bg"></div>
        <div #barOne [style.transform]="'rotate(' + posOne + 'deg)'" [style.background-color]="_colorOne" [style.transition]="transition" class="esxc-gauge-circle-fill esxc-gauge-bar-one"></div>
        <div #barTwo [style.transform]="'rotate(' + posTwo + 'deg)'" [style.background-color]="_colorTwo" [style.transition]="transition" class="esxc-gauge-circle-fill esxc-gauge-bar-two"></div>
-        <div class="esxc-gauge-circle-inner" [ngStyle]="{'background-color': backgroundColor}">
+        <div class="esxc-gauge-circle-inner esxc-gauge-circle-bgc-dark" [ngStyle]="{'background-color': backgroundColor}">
            <div class="esxc-gauge-circle-caption">
                <span class="esxc-value">{{used}}</span>
            </div>
--- a/src/portal/src/app/theme.service.spec.ts
+++ b/src/portal/src/app/theme.service.spec.ts
@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ThemeService } from './theme.service';
+
+describe('ThemeService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ThemeService = TestBed.get(ThemeService);
+    expect(service).toBeTruthy();
+  });
+});
--- a/src/portal/src/app/theme.service.ts
+++ b/src/portal/src/app/theme.service.ts
@ -0,0 +1,31 @@
+import { Injectable, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeService {
+
+  constructor(
+    @Inject(DOCUMENT) private document: Document
+
+  ) { }
+
+loadStyle(styleName: string) {
+    const head = this.document.getElementsByTagName('head')[0];
+
+    let themeLink = this.document.getElementById(
+        'client-theme'
+    ) as HTMLLinkElement;
+    if (themeLink) {
+        themeLink.href = styleName;
+    } else {
+        const style = this.document.createElement('link');
+        style.id = 'client-theme';
+        style.rel = 'stylesheet';
+        style.href = `${styleName}`;
+
+        head.appendChild(style);
+    }
+}
+}
--- a/src/portal/src/app/theme.ts
+++ b/src/portal/src/app/theme.ts
@ -0,0 +1,24 @@
+export interface ThemeInterface {
+    showStyle: string;
+    mode: string;
+    text: string;
+    currentFileName: string;
+    toggleFileName: string;
+}
+
+export const themeArray: ThemeInterface[] = [
+    {
+        showStyle: "DARK",
+        mode: "LIGHT",
+        text: "APP_TITLE.THEME_LIGHT_TEXT",
+        currentFileName: "dark-theme.css",
+        toggleFileName: "light-theme.css",
+    },
+    {
+        showStyle: "LIGHT",
+        mode: "DARK", // show button icon
+        text: "APP_TITLE.THEME_DARK_TEXT", // show button text
+        currentFileName: "light-theme.css", // loaded current theme file name
+        toggleFileName: "dark-theme.css", // to toggle theme file name
+    }
+];
--- a/src/portal/src/css/dark-theme.scss
+++ b/src/portal/src/css/dark-theme.scss
@ -0,0 +1,113 @@
+@import "../../node_modules/@clr/ui/clr-ui-dark.min.css";
+$dark-background-color: rgb(27, 42, 50) !important;
+$dark-font-color1: #acbac3 !important;
+$dark-font-color-title1: #eaedf0 !important;
+
+.label-form {
+  background-color: #212129 !important;
+}
+.esxc-gauge-circle-bgc-dark {
+  background-color: $dark-background-color;
+}
+
+.harbor-icon {
+  filter: drop-shadow(#ccc 58px 2px) !important;
+}
+
+.color-white-dark {
+  color: white;
+}
+
+.label-filter-panel {
+  background-color: $dark-background-color;
+}
+
+.filter-dark {
+  color: $dark-font-color1;
+}
+.side-form {
+  background-color: $dark-background-color;
+}
+.toolBar {
+  background-color: $dark-background-color;
+}
+
+.search-overlay {
+  background-color: $dark-background-color;
+}
+
+.add-modal-dark {
+  background: $dark-background-color;
+}
+.license {
+  background-color: $dark-background-color;
+}
+
+.pagination-list {
+  .pagination-current {
+    color: $dark-font-color1;
+  }
+}
+.no-info-div,
+.info-div {
+  background-color: $dark-background-color;
+}
+.bottom-line-project-config {
+  color: $dark-font-color1;
+}
+.config-subtext {
+  color: $dark-font-color1;
+}
+.permission-dark {
+  color: $dark-font-color1;
+}
+.scanner-name {
+  color: $dark-font-color1;
+}
+.permission-dark {
+  color: $dark-font-color1;
+}
+.summary-dark {
+  color: $dark-font-color1;
+  h5 {
+    color: $dark-font-color1;
+  }
+}
+.about-version {
+  color: $dark-font-color-title1;
+}
+.update-time {
+  color: $dark-font-color1;
+}
+.font-style {
+  color: $dark-font-color1;
+}
+.go-link {
+  color: #4aaed9 !important; 
+  border-bottom-color: #4aaed9 !important; 
+}
+.circle-block {
+  color: $dark-font-color1;
+}
+.executions-detail {
+  color: $dark-font-color1;
+}
+.black-point {
+  background-color: $dark-font-color1;
+}
+clr-dg-action-overflow {
+  clr-icon {
+    fill: $dark-font-color1;
+  }
+}
+.oidc-tip {
+  color: $dark-font-color1;
+}
+.clr-select-wrapper{
+  select {
+    option {
+      background: $dark-font-color1;
+      color: #1b2a32;
+    }
+  } 
+}
--- a/src/portal/src/css/light-theme.scss
+++ b/src/portal/src/css/light-theme.scss
@ -0,0 +1 @@
+@import "../../node_modules/@clr/ui/clr-ui.min.css";
--- a/src/portal/src/global.scss
+++ b/src/portal/src/global.scss
@ -325,3 +325,6 @@ clr-datagrid {
    }
  }
 }
+button:focus {
+  outline: none !important;
+}
--- a/src/portal/src/i18n/lang/en-us-lang.json
+++ b/src/portal/src/i18n/lang/en-us-lang.json
@ -5,7 +5,9 @@
        "VIC": "vSphere Integrated Containers",
        "MGMT": "Management",
        "REG": "Registry",
-        "HARBOR_SWAGGER": "Harbor Swagger"
+        "HARBOR_SWAGGER": "Harbor Swagger",
+        "THEME_DARK_TEXT": "DARK",
+        "THEME_LIGHT_TEXT": "LIGHT"
    },
    "SIGN_IN": {
        "REMEMBER": "Remember me",
--- a/src/portal/src/i18n/lang/es-es-lang.json
+++ b/src/portal/src/i18n/lang/es-es-lang.json
@ -5,7 +5,9 @@
        "VIC": "Contenedores Integrados vSphere",
        "MGMT": "Administración",
        "REG": "Registro",
-        "HARBOR_SWAGGER": "Harbor Swagger"
+        "HARBOR_SWAGGER": "Harbor Swagger",
+        "THEME_DARK_TEXT": "DARK",
+        "THEME_LIGHT_TEXT": "LIGHT"
    },
    "SIGN_IN": {
        "REMEMBER": "Recordarme",
--- a/src/portal/src/i18n/lang/fr-fr-lang.json
+++ b/src/portal/src/i18n/lang/fr-fr-lang.json
@ -5,7 +5,9 @@
        "VIC": "vSphere Integrated Containers",
        "MGMT": "Management",
        "REG": "Registre",
-        "HARBOR_SWAGGER": "Harbor Swagger"
+        "HARBOR_SWAGGER": "Harbor Swagger",
+        "THEME_DARK_TEXT": "DARK",
+        "THEME_LIGHT_TEXT": "LIGHT"
    },
    "SIGN_IN": {
        "REMEMBER": "Se souvenir de moi",
--- a/src/portal/src/i18n/lang/pt-br-lang.json
+++ b/src/portal/src/i18n/lang/pt-br-lang.json
@ -5,7 +5,9 @@
        "VIC": "vSphere Integrated Containers",
        "MGMT": "Gerência",
        "REG": "Registro",
-        "HARBOR_SWAGGER": "Harbor Swagger"
+        "HARBOR_SWAGGER": "Harbor Swagger",
+        "THEME_DARK_TEXT": "DARK",
+        "THEME_LIGHT_TEXT": "LIGHT"
    },
    "SIGN_IN": {
        "REMEMBER": "Lembrar-se de mim",
--- a/src/portal/src/i18n/lang/tr-tr-lang.json
+++ b/src/portal/src/i18n/lang/tr-tr-lang.json
@ -5,7 +5,9 @@
        "VIC": "vSphere Entegre Konteynerler",
        "MGMT": "Yönetim",
        "REG": "Kayıt",
-        "HARBOR_SWAGGER": "Harbor Swagger"
+        "HARBOR_SWAGGER": "Harbor Swagger",
+        "THEME_DARK_TEXT": "DARK",
+        "THEME_LIGHT_TEXT": "LIGHT"
    },
    "SIGN_IN": {
        "REMEMBER": "Beni Hatırla",
--- a/src/portal/src/i18n/lang/zh-cn-lang.json
+++ b/src/portal/src/i18n/lang/zh-cn-lang.json
@ -5,7 +5,9 @@
        "VIC": "vSphere Integrated Containers",
        "MGMT": "Management",
        "REG": "Registry",
-        "HARBOR_SWAGGER": "Harbor Swagger"
+        "HARBOR_SWAGGER": "Harbor Swagger",
+        "THEME_DARK_TEXT": "深色主题",
+        "THEME_LIGHT_TEXT": "浅色主题"
    },
    "SIGN_IN": {
        "REMEMBER": "记住我",
--- a/src/portal/src/index.html
+++ b/src/portal/src/index.html
@ -7,11 +7,12 @@
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico?v=2">
+    <link rel="preload" as="style" href="./light-theme.css">
+    <link rel="preload" as="style" href="./dark-theme.css">
 </head>
-
 <body>
    <harbor-app>
-        <div class="spinner spinner-lg app-loading">
+        <div class="spinner spinner-lg app-loading app-loading-fixed">
            Loading...
        </div>
    </harbor-app>
--- a/src/portal/src/lib/components/config/gc/gc-history/gc-history.component.scss
+++ b/src/portal/src/lib/components/config/gc/gc-history/gc-history.component.scss
@ -1,5 +1,4 @@
 .history-header {
-    color: #000;
    margin:20px 0 6px 0;
    display: inline-block;
    width: 97%;
--- a/src/portal/src/lib/components/config/project-quotas/edit-project-quotas/edit-project-quotas.component.html
+++ b/src/portal/src/lib/components/config/project-quotas/edit-project-quotas/edit-project-quotas.component.html
@ -8,7 +8,7 @@
      [class.clr-form-compact-common]="!defaultTextsObj.isSystemDefaultQuota">

      <clr-input-container>
-          <label class="left-label required" for="storage">{{ defaultTextsObj?.countQuota | translate}}
+          <label class="left-label left-label-light required" for="storage">{{ defaultTextsObj?.countQuota | translate}}
              <clr-tooltip>
                  <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
                  <clr-tooltip-content clrPosition="top-right" clrSize="lg" *clrIfOpen>
--- a/src/portal/src/lib/components/config/project-quotas/edit-project-quotas/edit-project-quotas.component.scss
+++ b/src/portal/src/lib/components/config/project-quotas/edit-project-quotas/edit-project-quotas.component.scss
@ -8,7 +8,6 @@
  overflow-y: visible;
  overflow-x: visible;
 .body-label {
-  color: #565656;
  font-size: 14px
 }
  .clr-form {
@ -16,7 +15,6 @@
    .left-label {
      width: 9.5rem;
      font-weight: 100;
-      color: #000;
      position: relative;
    }

--- a/src/portal/src/lib/components/config/project-quotas/project-quotas.component.scss
+++ b/src/portal/src/lib/components/config/project-quotas/project-quotas.component.scss
@ -19,9 +19,6 @@
  }
 }

-.color-0 {
-  color: #333;
-}
 .pt-19px {
  padding-top: 19px;
 }
--- a/src/portal/src/lib/components/config/vulnerability/vulnerability-config.component.scss
+++ b/src/portal/src/lib/components/config/vulnerability/vulnerability-config.component.scss
@ -49,6 +49,9 @@
    width: 200px;
    padding-right: 1rem;
 }
+.font-style {
+    color: #000;
+}
 .margin-left-5 {
    margin-left: 5px;
 }
--- a/src/portal/src/lib/components/confirmation-dialog/confirmation-dialog.component.scss
+++ b/src/portal/src/lib/components/confirmation-dialog/confirmation-dialog.component.scss
@ -4,14 +4,12 @@

 .confirmation-title {
    line-height: 24px;
-    color: #000000;
    font-size: 22px;
    margin-top: 0;
 }

 .confirmation-content {
    font-size: 14px;
-    color: #565656;
    line-height: 24px;
    display: inline-block;
    vertical-align: middle;
--- a/src/portal/src/lib/components/create-edit-label/create-edit-label.component.html
+++ b/src/portal/src/lib/components/create-edit-label/create-edit-label.component.html
@ -1,5 +1,5 @@
 <div>
-    <form #labelForm="ngForm" [hidden]="!formShow">
+    <form #labelForm="ngForm" [hidden]="!formShow" class="label-form">
        <section>
            <label>
                <label for="name">{{'LABEL.LABEL_NAME' | translate}}</label>
--- a/src/portal/src/lib/components/create-edit-label/create-edit-label.component.scss
+++ b/src/portal/src/lib/components/create-edit-label/create-edit-label.component.scss
@ -1,4 +1,4 @@
-form {
+.label-form {
    margin-bottom: -10px;
    padding-top: 0;
    margin-top: 20px;
--- a/src/portal/src/lib/components/project-policy-config/project-policy-config.component.html
+++ b/src/portal/src/lib/components/project-policy-config/project-policy-config.component.html
@ -100,7 +100,7 @@
                                (click)="addSystem()"
                                class="btn btn-link ml-1">{{'CVE_WHITELIST.ADD_SYSTEM'|translate}}</button>
                        </div>
-                        <div class="add-modal" *ngIf="showAddModal && !isUseSystemWhitelist()">
+                        <div class="add-modal add-modal-dark" *ngIf="showAddModal && !isUseSystemWhitelist()">
                            <clr-icon (click)="showAddModal=false" class="float-lg-right margin-top-4"
                                shape="window-close"></clr-icon>
                            <div>
@ -137,7 +137,7 @@
                    <div class="clr-col padding-top-16 pl-2">
                        <div class="clr-row expire-data">
                            <label for="expires"
-                                class="bottom-line clr-col-3">{{'CVE_WHITELIST.EXPIRES_AT'|translate}}</label>
+                                class="bottom-line bottom-line-project-config clr-col-3">{{'CVE_WHITELIST.EXPIRES_AT'|translate}}</label>
                            <div class="underline">
                                <input #dateSystemInput readonly type="date" [(clrDate)]="systemExpiresDate">
                                <input [disabled]="!hasChangeConfigRole" *ngIf="!isUseSystemWhitelist()" #dateInput
--- a/src/portal/src/lib/components/project-policy-config/project-policy-config.component.scss
+++ b/src/portal/src/lib/components/project-policy-config/project-policy-config.component.scss
@ -73,7 +73,6 @@
 .config-subtext {
  font-size: 0.55rem;
  line-height: 1.2rem;
-  color: rgb(86, 86, 86);
  font-weight: 300;
 }

--- a/src/portal/src/lib/components/tag/tag-detail.component.html
+++ b/src/portal/src/lib/components/tag/tag-detail.component.html
@ -43,7 +43,7 @@
                <div class="vulnerability" [hidden]="hasCve || showStatBar">
                    <hbr-vulnerability-bar [repoName]="repositoryId" [tagId]="tagDetails.name" [summary]="vulnerabilitySummary"></hbr-vulnerability-bar>
                </div>
-                <histogram-chart *ngIf="hasCve" [metadata]="passMetadataToChart()" [isWhiteBackground]="true"></histogram-chart>
+                <histogram-chart *ngIf="hasCve" [metadata]="passMetadataToChart()" [isWhiteBackground]="isThemeLight()"></histogram-chart>
            </div>
            <div *ngIf="!withAdmiral && tagDetails?.labels?.length">
                <div class="third-column detail-title">{{'TAG.LABELS' | translate }}</div>
--- a/src/portal/src/lib/components/tag/tag-detail.component.ts
+++ b/src/portal/src/lib/components/tag/tag-detail.component.ts
@ -256,4 +256,7 @@ export class TagDetailComponent implements OnInit {
      },
    ];
  }
+  isThemeLight()  {
+    return localStorage.getItem('styleModeLocal') === 'LIGHT';
+  }
 }
--- a/src/portal/src/lib/components/tag/tag.component.html
+++ b/src/portal/src/lib/components/tag/tag.component.html
@ -31,9 +31,9 @@
                </div>
                <div class="flex-xs-middle">
                    <hbr-filter [readonly]="'readonly'" [withDivider]="true" filterPlaceholder="{{'TAG.FILTER_FOR_TAGS' | translate}}" (filterEvt)="doSearchTagNames($event)" (openFlag)="openFlagEvent($event)" [currentValue]="lastFilteredTagName"></hbr-filter>
-                    <div class="labelFilterPanel" *ngIf="!withAdmiral" [hidden]="!openLabelFilterPanel">
+                    <div class="label-filter-panel" *ngIf="!withAdmiral" [hidden]="!openLabelFilterPanel">
                        <a class="filterClose" (click)="closeFilter()">&times;</a>
-                        <label class="filterLabelHeader">{{'REPOSITORY.FILTER_BY_LABEL' | translate}}</label>
+                        <label class="filterLabelHeader filter-dark">{{'REPOSITORY.FILTER_BY_LABEL' | translate}}</label>
                        <div class="form-group"><input clrInput type="text" placeholder="Filter labels" [(ngModel)]="filterName" (keyup)="handleInputFilter()"></div>
                        <div [hidden]='imageFilterLabels.length' class="no-labels">{{'LABEL.NO_LABELS' | translate }}</div>
                        <div [hidden]='!imageFilterLabels.length' class="has-label">
--- a/src/portal/src/lib/components/tag/tag.component.scss
+++ b/src/portal/src/lib/components/tag/tag.component.scss
@ -134,7 +134,7 @@
  @include dropdown-as-action-button;
 }

-.labelFilterPanel {
+.label-filter-panel {
  display: flex;
  position: relative;
  -ms-flex-direction: column;
@ -198,7 +198,6 @@
  padding: 0 .5rem;
  line-height: .75rem;
  margin: 0;
-  color: #313131;
 }

 .filterClose {
--- a/src/portal/src/lib/components/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.html
+++ b/src/portal/src/lib/components/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.html
@ -61,7 +61,7 @@
            </div>
            <hr>
            <div class="bar-summary bar-tooltip-fon" *ngIf="!isNone">
-                <histogram-chart [isWhiteBackground]="false" [metadata]="passMetadataToChart()"></histogram-chart>
+                <histogram-chart [isWhiteBackground]="!isThemeLight()" [metadata]="passMetadataToChart()"></histogram-chart>
            </div>
            <div *ngIf="scanner">
                <span class="bar-scanning-time">{{'SCANNER.SCANNED_BY' | translate }}</span>
--- a/src/portal/src/lib/components/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.ts
+++ b/src/portal/src/lib/components/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.ts
@ -232,4 +232,7 @@ export class ResultTipHistogramComponent implements OnInit {
      },
    ];
  }
+  isThemeLight()  {
+    return localStorage.getItem('styleModeLocal') === 'LIGHT';
+  }
 }
				`@ -0,0 +1 @@`
				`@import "../../node_modules/@clr/ui/clr-ui.min.css";`