Skip to content

Clear CSS cache on theme change to prevent stale CSS variable values #286840

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tyriar merged 3 commits into from
Jan 10, 2026
Merged

Clear CSS cache on theme change to prevent stale CSS variable values #286840

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
10376b8
Initial plan
Copilot Jan 9, 2026
e10604b
Clear CSS cache on theme change to prevent stale values
Copilot Jan 9, 2026
f2f8c40
Merge branch 'main' into copilot/sub-pr-286838
Tyriar Jan 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/vs/editor/browser/gpu/css/decorationCssRuleExtractor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,4 +96,13 @@ export class DecorationCssRuleExtractor extends Disposable {
}
return result;
}

/**
* Clears all cached CSS rules and CSS variable values. This should be called when the theme
* changes to ensure fresh values are computed.
*/
clear(): void {
this._ruleCache.clear();
this._cssVariableCache.clear();
}
}
8 changes: 8 additions & 0 deletions src/vs/editor/browser/gpu/viewGpuContext.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { IInstantiationService } from '../../../platform/instantiation/common/in
import { TextureAtlas } from './atlas/textureAtlas.js';
import { IConfigurationService } from '../../../platform/configuration/common/configuration.js';
import { INotificationService, IPromptChoice, Severity } from '../../../platform/notification/common/notification.js';
import { IThemeService } from '../../../platform/theme/common/themeService.js';
import { GPULifecycle } from './gpuDisposable.js';
import { ensureNonNullable, observeDevicePixelDimensions } from './gpuUtils.js';
import { RectangleRenderer } from './rectangleRenderer.js';
Expand Down Expand Up @@ -82,6 +83,7 @@ export class ViewGpuContext extends Disposable {
@IInstantiationService private readonly _instantiationService: IInstantiationService,
@INotificationService private readonly _notificationService: INotificationService,
@IConfigurationService private readonly configurationService: IConfigurationService,
@IThemeService private readonly _themeService: IThemeService,
) {
super();

Expand Down Expand Up @@ -124,6 +126,12 @@ export class ViewGpuContext extends Disposable {
this.devicePixelRatio = dprObs;
this._register(runOnChange(this.devicePixelRatio, () => ViewGpuContext.atlas?.clear()));

// Clear decoration CSS caches when theme changes as CSS variables may have different values
this._register(this._themeService.onDidColorThemeChange(() => {
ViewGpuContext.decorationCssRuleExtractor.clear();
ViewGpuContext.atlas?.clear();
}));

const canvasDevicePixelDimensions = observableValue(this, { width: this.canvas.domNode.width, height: this.canvas.domNode.height });
this._register(observeDevicePixelDimensions(
this.canvas.domNode,
Expand Down
Loading