Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Debt - use CSS variables over `registerThemingParticipant`
See original GitHub issueWhen running VS Code (or the Monaco editor) all theme colors are exposed as CSS variables. That means components don’t need to use JavaScript to read and set colors but can simply rely on CSS. When a theme changes, the variable values automatically update. Also, with CSS variables you have less code and everything in one place.
The (long) list below is all users of registerThemingParticipant. Those that only set/update colors are candidates for adopting CSS variables The names of the CSS variables can be “derived” with the following logic
- prefix
--vscode- - take the theme color id and replace dots with slashes
For instance the color id editorSuggestWidget.background is exposed as CSS variables --vscode-editorSuggestWidget-background. Find a sample adoption in this commit: https://github.com/microsoft/vscode/pull/165164/commits/3a787a80351fda9d76e7b25d1feec26a8e39685f.
-
src/vs/editor/browser/viewParts/currentLineHighlight/currentLineHighlight.ts@alexdima -
src/vs/editor/browser/viewParts/editorScrollbar/editorScrollbar.ts -
src/vs/editor/browser/viewParts/indentGuides/indentGuides.ts -
src/vs/editor/browser/viewParts/lineNumbers/lineNumbers.ts -
src/vs/editor/browser/viewParts/minimap/minimap.ts -
src/vs/editor/browser/viewParts/rulers/rulers.ts -
src/vs/editor/browser/viewParts/scrollDecoration/scrollDecoration.ts#165595 -
src/vs/editor/browser/viewParts/selections/selections.ts -
src/vs/editor/browser/viewParts/viewCursors/viewCursors.ts -
src/vs/editor/browser/widget/codeEditorWidget.ts -
src/vs/editor/browser/widget/diffEditorWidget.ts -
src/vs/editor/browser/widget/diffReview.ts#165595 -
src/vs/editor/common/core/editorColorRegistry.ts -
src/vs/editor/common/model/bracketPairsTextModelPart/colorizedBracketPairsDecorationProvider.ts@hediet -
src/vs/editor/contrib/bracketMatching/browser/bracketMatching.ts#165595 -
src/vs/editor/contrib/codeAction/browser/lightBulbWidget.ts@mjbvz -
src/vs/editor/contrib/colorPicker/browser/colorPickerWidget.ts@aeschli -
src/vs/editor/contrib/find/browser/findOptionsWidget.ts#166098 -
src/vs/editor/contrib/find/browser/findWidget.ts@rebornix -
src/vs/editor/contrib/folding/browser/folding.ts@aeschli -
src/vs/editor/contrib/gotoSymbol/browser/link/goToDefinitionAtPosition.ts@jrieken -
src/vs/editor/contrib/hover/browser/hover.ts -
src/vs/editor/contrib/hover/browser/markerHoverParticipant.ts@jrieken -
src/vs/editor/contrib/inPlaceReplace/browser/inPlaceReplace.ts#166098 -
src/vs/editor/contrib/inlineCompletions/browser/ghostTextWidget.ts#166098 -
src/vs/editor/contrib/linkedEditing/browser/linkedEditing.ts#166279 -
src/vs/editor/contrib/links/browser/links.ts#166258 -
src/vs/editor/contrib/parameterHints/browser/parameterHintsWidget.ts@mjbvz -
src/vs/editor/contrib/symbolIcons/browser/symbolIcons.ts@jrieken -
src/vs/editor/contrib/wordHighlighter/browser/wordHighlighter.ts@alexdima -
src/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.ts#165595 -
src/vs/editor/standalone/browser/inspectTokens/inspectTokens.ts -
src/vs/platform/opener/browser/link.ts#166532 -
src/vs/platform/severityIcon/common/severityIcon.ts -
src/vs/workbench/browser/parts/activitybar/activitybarActions.ts -
src/vs/workbench/browser/parts/auxiliarybar/auxiliaryBarPart.ts -
src/vs/workbench/browser/parts/editor/editorGroupView.ts@bpasero -
src/vs/workbench/browser/parts/editor/editorPlaceholder.ts@bpasero -
src/vs/workbench/browser/parts/editor/tabsTitleControl.ts@bpasero -
src/vs/workbench/browser/parts/editor/titleControl.ts@bpasero -
src/vs/workbench/browser/parts/notifications/notificationsCenter.ts@bpasero -
src/vs/workbench/browser/parts/notifications/notificationsList.ts@bpasero -
src/vs/workbench/browser/parts/panel/panelPart.ts@bpasero -
src/vs/workbench/browser/parts/statusbar/statusbarPart.ts@bpasero -
src/vs/workbench/browser/parts/titlebar/menubarControl.ts@sbatten -
src/vs/workbench/browser/parts/titlebar/titlebarPart.ts@sbatten -
src/vs/workbench/browser/parts/views/treeView.ts@alexr00 -
src/vs/workbench/browser/parts/views/viewFilter.ts -
src/vs/workbench/browser/style.ts -
src/vs/workbench/contrib/codeEditor/browser/accessibility/accessibility.ts -
src/vs/workbench/contrib/codeEditor/browser/find/simpleFindWidget.ts@Tyriar -
src/vs/workbench/contrib/codeEditor/browser/inspectEditorTokens/inspectEditorTokens.ts -
src/vs/workbench/contrib/codeEditor/browser/suggestEnabledInput/suggestEnabledInput.ts -
src/vs/workbench/contrib/codeEditor/browser/untitledTextEditorHint.ts -
src/vs/workbench/contrib/comments/browser/commentsEditorContribution.ts@alexr00 -
src/vs/workbench/contrib/customEditor/browser/customEditors.ts -
src/vs/workbench/contrib/debug/browser/breakpointEditorContribution.ts@roblourens -
src/vs/workbench/contrib/debug/browser/callStackEditorContribution.ts@roblourens -
src/vs/workbench/contrib/debug/browser/debugColors.ts@roblourens -
src/vs/workbench/contrib/extensions/browser/extensionEditor.ts@sandy081 -
src/vs/workbench/contrib/extensions/browser/extensionsActions.ts@sandy081 -
src/vs/workbench/contrib/extensions/browser/extensionsList.ts@sandy081 -
src/vs/workbench/contrib/extensions/browser/extensionsViewer.ts@sandy081 -
src/vs/workbench/contrib/extensions/browser/extensionsWidgets.ts@sandy081 -
src/vs/workbench/contrib/feedback/browser/feedback.ts -
src/vs/workbench/contrib/interactive/browser/interactive.contribution.ts@rebornix -
src/vs/workbench/contrib/interactive/browser/interactiveEditor.ts#166279 -
src/vs/workbench/contrib/markers/browser/markersView.ts@sandy081 -
src/vs/workbench/contrib/markers/browser/markersViewActions.ts#166279 -
src/vs/workbench/contrib/notebook/browser/contrib/find/notebookFindReplaceWidget.ts@rebornix -
src/vs/workbench/contrib/notebook/browser/diff/notebookDiffEditor.ts@rebornix -
src/vs/workbench/contrib/notebook/browser/diff/notebookDiffOverviewRuler.ts@rebornix -
src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts@rebornix -
src/vs/workbench/contrib/notebook/browser/view/cellParts/cellComments.ts@rebornix -
src/vs/workbench/contrib/notebook/browser/viewParts/notebookEditorToolbar.ts@rebornix -
src/vs/workbench/contrib/output/browser/outputView.ts@sandy081 -
src/vs/workbench/contrib/preferences/browser/keybindingsEditor.ts@rzhao271 -
src/vs/workbench/contrib/preferences/browser/preferencesWidgets.ts@rzhao271 -
src/vs/workbench/contrib/preferences/browser/settingsTree.ts@rzhao271 -
src/vs/workbench/contrib/preferences/browser/settingsWidgets.ts@rzhao271 -
src/vs/workbench/contrib/remote/browser/tunnelView.ts@alexr00 -
src/vs/workbench/contrib/sash/browser/sash.contribution.ts@rzhao271 -
src/vs/workbench/contrib/search/browser/searchView.ts@andreamah -
src/vs/workbench/contrib/searchEditor/browser/searchEditor.ts@andreamah -
src/vs/workbench/contrib/terminal/browser/terminalEditor.ts@Tyriar @meganrogge -
src/vs/workbench/contrib/terminal/browser/terminalInstance.ts@Tyriar -
src/vs/workbench/contrib/terminal/browser/terminalView.ts@Tyriar -
src/vs/workbench/contrib/terminal/browser/widgets/terminalHoverWidget.ts@Tyriar -
src/vs/workbench/contrib/terminal/browser/xterm/decorationAddon.ts@Tyriar -
src/vs/workbench/contrib/terminal/browser/xterm/markNavigationAddon.ts@Tyriar -
src/vs/workbench/contrib/terminal/browser/xterm/quickFixAddon.ts@Tyriar -
src/vs/workbench/contrib/testing/browser/icons.ts@connor4312 -
src/vs/workbench/contrib/testing/browser/testingDecorations.ts@connor4312 -
src/vs/workbench/contrib/testing/browser/testingExplorerView.ts@connor4312 -
src/vs/workbench/contrib/testing/browser/testingOutputPeek.ts#166279 -
src/vs/workbench/contrib/testing/browser/theme.ts@connor4312 -
src/vs/workbench/contrib/typeHierarchy/browser/typeHierarchyPeek.ts@jrieken -
src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts@lramos15 -
src/vs/workbench/contrib/welcomeOverlay/browser/welcomeOverlay.ts@lramos15 -
src/vs/workbench/contrib/welcomeWalkthrough/browser/walkThroughPart.ts@lramos15 -
src/vs/workbench/services/hover/browser/hoverService.ts@Tyriar
Issue Analytics
- State:
- Created a year ago
- Reactions:3
- Comments:17 (16 by maintainers)
Top Results From Across the Web
How to use CSS variables like a pro - LogRocket Blog
CSS variables help simplify the way you build websites and complex animations while enabling you to write reusable and elegant code.
Read more >Using CSS custom properties (variables) - MDN Web Docs
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific ...
Read more >Why display property set to inherit with CSS variable doesn't ...
In such situation, inherit is used as a value for the custom property and will not be evaluted to the inherit value using...
Read more >How to set up site theming with CSS variables | Creative Bloq
CSS Custom Properties, commonly known as CSS variables, are now supported by all major modern browsers. This means that for projects that ...
Read more >Use svg images for the nsfw spoiler image (#607) · Issues · Pleroma ...
Here is how the nobg version looks with light and dark themes: ... SVGs to use css variables that exist in theming engine...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I wrote a small helper that generates dynamic CSS rules but with the css variables filled in: https://gist.github.com/aeschli/8aa2f09d75d004c8b48a91ec1457008d
You can use this for simple cases. Hopefully, it prevents some typos.
The code is at: https://github.com/microsoft/vscode/tree/aeschli/generateStyeSheetWithColorVariables
@sandy081 Looking at where verifiedPublisherThemeIcon is used, it’s always in a dom node that also has the class
publisher-verified. Better avoid the codicon class name, but usepublisher-verifiedhttps://github.com/microsoft/vscode/blob/dd93163b73418600c48ede98aa78b072e7a0cde4/src/vs/workbench/contrib/extensions/browser/extensionsList.ts#L99 https://github.com/microsoft/vscode/blob/dd93163b73418600c48ede98aa78b072e7a0cde4/src/vs/workbench/contrib/extensions/browser/extensionsList.ts#L99