feat(theme): compatible with vscode theme

src/components/button/style.scss

@@ -26,8 +26,4 @@
         opacity: 0.4;
         pointer-events: none;
     }
-
-    &:hover {
-        opacity: 0.9;
-    }
 }

src/components/contextview/index.tsx

@@ -13,9 +13,8 @@ import {
     HTMLElementType,
     IPosition,
 } from 'mo/common/dom';
-import { Utils } from 'dt-utils/lib';
 import { EventEmitter } from 'mo/common/event';
-
+import { Utils } from 'dt-utils';
 export interface IContextViewProps {
     /**
      * Default true
@@ -43,7 +42,8 @@ const shadowClassName = getBEMModifier(contextViewClass, 'shadow');
 
 const Emitter = new EventEmitter();
 
-export function useContextView(props?: IContextViewProps): IContextView {
+export function useContextView(props: IContextViewProps = {}): IContextView {
+    const { shadowOutline = true } = props;
     const claName = classNames(contextViewClass, 'fade-in');
     let contextView: HTMLElementType = select('.' + contextViewClass); // Singleton contextView dom
 
@@ -92,7 +92,7 @@ export function useContextView(props?: IContextViewProps): IContextView {
         contextView = document.createElement('div');
         contextView.className = classNames(
             claName,
-            Utils.isMacOs() ? 'mac' : null
+            Utils.isMacOs() ? 'mac' : ''
         )!;
         contextView.style.visibility = 'hidden';
         const root = document.getElementById('molecule');
@@ -101,7 +101,7 @@ export function useContextView(props?: IContextViewProps): IContextView {
         } else {
             root.appendChild(contextView);
         }
-        const shadowClass = !props?.shadowOutline ? '' : shadowClassName;
+        const shadowClass = !shadowOutline ? '' : shadowClassName;
 
         ReactDOM.render(
             <>

src/components/contextview/style.scss

@@ -24,6 +24,6 @@
     }
 
     &--shadow {
-        box-shadow: rgb(0, 0, 0) 0 2px 4px;
+        box-shadow: var(--widget-shadow) 0 2px 4px;
     }
 }

src/components/menu/style.scss

@@ -78,6 +78,11 @@
             font-size: 16px;
         }
     }
+
+    &__separator {
+        height: 1px;
+        width: 100%;
+    }
 }
 
 #{$subMenu} {

src/components/select/style.scss

@@ -50,6 +50,7 @@
     &__container {
         align-items: center;
         appearance: none;
+        border-top: 0;
         box-sizing: border-box;
         display: flex;
         flex-direction: column;

src/extensions/activityBar/index.tsx

@@ -19,6 +19,9 @@ function initActivityBar(extensionCtx: IExtensionService) {
             {
                 id: 'ColorTheme',
                 name: 'Color Theme',
+                onClick(e) {
+                    console.log('globalSettings: colorTheme onClick:', e);
+                },
             },
         ],
     };

src/extensions/search/searchPane.tsx

@@ -2,11 +2,13 @@ import * as React from 'react';
 import Toolbar from 'mo/components/toolbar';
 import { prefixClaName } from 'mo/common/className';
 import { Header, Content } from 'mo/workbench/sidebar';
-import { activityBarService, editorService, explorerService } from 'mo';
+import { activityBarService, colorThemeService, explorerService, editorService } from 'mo';
 import { Button } from 'mo/components/button';
+import { Select, Option } from 'mo/components/select';
+import { IColorTheme } from 'mo/model/colorTheme';
 import SearchTree from './searchTree';
 
-interface ISearchPaneToolBar {}
+interface ISearchPaneToolBar { }
 
 const initialState = {
     input: '',
@@ -38,7 +40,7 @@ type State = typeof initialState;
 export default class SearchPane extends React.Component<
     ISearchPaneToolBar,
     State
-> {
+    > {
     state: State;
 
     constructor(props) {
@@ -69,6 +71,33 @@ export default class SearchPane extends React.Component<
         });
     };
 
+    onChangeTheme = (e, option) => {
+        if (option && option.value) {
+            console.log('onChangeTheme:', option.value);
+            colorThemeService.applyTheme(option.value);
+        }
+    };
+
+    renderColorThemes() {
+        const colorThemes = colorThemeService.getThemes();
+        const defaultTheme = colorThemeService.colorTheme;
+        const options = colorThemes.map((theme: IColorTheme) => {
+            return (
+                <Option key={theme.id} value={theme.id}>
+                    {theme.label}
+                </Option>
+            );
+        });
+        return (
+            <Select
+                defaultValue={defaultTheme.id}
+                onSelect={this.onChangeTheme}
+            >
+                {options}
+            </Select>
+        );
+    }
+
     render() {
         const { toolbar } = this.state;
 
@@ -97,7 +126,7 @@ export default class SearchPane extends React.Component<
             editorService.open(tabData, 1);
         };
 
-        const openCommand = function () {};
+        const openCommand = function () { };
         const { input } = this.state;
         return (
             <div className={prefixClaName('search-pane', 'sidebar')}>
@@ -122,6 +151,10 @@ export default class SearchPane extends React.Component<
                         <Button onClick={newEditor}>New Editor</Button>
                         <Button onClick={openCommand}>Command Palette</Button>
                     </div>
+                    <div style={{ margin: '50px 20px' }}>
+                        ColorThemes:
+                        {this.renderColorThemes()}
+                    </div>
                 </Content>
             </div>
         );

src/extensions/statusBar/index.tsx

@@ -22,7 +22,7 @@ function init() {
     statusBarService.appendRightItem(notifications);
 
     statusBarService.onClick(function (e, item) {
-        console.log('statusBarService:', e, item);
+        console.log('statusBarService:', e, item, problems, notifications);
     });
 }
 

src/extensions/theme-defaults/index.ts

@@ -1,36 +1,42 @@
-import { IColorTheme } from "mo/model/colorTheme";
-import { IExtension, IExtensionType } from "mo/model/extension";
-
-const colorThemesExtension: IExtension = require('./package.json');
-
-function initColorTheme() {
-
-    try {
-
-        if (!colorThemesExtension || !colorThemesExtension.categories?.includes(IExtensionType.Theme)) {
-            console.error('This is invalid colorTheme extension package!', colorThemesExtension);
-        }
-
-        const themes = colorThemesExtension.contributes?.themes?.map((theme: IColorTheme) => {
-            if (theme.path) {
-                const themeDetail = {}; // require(theme.path);
-                return Object.assign({}, theme, themeDetail)
-            }
-            return theme;
-        });
-
-        if (!colorThemesExtension.contributes) {
-            colorThemesExtension.contributes = { themes: [] };
-        }
-
-        colorThemesExtension.contributes.themes = themes;
-    } catch (e) {
-        throw new Error('Load color theme exception:' + e);
-    }
-}
-
-initColorTheme();
-
-export { 
-    colorThemesExtension
-}
+import { IColorTheme } from 'mo/model/colorTheme';
+import { IExtension } from 'mo/model/extension';
+
+const defaultColorThemeExtension: IExtension = require('./package.json');
+
+// The below handle for theme extension is temporary,
+// we will automatic load the extension package.
+
+// Default
+const defaultDark: IColorTheme = require('./themes/dark_defaults.json');
+const defaultLight: IColorTheme = require('./themes/light_defaults.json');
+const defaultHC: IColorTheme = require('./themes/hc_black_defaults.json');
+
+// Theme
+const darkPlus: IColorTheme = require('./themes/dark_plus.json');
+Object.assign(darkPlus, defaultDark);
+const darkVS: IColorTheme = require('./themes/dark_vs.json');
+Object.assign(darkVS, defaultDark);
+
+const lightPlus: IColorTheme = require('./themes/light_plus.json');
+Object.assign(lightPlus, defaultLight);
+const lightVS: IColorTheme = require('./themes/light_vs.json');
+Object.assign(lightVS, defaultLight);
+
+const hcBlack: IColorTheme = require('./themes/hc_black.json');
+Object.assign(hcBlack, defaultHC);
+
+const themes = defaultColorThemeExtension.contributes?.themes || [];
+
+const themeDarkPlus = themes[0];
+const themeLightPlus = themes[1];
+const themeVSDark = themes[2];
+const themeVSLight = themes[3];
+const themeHCBlack = themes[4];
+
+themes[0] = Object.assign({}, themeDarkPlus, darkPlus);
+themes[1] = Object.assign({}, themeLightPlus, lightPlus);
+themes[2] = Object.assign({}, themeVSDark, darkVS);
+themes[3] = Object.assign({}, themeVSLight, lightVS);
+themes[4] = Object.assign({}, themeHCBlack, hcBlack);
+
+export { defaultColorThemeExtension };

src/extensions/theme-monokai/index.ts

@@ -0,0 +1,15 @@
+import { IColorTheme } from 'mo/model/colorTheme';
+import { IExtension } from 'mo/model/extension';
+
+const monokaiColorThemeExtension: IExtension = require('./package.json');
+
+// Default
+const themeOneColors: IColorTheme = require('./themes/monokai-color-theme.json');
+
+const themes = monokaiColorThemeExtension.contributes?.themes || [];
+
+const themeOne = themes[0];
+
+themes[0] = Object.assign({}, themeOne, themeOneColors);
+
+export { monokaiColorThemeExtension };

src/extensions/theme-monokai/package.json

@@ -11,6 +11,7 @@
     "contributes": {
         "themes": [
             {
+                "id": "Monokai",
                 "label": "Monokai",
                 "uiTheme": "vs-dark",
                 "path": "./themes/monokai-color-theme.json"

src/model/colorTheme.ts

@@ -1,7 +1,6 @@
-export interface ThemeColor extends Object {
-    id?: string;
+export interface IColors {
+    [colorId: string]: string;
 }
-
 export interface TokenColor extends Object {
     name?: string;
     scope?: string | string[];
@@ -17,7 +16,7 @@ export interface IColorTheme {
     name: string;
     uiTheme: string;
     path?: string;
-    colors?: ThemeColor;
+    colors?: IColors;
     tokenColors?: TokenColor[];
     /**
      * The semanticTokenColors mappings as well as

src/model/extension.ts

@@ -19,7 +19,7 @@ export enum IContributeType {
     Commands = 'commands',
     Configuration = 'configuration',
     Grammar = 'grammars',
-    Theme = 'themes',
+    Themes = 'themes',
     IconTheme = 'iconThemes',
 }
 
@@ -28,7 +28,7 @@ export interface IContribute {
     [IContributeType.Commands]?: any;
     [IContributeType.Configuration]?: any;
     [IContributeType.Grammar]?: any;
-    [IContributeType.Theme]?: IColorTheme[];
+    [IContributeType.Themes]?: IColorTheme[];
     [IContributeType.IconTheme]?: IIconTheme[];
 }
 

src/services/extensionService.ts

@@ -1,6 +1,9 @@
 import { singleton, inject, container } from 'tsyringe';
 import { ErrorMsg } from 'mo/common/error';
 import { IContribute, IContributeType, IExtension } from 'mo/model/extension';
+import { colorThemeService } from 'mo';
+import { IColorTheme } from 'mo/model/colorTheme';
+import logger from 'mo/common/logger';
 
 export interface IExtensionService {
     /**
@@ -25,25 +28,18 @@ export class ExtensionService implements IExtensionService {
         this.load(extensions);
     }
 
-    /**
-     * TODO: Current extension service can't parses VSCode theme, so needs to refactor
-     * @param param0 extensionEntry object
-     * @param moleculeCtx the context object of molecule
-     */
     public load(extensions: IExtension[] = []) {
         try {
             if (extensions?.length === 0) return;
             this.extensions = this.extensions.concat(extensions);
+            logger.info('ExtensionService.extensions:', this.extensions);
             const ctx = this;
-
             extensions?.forEach((extension: IExtension, index: number) => {
-                if (extension.activate) {
+                if (extension && extension.activate) {
                     extension.activate(ctx);
-                } else {
-                    // TODO: different kind of extension ,different hand
-                    // throw new Error(ErrorMsg.NotFoundActivateMethod);
                 }
-                if (extension.contributes) {
+
+                if (extension && extension.contributes) {
                     this.loadContributes(extension.contributes);
                 }
             });
@@ -55,10 +51,13 @@ export class ExtensionService implements IExtensionService {
     public loadContributes(contributes: IContribute) {
         const contributeKeys = Object.keys(contributes);
         contributeKeys.forEach((type: string) => {
-            if (type === IContributeType.Commands) {
-                console.log('contributeKeys:', type);
-                // ThemeService.load(extension[type]);
-                // exts.push(extension);
+            switch (type) {
+                case IContributeType.Themes: {
+                    const themes: IColorTheme[] | undefined = contributes[type];
+                    if (themes) {
+                        colorThemeService.load(themes);
+                    }
+                }
             }
         });
     }

src/services/index.ts

@@ -5,7 +5,10 @@ export * from './extensionService';
 export * from './theme/colorThemeService';
 export * from './workbench';
 
-import { ColorThemeService, IColorThemeService } from './theme/colorThemeService';
+import {
+    ColorThemeService,
+    IColorThemeService,
+} from './theme/colorThemeService';
 import { ExtensionService, IExtensionService } from './extensionService';
 import {
     ActivityBarService,
@@ -36,10 +39,11 @@ const editorService = container.resolve<IEditorService>(EditorService);
 const statusBarService = container.resolve<IStatusBarService>(StatusBarService);
 
 /**
- * The theme service,
- * TODO: think about break themeService into ColorTheme and IconTheme
+ * The ColorTheme service,
  */
-const colorThemeService = container.resolve<IColorThemeService>(ColorThemeService);
+const colorThemeService = container.resolve<IColorThemeService>(
+    ColorThemeService
+);
 
 /**
  * Note: The extension service depends on other workbench services,