feat(module:theme): add grey theme mode

Author: huajian123

src/app/core/services/store/common-store/theme.service.ts

@@ -6,6 +6,7 @@ export interface SettingInterface {
   color: string; // 主题色
   mode: 'side' | 'top' | 'mixi'; // 菜单模式（侧边模式，顶部模式，混合模式）
   colorWeak: boolean; // 色弱
+  greyTheme: boolean; // 灰色模式
   fixedHead: boolean; // 固定头部
   splitNav: boolean; // 是否分割菜单（在菜单模式为混合模式时才生效）
   fixedLeftNav: boolean; // 固定左侧菜单
@@ -27,6 +28,7 @@ export class ThemeService {
     color: '#1890FF',
     mode: 'side',
     colorWeak: false,
+    greyTheme: false,
     splitNav: false,
     fixedTab: true,
     fixedHead: true,

src/app/layout/default/def-layout-content/def-layout-content.component.ts

@@ -25,6 +25,7 @@ export class DefLayoutContentComponent implements OnInit {
     splitNav: false,
     fixedTab: false,
     colorWeak: false,
+    greyTheme: false,
     fixedHead: false,
     fixedLeftNav: false,
     hasTopArea: true,

src/app/layout/default/setting-drawer/setting-drawer.component.html

@@ -113,7 +113,13 @@ <h3 class="title">其他设置</h3>
       <nz-list [nzSplit]="false">
         <nz-list-item [nzActions]="[otherAction]">色弱模式</nz-list-item>
         <ng-template #otherAction>
-          <nz-switch (ngModelChange)="changeWeakMode($event)" [ngModel]="_themesOptions.colorWeak" nzSize="small"></nz-switch>
+          <nz-switch (ngModelChange)="changeSpecialTheme($event, 'color-weak')" [ngModel]="_themesOptions.colorWeak" nzSize="small"></nz-switch>
+        </ng-template>
+      </nz-list>
+      <nz-list [nzSplit]="false">
+        <nz-list-item [nzActions]="[greyAction]">灰色模式</nz-list-item>
+        <ng-template #greyAction>
+          <nz-switch (ngModelChange)="changeSpecialTheme($event, 'grey-theme')" [ngModel]="_themesOptions.greyTheme" nzSize="small"></nz-switch>
         </ng-template>
       </nz-list>
     </div>

src/app/layout/default/setting-drawer/setting-drawer.component.ts

@@ -6,6 +6,7 @@ import { IsNightKey, ThemeOptionsKey } from '@config/constant';
 import { ThemeSkinService } from '@core/services/common/theme-skin.service';
 import { WindowService } from '@core/services/common/window.service';
 import { SettingInterface, ThemeService } from '@store/common-store/theme.service';
+import { fnFormatToHump } from '@utils/tools';
 import { NzConfigService } from 'ng-zorro-antd/core/config';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
@@ -19,6 +20,9 @@ interface Theme extends NormalModel {
   key: 'dark' | 'light';
 }
 
+type SpecialTheme = 'color-weak' | 'grey-theme';
+type SpecialThemeHump = 'colorWeak' | 'greyTheme';
+
 interface Color extends NormalModel {
   key: string;
   color: string;
@@ -44,6 +48,7 @@ export class SettingDrawerComponent implements OnInit {
     mode: 'side',
     fixedTab: false,
     splitNav: true,
+    greyTheme: false,
     colorWeak: false,
     fixedLeftNav: true,
     fixedHead: true,
@@ -208,15 +213,16 @@ export class SettingDrawerComponent implements OnInit {
     this.setThemeOptions();
   }
 
-  // 修改色弱模式
-  changeWeakMode(e: boolean): void {
+  // 修改特殊主题，色弱主题，灰色主题
+  changeSpecialTheme(e: boolean, themeType: SpecialTheme): void {
     const name = this.doc.getElementsByTagName('html');
+    const theme = fnFormatToHump(themeType);
     if (e) {
-      this.rd2.addClass(name[0], 'color-weak');
+      this.rd2.addClass(name[0], themeType);
     } else {
-      this.rd2.removeClass(name[0], 'color-weak');
+      this.rd2.removeClass(name[0], themeType);
     }
-    this._themesOptions.colorWeak = e;
+    this._themesOptions[theme as SpecialThemeHump] = e;
     this.setThemeOptions();
   }
 
@@ -225,7 +231,13 @@ export class SettingDrawerComponent implements OnInit {
     this.themesOptions$.pipe(first()).subscribe(res => {
       this._themesOptions = res;
     });
-    this.changeWeakMode(this._themesOptions.colorWeak);
+
+    // 特殊模式主题变换（色弱模式，灰色模式）
+    (['grey-theme', 'color-weak'] as SpecialTheme[]).forEach(item => {
+      const specialTheme = fnFormatToHump(item);
+      this.changeSpecialTheme(this._themesOptions[specialTheme as SpecialThemeHump], item);
+    });
+
     this.modes.forEach(item => {
       item.isChecked = item.key === this._themesOptions.mode;
     });

src/app/utils/tools.ts

@@ -138,7 +138,14 @@ const fnEndOfDay = function EndOfDay(time: number): number {
   return endOfDay(time).getTime();
 };
 
+// weak-theme 转换为 weakTheme
+// https://blog.csdn.net/weixin_39238200/article/details/125665052
+const fnFormatToHump = function formatToHump(value: string): string {
+  return value.replace(/\-(\w)/g, (_, letter) => letter.toUpperCase());
+};
+
 export {
+  fnFormatToHump,
   fnGetReuseStrategyKeyFn,
   fnDecrypt,
   fnEncrypt,

src/styles/themes/base.less

@@ -101,11 +101,19 @@ h1, h2, h3, h4, h5, h6 {
   visibility: hidden;
 }
 
+.grey-theme{
+  -webkit-filter: grayscale(100%);
+  -moz-filter: grayscale(100%);
+  -ms-filter: grayscale(100%);
+  -o-filter: grayscale(100%);
+  filter: grayscale(100%);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
+}
+
 .color-weak {
   filter: invert(80%) !important;
 }
 
-
 .wrap {
   width: 980px;
   margin: 0 auto;