Illuminate

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

• actionBar.toggledBackground#808389
• activityBar.activeBackground#ffffff00
• activityBar.activeBorder#60b0ff
• activityBar.activeFocusBorder#60b0ff
• activityBar.background#272a30
• activityBar.border#ffffff00
• activityBar.dropBorder#60b0ff
• activityBar.foreground#dcddde
• activityBar.inactiveForeground#808389
• activityBarBadge.background#60b0ff
• activityBarBadge.foreground#ffffff
• badge.background#60b0ff
• badge.foreground#ffffff
• banner.background#303339
• banner.foreground#dcddde
• banner.iconForeground#ffffff
• breadcrumb.activeSelectionForeground#60d8ff
• breadcrumb.background#303339
• breadcrumb.focusForeground#ffffff
• breadcrumb.foreground#dcddde
• breadcrumbPicker.background#303339
• button.background#505359
• button.border#ffffff00
• button.foreground#ffffff
• button.hoverBackground#606369
• button.secondaryBackground#373a40
• button.secondaryForeground#ffffff
• button.secondaryHoverBackground#272a30
• button.separator#ffffff00
• charts.blue#60d8ff
• charts.foreground#dcddde
• charts.green#70ffb8
• charts.lines#505359
• charts.orange#ffc080
• charts.purple#dca0ff
• charts.red#ff6060
• charts.yellow#ffd860
• chat.avatarBackground#ffffff
• chat.avatarForeground#202122
• chat.requestBorder#40d0ff
• chat.slashCommandBackground#505359
• chat.slashCommandForeground#dcddde
• checkbox.background#505359
• checkbox.border#ffffff00
• checkbox.foreground#ffffff
• checkbox.selectBackground#505359
• checkbox.selectBorder#ffffff00
• commandCenter.activeBackground#606369
• commandCenter.activeBorder#ffffff00
• commandCenter.activeForeground#ffffff
• commandCenter.background#505359
• commandCenter.border#ffffff00
• commandCenter.debuggingBackground#606369
• commandCenter.foreground#dcddde
• commandCenter.inactiveBorder#ffffff00
• commandCenter.inactiveForeground#dcddde
• commentsView.resolvedIcon#70ffb8
• commentsView.unresolvedIcon#ff6060
• contrastActiveBorder#ffffff00
• contrastBorder#ffffff00
• debugConsole.errorForeground#ff8080
• debugConsole.infoForeground#60d8ff
• debugConsole.sourceForeground#808389
• debugConsole.warningForeground#ffd860
• debugConsoleInputIcon.foreground#dcddde
• debugExceptionWidget.background#303339
• debugExceptionWidget.border#ffffff00
• debugIcon.breakpointCurrentStackframeForeground#dcddde
• debugIcon.breakpointDisabledForeground#909399
• debugIcon.breakpointForeground#ff6060
• debugIcon.breakpointStackframeForeground#ff6060
• debugIcon.breakpointUnverifiedForeground#ffd860
• debugIcon.continueForeground#ffffff
• debugIcon.disconnectForeground#ff6060
• debugIcon.pauseForeground#ffffff
• debugIcon.restartForeground#70ffb8
• debugIcon.startForeground#ffffff
• debugIcon.stepBackForeground#60d8ff
• debugIcon.stepIntoForeground#60d8ff
• debugIcon.stepOutForeground#60d8ff
• debugIcon.stepOverForeground#60d8ff
• debugIcon.stopForeground#ff6060
• debugTokenExpression.boolean#ffd860
• debugTokenExpression.error#ff8080
• debugTokenExpression.name#dcddde
• debugTokenExpression.number#dca0ff
• debugTokenExpression.string#70ffb8
• debugTokenExpression.value#ff8080
• debugToolBar.background#303339
• debugToolBar.border#ffffff00
• debugView.exceptionLabelBackground#ff6060
• debugView.exceptionLabelForeground#ffffff
• debugView.stateLabelBackground#505359
• debugView.stateLabelForeground#ffffff
• debugView.valueChangedHighlight#ffd860
• descriptionForeground#b7bac0
• diffEditor.border#ffffff00
• diffEditor.diagonalFill#808389
• diffEditor.insertedLineBackground#ffffff00
• diffEditor.insertedTextBackground#505359
• diffEditor.insertedTextBorder#ffffff00
• diffEditor.move.border#ffffff00
• diffEditor.moveActive.border#ffffff00
• diffEditor.removedLineBackground#ffffff00
• diffEditor.removedTextBackground#505359
• diffEditor.removedTextBorder#ffffff00
• diffEditor.unchangedCodeBackground#ffffff00
• diffEditor.unchangedRegionBackground#ffffff00
• diffEditor.unchangedRegionForeground#dcddde
• diffEditor.unchangedRegionShadow#202122
• diffEditorGutter.insertedLineBackground#ffffff00
• diffEditorGutter.removedLineBackground#ffffff00
• diffEditorOverview.insertedForeground#90ffc8
• diffEditorOverview.removedForeground#ff8080
• disabledForeground#808389
• dropdown.background#505359
• dropdown.border#ffffff00
• dropdown.foreground#dcddde
• dropdown.listBackground#303339
• editor.background#373a40
• editor.findMatchBackground#003060
• editor.findMatchBorder#40d0ff
• editor.findMatchHighlightBackground#003060
• editor.findMatchHighlightBorder#ffffff00
• editor.findRangeHighlightBackground#003060
• editor.findRangeHighlightBorder#ffffff00
• editor.focusedStackFrameHighlightBackground#003060
• editor.foldBackground#505359
• editor.foreground#dcddde
• editor.hoverHighlightBackground#202122
• editor.inactiveSelectionBackground#505359
• editor.inlineValuesBackground#505359
• editor.inlineValuesForeground#dcddde
• editor.lineHighlightBackground#505359
• editor.lineHighlightBorder#707379
• editor.linkedEditingBackground#003060
• editor.rangeHighlightBackground#ffffff00
• editor.rangeHighlightBorder#ffffff00
• editor.selectionBackground#003060
• editor.selectionForeground#ffffff
• editor.selectionHighlightBackground#505359
• editor.selectionHighlightBorder#ffffff00
• editor.snippetFinalTabstopHighlightBackground#ffffff00
• editor.snippetFinalTabstopHighlightBorder#ffffff00
• editor.snippetTabstopHighlightBackground#505359
• editor.snippetTabstopHighlightBorder#ffffff00
• editor.stackFrameHighlightBackground#505359
• editor.symbolHighlightBackground#505359
• editor.symbolHighlightBorder#707379
• editor.wordHighlightBackground#505359
• editor.wordHighlightBorder#ffffff00
• editor.wordHighlightStrongBackground#505359
• editor.wordHighlightStrongBorder#ffffff00
• editor.wordHighlightTextBackground#505359
• editor.wordHighlightTextBorder#ffffff00
• editorBracketHighlight.foreground1#ffe080
• editorBracketHighlight.foreground2#ffd880
• editorBracketHighlight.foreground3#ffd080
• editorBracketHighlight.foreground4#ffc880
• editorBracketHighlight.foreground5#ffc080
• editorBracketHighlight.foreground6#ffb880
• editorBracketHighlight.unexpectedBracket.foreground#ff8080
• editorBracketMatch.background#ffffff00
• editorBracketMatch.border#ffffff00
• editorBracketPairGuide.activeBackground1#ffe080
• editorBracketPairGuide.activeBackground2#ffd880
• editorBracketPairGuide.activeBackground3#ffd080
• editorBracketPairGuide.activeBackground4#ffc880
• editorBracketPairGuide.activeBackground5#ffc080
• editorBracketPairGuide.activeBackground6#ffb880
• editorBracketPairGuide.background1#808389
• editorBracketPairGuide.background2#808389
• editorBracketPairGuide.background3#808389
• editorBracketPairGuide.background4#808389
• editorBracketPairGuide.background5#808389
• editorBracketPairGuide.background6#808389
• editorCodeLens.foreground#dcddde
• editorCommentsWidget.rangeActiveBackground#505359
• editorCommentsWidget.rangeBackground#474a50
• editorCommentsWidget.replyInputBackground#272a30
• editorCommentsWidget.resolvedBorder#70ffb8
• editorCommentsWidget.unresolvedBorder#ff6060
• editorCursor.background#ffffff
• editorCursor.foreground#707379
• editorError.background#ffffff00
• editorError.border#ffffff00
• editorError.foreground#ff8080
• editorGhostText.background#ffffff00
• editorGhostText.border#ffffff00
• editorGhostText.foreground#909399
• editorGroup.border#ffffff00
• editorGroup.dropBackground#dcddde40
• editorGroup.dropIntoPromptBackground#373a40
• editorGroup.dropIntoPromptBorder#808389
• editorGroup.dropIntoPromptForeground#ffffff
• editorGroup.emptyBackground#303339
• editorGroup.focusedEmptyBorder#ffffff00
• editorGroupHeader.border#ffffff00
• editorGroupHeader.noTabsBackground#303339
• editorGroupHeader.tabsBackground#303339
• editorGroupHeader.tabsBorder#ffffff00
• editorGutter.addedBackground#90ffc8
• editorGutter.background#373a40
• editorGutter.commentGlyphForeground#dcddde
• editorGutter.commentRangeForeground#dcddde
• editorGutter.commentUnresolvedGlyphForeground#ff6060
• editorGutter.deletedBackground#ff8080
• editorGutter.foldingControlForeground#dcddde
• editorGutter.modifiedBackground#ffe080
• editorHint.border#ffffff00
• editorHint.foreground#dcddde
• editorHoverWidget.background#303339
• editorHoverWidget.border#ffffff00
• editorHoverWidget.foreground#dcddde
• editorHoverWidget.highlightForeground#80e0ff
• editorHoverWidget.statusBarBackground#303339
• editorIndentGuide.activeBackground1#b7bac0
• editorIndentGuide.activeBackground2#b7bac0
• editorIndentGuide.activeBackground3#b7bac0
• editorIndentGuide.activeBackground4#b7bac0
• editorIndentGuide.activeBackground5#b7bac0
• editorIndentGuide.activeBackground6#b7bac0
• editorIndentGuide.background1#808389
• editorIndentGuide.background2#808389
• editorIndentGuide.background3#808389
• editorIndentGuide.background4#808389
• editorIndentGuide.background5#808389
• editorIndentGuide.background6#808389
• editorInfo.background#ffffff00
• editorInfo.border#ffffff00
• editorInfo.foreground#80e0ff
• editorInlayHint.background#505359
• editorInlayHint.foreground#dcddde
• editorInlayHint.parameterBackground#505359
• editorInlayHint.parameterForeground#dcddde
• editorInlayHint.typeBackground#505359
• editorInlayHint.typeForeground#dcddde
• editorLightBulb.foreground#ffd860
• editorLightBulbAi.foreground#ffd860
• editorLightBulbAutoFix.foreground#ffd860
• editorLineNumber.activeForeground#dcddde
• editorLineNumber.dimmedForeground#505359
• editorLineNumber.foreground#707379
• editorLink.activeForeground#80e0ff
• editorMarkerNavigation.background#373a40
• editorMarkerNavigationError.background#ff6060
• editorMarkerNavigationError.headerBackground#303339
• editorMarkerNavigationInfo.background#60d8ff
• editorMarkerNavigationInfo.headerBackground#303339
• editorMarkerNavigationWarning.background#ffd860
• editorMarkerNavigationWarning.headerBackground#303339
• editorOverviewRuler.addedForeground#90ffc8
• editorOverviewRuler.background#303339
• editorOverviewRuler.border#ffffff00
• editorOverviewRuler.bracketMatchForeground#ffffff00
• editorOverviewRuler.commentForeground#909399
• editorOverviewRuler.commentUnresolvedForeground#ff8080
• editorOverviewRuler.commonContentForeground#ffffff00
• editorOverviewRuler.currentContentForeground#505359
• editorOverviewRuler.deletedForeground#ff8080
• editorOverviewRuler.errorForeground#ff8080
• editorOverviewRuler.findMatchForeground#80e0ff
• editorOverviewRuler.incomingContentForeground#202122
• editorOverviewRuler.infoForeground#80e0ff
• editorOverviewRuler.modifiedForeground#ffe080
• editorOverviewRuler.rangeHighlightForeground#909399
• editorOverviewRuler.selectionHighlightForeground#909399
• editorOverviewRuler.warningForeground#ffe080
• editorOverviewRuler.wordHighlightForeground#909399
• editorOverviewRuler.wordHighlightStrongForeground#909399
• editorOverviewRuler.wordHighlightTextForeground#909399
• editorPane.background#272a30
• editorRuler.foreground#707379
• editorStickyScroll.background#303339
• editorStickyScrollHover.background#505359
• editorSuggestWidget.background#303339
• editorSuggestWidget.border#ffffff00
• editorSuggestWidget.focusHighlightForeground#80e0ff
• editorSuggestWidget.foreground#dcddde
• editorSuggestWidget.highlightForeground#80e0ff
• editorSuggestWidget.selectedBackground#505359
• editorSuggestWidget.selectedForeground#ffffff
• editorSuggestWidget.selectedIconForeground#ffffff
• editorSuggestWidgetStatus.foreground#dcddde
• editorUnicodeHighlight.background#ffffff00
• editorUnicodeHighlight.border#ffffff00
• editorUnnecessaryCode.border#808389
• editorUnnecessaryCode.opacity#dcdddea0
• editorWarning.background#ffffff00
• editorWarning.border#ffffff00
• editorWarning.foreground#ffe080
• editorWhitespace.foreground#a0a3a9
• editorWidget.background#303339
• editorWidget.border#ffffff00
• editorWidget.foreground#dcddde
• editorWidget.resizeBorder#b7bac0
• errorForeground#ff8080
• extensionBadge.remoteBackground#60d8ff
• extensionBadge.remoteForeground#ffffff
• extensionButton.background#505359
• extensionButton.foreground#dcddde
• extensionButton.hoverBackground#606369
• extensionButton.prominentBackground#505359
• extensionButton.prominentForeground#dcddde
• extensionButton.prominentHoverBackground#606369
• extensionButton.separator#ffffff00
• extensionIcon.preReleaseForeground#006030
• extensionIcon.sponsorForeground#70ffb8
• extensionIcon.starForeground#ffd860
• extensionIcon.verifiedForeground#60d8ff
• focusBorder#ffffff00
• foreground#dcddde
• gitDecoration.addedResourceForeground#90ffc8
• gitDecoration.conflictingResourceForeground#ff8080
• gitDecoration.deletedResourceForeground#ff8080
• gitDecoration.ignoredResourceForeground#909399
• gitDecoration.modifiedResourceForeground#ffe080
• gitDecoration.renamedResourceForeground#80e0ff
• gitDecoration.stageDeletedResourceForeground#ff8080
• gitDecoration.stageModifiedResourceForeground#ffe080
• gitDecoration.submoduleResourceForeground#80e0ff
• gitDecoration.untrackedResourceForeground#90ffc8
• icon.foreground#ffffff
• inlineChat.background#373a40
• inlineChat.border#ffffff00
• inlineChat.regionHighlight#505359
• inlineChat.shadow#202122
• inlineChatDiff.inserted#90ffc8
• inlineChatDiff.removed#ff8080
• inlineChatInput.background#303339
• inlineChatInput.border#ffffff00
• inlineChatInput.focusBorder#b7bac0
• inlineChatInput.placeholderForeground#808389
• input.background#373a40
• input.border#b7bac0
• input.foreground#dcddde
• input.placeholderForeground#808389
• inputOption.activeBackground#3c0060
• inputOption.activeBorder#b840ff
• inputOption.activeForeground#ffffff
• inputOption.hoverBackground#606369
• inputValidation.errorBackground#600000
• inputValidation.errorBorder#ff4040
• inputValidation.errorForeground#ffffff
• inputValidation.infoBackground#003060
• inputValidation.infoBorder#40d0ff
• inputValidation.infoForeground#ffffff
• inputValidation.warningBackground#603000
• inputValidation.warningBorder#ffd040
• inputValidation.warningForeground#ffffff
• interactive.activeCodeBorder#ffffff00
• interactive.inactiveCodeBorder#ffffff00
• keybindingLabel.background#505359
• keybindingLabel.border#808389
• keybindingLabel.bottomBorder#ffffff00
• keybindingLabel.foreground#dcddde
• keybindingTable.headerBackground#303339
• keybindingTable.rowsBackground#404349
• list.activeSelectionBackground#505359
• list.activeSelectionForeground#ffffff
• list.activeSelectionIconForeground#ffffff
• list.deemphasizedForeground#a0a3a9
• list.dropBackground#404349
• list.errorForeground#ff8080
• list.filterMatchBackground#003060
• list.filterMatchBorder#ffffff00
• list.focusAndSelectionOutline#ffffff00
• list.focusBackground#404349
• list.focusForeground#ffffff
• list.focusHighlightForeground#80e0ff
• list.focusOutline#ffffff00
• list.highlightForeground#80e0ff
• list.hoverBackground#404349
• list.hoverForeground#ffffff
• list.inactiveFocusBackground#404349
• list.inactiveFocusOutline#ffffff00
• list.inactiveSelectionBackground#404349
• list.inactiveSelectionForeground#ffffff
• list.inactiveSelectionIconForeground#ffffff
• list.invalidItemForeground#ff8080
• list.warningForeground#ffe080
• listFilterWidget.background#303339
• listFilterWidget.noMatchesOutline#ffffff00
• listFilterWidget.outline#ffffff00
• listFilterWidget.shadow#202122
• menu.background#404349
• menu.border#ffffff00
• menu.foreground#ffffff
• menu.selectionBackground#606369
• menu.selectionBorder#ffffff00
• menu.selectionForeground#ffffff
• menu.separatorBackground#808389
• menubar.selectionBackground#404349
• menubar.selectionBorder#ffffff00
• menubar.selectionForeground#ffffff
• merge.border#ffffff00
• merge.commonContentBackground#ffffff00
• merge.commonHeaderBackground#ffffff00
• merge.currentContentBackground#404349
• merge.currentHeaderBackground#505359
• merge.incomingContentBackground#303339
• merge.incomingHeaderBackground#202122
• mergeEditor.change.background#003060
• mergeEditor.change.word.background#003060
• mergeEditor.changeBase.background#003060
• mergeEditor.changeBase.word.background#003060
• mergeEditor.conflict.handled.minimapOverViewRuler#90ffc8
• mergeEditor.conflict.handledFocused.border#70ffb8
• mergeEditor.conflict.handledUnfocused.border#70ffb8
• mergeEditor.conflict.input1.background#202122
• mergeEditor.conflict.input2.background#202122
• mergeEditor.conflict.unhandled.minimapOverViewRuler#ffe080
• mergeEditor.conflict.unhandledFocused.border#ffd860
• mergeEditor.conflict.unhandledUnfocused.border#ffd860
• mergeEditor.conflictingLines.background#505359
• minimap.background#303339
• minimap.errorHighlight#ff8080
• minimap.findMatchHighlight#dcddde
• minimap.foregroundOpacity#dcdddec0
• minimap.infoHighlight#80e0ff
• minimap.selectionHighlight#dcddde
• minimap.selectionOccurrenceHighlight#dcddde
• minimap.warningHighlight#ffe080
• minimapGutter.addedBackground#90ffc8
• minimapGutter.deletedBackground#ff8080
• minimapGutter.modifiedBackground#ffe080
• minimapSlider.activeBackground#dcddde50
• minimapSlider.background#dcddde40
• minimapSlider.hoverBackground#dcddde60
• multiDiffEditor.headerBackground#dcddde
• notebook.cellBorderColor#ffffff00
• notebook.cellEditorBackground#303339
• notebook.cellHoverBackground#505359
• notebook.cellInsertionIndicator#808389
• notebook.cellStatusBarItemHoverBackground#808389
• notebook.cellToolbarSeparator#808389
• notebook.editorBackground#373a40
• notebook.focusedCellBackground#505359
• notebook.focusedCellBorder#b7bac0
• notebook.focusedEditorBorder#ffffff00
• notebook.inactiveFocusedCellBorder#ffffff00
• notebook.inactiveSelectedCellBorder#ffffff00
• notebook.outputContainerBackgroundColor#272a30
• notebook.outputContainerBorderColor#ffffff00
• notebook.selectedCellBackground#505359
• notebook.selectedCellBorder#ffffff00
• notebook.symbolHighlightBackground#505359
• notebookEditorOverviewRuler.runningCellForeground#80e0ff
• notebookScrollbarSlider.activeBackground#909399
• notebookScrollbarSlider.background#808389
• notebookScrollbarSlider.hoverBackground#a0a3a9
• notebookStatusErrorIcon.foreground#ff6060
• notebookStatusRunningIcon.foreground#60d8ff
• notebookStatusSuccessIcon.foreground#70ffb8
• notificationCenter.border#808389
• notificationCenterHeader.background#303339
• notificationCenterHeader.foreground#dcddde
• notificationLink.foreground#60d8ff
• notifications.background#303339
• notifications.border#808389
• notifications.foreground#dcddde
• notificationsErrorIcon.foreground#ff6060
• notificationsInfoIcon.foreground#60d8ff
• notificationsWarningIcon.foreground#ffd860
• notificationToast.border#808389
• panel.background#303339
• panel.border#ffffff00
• panel.dropBorder#60b0ff
• panelInput.border#ffffff00
• panelSection.border#808389
• panelSection.dropBackground#dcddde40
• panelSectionHeader.background#ffffff00
• panelSectionHeader.border#ffffff00
• panelSectionHeader.foreground#ffffff
• panelTitle.activeBorder#ffffff00
• panelTitle.activeForeground#ffffff
• panelTitle.inactiveForeground#b7bac0
• peekView.border#60d8ff
• peekViewEditor.background#373a40
• peekViewEditor.matchHighlightBackground#003060
• peekViewEditor.matchHighlightBorder#ffffff00
• peekViewEditorGutter.background#373a40
• peekViewEditorStickyScroll.background#303339
• peekViewResult.background#303339
• peekViewResult.fileForeground#dcddde
• peekViewResult.lineForeground#dcddde
• peekViewResult.matchHighlightBackground#003060
• peekViewResult.selectionBackground#003060
• peekViewResult.selectionForeground#ffffff
• peekViewTitle.background#303339
• peekViewTitleDescription.foreground#dcddde
• peekViewTitleLabel.foreground#ffffff
• pickerGroup.border#808389
• pickerGroup.foreground#dcddde
• ports.iconRunningProcessForeground#70ffb8
• problemsErrorIcon.foreground#ff6060
• problemsInfoIcon.foreground#60d8ff
• problemsWarningIcon.foreground#ffd860
• profileBadge.background#60d8ff
• profileBadge.foreground#ffffff
• progressBar.background#60d8ff
• quickInput.background#303339
• quickInput.foreground#dcddde
• quickInputList.focusBackground#404349
• quickInputList.focusForeground#ffffff
• quickInputList.focusIconForeground#ffffff
• quickInputTitle.background#303339
• sash.hoverBorder#60b0ff
• scm.historyItemAdditionsForeground#90ffc8
• scm.historyItemDeletionsForeground#ff8080
• scm.historyItemSelectedStatisticsBorder#ffffff00
• scm.historyItemStatisticsBorder#ffffff00
• scrollbar.shadow#202122
• scrollbarSlider.activeBackground#909399
• scrollbarSlider.background#808389
• scrollbarSlider.hoverBackground#a0a3a9
• search.resultsInfoForeground#b7bac0
• searchEditor.findMatchBackground#003060
• searchEditor.findMatchBorder#ffffff00
• searchEditor.textInputBorder#ffffff00
• selection.background#003060
• settings.checkboxBackground#505359
• settings.checkboxBorder#ffffff00
• settings.checkboxForeground#ffffff
• settings.dropdownBackground#505359
• settings.dropdownBorder#ffffff00
• settings.dropdownForeground#dcddde
• settings.dropdownListBorder#808389
• settings.focusedRowBackground#404349
• settings.focusedRowBorder#808389
• settings.headerBorder#ffffff00
• settings.headerForeground#ffffff
• settings.modifiedItemIndicator#ffe080
• settings.numberInputBackground#505359
• settings.numberInputBorder#ffffff00
• settings.numberInputForeground#dcddde
• settings.rowHoverBackground#404349
• settings.sashBorder#ffffff00
• settings.settingsHeaderHoverForeground#ffffff
• settings.textInputBackground#505359
• settings.textInputBorder#ffffff00
• settings.textInputForeground#dcddde
• sideBar.background#303339
• sideBar.border#ffffff00
• sideBar.dropBackground#404349
• sideBar.foreground#dcddde
• sideBarSectionHeader.background#272a30
• sideBarSectionHeader.border#ffffff00
• sideBarSectionHeader.foreground#ffffff
• sideBarTitle.foreground#ffffff
• sideBySideEditor.horizontalBorder#ffffff00
• sideBySideEditor.verticalBorder#ffffff00
• simpleFindWidget.sashBorder#ffffff00
• statusBar.background#272a30
• statusBar.border#ffffff00
• statusBar.debuggingBackground#272a30
• statusBar.debuggingBorder#ffffff00
• statusBar.debuggingForeground#ffffff
• statusBar.focusBorder#ffffff00
• statusBar.foreground#ffffff
• statusBar.noFolderBackground#272a30
• statusBar.noFolderBorder#ffffff00
• statusBar.noFolderForeground#ffffff
• statusBarItem.activeBackground#474a50
• statusBarItem.compactHoverBackground#505359
• statusBarItem.errorBackground#600000
• statusBarItem.errorForeground#ffffff
• statusBarItem.errorHoverBackground#404349
• statusBarItem.errorHoverForeground#ffffff
• statusBarItem.focusBorder#ffffff00
• statusBarItem.hoverBackground#404349
• statusBarItem.hoverForeground#ffffff
• statusBarItem.offlineBackground#600000
• statusBarItem.offlineForeground#ffffff
• statusBarItem.offlineHoverBackground#ffffff
• statusBarItem.offlineHoverForeground#404349
• statusBarItem.prominentBackground#303339
• statusBarItem.prominentForeground#ffffff
• statusBarItem.prominentHoverBackground#404349
• statusBarItem.prominentHoverForeground#ffffff
• statusBarItem.remoteBackground#303339
• statusBarItem.remoteForeground#ffffff
• statusBarItem.remoteHoverBackground#404349
• statusBarItem.remoteHoverForeground#ffffff
• statusBarItem.warningBackground#603000
• statusBarItem.warningForeground#ffffff
• statusBarItem.warningHoverBackground#404349
• statusBarItem.warningHoverForeground#ffffff
• symbolIcon.arrayForeground#ffd860
• symbolIcon.booleanForeground#ffd860
• symbolIcon.classForeground#60d8ff
• symbolIcon.colorForeground#dcddde
• symbolIcon.constantForeground#dca0ff
• symbolIcon.constructorForeground#60d8ff
• symbolIcon.enumeratorForeground#dca0ff
• symbolIcon.enumeratorMemberForeground#dca0ff
• symbolIcon.eventForeground#ffd860
• symbolIcon.fieldForeground#dcddde
• symbolIcon.fileForeground#dcddde
• symbolIcon.folderForeground#ffd860
• symbolIcon.functionForeground#60d8ff
• symbolIcon.interfaceForeground#60d8ff
• symbolIcon.keyForeground#ffd860
• symbolIcon.keywordForeground#a0a3a9
• symbolIcon.methodForeground#60d8ff
• symbolIcon.moduleForeground#ffd860
• symbolIcon.namespaceForeground#60d8ff
• symbolIcon.nullForeground#dca0ff
• symbolIcon.numberForeground#dca0ff
• symbolIcon.objectForeground#60d8ff
• symbolIcon.operatorForeground#a0a3a9
• symbolIcon.packageForeground#ffd860
• symbolIcon.propertyForeground#a0a3a9
• symbolIcon.referenceForeground#60d8ff
• symbolIcon.snippetForeground#dca0ff
• symbolIcon.stringForeground#70ffb8
• symbolIcon.structForeground#60d8ff
• symbolIcon.textForeground#dcddde
• symbolIcon.typeParameterForeground#a0a3a9
• symbolIcon.unitForeground#dca0ff
• symbolIcon.variableForeground#dcddde
• tab.activeBackground#373a40
• tab.activeBorder#ffffff00
• tab.activeBorderTop#ffffff00
• tab.activeForeground#ffffff
• tab.activeModifiedBorder#ffffff00
• tab.border#ffffff00
• tab.hoverBackground#404349
• tab.hoverBorder#ffffff00
• tab.hoverForeground#ffffff
• tab.inactiveBackground#303339
• tab.inactiveForeground#b7bac0
• tab.inactiveModifiedBorder#ffffff00
• tab.lastPinnedBorder#ffffff00
• tab.unfocusedActiveBackground#373a40
• tab.unfocusedActiveBorder#ffffff00
• tab.unfocusedActiveBorderTop#ffffff00
• tab.unfocusedActiveForeground#ffffff
• tab.unfocusedActiveModifiedBorder#ffffff00
• tab.unfocusedHoverBackground#404349
• tab.unfocusedHoverBorder#ffffff00
• tab.unfocusedHoverForeground#ffffff
• tab.unfocusedInactiveBackground#303339
• tab.unfocusedInactiveForeground#b7bac0
• tab.unfocusedInactiveModifiedBorder#ffffff00
• terminal.ansiBlack#606369
• terminal.ansiBlue#60d8ff
• terminal.ansiBrightBlack#404349
• terminal.ansiBrightBlue#40d0ff
• terminal.ansiBrightCyan#40ffff
• terminal.ansiBrightGreen#50ffa8
• terminal.ansiBrightMagenta#b840ff
• terminal.ansiBrightRed#ff4040
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#ffd040
• terminal.ansiCyan#60ffff
• terminal.ansiGreen#70ffb8
• terminal.ansiMagenta#d080ff
• terminal.ansiRed#ff6060
• terminal.ansiWhite#dcddde
• terminal.ansiYellow#ffd860
• terminal.background#303339
• terminal.border#808389
• terminal.dropBackground#dcddde40
• terminal.findMatchBackground#003060
• terminal.findMatchBorder#40d0ff
• terminal.findMatchHighlightBackground#003060
• terminal.findMatchHighlightBorder#ffffff00
• terminal.foreground#dcddde
• terminal.hoverHighlightBackground#ffffff00
• terminal.inactiveSelectionBackground#505359
• terminal.selectionBackground#003060
• terminal.selectionForeground#ffffff
• terminal.tab.activeBorder#40d0ff
• terminalCommandDecoration.defaultBackground#60d8ff
• terminalCommandDecoration.errorBackground#ff6060
• terminalCommandDecoration.successBackground#70ffb8
• terminalCursor.background#ffffff
• terminalCursor.foreground#707379
• terminalOverviewRuler.cursorForeground#003060
• terminalOverviewRuler.findMatchForeground#80e0ff
• terminalStickyScroll.background#303339
• terminalStickyScrollHover.background#505359
• testing.iconErrored#ff6060
• testing.iconFailed#ff6060
• testing.iconPassed#70ffb8
• testing.iconQueued#60d8ff
• testing.iconSkipped#ffd860
• testing.iconUnset#808389
• testing.message.error.decorationForeground#a0a3a9
• testing.message.error.lineBackground#505359
• testing.message.info.decorationForeground#a0a3a9
• testing.message.info.lineBackground#303339
• testing.peekBorder#60d8ff
• testing.peekHeaderBackground#303339
• testing.runAction#dcddde
• textBlockQuote.background#ffffff00
• textBlockQuote.border#b7bac0
• textCodeBlock.background#303339
• textLink.activeForeground#80e0ff
• textLink.foreground#60d8ff
• textPreformat.background#ffffff00
• textPreformat.foreground#ffd860
• textSeparator.foreground#dcddde
• titleBar.activeBackground#272a30
• titleBar.activeForeground#ffffff
• titleBar.border#ffffff00
• titleBar.inactiveBackground#303339
• titleBar.inactiveForeground#ffffff
• toolbar.activeBackground#505359
• toolbar.hoverBackground#606369
• toolbar.hoverOutline#ffffff00
• tree.inactiveIndentGuidesStroke#606369
• tree.indentGuidesStroke#808389
• tree.tableColumnsBorder#808389
• tree.tableOddRowsBackground#404349
• walkThrough.embeddedEditorBackground#303339
• walkthrough.stepTitle.foreground#dcddde
• welcomePage.background#373a40
• welcomePage.progress.background#ffffff00
• welcomePage.progress.foreground#60b0ff
• welcomePage.tileBackground#303339
• welcomePage.tileBorder#ffffff00
• welcomePage.tileHoverBackground#404349
• widget.border#ffffff00
• widget.shadow#202122
• window.activeBorder#ffffff00
• window.inactiveBorder#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...