Skip to main content
CodingTheme

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.activeFocusBorder#f3ace2
  • activityBar.background#17181D
  • activityBar.border#17181D
  • activityBar.foreground#b8c4c3
  • activityBar.inactiveForeground#505860
  • activityBarBadge.background#f3ace2
  • activityBarBadge.foreground#16191d
  • activityBarTop.background#111417
  • activityBarTop.foreground#b8c4c3
  • activityBarTop.inactiveForeground#97999b
  • badge.background#f3ace2
  • badge.foreground#16191d
  • banner.background#303338
  • banner.foreground#b8c4c3
  • banner.iconForeground#b8c4c3
  • breadcrumb.activeSelectionForeground#d0dbde
  • breadcrumb.focusForeground#b8c4c3
  • breadcrumb.foreground#888d94
  • breadcrumbPicker.background#16191d
  • button.background#303338
  • button.foreground#d0dbde
  • button.hoverBackground#505860
  • button.secondaryBackground#303338
  • button.secondaryForeground#b8c4c3
  • button.secondaryHoverBackground#505860
  • button.separator#16191d
  • charts.blue#7cd5f1
  • charts.foreground#d0dbde
  • charts.green#a2e57b
  • charts.lines#6b7678
  • charts.orange#ffb270
  • charts.purple#baa0f8
  • charts.red#ff6d7e
  • charts.yellow#f3ace2
  • chat.avatarBackground#16191d
  • chat.avatarForeground#baa0f8
  • chat.requestBackground#303338
  • chat.requestBorder#505860
  • chat.slashCommandBackground#00000000
  • chat.slashCommandForeground#f3ace2
  • checkbox.background#303338
  • checkbox.border#505860
  • checkbox.foreground#f3ace2
  • commandCenter.activeBackground#16191d
  • commandCenter.activeForeground#b8c4c3
  • commandCenter.background#16191d
  • commandCenter.border#16191d
  • commandCenter.debuggingBackground#111417
  • commandCenter.foreground#888d94
  • debugConsole.errorForeground#ff6d7e
  • debugConsole.infoForeground#7cd5f1
  • debugConsole.sourceForeground#d0dbde
  • debugConsole.warningForeground#ffb270
  • debugConsoleInputIcon.foreground#f3ace2
  • debugExceptionWidget.background#303338
  • debugExceptionWidget.border#41454b
  • debugIcon.breakpointCurrentStackframeForeground#f3ace2
  • debugIcon.breakpointDisabledForeground#b8c4c3
  • debugIcon.breakpointForeground#ff6d7e
  • debugIcon.breakpointStackframeForeground#d0dbde
  • debugIcon.breakpointUnverifiedForeground#ffb270
  • debugIcon.continueForeground#d0dbde
  • debugIcon.disconnectForeground#d0dbde
  • debugIcon.pauseForeground#d0dbde
  • debugIcon.restartForeground#a2e57b
  • debugIcon.startForeground#a2e57b
  • debugIcon.stepBackForeground#d0dbde
  • debugIcon.stepIntoForeground#d0dbde
  • debugIcon.stepOutForeground#d0dbde
  • debugIcon.stepOverForeground#d0dbde
  • debugIcon.stopForeground#ff6d7e
  • debugTokenExpression.boolean#ffb270
  • debugTokenExpression.error#ff6d7e
  • debugTokenExpression.name#7cd5f1
  • debugTokenExpression.number#baa0f8
  • debugTokenExpression.string#f3ace2
  • debugTokenExpression.value#d0dbde
  • debugToolBar.background#303338
  • debugView.exceptionLabelBackground#ff6d7e
  • debugView.exceptionLabelForeground#16191d
  • debugView.stateLabelBackground#a2e57b
  • debugView.stateLabelForeground#16191d
  • debugView.valueChangedHighlight#f3ace2
  • descriptionForeground#888d94
  • diffEditor.diagonalFill#303338
  • diffEditor.insertedLineBackground#a2e57b19
  • diffEditor.insertedTextBackground#a2e57b19
  • diffEditor.move.border
  • diffEditor.moveActive.border
  • diffEditor.removedLineBackground#ff6d7e19
  • diffEditor.removedTextBackground#ff6d7e19
  • diffEditor.unchangedCodeBackground#111417
  • diffEditor.unchangedRegionBackground#111417
  • diffEditor.unchangedRegionForeground#b8c4c3
  • diffEditor.unchangedRegionShadow#17181D
  • diffEditorGutter.insertedLineBackground#a2e57b19
  • diffEditorGutter.removedLineBackground#ff6d7e19
  • diffEditorOverview.insertedForeground#a2e57ba5
  • diffEditorOverview.removedForeground#ff6d7ea5
  • dropdown.background#303338
  • dropdown.border#505860
  • dropdown.foreground#888d94
  • dropdown.listBackground#303338
  • editor.background#17181D
  • editor.findMatchBackground#d0dbde26
  • editor.findMatchBorder#f3ace2
  • editor.findMatchHighlightBackground#d0dbde26
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBackground#d0dbde0c
  • editor.findRangeHighlightBorder#00000000
  • editor.focusedStackFrameHighlightBackground#b8c4c326
  • editor.foldBackground#d0dbde0c
  • editor.foreground#d0dbde
  • editor.hoverHighlightBackground#d0dbde0c
  • editor.inactiveSelectionBackground#d0dbde0c
  • editor.inlineValuesBackground#505860
  • editor.inlineValuesForeground#b8c4c3
  • editor.lineHighlightBackground#d0dbde0c
  • editor.lineHighlightBorder#00000000
  • editor.linkedEditingBackground#303338
  • editor.rangeHighlightBackground#303338
  • editor.rangeHighlightBorder#303338
  • editor.selectionBackground#b8c4c326
  • editor.selectionHighlightBackground#d0dbde26
  • editor.selectionHighlightBorder#00000000
  • editor.stackFrameHighlightBackground#b8c4c326
  • editor.wordHighlightBackground#d0dbde26
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#d0dbde26
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketHighlight.foreground1#ff6d7e
  • editorBracketHighlight.foreground2#ffb270
  • editorBracketHighlight.foreground3#f3ace2
  • editorBracketHighlight.foreground4#a2e57b
  • editorBracketHighlight.foreground5#7cd5f1
  • editorBracketHighlight.foreground6#baa0f8
  • editorBracketMatch.background#16191d
  • editorBracketMatch.border#6b7678
  • editorCodeLens.foreground#6b7678
  • editorCursor.background#16191d
  • editorCursor.foreground#d0dbde
  • editorError.background#00000000
  • editorError.border#00000000
  • editorError.foreground#ff6d7e
  • editorGhostText.foreground#6b7678
  • editorGroup.border#16191d
  • editorGroup.dropBackground#111417bf
  • editorGroup.emptyBackground#17181D
  • editorGroup.focusedEmptyBorder#41454b
  • editorGroupHeader.noTabsBackground#16191d
  • editorGroupHeader.tabsBackground#111417
  • editorGroupHeader.tabsBorder#16191d
  • editorGutter.addedBackground#a2e57b
  • editorGutter.background#16191d
  • editorGutter.deletedBackground#ff6d7e
  • editorGutter.foldingControlForeground#b8c4c3
  • editorGutter.modifiedBackground#ffb270
  • editorHint.border#16191d
  • editorHint.foreground#baa0f8
  • editorHoverWidget.background#303338
  • editorHoverWidget.border#41454b
  • editorIndentGuide.background#303338
  • editorInfo.background#00000000
  • editorInfo.border#16191d
  • editorInfo.foreground#7cd5f1
  • editorInlayHint.background#303338
  • editorInlayHint.foreground#888d94
  • editorLightBulb.foreground#f3ace2
  • editorLightBulbAi.foreground#f3ace2
  • editorLightBulbAutoFix.foreground#a2e57b
  • editorLineNumber.activeForeground#b8c4c3
  • editorLineNumber.foreground#505860
  • editorLink.activeForeground#7cd5f1
  • editorMarkerNavigation.background#303338
  • editorMarkerNavigationError.background#ff6d7e
  • editorMarkerNavigationInfo.background#7cd5f1
  • editorMarkerNavigationWarning.background#ffb270
  • editorOverviewRuler.addedForeground#a2e57b
  • editorOverviewRuler.border#16191d
  • editorOverviewRuler.currentContentForeground#303338
  • editorOverviewRuler.deletedForeground#ff6d7e
  • editorOverviewRuler.errorForeground#ff6d7e
  • editorOverviewRuler.findMatchForeground#d0dbde26
  • editorOverviewRuler.incomingContentForeground#303338
  • editorOverviewRuler.infoForeground#7cd5f1
  • editorOverviewRuler.modifiedForeground#ffb270
  • editorOverviewRuler.rangeHighlightForeground#d0dbde26
  • editorOverviewRuler.selectionHighlightForeground#d0dbde26
  • editorOverviewRuler.warningForeground#ffb270
  • editorOverviewRuler.wordHighlightForeground#d0dbde26
  • editorOverviewRuler.wordHighlightStrongForeground#d0dbde26
  • editorPane.background#16191d
  • editorRuler.foreground#505860
  • editorStickyScroll.background#16191d
  • editorStickyScroll.border#16191d
  • editorStickyScroll.shadow#16191d
  • editorStickyScrollHover.background#d0dbde0c
  • editorSuggestWidget.background#303338
  • editorSuggestWidget.border#41454b
  • editorSuggestWidget.foreground#b8c4c3
  • editorSuggestWidget.highlightForeground#d0dbde
  • editorSuggestWidget.selectedBackground#42909e
  • editorUnnecessaryCode.opacity#000000a5
  • editorWarning.background#00000000
  • editorWarning.border#00000000
  • editorWarning.foreground#ffb270
  • editorWhitespace.foreground#505860
  • editorWidget.background#303338
  • editorWidget.border#303338
  • errorForeground#ff6d7e
  • extensionBadge.remoteForeground#a2e57b
  • extensionButton.background#303338
  • extensionButton.foreground#b8c4c3
  • extensionButton.hoverBackground#505860
  • extensionButton.prominentBackground#303338
  • extensionButton.prominentForeground#d0dbde
  • extensionButton.prominentHoverBackground#505860
  • extensionIcon.preReleaseForeground#baa0f8
  • extensionIcon.sponsorForeground#7cd5f1
  • extensionIcon.starForeground#f3ace2
  • extensionIcon.verifiedForeground#a2e57b
  • focusBorder#303338
  • foreground#d0dbde
  • gitDecoration.addedResourceForeground#a2e57b
  • gitDecoration.conflictingResourceForeground#ffb270
  • gitDecoration.deletedResourceForeground#ff6d7e
  • gitDecoration.ignoredResourceForeground#505860
  • gitDecoration.modifiedResourceForeground#f3ace2
  • gitDecoration.stageDeletedResourceForeground#ff6d7e
  • gitDecoration.stageModifiedResourceForeground#f3ace2
  • gitDecoration.untrackedResourceForeground#b8c4c3
  • icon.foreground#888d94
  • inlineChat.background#16191d
  • inlineChat.border#41454b
  • inlineChat.shadow#17181D
  • inlineChatDiff.inserted#a2e57b19
  • inlineChatDiff.removed#a2e57b19
  • input.background#303338
  • input.border#303338
  • input.foreground#d0dbde
  • input.placeholderForeground#9facad
  • inputOption.activeBackground#505860
  • inputOption.activeBorder#505860
  • inputOption.activeForeground#d0dbde
  • inputOption.hoverBackground#505860
  • inputValidation.errorBackground#303338
  • inputValidation.errorBorder#ff6d7e
  • inputValidation.errorForeground#ff6d7e
  • inputValidation.infoBackground#303338
  • inputValidation.infoBorder#7cd5f1
  • inputValidation.infoForeground#7cd5f1
  • inputValidation.warningBackground#303338
  • inputValidation.warningBorder#ffb270
  • inputValidation.warningForeground#ffb270
  • interactive.activeCodeBorder#303338
  • interactive.inactiveCodeBorder#303338
  • keybindingLabel.background#505860
  • keybindingLabel.border#505860
  • keybindingLabel.bottomBorder#505860
  • keybindingLabel.foreground#b8c4c3
  • list.activeSelectionBackground#d0dbde0c
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#111417bf
  • list.errorForeground#ff6d7e
  • list.focusBackground#16191d
  • list.focusForeground#d0dbde
  • list.highlightForeground#ffffff
  • list.hoverBackground#d0dbde0c
  • list.hoverForeground#d0dbde
  • list.inactiveFocusBackground#16191d
  • list.inactiveSelectionBackground#b8c4c30c
  • list.inactiveSelectionForeground#ffffff
  • list.invalidItemForeground#ff6d7e
  • list.warningForeground#ffb270
  • listFilterWidget.background#16191d
  • listFilterWidget.noMatchesOutline#ff6d7e
  • listFilterWidget.outline#16191d
  • listFilterWidget.shadow#17181D
  • menu.background#303338
  • menu.border#303338
  • menu.foreground#d0dbde
  • menu.selectionBackground#42909e
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#303338
  • menubar.selectionForeground#d0dbde
  • merge.border#16191d
  • merge.commonContentBackground#d0dbde19
  • merge.commonHeaderBackground#d0dbde26
  • merge.currentContentBackground#ff6d7e19
  • merge.currentHeaderBackground#ff6d7e26
  • merge.incomingContentBackground#a2e57b19
  • merge.incomingHeaderBackground#a2e57b26
  • mergeEditor.change.background#d0dbde19
  • mergeEditor.change.word.background#d0dbde19
  • mergeEditor.conflict.handled.minimapOverViewRuler#a2e57b
  • mergeEditor.conflict.handledFocused.border#a2e57b
  • mergeEditor.conflict.handledUnfocused.border#a2e57b
  • mergeEditor.conflict.unhandled.minimapOverViewRuler#ff6d7e
  • mergeEditor.conflict.unhandledFocused.border#ff6d7e
  • mergeEditor.conflict.unhandledUnfocused.border#ff6d7e
  • minimap.errorHighlight#ff6d7ea5
  • minimap.findMatchHighlight#888d94a5
  • minimap.infoHighlight#7cd5f1a5
  • minimap.selectionHighlight#b8c4c326
  • minimap.selectionOccurrenceHighlight#6b7678a5
  • minimap.warningHighlight#ffb270a5
  • minimapGutter.addedBackground#a2e57b
  • minimapGutter.deletedBackground#ff6d7e
  • minimapGutter.modifiedBackground#f3ace2
  • notebook.cellBorderColor#303338
  • notebook.cellEditorBackground#1114177f
  • notebook.cellInsertionIndicator#d0dbde
  • notebook.cellStatusBarItemHoverBackground#6b7678
  • notebook.cellToolbarSeparator#303338
  • notebook.editorBackground#16191d
  • notebook.focusedEditorBorder#6b7678
  • notebookStatusErrorIcon.foreground#ff6d7e
  • notebookStatusRunningIcon.foreground#d0dbde
  • notebookStatusSuccessIcon.foreground#a2e57b
  • notificationCenter.border#41454b
  • notificationCenterHeader.background#303338
  • notificationCenterHeader.foreground#888d94
  • notificationLink.foreground#f3ace2
  • notifications.background#303338
  • notifications.border#41454b
  • notifications.foreground#b8c4c3
  • notificationsErrorIcon.foreground#ff6d7e
  • notificationsInfoIcon.foreground#7cd5f1
  • notificationsWarningIcon.foreground#ffb270
  • notificationToast.border#41454b
  • panel.background#303338
  • panel.border#17181D
  • panel.dropBackground#111417bf
  • panelStickyScroll.background#303338
  • panelStickyScroll.border#505860
  • panelStickyScroll.shadow#303338
  • panelTitle.activeBorder#f3ace2
  • panelTitle.activeForeground#f3ace2
  • panelTitle.inactiveForeground#888d94
  • peekView.border#41454b
  • peekViewEditor.background#303338
  • peekViewEditor.matchHighlightBackground#505860
  • peekViewEditorGutter.background#303338
  • peekViewResult.background#303338
  • peekViewResult.fileForeground#888d94
  • peekViewResult.lineForeground#888d94
  • peekViewResult.matchHighlightBackground#505860
  • peekViewResult.selectionBackground#303338
  • peekViewResult.selectionForeground#d0dbde
  • peekViewTitle.background#111417
  • peekViewTitleDescription.foreground#888d94
  • peekViewTitleLabel.foreground#d0dbde
  • pickerGroup.border#303338
  • pickerGroup.foreground#505860
  • ports.iconRunningProcessForeground#a2e57b
  • problemsErrorIcon.foreground#ff6d7e
  • problemsInfoIcon.foreground#7cd5f1
  • problemsWarningIcon.foreground#ffb270
  • profileBadge.background#303338
  • profileBadge.foreground#b8c4c3
  • progressBar.background#6b7678
  • quickInput.background#303338
  • quickInput.foreground#888d94
  • quickInputList.focusBackground#42909e
  • sash.hoverBorder#6b7678
  • scmGraph.foreground1#ff6d7e
  • scmGraph.foreground2#ffb270
  • scmGraph.foreground3#f3ace2
  • scmGraph.foreground4#a2e57b
  • scmGraph.foreground5#baa0f8
  • scmGraph.historyItemBaseRefColor#7cd5f1
  • scmGraph.historyItemHoverAdditionsForeground#a2e57b
  • scmGraph.historyItemHoverDefaultLabelBackground#6b7678
  • scmGraph.historyItemHoverDefaultLabelForeground#16191d
  • scmGraph.historyItemHoverDeletionsForeground#ff6d7e
  • scmGraph.historyItemHoverLabelForeground#16191d
  • scmGraph.historyItemRefColor#baa0f8
  • scmGraph.historyItemRemoteRefColor#a2e57b
  • scrollbar.shadow#ff003300
  • scrollbarSlider.activeBackground#d0dbde59
  • scrollbarSlider.background#b8c4c326
  • scrollbarSlider.hoverBackground#d0dbde26
  • selection.background#b8c4c326
  • settings.checkboxBackground#303338
  • settings.checkboxBorder#505860
  • settings.checkboxForeground#f3ace2
  • settings.dropdownBackground#303338
  • settings.dropdownBorder#505860
  • settings.dropdownForeground#d0dbde
  • settings.dropdownListBorder#888d94
  • settings.headerForeground#f3ace2
  • settings.modifiedItemForeground#f3ace2
  • settings.modifiedItemIndicator#f3ace2
  • settings.numberInputBackground#303338
  • settings.numberInputBorder#505860
  • settings.numberInputForeground#d0dbde
  • settings.rowHoverBackground#6b76780c
  • settings.sashBorder#303338
  • settings.settingsHeaderHoverForeground#d0dbde
  • settings.textInputBackground#303338
  • settings.textInputBorder#505860
  • settings.textInputForeground#d0dbde
  • sideBar.background#111417
  • sideBar.border#17181D
  • sideBar.dropBackground#111417bf
  • sideBar.foreground#888d94
  • sideBarSectionHeader.background#111417
  • sideBarSectionHeader.foreground#6b7678
  • sideBarStickyScroll.background#111417
  • sideBarStickyScroll.border#303338
  • sideBarStickyScroll.shadow#111417
  • sideBarTitle.foreground#505860
  • simpleFindWidget.sashBorder
  • statusBar.background#111417
  • statusBar.border#17181D
  • statusBar.debuggingBackground#6b7678
  • statusBar.debuggingBorder#41454b
  • statusBar.debuggingForeground#d0dbde
  • statusBar.focusBorder#303338
  • statusBar.foreground#6b7678
  • statusBar.noFolderBackground#111417
  • statusBar.noFolderBorder#17181D
  • statusBar.noFolderForeground#6b7678
  • statusBarItem.activeBackground#16191d
  • statusBarItem.errorBackground#16191d
  • statusBarItem.errorForeground#ff6d7e
  • statusBarItem.focusBorder#6b7678
  • statusBarItem.hoverBackground#111417
  • statusBarItem.hoverForeground#d0dbde
  • statusBarItem.offlineBackground
  • statusBarItem.offlineForeground
  • statusBarItem.prominentBackground#303338
  • statusBarItem.prominentHoverBackground#303338
  • statusBarItem.remoteBackground#111417
  • statusBarItem.remoteForeground#a2e57b
  • statusBarItem.remoteHoverBackground#a2e57b
  • statusBarItem.remoteHoverForeground#16191d
  • statusBarItem.warningBackground#16191d
  • statusBarItem.warningForeground#ffb270
  • symbolIcon.arrayForeground#ff6d7e
  • symbolIcon.booleanForeground#ff6d7e
  • symbolIcon.classForeground#7cd5f1
  • symbolIcon.colorForeground#baa0f8
  • symbolIcon.constantForeground#baa0f8
  • symbolIcon.constructorForeground#a2e57b
  • symbolIcon.enumeratorForeground#ffb270
  • symbolIcon.enumeratorMemberForeground#ffb270
  • symbolIcon.eventForeground#ffb270
  • symbolIcon.fieldForeground#ffb270
  • symbolIcon.fileForeground#b8c4c3
  • symbolIcon.folderForeground#b8c4c3
  • symbolIcon.functionForeground#a2e57b
  • symbolIcon.interfaceForeground#7cd5f1
  • symbolIcon.keyForeground#ffb270
  • symbolIcon.keywordForeground#ff6d7e
  • symbolIcon.methodForeground#a2e57b
  • symbolIcon.moduleForeground#7cd5f1
  • symbolIcon.namespaceForeground#7cd5f1
  • symbolIcon.nullForeground#baa0f8
  • symbolIcon.numberForeground#baa0f8
  • symbolIcon.objectForeground#7cd5f1
  • symbolIcon.operatorForeground#ff6d7e
  • symbolIcon.packageForeground#baa0f8
  • symbolIcon.propertyForeground#ffb270
  • symbolIcon.referenceForeground#baa0f8
  • symbolIcon.snippetForeground#a2e57b
  • symbolIcon.stringForeground#f3ace2
  • symbolIcon.structForeground#ff6d7e
  • symbolIcon.textForeground#f3ace2
  • symbolIcon.typeParameterForeground#ffb270
  • symbolIcon.unitForeground#baa0f8
  • symbolIcon.variableForeground#7cd5f1
  • tab.activeBackground#16191d
  • tab.activeBorder#16191d00
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#505860
  • tab.border#111417
  • tab.hoverBackground#111417
  • tab.hoverBorder#50586000
  • tab.hoverForeground#d0dbde
  • tab.inactiveBackground#111417
  • tab.inactiveForeground#888d94
  • tab.inactiveModifiedBorder#505860
  • tab.lastPinnedBorder#505860
  • tab.unfocusedActiveBorder#888d9400
  • tab.unfocusedActiveForeground#b8c4c3
  • tab.unfocusedActiveModifiedBorder#303338
  • tab.unfocusedHoverBackground#111417
  • tab.unfocusedHoverBorder#16191d
  • tab.unfocusedHoverForeground#b8c4c3
  • tab.unfocusedInactiveForeground#888d94
  • tab.unfocusedInactiveModifiedBorder#303338
  • terminal.ansiBlack#303338
  • terminal.ansiBlue#ffb270
  • terminal.ansiBrightBlack#6b7678
  • terminal.ansiBrightBlue#ffb270
  • terminal.ansiBrightCyan#7cd5f1
  • terminal.ansiBrightGreen#a2e57b
  • terminal.ansiBrightMagenta#baa0f8
  • terminal.ansiBrightRed#ff6d7e
  • terminal.ansiBrightWhite#d0dbde
  • terminal.ansiBrightYellow#f3ace2
  • terminal.ansiCyan#7cd5f1
  • terminal.ansiGreen#a2e57b
  • terminal.ansiMagenta#baa0f8
  • terminal.ansiRed#ff6d7e
  • terminal.ansiWhite#d0dbde
  • terminal.ansiYellow#f3ace2
  • terminal.background#303338
  • terminal.foreground#d0dbde
  • terminal.selectionBackground#d0dbde26
  • terminalCommandDecoration.defaultBackground#d0dbde
  • terminalCommandDecoration.errorBackground#ff6d7e
  • terminalCommandDecoration.successBackground#a2e57b
  • terminalCursor.background#00000000
  • terminalCursor.foreground#d0dbde
  • testing.iconErrored#ff6d7e
  • testing.iconFailed#ff6d7e
  • testing.iconPassed#a2e57b
  • testing.iconQueued#d0dbde
  • testing.iconSkipped#ffb270
  • testing.iconUnset#888d94
  • testing.message.error.decorationForeground#ff6d7e
  • testing.message.error.lineBackground#ff6d7e19
  • testing.message.info.decorationForeground#d0dbde
  • testing.message.info.lineBackground#d0dbde19
  • testing.runAction#f3ace2
  • textBlockQuote.background#303338
  • textBlockQuote.border#303338
  • textCodeBlock.background#303338
  • textLink.activeForeground#d0dbde
  • textLink.foreground#f3ace2
  • textPreformat.foreground#d0dbde
  • textSeparator.foreground#6b7678
  • titleBar.activeBackground#16191d
  • titleBar.activeForeground#888d94
  • titleBar.border#111417
  • titleBar.inactiveBackground#16191d
  • titleBar.inactiveForeground#505860
  • tree.inactiveIndentGuidesStroke#16191d
  • tree.indentGuidesStroke#303338
  • walkThrough.embeddedEditorBackground#111417
  • welcomePage.buttonBackground#303338
  • welcomePage.buttonHoverBackground#505860
  • welcomePage.progress.background#6b7678
  • welcomePage.progress.foreground#888d94
  • welcomePage.tileBackground#303338
  • welcomePage.tileHoverBackground#505860
  • welcomePage.tileShadow#17181D
  • widget.shadow#0d1013e1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment keyword, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text#676f76normal
comment storage.type#676f76
comment entity.name.type#9fa6aa
comment variable, comment variable.other#9fa6aa
comment keyword, comment entity.name.tag, entity.name.tag.documentation#9fa6aa
comment keyword.codetag.notation#54cec7
comment.git-status.header.remote#e86082
comment.git-status.header.local#75c393
comment.other.git-status.head#d0dbde
string.quoted.docstring, string.quoted.docstring punctuation.definition#676f76
constant#54cec7
constant.other#d0dbde
constant.other.caps#54cec7
constant.other.placeholder#ffa96d
constant.other.property#54cec7
constant.other.citation.latex#54cec7
constant.other.color#54cec7
constant.other.character-class.escape#54cec7
constant.other.key#54cec7
constant.other.symbol#ffa96d
constant.other.elm#75c393
constant.language#
constant.character.escape#54cec7
constant.numeric.line-number.find-in-files#97999b
constant.numeric.line-number.match.find-in-files#f3ace2
entity.name.section#f3ace2
entity.name.function, entity.name.function.templated, entity.name.function.member.static#b4c771
entity.name.label#54cec7
entity.name.function.preprocessor#75c393
entity.name#b4c771
entity.name.constant#54cec7
entity.name.namespace#d0dbde
entity.name.function#b4c771
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component#e86082
source.ansible entity.name.tag#75c393
entity.name.function.operator#e86082
meta.brackets entity.name.function.operator, punctuation.separator entity.name.function.operator#859298
entity.other.attribute-name#75c393normal
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css, entity.other.attribute-name.css, entity.other.animation-name.css#b4c771
entity.other.attribute-name.id.css#ffa96d
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css#75c393normal
entity.name.function, support.function#b4c771
entity.other.git-status.hex#54cec7
entity.other.jinja2.delimiter#859298
entity.name.operator.custom-literal#d0dbde
entity.name.operator.custom-literal.string#f3ace2
entity.name.operator.custom-literal.number#54cec7
entity.name.type.rust#75c393
entity.name.lifetime.rust#e86082
invalid#e86082normal underline
invalid.deprecated#ffa96dnormal underline
keyword#e86082
keyword.control#e86082
keyword.control.directive#e86082
keyword.operator, keyword.operator.member, keyword.operator.new#e86082
keyword.other.substitution#859298
keyword.other.template.begin, keyword.other.template.end#e86082
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext#859298
keyword.other.parenthesis.elm#859298
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust#75c393
keyword.control.rust, keyword.operator.misc.rust#e86082
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby#e86082
markup.normalnormal
markup.boldbold
markup.heading#f3ace2
markup.raw#ffa96d
markup.underlineunderline
markup.underline.link#b4c771
markup.inserted, markup.inserted punctuation.definition.inserted#b4c771
markup.deleted, markup.deleted punctuation.definition.deleted#e86082
markup.changed, markup.changed punctuation.definition.changed#f3ace2
markup.ignored, markup.ignored punctuation.definition.ignored#859298
markup.untracked#859298
markup.quotenormal
meta.brace.round, meta.brace.square, meta.brace.curly, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js#859298
meta.function-call.generic.python, support.function.builtin.python#b4c771
meta.function-call.python meta.function-call.arguments.python#d0dbde
meta.interpolation#ffa96d
meta.instance.constructor#b4c771
meta.attribute-with-value.class string, meta.attribute.class.html string#b4c771
meta.attribute-with-value.id string, meta.attribute.id.html string#ffa96d
source.json meta.mapping.key string#d0dbde
source.yaml meta.mapping.key string#e86082
meta.object.member#d0dbde
meta.property-list.css variable.other#ffa96d
entity.name.constant.preprocessor, meta.preprocessor#54cec7
meta.diff.git-diff.header#f3ace2
meta.type_params.rust#d0dbde
meta.attribute.rust, meta.annotation.rust, variable.language.rust, variable.annotation.rust, meta.annotation.rust string, meta.annotation.rust keyword, meta.annotation.rust keyword.operator, meta.attribute.rust string#9fa6aa
meta.type variable, meta.type variable.other.readwrite#54cec7
punctuation#859298
punctuation.definition.tag, punctuation.definition.tag source, punctuation.definition.group.begin.ruby, punctuation.definition.group.end.ruby, punctuation.definition.group.begin.css, punctuation.definition.group.end.css, punctuation.definition.string.end.html source.css, punctuation.definition.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.separator.parameter, punctuation.accessor, punctuation.terminator#859298
punctuation.definition.group#d0dbde
punctuation.definition.comment#676f76
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css#9fa6aa
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin#ffa96d
punctuation.template-string.element.begin, punctuation.template-string.element.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#e86082
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown
markup.underline.link punctuation#b4c771
meta.brace.round, meta.brace.square, keyword.operator.type.annotation, meta.type storage.modifier.array#859298
region.redish#e86082
region.orangish#ffa96d
region.yellowish#f3ace2
region.greenish#b4c771
region.bluish#75c393
region.purplish#54cec7
region.pinkish#e86082
region.whitish#FFFFFF
source#d0dbde
source.scss, source.sass#859298
source.sass variable.other, source.sass variable.sass, source.scss variable.other, source.scss variable.scss, source.scss variable.sass, source.css variable.other, source.css variable.scss, source.less variable.other, source.less variable.other.less, source.less variable.declaration.less#ffa96dnormal
source.git-show.commit.sha#54cec7
source.git-show.author, source.git-show.date, source.git-diff.command, source.git-diff.command meta.diff.git-diff.header.from-file, source.git-diff.command meta.diff.git-diff.header.to-file#859298
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha#54cec7
source.git-show meta.diff.range.unified#ffa96d
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file#859298
storage#e86082
storage.type#75c393normal
storage.type.extends#e86082normal
storage.type.function.arrow#e86082normal
storage.modifier, storage.type.modifier#e86082normal
storage.class.restructuredtext.ref#54cec7
storage.modifier.visibility.rust, storage.modifier.lifetime.rust#e86082
storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, storage.type.rust, storage.type.core.rust, storage.class.std.rust#75c393
storage.type.rust, storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, keyword.other.rust, keyword.other.where.rust#e86082
storage.modifier.import.java#d0dbde
string#f3ace2
string.unquoted.label#d0dbde
string source#d0dbde
string source punctuation.section.embedded, string punctuation.definition.string source#859298
string.other.link.title, string.other.link.description#e86082
string.other.link.description.title#75c393
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#e86082
string.other.ref, string.other.restructuredtext.ref#b4c771
string.other.git-status.help.key#9fa6aa
string.other.git-status.remote#e86082
support.constant#75c393
support.constant.handlebars#859298
support.type.vendor-prefix.css#9fa6aa
support.function#b4c771
support.macro#b4c771
support.function.delimiter.elm#859298
support.type, entity.name.type.object.console#75c393normal
support.variable, support.variable.property#75c393
support.type.property-name#d0dbdenormal
support.class#75c393
support.constant.core.rust#54cec7
comment support, comment support.class#676f76
text#d0dbde
text.find-in-files#d0dbde
variable.parameter, parameters variable.function#ffa96dnormal
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#9fa6aanormal
variable.language.arguments#54cec7
variable.other.class#75c393
variable.other.constant#54cec7
variable.other.readwrite#d0dbde
variable.other.member#d0dbde
variable.other.enummember#54cec7
variable.other.property, variable.other.property.static, variable.other.event#d0dbde
variable.function#b4c771
variable.other.substitution#ffa96d
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby#54cec7
source.jinja2 variable.other.jinja2.block#b4c771
source.jinja2 variable.other.jinja2#ffa96d
constant.numeric#95bff0
constant.language.boolean, constant.language.false, constant.language.true#e75b7e
variable.property, meta.property.object, support.variable.property#a9d9bd
variable.other, variable#87cdf0
entity.name.class, entity.other.inherited-class, support.class, meta.function-call.constructor, entity.name.struct#b5a7f2
entity.name.enum#b5a7f2
meta.type, meta.type-alias, support.type, entity.name.type#b5a7f2
punctuation.definition.character-class.regexp#b5a7f2

Shiki preview

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

Loading...

Ganbaru by Marlodev - VS Code Theme