diff --git a/src/vs/base/browser/ui/codicons/codiconStyles.ts b/src/vs/base/browser/ui/codicons/codiconStyles.ts index 59dbdbe873acc37aed2a6c780205ea09b00abff6..8229f2f1cf1bf4da1378910f230d50e75a853115 100644 --- a/src/vs/base/browser/ui/codicons/codiconStyles.ts +++ b/src/vs/base/browser/ui/codicons/codiconStyles.ts @@ -8,25 +8,17 @@ import 'vs/css!./codicon/codicon-modifications'; import 'vs/css!./codicon/codicon-animations'; import { Codicon, iconRegistry } from 'vs/base/common/codicons'; -import { createStyleSheet } from 'vs/base/browser/dom'; -import { RunOnceScheduler } from 'vs/base/common/async'; -function initialize() { - let codiconStyleSheet = createStyleSheet(); - codiconStyleSheet.id = 'codiconStyles'; - - function updateAll() { +export const CodiconStyles = new class { + onDidChange = iconRegistry.onDidRegister; + public getCSS(): string { const rules = []; for (let c of iconRegistry.all) { rules.push(formatRule(c)); } - codiconStyleSheet.textContent = rules.join('\n'); + return rules.join('\n'); } - - const delayer = new RunOnceScheduler(updateAll, 0); - iconRegistry.onDidRegister(() => delayer.schedule()); - delayer.schedule(); -} +}; export function formatRule(c: Codicon) { let def = c.definition; @@ -35,5 +27,3 @@ export function formatRule(c: Codicon) { } return `.codicon-${c.id}:before { content: '${def.character}'; }`; } - -initialize(); diff --git a/src/vs/editor/standalone/browser/standaloneThemeServiceImpl.ts b/src/vs/editor/standalone/browser/standaloneThemeServiceImpl.ts index b449a75406ada8100cf6ccb0e25efc6274570f61..92c44c15e11ca741a78d907afb10f4cd1a8e12d3 100644 --- a/src/vs/editor/standalone/browser/standaloneThemeServiceImpl.ts +++ b/src/vs/editor/standalone/browser/standaloneThemeServiceImpl.ts @@ -16,6 +16,7 @@ import { ColorIdentifier, Extensions, IColorRegistry } from 'vs/platform/theme/c import { Extensions as ThemingExtensions, ICssStyleCollector, IFileIconTheme, IThemingRegistry, ITokenStyle } from 'vs/platform/theme/common/themeService'; import { IDisposable, Disposable } from 'vs/base/common/lifecycle'; import { ColorScheme } from 'vs/platform/theme/common/theme'; +import { CodiconStyles } from 'vs/base/browser/ui/codicons/codiconStyles'; const VS_THEME_NAME = 'vs'; const VS_DARK_THEME_NAME = 'vs-dark'; @@ -193,7 +194,9 @@ export class StandaloneThemeServiceImpl extends Disposable implements IStandalon private readonly _environment: IEnvironmentService = Object.create(null); private readonly _knownThemes: Map; - private _css: string; + private _codiconCSS: string; + private _themeCSS: string; + private _allCSS: string; private _globalStyleElement: HTMLStyleElement | null; private _styleElements: HTMLStyleElement[]; private _theme!: IStandaloneTheme; @@ -205,10 +208,17 @@ export class StandaloneThemeServiceImpl extends Disposable implements IStandalon this._knownThemes.set(VS_THEME_NAME, newBuiltInTheme(VS_THEME_NAME)); this._knownThemes.set(VS_DARK_THEME_NAME, newBuiltInTheme(VS_DARK_THEME_NAME)); this._knownThemes.set(HC_BLACK_THEME_NAME, newBuiltInTheme(HC_BLACK_THEME_NAME)); - this._css = ''; + this._codiconCSS = CodiconStyles.getCSS(); + this._themeCSS = ''; + this._allCSS = `${this._codiconCSS}\n${this._themeCSS}`; this._globalStyleElement = null; this._styleElements = []; this.setTheme(VS_THEME_NAME); + + CodiconStyles.onDidChange(() => { + this._codiconCSS = CodiconStyles.getCSS(); + this._updateCSS(); + }); } public registerEditorContainer(domNode: HTMLElement): IDisposable { @@ -222,7 +232,7 @@ export class StandaloneThemeServiceImpl extends Disposable implements IStandalon if (!this._globalStyleElement) { this._globalStyleElement = dom.createStyleSheet(); this._globalStyleElement.className = 'monaco-colors'; - this._globalStyleElement.innerHTML = this._css; + this._globalStyleElement.innerHTML = this._allCSS; this._styleElements.push(this._globalStyleElement); } return Disposable.None; @@ -231,7 +241,7 @@ export class StandaloneThemeServiceImpl extends Disposable implements IStandalon private _registerShadowDomContainer(domNode: HTMLElement): IDisposable { const styleElement = dom.createStyleSheet(domNode); styleElement.className = 'monaco-colors'; - styleElement.innerHTML = this._css; + styleElement.innerHTML = this._allCSS; this._styleElements.push(styleElement); return { dispose: () => { @@ -300,8 +310,8 @@ export class StandaloneThemeServiceImpl extends Disposable implements IStandalon let colorMap = tokenTheme.getColorMap(); ruleCollector.addRule(generateTokensCSSForColorMap(colorMap)); - this._css = cssRules.join('\n'); - this._styleElements.forEach(styleElement => styleElement.innerHTML = this._css); + this._themeCSS = cssRules.join('\n'); + this._updateCSS(); TokenizationRegistry.setColorMap(colorMap); this._onColorThemeChange.fire(theme); @@ -309,6 +319,11 @@ export class StandaloneThemeServiceImpl extends Disposable implements IStandalon return theme.id; } + private _updateCSS(): void { + this._allCSS = `${this._codiconCSS}\n${this._themeCSS}`; + this._styleElements.forEach(styleElement => styleElement.innerHTML = this._allCSS); + } + public getFileIconTheme(): IFileIconTheme { return { hasFileIcons: false, diff --git a/src/vs/workbench/services/themes/browser/workbenchThemeService.ts b/src/vs/workbench/services/themes/browser/workbenchThemeService.ts index cbce827b1dbd8124ec23e3314ea40de4b7e71d75..1e763a8786a5564dde8b564376d39983c81da689 100644 --- a/src/vs/workbench/services/themes/browser/workbenchThemeService.ts +++ b/src/vs/workbench/services/themes/browser/workbenchThemeService.ts @@ -18,7 +18,7 @@ import { Event, Emitter } from 'vs/base/common/event'; import { registerFileIconThemeSchemas } from 'vs/workbench/services/themes/common/fileIconThemeSchema'; import { IDisposable, dispose } from 'vs/base/common/lifecycle'; import { FileIconThemeData } from 'vs/workbench/services/themes/browser/fileIconThemeData'; -import { removeClasses, addClasses } from 'vs/base/browser/dom'; +import { removeClasses, addClasses, createStyleSheet } from 'vs/base/browser/dom'; import { IWorkbenchEnvironmentService } from 'vs/workbench/services/environment/common/environmentService'; import { IFileService, FileChangeType } from 'vs/platform/files/common/files'; import { URI } from 'vs/base/common/uri'; @@ -36,7 +36,8 @@ import { ILogService } from 'vs/platform/log/common/log'; import { isWeb } from 'vs/base/common/platform'; import { ColorScheme } from 'vs/platform/theme/common/theme'; import { IHostColorSchemeService } from 'vs/workbench/services/themes/common/hostColorSchemeService'; - +import { CodiconStyles } from 'vs/base/browser/ui/codicons/codiconStyles'; +import { RunOnceScheduler } from 'vs/base/common/async'; // implementation @@ -164,6 +165,17 @@ export class WorkbenchThemeService implements IWorkbenchThemeService { this.installPreferredSchemeListener(); this.installRegistryListeners(); }); + + const codiconStyleSheet = createStyleSheet(); + codiconStyleSheet.id = 'codiconStyles'; + + function updateAll() { + codiconStyleSheet.textContent = CodiconStyles.getCSS(); + } + + const delayer = new RunOnceScheduler(updateAll, 0); + CodiconStyles.onDidChange(() => delayer.schedule()); + delayer.schedule(); } private initialize(): Promise<[IWorkbenchColorTheme | null, IWorkbenchFileIconTheme | null, IWorkbenchProductIconTheme | null]> {