Skip to main content
Coding Theme

Vesper Purple Ox

Publisher: 0xfellThemes in package: 2

A beautiful dark and light Vesper Purple theme with vibrant accents, semantic highlighting, and full UI coverage

Color themes

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.

  • activityBar.activeBackground#e5e5e5
  • activityBar.activeBorder#9066df
  • activityBar.background#f5f5f5
  • activityBar.border#e5e5e5
  • activityBar.dropBorder#9066df
  • activityBar.foreground#323232
  • activityBar.inactiveForeground#a3a3a3
  • activityBarBadge.background#9066df
  • activityBarBadge.foreground#ffffff
  • activityBarTop.activeBorder#9066df
  • activityBarTop.dropBorder#9066df
  • activityBarTop.foreground#323232
  • activityBarTop.inactiveForeground#a3a3a3
  • badge.background#9066df
  • badge.foreground#ffffff
  • banner.background#9066df
  • banner.foreground#ffffff
  • banner.iconForeground#ffffff
  • breadcrumb.activeSelectionForeground#9066df
  • breadcrumb.background#f5f5f5
  • breadcrumb.focusForeground#323232
  • breadcrumb.foreground#737373
  • breadcrumbPicker.background#ffffff
  • button.background#9066df
  • button.border#00000000
  • button.foreground#ffffff
  • button.hoverBackground#7c3aed
  • button.secondaryBackground#e5e5e5
  • button.secondaryForeground#323232
  • button.secondaryHoverBackground#d4d4d4
  • charts.blue#0284c7
  • charts.foreground#323232
  • charts.green#16a34a
  • charts.lines#737373
  • charts.orange#ea580c
  • charts.purple#9066df
  • charts.red#dc2626
  • charts.yellow#d97706
  • chat.avatarBackground#e5e5e5
  • chat.avatarForeground#9066df
  • chat.requestBackground#fafafa
  • chat.requestBorder#e5e5e5
  • chat.slashCommandBackground#9066df15
  • chat.slashCommandForeground#7c3aed
  • checkbox.background#ffffff
  • checkbox.border#d4d4d4
  • checkbox.foreground#323232
  • checkbox.selectBackground#9066df
  • checkbox.selectBorder#9066df
  • commandCenter.activeBackground#e5e5e5
  • commandCenter.activeBorder#9066df50
  • commandCenter.activeForeground#323232
  • commandCenter.background#f5f5f5
  • commandCenter.border#e5e5e5
  • commandCenter.debuggingBackground#9066df20
  • commandCenter.foreground#525252
  • commandCenter.inactiveBorder#e5e5e5
  • commandCenter.inactiveForeground#a3a3a3
  • commentsView.resolvedIcon#16a34a
  • commentsView.unresolvedIcon#d97706
  • contrastActiveBorder#00000000
  • contrastBorder#00000000
  • debugConsole.errorForeground#dc2626
  • debugConsole.infoForeground#0284c7
  • debugConsole.sourceForeground#525252
  • debugConsole.warningForeground#d97706
  • debugConsoleInputIcon.foreground#9066df
  • debugExceptionWidget.background#fef2f2
  • debugExceptionWidget.border#dc2626
  • debugIcon.breakpointCurrentStackframeForeground#d97706
  • debugIcon.breakpointDisabledForeground#a3a3a3
  • debugIcon.breakpointForeground#dc2626
  • debugIcon.breakpointStackframeForeground#16a34a
  • debugIcon.breakpointUnverifiedForeground#737373
  • debugIcon.continueForeground#16a34a
  • debugIcon.disconnectForeground#dc2626
  • debugIcon.pauseForeground#d97706
  • debugIcon.restartForeground#16a34a
  • debugIcon.startForeground#16a34a
  • debugIcon.stepBackForeground#7c3aed
  • debugIcon.stepIntoForeground#0284c7
  • debugIcon.stepOutForeground#0284c7
  • debugIcon.stepOverForeground#0284c7
  • debugIcon.stopForeground#dc2626
  • debugTokenExpression.boolean#d97706
  • debugTokenExpression.error#dc2626
  • debugTokenExpression.name#ec4899
  • debugTokenExpression.number#d97706
  • debugTokenExpression.string#525252
  • debugTokenExpression.value#525252
  • debugToolBar.background#ffffff
  • debugToolBar.border#e5e5e5
  • debugView.exceptionLabelBackground#dc262620
  • debugView.exceptionLabelForeground#dc2626
  • debugView.stateLabelBackground#9066df20
  • debugView.stateLabelForeground#7c3aed
  • debugView.valueChangedHighlight#d9770650
  • descriptionForeground#525252
  • diffEditor.diagonalFill#e5e5e5
  • diffEditor.insertedLineBackground#16a34a10
  • diffEditor.insertedTextBackground#16a34a20
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedLineBackground#dc262610
  • diffEditor.removedTextBackground#dc262620
  • diffEditor.removedTextBorder#00000000
  • diffEditor.unchangedCodeBackground#f5f5f530
  • diffEditor.unchangedRegionBackground#fafafa
  • diffEditor.unchangedRegionForeground#737373
  • diffEditorGutter.insertedLineBackground#16a34a30
  • diffEditorGutter.removedLineBackground#dc262630
  • diffEditorOverview.insertedForeground#16a34a
  • diffEditorOverview.removedForeground#dc2626
  • disabledForeground#a3a3a3
  • dropdown.background#ffffff
  • dropdown.border#e5e5e5
  • dropdown.foreground#323232
  • dropdown.listBackground#ffffff
  • editor.background#f5f5f5
  • editor.findMatchBackground#eab30840
  • editor.findMatchBorder#eab308
  • editor.findMatchHighlightBackground#eab30825
  • editor.findMatchHighlightBorder#eab30850
  • editor.findRangeHighlightBackground#9066df15
  • editor.focusedStackFrameHighlightBackground#16a34a20
  • editor.foldBackground#9066df10
  • editor.foreground#323232
  • editor.hoverHighlightBackground#9066df15
  • editor.inactiveSelectionBackground#9066df20
  • editor.inlineValuesBackground#9066df15
  • editor.inlineValuesForeground#525252
  • editor.lineHighlightBackground#f0f0f0
  • editor.lineHighlightBorder#00000000
  • editor.linkedEditingBackground#9066df30
  • editor.rangeHighlightBackground#9066df10
  • editor.rangeHighlightBorder#9066df30
  • editor.selectionBackground#9066df30
  • editor.selectionForeground#323232
  • editor.selectionHighlightBackground#9066df15
  • editor.selectionHighlightBorder#9066df50
  • editor.stackFrameHighlightBackground#d9770620
  • editor.wordHighlightBackground#9066df15
  • editor.wordHighlightBorder#9066df50
  • editor.wordHighlightStrongBackground#7c3aed20
  • editor.wordHighlightStrongBorder#7c3aed60
  • editor.wordHighlightTextBackground#9066df10
  • editorBracketHighlight.foreground1#0891b2
  • editorBracketHighlight.foreground2#16a34a
  • editorBracketHighlight.foreground3#d97706
  • editorBracketHighlight.foreground4#9066df
  • editorBracketHighlight.foreground5#dc2626
  • editorBracketHighlight.foreground6#0284c7
  • editorBracketHighlight.unexpectedBracket.foreground#dc2626
  • editorBracketMatch.background#9066df30
  • editorBracketMatch.border#9066df
  • editorBracketPairGuide.activeBackground1#0891b250
  • editorBracketPairGuide.activeBackground2#16a34a50
  • editorBracketPairGuide.activeBackground3#d9770650
  • editorBracketPairGuide.activeBackground4#9066df50
  • editorBracketPairGuide.activeBackground5#dc262650
  • editorBracketPairGuide.activeBackground6#0284c750
  • editorCodeLens.foreground#737373
  • editorCommentsWidget.rangeActiveBackground#9066df15
  • editorCommentsWidget.rangeBackground#9066df08
  • editorCommentsWidget.replyInputBackground#ffffff
  • editorCommentsWidget.resolvedBorder#16a34a
  • editorCommentsWidget.unresolvedBorder#d97706
  • editorCursor.background#f5f5f5
  • editorCursor.foreground#9066df
  • editorError.border#00000000
  • editorError.foreground#dc2626
  • editorGhostText.background#00000000
  • editorGhostText.border#00000000
  • editorGhostText.foreground#a3a3a380
  • editorGroup.border#e5e5e5
  • editorGroup.dropBackground#9066df30
  • editorGroup.emptyBackground#f5f5f5
  • editorGroup.focusedEmptyBorder#9066df
  • editorGroupHeader.border#e5e5e5
  • editorGroupHeader.noTabsBackground#f5f5f5
  • editorGroupHeader.tabsBackground#f5f5f5
  • editorGroupHeader.tabsBorder#e5e5e5
  • editorGutter.addedBackground#16a34a
  • editorGutter.background#f5f5f5
  • editorGutter.commentGlyphForeground#737373
  • editorGutter.commentRangeForeground#a3a3a3
  • editorGutter.commentUnresolvedGlyphForeground#d97706
  • editorGutter.deletedBackground#dc2626
  • editorGutter.foldingControlForeground#737373
  • editorGutter.modifiedBackground#0284c7
  • editorHint.border#00000000
  • editorHint.foreground#16a34a
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#e5e5e5
  • editorHoverWidget.foreground#323232
  • editorHoverWidget.highlightForeground#9066df
  • editorHoverWidget.statusBarBackground#f5f5f5
  • editorIndentGuide.activeBackground1#a3a3a3
  • editorIndentGuide.background1#e5e5e5
  • editorInfo.border#00000000
  • editorInfo.foreground#0284c7
  • editorInlayHint.background#f0f0f080
  • editorInlayHint.foreground#737373
  • editorInlayHint.parameterBackground#f0f0f080
  • editorInlayHint.parameterForeground#525252
  • editorInlayHint.typeBackground#f0f0f080
  • editorInlayHint.typeForeground#525252
  • editorLightBulb.foreground#d97706
  • editorLightBulbAi.foreground#9066df
  • editorLightBulbAutoFix.foreground#16a34a
  • editorLineNumber.activeForeground#525252
  • editorLineNumber.dimmedForeground#d4d4d4
  • editorLineNumber.foreground#a3a3a3
  • editorLink.activeForeground#9066df
  • editorMarkerNavigation.background#ffffff
  • editorMarkerNavigationError.background#dc262620
  • editorMarkerNavigationError.headerBackground#dc262615
  • editorMarkerNavigationInfo.background#0284c720
  • editorMarkerNavigationInfo.headerBackground#0284c715
  • editorMarkerNavigationWarning.background#d9770620
  • editorMarkerNavigationWarning.headerBackground#d9770615
  • editorOverviewRuler.addedForeground#16a34a
  • editorOverviewRuler.border#e5e5e5
  • editorOverviewRuler.bracketMatchForeground#9066df
  • editorOverviewRuler.deletedForeground#dc2626
  • editorOverviewRuler.errorForeground#dc2626
  • editorOverviewRuler.findMatchForeground#eab30880
  • editorOverviewRuler.infoForeground#0284c7
  • editorOverviewRuler.modifiedForeground#0284c7
  • editorOverviewRuler.rangeHighlightForeground#9066df50
  • editorOverviewRuler.selectionHighlightForeground#9066df50
  • editorOverviewRuler.warningForeground#d97706
  • editorOverviewRuler.wordHighlightForeground#9066df50
  • editorOverviewRuler.wordHighlightStrongForeground#7c3aed80
  • editorOverviewRuler.wordHighlightTextForeground#9066df50
  • editorRuler.foreground#e5e5e5
  • editorStickyScroll.background#f5f5f5
  • editorStickyScroll.shadow#00000015
  • editorStickyScrollHover.background#f0f0f0
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#e5e5e5
  • editorSuggestWidget.focusHighlightForeground#9066df
  • editorSuggestWidget.foreground#323232
  • editorSuggestWidget.highlightForeground#9066df
  • editorSuggestWidget.selectedBackground#f5f5f5
  • editorSuggestWidget.selectedForeground#323232
  • editorSuggestWidget.selectedIconForeground#323232
  • editorSuggestWidgetStatus.foreground#737373
  • editorUnnecessaryCode.border#00000000
  • editorUnnecessaryCode.opacity#00000060
  • editorWarning.border#00000000
  • editorWarning.foreground#d97706
  • editorWatermark.foreground#d4d4d4
  • editorWhitespace.foreground#d4d4d4
  • editorWidget.background#ffffff
  • editorWidget.border#e5e5e5
  • editorWidget.foreground#323232
  • editorWidget.resizeBorder#9066df
  • errorForeground#dc2626
  • extensionBadge.remoteBackground#9066df
  • extensionBadge.remoteForeground#ffffff
  • extensionButton.background#9066df
  • extensionButton.foreground#ffffff
  • extensionButton.hoverBackground#7c3aed
  • extensionButton.prominentBackground#9066df
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#7c3aed
  • extensionButton.separator#ffffff30
  • extensionIcon.preReleaseForeground#d97706
  • extensionIcon.sponsorForeground#ec4899
  • extensionIcon.starForeground#d97706
  • extensionIcon.verifiedForeground#16a34a
  • focusBorder#9066df
  • foreground#323232
  • gitDecoration.addedResourceForeground#16a34a
  • gitDecoration.conflictingResourceForeground#d97706
  • gitDecoration.deletedResourceForeground#dc2626
  • gitDecoration.ignoredResourceForeground#a3a3a3
  • gitDecoration.modifiedResourceForeground#0284c7
  • gitDecoration.renamedResourceForeground#0891b2
  • gitDecoration.stageDeletedResourceForeground#dc2626
  • gitDecoration.stageModifiedResourceForeground#0284c7
  • gitDecoration.submoduleResourceForeground#7c3aed
  • gitDecoration.untrackedResourceForeground#16a34a
  • icon.foreground#525252
  • inlineChat.background#fafafa
  • inlineChat.border#9066df50
  • inlineChat.regionHighlight#9066df10
  • inlineChat.shadow#00000015
  • inlineChatDiff.inserted#16a34a30
  • inlineChatDiff.removed#dc262630
  • inlineChatInput.background#ffffff
  • inlineChatInput.border#d4d4d4
  • inlineChatInput.focusBorder#9066df
  • inlineChatInput.placeholderForeground#a3a3a3
  • input.background#ffffff
  • input.border#d4d4d4
  • input.foreground#323232
  • input.placeholderForeground#a3a3a3
  • inputOption.activeBackground#9066df20
  • inputOption.activeBorder#9066df
  • inputOption.activeForeground#323232
  • inputOption.hoverBackground#f5f5f5
  • inputValidation.errorBackground#fef2f2
  • inputValidation.errorBorder#dc2626
  • inputValidation.errorForeground#dc2626
  • inputValidation.infoBackground#eff6ff
  • inputValidation.infoBorder#0284c7
  • inputValidation.infoForeground#0284c7
  • inputValidation.warningBackground#fffbeb
  • inputValidation.warningBorder#d97706
  • inputValidation.warningForeground#d97706
  • keybindingLabel.background#e5e5e5
  • keybindingLabel.border#d4d4d4
  • keybindingLabel.bottomBorder#d4d4d4
  • keybindingLabel.foreground#323232
  • keybindingTable.headerBackground#fafafa
  • keybindingTable.rowsBackground#f5f5f5
  • list.activeSelectionBackground#9066df20
  • list.activeSelectionForeground#323232
  • list.activeSelectionIconForeground#323232
  • list.dropBackground#9066df30
  • list.errorForeground#dc2626
  • list.filterMatchBackground#9066df20
  • list.filterMatchBorder#9066df
  • list.focusBackground#9066df15
  • list.focusForeground#323232
  • list.focusHighlightForeground#9066df
  • list.focusOutline#9066df
  • list.highlightForeground#9066df
  • list.hoverBackground#f5f5f5
  • list.hoverForeground#323232
  • list.inactiveFocusBackground#fafafa
  • list.inactiveFocusOutline#d4d4d4
  • list.inactiveSelectionBackground#e5e5e5
  • list.inactiveSelectionForeground#323232
  • list.invalidItemForeground#dc2626
  • list.warningForeground#d97706
  • listFilterWidget.background#ffffff
  • listFilterWidget.noMatchesOutline#dc2626
  • listFilterWidget.outline#9066df
  • listFilterWidget.shadow#00000015
  • menu.background#ffffff
  • menu.border#e5e5e5
  • menu.foreground#323232
  • menu.selectionBackground#f5f5f5
  • menu.selectionBorder#00000000
  • menu.selectionForeground#323232
  • menu.separatorBackground#e5e5e5
  • menubar.selectionBackground#e5e5e5
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#323232
  • mergeEditor.change.background#0284c720
  • mergeEditor.change.word.background#0284c740
  • mergeEditor.changeBase.background#d9770620
  • mergeEditor.changeBase.word.background#d9770640
  • mergeEditor.conflict.handled.minimapOverViewRuler#16a34a
  • mergeEditor.conflict.handledUnfocused.border#16a34a60
  • mergeEditor.conflict.input1.background#16a34a20
  • mergeEditor.conflict.input2.background#0284c720
  • mergeEditor.conflict.unhandled.minimapOverViewRuler#d97706
  • mergeEditor.conflict.unhandledUnfocused.border#d9770660
  • mergeEditor.conflictingLines.background#d9770620
  • minimap.background#f5f5f5
  • minimap.errorHighlight#dc262680
  • minimap.findMatchHighlight#9066df80
  • minimap.foregroundOpacity#000000c0
  • minimap.selectionHighlight#9066df40
  • minimap.selectionOccurrenceHighlight#9066df50
  • minimap.warningHighlight#d9770680
  • minimapGutter.addedBackground#16a34a
  • minimapGutter.deletedBackground#dc2626
  • minimapGutter.modifiedBackground#0284c7
  • minimapSlider.activeBackground#32323250
  • minimapSlider.background#32323220
  • minimapSlider.hoverBackground#32323235
  • notebook.cellBorderColor#e5e5e5
  • notebook.cellHoverBackground#fafafa
  • notebook.cellInsertionIndicator#9066df
  • notebook.cellStatusBarItemHoverBackground#e5e5e5
  • notebook.cellToolbarSeparator#e5e5e5
  • notebook.editorBackground#f5f5f5
  • notebook.focusedCellBackground#fafafa
  • notebook.focusedCellBorder#9066df
  • notebook.focusedEditorBorder#9066df
  • notebook.inactiveFocusedCellBorder#d4d4d4
  • notebook.outputContainerBackgroundColor#fafafa
  • notebook.outputContainerBorderColor#e5e5e5
  • notebook.selectedCellBackground#e5e5e5
  • notebook.selectedCellBorder#9066df50
  • notebook.symbolHighlightBackground#9066df20
  • notebookEditorOverviewRuler.runningCellForeground#9066df
  • notebookScrollbarSlider.activeBackground#32323250
  • notebookScrollbarSlider.background#32323220
  • notebookScrollbarSlider.hoverBackground#32323235
  • notebookStatusErrorIcon.foreground#dc2626
  • notebookStatusRunningIcon.foreground#9066df
  • notebookStatusSuccessIcon.foreground#16a34a
  • notificationCenter.border#e5e5e5
  • notificationCenterHeader.background#fafafa
  • notificationCenterHeader.foreground#323232
  • notificationLink.foreground#9066df
  • notifications.background#ffffff
  • notifications.border#e5e5e5
  • notifications.foreground#323232
  • notificationsErrorIcon.foreground#dc2626
  • notificationsInfoIcon.foreground#0284c7
  • notificationsWarningIcon.foreground#d97706
  • notificationToast.border#e5e5e5
  • outputView.background#f5f5f5
  • outputViewStickyScroll.background#f5f5f5
  • panel.background#f5f5f5
  • panel.border#e5e5e5
  • panel.dropBorder#9066df
  • panelInput.border#d4d4d4
  • panelSection.border#e5e5e5
  • panelSection.dropBackground#9066df30
  • panelSectionHeader.background#fafafa
  • panelSectionHeader.border#e5e5e5
  • panelSectionHeader.foreground#323232
  • panelStickyScroll.background#f5f5f5
  • panelStickyScroll.shadow#00000015
  • panelTitle.activeBorder#9066df
  • panelTitle.activeForeground#323232
  • panelTitle.inactiveForeground#737373
  • peekView.border#9066df
  • peekViewEditor.background#fafafa
  • peekViewEditor.matchHighlightBackground#eab30840
  • peekViewEditor.matchHighlightBorder#eab308
  • peekViewEditorGutter.background#fafafa
  • peekViewResult.background#f5f5f5
  • peekViewResult.fileForeground#323232
  • peekViewResult.lineForeground#525252
  • peekViewResult.matchHighlightBackground#eab30840
  • peekViewResult.selectionBackground#e5e5e5
  • peekViewResult.selectionForeground#323232
  • peekViewTitle.background#fafafa
  • peekViewTitleDescription.foreground#525252
  • peekViewTitleLabel.foreground#323232
  • pickerGroup.border#e5e5e5
  • pickerGroup.foreground#9066df
  • ports.iconRunningProcessForeground#16a34a
  • problemsErrorIcon.foreground#dc2626
  • problemsInfoIcon.foreground#0284c7
  • problemsWarningIcon.foreground#d97706
  • progressBar.background#9066df
  • quickInput.background#ffffff
  • quickInput.foreground#323232
  • quickInputList.focusBackground#f5f5f5
  • quickInputList.focusForeground#323232
  • quickInputList.focusIconForeground#323232
  • quickInputTitle.background#fafafa
  • sash.hoverBorder#9066df
  • scrollbar.shadow#00000015
  • scrollbarSlider.activeBackground#32323250
  • scrollbarSlider.background#32323220
  • scrollbarSlider.hoverBackground#32323235
  • settings.checkboxBackground#ffffff
  • settings.checkboxBorder#d4d4d4
  • settings.checkboxForeground#323232
  • settings.dropdownBackground#ffffff
  • settings.dropdownBorder#d4d4d4
  • settings.dropdownForeground#323232
  • settings.dropdownListBorder#e5e5e5
  • settings.focusedRowBackground#f5f5f5
  • settings.focusedRowBorder#9066df50
  • settings.headerForeground#323232
  • settings.modifiedItemIndicator#9066df
  • settings.numberInputBackground#ffffff
  • settings.numberInputBorder#d4d4d4
  • settings.numberInputForeground#323232
  • settings.rowHoverBackground#fafafa
  • settings.sashBorder#9066df
  • settings.settingsHeaderHoverForeground#7c3aed
  • settings.textInputBackground#ffffff
  • settings.textInputBorder#d4d4d4
  • settings.textInputForeground#323232
  • sideBar.background#f5f5f5
  • sideBar.border#e5e5e5
  • sideBar.dropBackground#9066df30
  • sideBar.foreground#525252
  • sideBarSectionHeader.background#f5f5f5
  • sideBarSectionHeader.border#e5e5e5
  • sideBarSectionHeader.foreground#323232
  • sideBarStickyScroll.background#f5f5f5
  • sideBarStickyScroll.shadow#00000015
  • sideBarTitle.foreground#323232
  • statusBar.background#f5f5f5
  • statusBar.border#e5e5e5
  • statusBar.debuggingBackground#9066df
  • statusBar.debuggingBorder#9066df
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#9066df
  • statusBar.foreground#525252
  • statusBar.noFolderBackground#f5f5f5
  • statusBar.noFolderBorder#e5e5e5
  • statusBar.noFolderForeground#525252
  • statusBarItem.activeBackground#d4d4d4
  • statusBarItem.compactHoverBackground#e5e5e5
  • statusBarItem.errorBackground#dc2626
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.errorHoverBackground#b91c1c
  • statusBarItem.errorHoverForeground#ffffff
  • statusBarItem.focusBorder#9066df
  • statusBarItem.hoverBackground#e5e5e5
  • statusBarItem.hoverForeground#323232
  • statusBarItem.offlineBackground#737373
  • statusBarItem.offlineForeground#ffffff
  • statusBarItem.offlineHoverBackground#525252
  • statusBarItem.offlineHoverForeground#ffffff
  • statusBarItem.prominentBackground#e5e5e5
  • statusBarItem.prominentForeground#323232
  • statusBarItem.prominentHoverBackground#d4d4d4
  • statusBarItem.remoteBackground#9066df
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.remoteHoverBackground#7c3aed
  • statusBarItem.remoteHoverForeground#ffffff
  • statusBarItem.warningBackground#d97706
  • statusBarItem.warningForeground#ffffff
  • statusBarItem.warningHoverBackground#b45309
  • statusBarItem.warningHoverForeground#ffffff
  • symbolIcon.arrayForeground#ec4899
  • symbolIcon.booleanForeground#d97706
  • symbolIcon.classForeground#7c3aed
  • symbolIcon.colorForeground#ec4899
  • symbolIcon.constantForeground#d97706
  • symbolIcon.constructorForeground#7c3aed
  • symbolIcon.enumeratorForeground#c026d3
  • symbolIcon.enumeratorMemberForeground#d97706
  • symbolIcon.eventForeground#0284c7
  • symbolIcon.fieldForeground#ec4899
  • symbolIcon.fileForeground#323232
  • symbolIcon.folderForeground#d97706
  • symbolIcon.functionForeground#7c3aed
  • symbolIcon.interfaceForeground#ec4899
  • symbolIcon.keyForeground#ec4899
  • symbolIcon.keywordForeground#525252
  • symbolIcon.methodForeground#7c3aed
  • symbolIcon.moduleForeground#ec4899
  • symbolIcon.namespaceForeground#ec4899
  • symbolIcon.nullForeground#737373
  • symbolIcon.numberForeground#d97706
  • symbolIcon.objectForeground#ec4899
  • symbolIcon.operatorForeground#737373
  • symbolIcon.packageForeground#ec4899
  • symbolIcon.propertyForeground#ec4899
  • symbolIcon.referenceForeground#0284c7
  • symbolIcon.snippetForeground#9066df
  • symbolIcon.stringForeground#525252
  • symbolIcon.structForeground#7c3aed
  • symbolIcon.textForeground#323232
  • symbolIcon.typeParameterForeground#f9a8d4
  • symbolIcon.unitForeground#d97706
  • symbolIcon.variableForeground#ec4899
  • tab.activeBackground#ffffff
  • tab.activeBorder#ffffff
  • tab.activeBorderTop#9066df
  • tab.activeForeground#323232
  • tab.border#e5e5e5
  • tab.hoverBackground#fafafa
  • tab.hoverBorder#9066df50
  • tab.hoverForeground#323232
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#737373
  • tab.lastPinnedBorder#d4d4d4
  • tab.selectedBackground#ffffff
  • tab.selectedForeground#323232
  • tab.unfocusedActiveBackground#ffffff
  • tab.unfocusedActiveBorder#ffffff
  • tab.unfocusedActiveBorderTop#a3a3a3
  • tab.unfocusedActiveForeground#525252
  • tab.unfocusedHoverBackground#fafafa
  • tab.unfocusedHoverForeground#323232
  • tab.unfocusedInactiveBackground#f5f5f5
  • tab.unfocusedInactiveForeground#a3a3a3
  • terminal.ansiBlack#e5e5e5
  • terminal.ansiBlue#0284c7
  • terminal.ansiBrightBlack#525252
  • terminal.ansiBrightBlue#0284c7
  • terminal.ansiBrightCyan#0891b2
  • terminal.ansiBrightGreen#16a34a
  • terminal.ansiBrightMagenta#7c3aed
  • terminal.ansiBrightRed#dc2626
  • terminal.ansiBrightWhite#323232
  • terminal.ansiBrightYellow#d97706
  • terminal.ansiCyan#0891b2
  • terminal.ansiGreen#16a34a
  • terminal.ansiMagenta#9066df
  • terminal.ansiRed#dc2626
  • terminal.ansiWhite#525252
  • terminal.ansiYellow#d97706
  • terminal.background#f5f5f5
  • terminal.border#e5e5e5
  • terminal.dropBackground#9066df30
  • terminal.findMatchBackground#eab30840
  • terminal.findMatchBorder#eab308
  • terminal.findMatchHighlightBackground#eab30825
  • terminal.findMatchHighlightBorder#00000000
  • terminal.foreground#323232
  • terminal.hoverHighlightBackground#9066df30
  • terminal.inactiveSelectionBackground#9066df20
  • terminal.selectionBackground#9066df30
  • terminal.selectionForeground#323232
  • terminal.tab.activeBorder#9066df
  • terminalCommandDecoration.defaultBackground#525252
  • terminalCommandDecoration.errorBackground#dc2626
  • terminalCommandDecoration.successBackground#16a34a
  • terminalCursor.background#f5f5f5
  • terminalCursor.foreground#9066df
  • terminalOverviewRuler.cursorForeground#9066df
  • terminalOverviewRuler.findMatchForeground#eab30880
  • terminalStickyScroll.background#f5f5f5
  • terminalStickyScrollHover.background#f0f0f0
  • testing.coverCountBadgeBackground#9066df
  • testing.coverCountBadgeForeground#ffffff
  • testing.iconErrored#dc2626
  • testing.iconFailed#dc2626
  • testing.iconPassed#16a34a
  • testing.iconQueued#d97706
  • testing.iconSkipped#737373
  • testing.iconUnset#a3a3a3
  • testing.message.error.decorationForeground#dc2626
  • testing.message.error.lineBackground#dc262608
  • testing.message.info.decorationForeground#0284c7
  • testing.message.info.lineBackground#0284c708
  • testing.peekBorder#dc2626
  • testing.peekHeaderBackground#dc262615
  • testing.runAction#16a34a
  • textBlockQuote.background#fafafa
  • textBlockQuote.border#9066df50
  • textCodeBlock.background#f0f0f0
  • textLink.activeForeground#7c3aed
  • textLink.foreground#9066df
  • textPreformat.foreground#7c3aed
  • textSeparator.foreground#e5e5e5
  • titleBar.activeBackground#f5f5f5
  • titleBar.activeForeground#525252
  • titleBar.border#e5e5e5
  • titleBar.inactiveBackground#f5f5f5
  • titleBar.inactiveForeground#a3a3a3
  • tree.indentGuidesStroke#d4d4d4
  • tree.tableColumnsBorder#e5e5e5
  • tree.tableOddRowsBackground#fafafa
  • walkThrough.embeddedEditorBackground#fafafa
  • walkthrough.stepTitle.foreground#323232
  • welcomePage.background#f5f5f5
  • welcomePage.progress.background#e5e5e5
  • welcomePage.progress.foreground#9066df
  • welcomePage.tileBackground#ffffff
  • welcomePage.tileBorder#e5e5e5
  • welcomePage.tileHoverBackground#fafafa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#737373italic
punctuation, delimiter, delimiter.bracket, meta.brace, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, meta.embedded.block.github-actions-expression, storage.type.function.arrow, meta.objectliteral.ts#a3a3a3
constant, entity.name.constant, variable.language, meta.definition.variable#ec4899
entity, entity.name#9066df
variable.parameter.function#323232italic
entity.name.tag, tag.html#9066df
entity.name.function#7c3aed
keyword, storage.type.class.jsdoc#525252italic
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null#525252italic
storage.modifier#9066dfitalic
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#323232italic
string, string punctuation.section.embedded source, attribute.value#525252
punctuation.definition.string, punctuation.support.type.property-name#a3a3a380
support#7c3aed
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#ec4899
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#ec4899italic
variable, identifier#ec4899
support.type.primitive, entity.name.type#ec4899italic
namespace#ec4899italic
keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts#525252
keyword.control, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch#9066dfitalic
keyword.control.async, keyword.control.await#0891b2italic
meta.decorator, meta.decorator punctuation, entity.name.function.decorator, punctuation.decorator#0891b2italic
variable.language.this, variable.language.self, variable.language.super#c026d3italic
invalid.broken#dc2626italic
invalid.deprecated#737373strikethrough
invalid.illegal#dc2626italic
invalid.unimplemented#dc2626italic
carriage-return#dc2626italic underline
message.error#dc2626
string variable#7c3aed
source.regexp, string.regexp#d97706
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#525252
string.regexp constant.character.escape#d97706
support.constant#ec4899
keyword.operator.quantifier.regexp, constant.numeric, number#d97706
keyword.other.unit#525252
constant.language.boolean, constant.language#d97706italic
meta.module-reference#9066dfitalic
punctuation.definition.list.begin.markdown#d97706
markup.heading, markup.heading entity.name#9066dfbold
punctuation.definition.heading.markdown#9066df
markup.quote#ec4899italic
markup.italic#323232italic
markup.bold#323232bold
markup.strikethrough#737373strikethrough
markup.raw#7c3aed
markup.fenced_code.block.markdown#7c3aed
fenced_code.block.language.markdown#737373
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#dc2626
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#16a34a
markup.changed, punctuation.definition.changed#d97706
markup.ignored, markup.untracked#a3a3a3
meta.diff.range#9066dfbold
meta.diff.header#0284c7
meta.separator#0284c7bold
meta.output#0284c7
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#525252
brackethighlighter.unmatched#dc2626
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#525252
markup.underline.link.markdown, markup.underline.link.image.markdown#7c3aedunderline
type.identifier, constant.other.character-class.regexp#ec4899italic
entity.other.attribute-name.html.vue#9066df
invalid.illegal.unrecognized-tag.html
entity.name.type.class, entity.name.type.module#7c3aeditalic
support.class, support.type#ec4899italic
support.function.builtin, support.function.magic#525252
meta.import, meta.exportitalic
variable.other.constant#d97706
meta.return.type, meta.type.annotation#ec4899italic
string.template, punctuation.definition.template-expression#525252
meta.template.expression, meta.embedded.line#ec4899
entity.name.tag.tsx, entity.name.tag.jsx#9066df
support.class.component.tsx, support.class.component.jsx#7c3aed
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss#d97706
entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss#ec4899
support.type.property-name.css, support.type.property-name.scss#0284c7
support.constant.property-value.css, constant.other.color.rgb-value.css#525252
variable.css, variable.scss, variable.argument.css#ec4899
support.type.property-name.json#ec4899
string.quoted.double.json#525252
entity.name.tag.yaml#ec4899
string.unquoted.plain.out.yaml#525252
meta.function.parameters.python#323232
constant.language.python#d97706italic
support.type.python#ec4899italic
keyword.function.go, keyword.type.go#9066dfitalic
entity.name.type.lifetime.rust#c026d3italic
keyword.other.rust#9066dfitalic
variable.other.normal.shell, variable.other.positional.shell#ec4899
support.function.builtin.shell#525252

Shiki preview

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

Loading...