feat: update high contrast theme (#1728)

* feat: update high contrast theme

* chore: update icon theme type

* chore: update test

Author: AhkunTa

packages/editor/src/browser/decoration-applier.ts

@@ -173,7 +173,7 @@ export class MonacoEditorDecorationApplier extends Disposable {
 function assignModelDecorationOptions(
   target: monaco.editor.IModelDecorationOptions,
   property: IDynamicModelDecorationProperty,
-  currentTheme: undefined | 'dark' | 'light' | 'hc',
+  currentTheme: undefined | 'dark' | 'light' | 'hcDark' | 'hcLight',
 ) {
   if (property.overviewRulerLane) {
     if (!target.overviewRuler) {

packages/extension/__tests__/hosted/api/vscode/ext.host.theming.test.ts

@@ -8,7 +8,6 @@ import { IThemeService, ThemeType } from '@opensumi/ide-theme';
 
 import { createBrowserInjector } from '../../../../../../tools/dev-tool/src/injector-helper';
 
-
 const emitterA = new Emitter<any>();
 const emitterB = new Emitter<any>();
 
@@ -62,6 +61,6 @@ describe('vscode extHostTheming Test', () => {
       expect(e.kind).toEqual(ColorThemeKind.HighContrast);
       done();
     });
-    themeChangeEmitter.fire({ type: 'hc' });
+    themeChangeEmitter.fire({ type: 'hcDark' });
   });
 });

packages/extension/__tests__/node/merge-contributes.test.ts

@@ -108,6 +108,7 @@ describe('mergeContributes', () => {
       dark: '#FFFFFF13',
       light: '#0000000C',
       highContrast: '#FFFFFF13',
+      highContrastLight: '#FFFFFF13',
     },
   };
 
@@ -118,6 +119,7 @@ describe('mergeContributes', () => {
       dark: '#BEBEBE',
       light: '#747474',
       highContrast: '#BEBEBE',
+      highContrastLight: '#BEBEBE',
     },
   };
 

packages/extension/src/browser/vscode/api/main.thread.api.webview.ts

@@ -405,7 +405,7 @@ export class MainThreadWebview extends Disposable implements IMainThreadWebview
     this._persistWebviewPanelMeta(id);
   }
 
-  $setIconPath(id: string, value: { light: string; dark: string; hc: string } | undefined): void {
+  $setIconPath(id: string, value: { light: string; dark: string } | undefined): void {
     const webviewPanel = this.getWebviewPanel(id);
     if (!webviewPanel.editorWebview) {
       return;

packages/extension/src/browser/vscode/contributes/color.ts

@@ -51,7 +51,15 @@ export class ColorsContributionPoint extends VSCodeContributePoint<ColorsSchema>
             highContrast: {
               description: localize(
                 'contributes.defaults.highContrast',
-                'The default color for high contrast themes. Either a color value in hex (#RRGGBB[AA]) or the identifier of a themable color which provides the default.',
+                'The default color for high contrast dark themes. Either a color value in hex (#RRGGBB[AA]) or the identifier of a themable color which provides the default. If not provided, the `dark` color is used as default for high contrast dark themes.',
+              ),
+              type: 'string',
+              anyOf: [{ type: 'string', format: 'color-hex' }],
+            },
+            highContrastLight: {
+              description: localize(
+                'contributes.defaults.highContrastLight',
+                'The default color for high contrast light themes. Either a color value in hex (#RRGGBB[AA]) or the identifier of a themable color which provides the default. If not provided, the `light` color is used as default for high contrast light themes.',
               ),
               type: 'string',
               anyOf: [{ type: 'string', format: 'color-hex' }],

packages/extension/src/common/vscode/ext-types.ts

@@ -2656,6 +2656,7 @@ export enum ColorThemeKind {
   Light = 1,
   Dark = 2,
   HighContrast = 3,
+  HighContrastLight = 4,
 }
 
 export enum SymbolTag {

packages/extension/src/common/vscode/extension.ts

@@ -88,7 +88,7 @@ export interface IView {
 export interface IColor {
   id: string;
   description: string;
-  defaults: { light: string; dark: string; highContrast: string };
+  defaults: { light: string; dark: string; highContrast: string; highContrastLight: string };
 }
 
 export interface IExtensionContributions {

packages/extension/src/common/vscode/webview.ts

@@ -41,7 +41,7 @@ export interface IMainThreadWebview {
   $disposeWebview(id: string): void;
   $reveal(id: string, showOptions: WebviewPanelShowOptions): void;
   $setTitle(id: string, value: string): void;
-  $setIconPath(id: string, value?: { light: string; dark: string; hc: string } | string): void;
+  $setIconPath(id: string, value?: { light: string; dark: string } | string): void;
 
   $setHtml(id: string, value: string): void;
   $setOptions(id: string, options: IWebviewOptions): void;

packages/extension/src/hosted/api/vscode/ext.host.api.webview.ts

@@ -200,12 +200,15 @@ export class ExtHostWebviewPanel implements WebviewPanel {
     this.assertNotDisposed();
     if (this._iconPath !== value) {
       this._iconPath = value;
-      let param: { light: string; dark: string; hc: string } = { light: '', dark: '', hc: '' };
+      let param: { light: string; dark: string } = {
+        light: '',
+        dark: '',
+      };
       if (Uri.isUri(value)) {
-        param = { light: value.toString(), dark: value.toString(), hc: value.toString() };
+        param = { light: value.toString(), dark: value.toString() };
       } else {
         const v = value as { light: Uri; dark: Uri };
-        param = { light: v.light.toString(), dark: v.dark.toString(), hc: '' };
+        param = { light: v.light.toString(), dark: v.dark.toString() };
       }
       this._proxy.$setIconPath(this._handle, param);
     }

packages/extension/src/hosted/api/vscode/ext.host.theming.ts

@@ -20,8 +20,23 @@ export class ExtHostTheming implements IExtHostTheming {
   }
 
   $onColorThemeChange(type: string): void {
-    const kind =
-      type === 'light' ? ColorThemeKind.Light : type === 'dark' ? ColorThemeKind.Dark : ColorThemeKind.HighContrast;
+    let kind: ColorThemeKind;
+    switch (type) {
+      case 'light':
+        kind = ColorThemeKind.Light;
+        break;
+      case 'dark':
+        kind = ColorThemeKind.Dark;
+        break;
+      case 'hcDark':
+        kind = ColorThemeKind.HighContrast;
+        break;
+      case 'hcLight':
+        kind = ColorThemeKind.HighContrastLight;
+        break;
+      default:
+        kind = ColorThemeKind.Dark;
+    }
     this._actual = new ColorTheme(kind);
     this._onDidChangeActiveColorTheme.fire(this._actual);
   }