VS Code like theming (colors and icons)

CHANGELOG.md

@@ -6,6 +6,60 @@ Breaking changes:
 
 - [task] renamed method `getStrigifiedTaskSchema()` has been renamed to `getStringifiedTaskSchema()` [#6780](https://github.com/eclipse-theia/theia/pull/6780)
 - [task] renamed method `reorgnizeTasks()` has been renamed to `reorganizeTasks()` [#6780](https://github.com/eclipse-theia/theia/pull/6780)
+- Support VS Code icon and color theming. [#6475](https://github.com/eclipse-theia/theia/pull/6475)
+  - Theming: Before `input`, `textarea`, `select` and `button` elements were styled in an ad-hoc manner, i.e.
+  some were styled globally for a tag, other per a component and third with a dedicated css class name.
+  Now Theia does not style these elements by default, but an extension developer should decide.
+  Theia comes though with predefined css class names: `theia-input`, `theia-select` and `theia-button`
+  to style input/textarea, select and button elements correspondingly. Existing components were refactored to use them.
+  - Theming: Theia css colors are replaced with [VS Code colors](https://code.visualstudio.com/api/references/theme-color).
+    - One can reference VS Code color in css by prefixing them with `--theia` and replacing all dots with dashes.
+    For example `widget.shadow` color can be referenced in css with `var(--theia-widget-shadow)`.
+    - One can resolve a current color value programmatically with `ColorRegistry.getCurrentColor`.
+    - One can load a new color theme:
+      - in the frontend module to enable it on startup
+        ```ts
+            MonacoThemingService.register({
+                id: 'myDarkTheme',
+                label: 'My Dark Theme',
+                uiTheme: 'vs-dark',
+                json: require('./relative/path/to/my_theme.json'),
+                includes: {
+                    './included_theme.json': require('./relative/path/to/included_theme.json')
+                }
+            });
+        ```
+      - later from a file:
+        ```ts
+            @inject(MonacoThemingService)
+            protected readonly monacoThemeService: MonacoThemingService;
+
+            this.monacoThemeService.register({
+                id: 'myDarkTheme',
+                label: 'My Dark Theme',
+                uiTheme: 'vs-dark',
+                uri: 'file:///absolute/path/to/my_theme.json'
+            });
+        ```
+      - or install from a VS Code extension.
+    - One should not introduce css color variables anymore or hardcode colors in css. 
+    - One can contribute new colors by implementing `ColorContribution` contribution point and calling `ColorRegistry.register`.
+    It's important that new colors are derived from existing VS Code colors if one plans to allow installation of VS Code extension contributing color themes.
+    Otherwise, there is no guarantee that new colors don't look alien for a random VS Code color theme.
+    One can derive from an existing color, just by plainly referencing it, e.g. `dark: 'widget.shadow'`,
+    or applying transformations, e.g. `dark: Color.lighten('widget.shadow', 0.4)`.
+    - One can though specify values, without deriving from VS Code colors, for new colors in their own theme.
+    See for example, how [Light (Theia)](packages/monaco/data/monaco-themes/vscode/light_theia.json) theme overrides colors for the activity bar.
+  - Labeling: `LabelProvider.getIcon` should be sync and fast to avoid blocking rendering and icon caching.
+  One has to pass more specific elements to get a more specific icon. For example, one cannot answer precisely from a URI
+  whether a folder or a file icon should be used. If a client wants to get a proper result then it should pass `FileStat` for example or
+  provide own `LabelProviderContribution` which derives `FileStat` from a custom data structure and then calls  `LabelProvider.getIcon` again.
+  - Labeling: `LabelProviderContribution` methods can return `undefined` meaning that the next contribution should be tried.
+  - Tree: `TreeNode.name`, `TreeNode.description` and `TreeNode.icon` are deprecated and will be removed later.
+  One has to provide `LabelProviderContribution` implementation for a custom tree node structure.
+  Before these attributes have to be computed for all nodes and stored as a part of the layout.
+  From now on they will be computed only on demand for visible nodes.
+  It decreases requirements to the local storage and allows to invalidate node appearance by simply rerendering a tree.
 
 ## v0.14.0
 

examples/api-samples/src/browser/sample-dynamic-label-provider-contribution.ts

@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { DefaultUriLabelProviderContribution, DidChangeLabelEvent, FILE_ICON } from '@theia/core/lib/browser/label-provider';
+import { DefaultUriLabelProviderContribution, DidChangeLabelEvent } from '@theia/core/lib/browser/label-provider';
 import URI from '@theia/core/lib/common/uri';
 import { injectable } from 'inversify';
 import { Emitter, Event } from '@theia/core';
@@ -54,23 +54,23 @@ export class SampleDynamicLabelProviderContribution extends DefaultUriLabelProvi
         });
     }
 
-    private getUri(element: URI): URI {
+    protected getUri(element: URI): URI {
         return new URI(element.toString());
     }
 
-    async getIcon(element: URI): Promise<string> {
+    getIcon(element: URI): string {
         const uri = this.getUri(element);
         const icon = super.getFileIcon(uri);
         if (!icon) {
-            return FILE_ICON;
+            return this.defaultFileIcon;
         }
         return icon;
     }
 
     protected readonly onDidChangeEmitter = new Emitter<DidChangeLabelEvent>();
     private x: number = 0;
 
-    getName(element: URI): string {
+    getName(element: URI): string | undefined {
         const uri = this.getUri(element);
         if (this.isActive && uri.toString().includes('test')) {
             return super.getName(uri) + '-' + this.x.toString(10);
@@ -79,7 +79,7 @@ export class SampleDynamicLabelProviderContribution extends DefaultUriLabelProvi
         }
     }
 
-    getLongName(element: URI): string {
+    getLongName(element: URI): string | undefined {
         const uri = this.getUri(element);
         return super.getLongName(uri);
     }

packages/callhierarchy/src/browser/style/index.css

@@ -16,7 +16,6 @@
 
 .theia-CallHierarchyTree {
     font-size: var(--theia-ui-font-size1);
-    color: var(--theia-ui-font-color1);
 }
 
 .theia-CallHierarchyTree .theia-TreeNode {
@@ -45,11 +44,11 @@
 }
 
 .theia-CallHierarchyTree .definitionNode .referenceCount {
-    color: var(--theia-ui-font-color3);
+    color: var(--theia-badge-background);
 }
 
 .theia-CallHierarchyTree .definitionNode .container {
-    color: var(--theia-ui-font-color2);
+    color: var(--theia-descriptionForeground);
 }
 
 .call-hierarchy-tab-icon::before {

packages/console/src/browser/style/index.css

@@ -15,31 +15,29 @@
  ********************************************************************************/
 
 .theia-console-content {
-    color: var(--theia-content-font-color0);
     font-size: var(--theia-code-font-size);
     line-height: var(--theia-code-line-height);
     font-family: var(--theia-code-font-family);
 }
 
 .theia-console-input {
     padding-left: 20px;
-	border-top: var(--theia-panel-border-width) solid var(--theia-border-color1);
+	border-top: var(--theia-panel-border-width) solid var(--theia-panel-border);
 }
 
 .theia-console-input:before {
 	left: 8px;
 	position: absolute;
     content: '\276f';
 	line-height: 18px;
-    color: var(--theia-ui-font-color1);
 }
 
 .theia-console-error {
-    color: var(--theia-error-color2);
+    color: var(--theia-errorForeground);
 }
 
 .theia-console-warning {
-    color: var(--theia-warn-color2);
+    color: var(--theia-editorWarning-foreground);
 }
 
 .theia-console-ansi-console-item {

packages/core/src/browser/color-application-contribution.ts

@@ -39,13 +39,19 @@ export class ColorApplicationContribution implements FrontendApplicationContribu
     @inject(ContributionProvider) @named(ColorContribution)
     protected readonly colorContributions: ContributionProvider<ColorContribution>;
 
+    private static themeBackgroundId = 'theme.background';
+
     onStart(): void {
         for (const contribution of this.colorContributions.getContributions()) {
             contribution.registerColors(this.colors);
         }
 
+        this.updateThemeBackground();
+        ThemeService.get().onThemeChange(() => this.updateThemeBackground());
+
         this.update();
         ThemeService.get().onThemeChange(() => this.update());
+        this.colors.onDidChange(() => this.update());
     }
 
     protected readonly toUpdate = new DisposableCollection();
@@ -61,15 +67,30 @@ export class ColorApplicationContribution implements FrontendApplicationContribu
         const documentElement = document.documentElement;
         if (documentElement) {
             for (const id of this.colors.getColors()) {
-                const color = this.colors.getCurrentColor(id);
-                if (color) {
-                    const propertyName = `--theia-${id.replace('.', '-')}`;
-                    documentElement.style.setProperty(propertyName, color);
-                    this.toUpdate.push(Disposable.create(() => documentElement.style.removeProperty(propertyName)));
+                const variable = this.colors.getCurrentCssVariable(id);
+                if (variable) {
+                    const { name, value } = variable;
+                    documentElement.style.setProperty(name, value);
+                    this.toUpdate.push(Disposable.create(() => documentElement.style.removeProperty(name)));
                 }
             }
         }
         this.onDidChangeEmitter.fire(undefined);
     }
 
+    protected updateThemeBackground(): void {
+        const color = this.colors.getCurrentColor('editor.background');
+        if (color) {
+            window.localStorage.setItem(ColorApplicationContribution.themeBackgroundId, color);
+        } else {
+            window.localStorage.removeItem(ColorApplicationContribution.themeBackgroundId);
+        }
+    }
+
+    static initBackground(): void {
+        const value = window.localStorage.getItem(this.themeBackgroundId) || '#1d1d1d';
+        const documentElement = document.documentElement;
+        documentElement.style.setProperty('--theia-editor-background', value);
+    }
+
 }

packages/core/src/browser/color-registry.ts

@@ -15,32 +15,132 @@
  ********************************************************************************/
 
 import { injectable } from 'inversify';
-import { Disposable } from '../common/disposable';
+import { DisposableCollection, Disposable } from '../common/disposable';
+import { Emitter } from '../common/event';
+
+/**
+ * Either be a reference to an existing color or a color value as a hex string, rgba, or hsla.
+ */
+export type Color = string | RGBA | HSLA | ColorTransformation;
+export namespace Color {
+    export function rgba(r: number, g: number, b: number, a: number = 1): Color {
+        return { r, g, b, a };
+    }
+    export function hsla(h: number, s: number, l: number, a: number = 1): Color {
+        return { h, s, l, a };
+    }
+    export const white = rgba(255, 255, 255, 1);
+    export const black = rgba(0, 0, 0, 1);
+    export function transparent(v: string, f: number): ColorTransformation {
+        return { v, f, kind: 'transparent' };
+    }
+    export function lighten(v: string, f: number): ColorTransformation {
+        return { v, f, kind: 'lighten' };
+    }
+    export function darken(v: string, f: number): ColorTransformation {
+        return { v, f, kind: 'darken' };
+    }
+}
+export interface ColorTransformation {
+    kind: 'transparent' | 'lighten' | 'darken'
+    v: string
+    f: number
+}
+export interface RGBA {
+    /**
+     * Red: integer in [0-255]
+     */
+    readonly r: number;
+
+    /**
+     * Green: integer in [0-255]
+     */
+    readonly g: number;
+
+    /**
+     * Blue: integer in [0-255]
+     */
+    readonly b: number;
+
+    /**
+     * Alpha: float in [0-1]
+     */
+    readonly a: number;
+}
+export interface HSLA {
+    /**
+     * Hue: integer in [0, 360]
+     */
+    readonly h: number;
+    /**
+     * Saturation: float in [0, 1]
+     */
+    readonly s: number;
+    /**
+     * Luminosity: float in [0, 1]
+     */
+    readonly l: number;
+    /**
+     * Alpha: float in [0, 1]
+     */
+    readonly a: number;
+}
 
 export interface ColorDefaults {
-    light?: string
-    dark?: string
-    hc?: string
+    light?: Color
+    dark?: Color
+    hc?: Color
 }
 
-export interface ColorOptions {
+export interface ColorDefinition {
+    id: string
     defaults?: ColorDefaults
     description: string
 }
 
+export interface ColorCssVariable {
+    name: string
+    value: string
+}
+
 /**
  * It should be implemented by an extension, e.g. by the monaco extension.
  */
 @injectable()
 export class ColorRegistry {
 
+    protected readonly onDidChangeEmitter = new Emitter<void>();
+    readonly onDidChange = this.onDidChangeEmitter.event;
+    protected fireDidChange(): void {
+        this.onDidChangeEmitter.fire(undefined);
+    }
+
     *getColors(): IterableIterator<string> { }
 
+    getCurrentCssVariable(id: string): ColorCssVariable | undefined {
+        const value = this.getCurrentColor(id);
+        if (!value) {
+            return undefined;
+        }
+        const name = this.toCssVariableName(id);
+        return { name, value };
+    }
+
+    toCssVariableName(id: string, prefix = 'theia'): string {
+        return `--${prefix}-${id.replace(/\./g, '-')}`;
+    }
+
     getCurrentColor(id: string): string | undefined {
         return undefined;
     }
 
-    register(id: string, options: ColorOptions): Disposable {
+    register(...definitions: ColorDefinition[]): Disposable {
+        const result = new DisposableCollection(...definitions.map(definition => this.doRegister(definition)));
+        this.fireDidChange();
+        return result;
+    }
+
+    protected doRegister(definition: ColorDefinition): Disposable {
         return Disposable.NULL;
     }