Skip to main content
Coding Theme

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#505050
  • activityBar.activeBorder#505050
  • activityBar.activeFocusBorder#00988d
  • activityBar.background#2c2c2c
  • activityBar.border#202020
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#cccccc
  • activityBarBadge.background#00988d
  • activityBarBadge.foreground#ffffff
  • badge.background#505050
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#202020
  • breadcrumb.focusForeground#e0e0e0
  • breadcrumb.foreground#a0a0a0
  • breadcrumbPicker.background#2c2c2c
  • button.background#00988d
  • button.border#00000080
  • button.foreground#ffffff
  • button.hoverBackground#4cb3a8
  • button.secondaryBackground#2c2c2c
  • button.secondaryForeground#e0e0e0
  • button.secondaryHoverBackground#444444
  • commandCenter.activeBackground#3c3c3c
  • commandCenter.activeBorder#505050
  • commandCenter.activeForeground#e0e0e0
  • debugIcon.breakpointForeground#ca4a00
  • diffEditor.insertedLineBackground#36532f4d
  • diffEditor.insertedTextBackground#36532f4d
  • diffEditor.removedLineBackground#693a3b4d
  • diffEditor.removedTextBackground#693a3b4d
  • diffEditorGutter.insertedLineBackground#202020
  • diffEditorGutter.removedLineBackground#202020
  • diffEditorOverview.insertedForeground#36532f
  • diffEditorOverview.removedForeground#693a3b
  • dropdown.background#3c3c3c
  • dropdown.border#505050
  • dropdown.foreground#e0e0e0
  • dropdown.listBackground#2c2c2c
  • editor.background#202020
  • editor.findMatchBackground#49b2784d
  • editor.findMatchBorder#cccccc
  • editor.findMatchHighlightBackground#49b2784d
  • editor.findMatchHighlightBorder#49b2784d
  • editor.findRangeHighlightBackground#0e55504d
  • editor.foldBackground#214f694d
  • editor.foreground#bbbbbb
  • editor.inactiveSelectionBackground#0e555080
  • editor.lineHighlightBackground#282828
  • editor.selectionBackground#0e5550
  • editor.selectionHighlightBackground#2155404d
  • editor.wordHighlightBackground#7777774d
  • editor.wordHighlightStrongBackground#0084d44d
  • editorBracketHighlight.foreground1#bbbbbb
  • editorBracketHighlight.foreground2#bbbbbb
  • editorBracketHighlight.foreground3#bbbbbb
  • editorBracketHighlight.unexpectedBracket.foreground#ff596ccc
  • editorBracketMatch.background#444444
  • editorBracketMatch.border#444444
  • editorError.foreground#ff596c
  • editorGroup.border#3c3c3c
  • editorGroup.emptyBackground#2c2c2c
  • editorGroupHeader.border#3c3c3c
  • editorGroupHeader.noTabsBackground#202020
  • editorGroupHeader.tabsBackground#202020
  • editorGroupHeader.tabsBorder#3c3c3c
  • editorGutter.addedBackground#496342
  • editorGutter.background#202020
  • editorGutter.deletedBackground#784c4d
  • editorGutter.foldingControlForeground#777777
  • editorGutter.modifiedBackground#386078
  • editorHoverWidget.highlightForeground#4cb3a8
  • editorIndentGuide.background1#343434
  • editorInfo.foreground#45a5ff
  • editorInlayHint.foreground#808080
  • editorInlayHint.parameterBackground#2c2c2c
  • editorInlayHint.typeBackground#2c2c2c00
  • editorLightBulb.foreground#e3a100
  • editorLightBulbAutoFix.foreground#ff596c
  • editorLineNumber.activeForeground#a0a0a0
  • editorLineNumber.foreground#505050
  • editorLink.activeForeground#4cb3a8
  • editorOverviewRuler.addedForeground#496342
  • editorOverviewRuler.currentContentForeground#673e2b
  • editorOverviewRuler.deletedForeground#784c4d
  • editorOverviewRuler.errorForeground#e56369
  • editorOverviewRuler.findMatchForeground#49b27880
  • editorOverviewRuler.incomingContentForeground#0e535e
  • editorOverviewRuler.infoForeground#5391f5
  • editorOverviewRuler.modifiedForeground#386078
  • editorOverviewRuler.selectionHighlightForeground#21554080
  • editorOverviewRuler.warningForeground#b88d3f
  • editorOverviewRuler.wordHighlightForeground#215540cc
  • editorOverviewRuler.wordHighlightStrongForeground#0084d4cc
  • editorRuler.foreground#3c3c3c
  • editorSuggestWidget.focusHighlightForeground#45aba3
  • editorSuggestWidget.highlightForeground#45aba3
  • editorSuggestWidget.selectedBackground#0e5550
  • editorUnnecessaryCode.opacity#00000066
  • editorWarning.foreground#e3a100
  • editorWidget.background#2c2c2c
  • editorWidget.border#444444
  • editorWidget.foreground#e0e0e0
  • focusBorder#00988d
  • gitDecoration.addedResourceForeground#7cb46e
  • gitDecoration.conflictingResourceForeground#e18485
  • gitDecoration.deletedResourceForeground#666666
  • gitDecoration.ignoredResourceForeground#dd8b67
  • gitDecoration.modifiedResourceForeground#53ade0
  • gitDecoration.renamedResourceForeground#30b5cc
  • gitDecoration.stageDeletedResourceForeground#666666
  • gitDecoration.stageModifiedResourceForeground#53ade0
  • gitDecoration.untrackedResourceForeground#dd8b67
  • input.background#202020
  • input.border#3c3c3c
  • input.foreground#e0e0e0
  • inputOption.activeBackground#00988d
  • inputOption.activeBorder#00988d
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#0e5550
  • list.activeSelectionForeground#e0e0e0
  • list.dropBackground#3c3c3c
  • list.errorForeground#e18485
  • list.focusAndSelectionOutline#0e5550
  • list.focusHighlightForeground#45aba3
  • list.highlightForeground#45aba3
  • list.hoverBackground#3c3c3c
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#444444
  • list.warningForeground#bca047
  • menu.background#2c2c2c
  • menu.border#444444
  • menu.foreground#e0e0e0
  • menu.selectionBackground#0e5550
  • menu.separatorBackground#444444
  • menubar.selectionBackground#444444
  • menubar.selectionForeground#e0e0e0
  • merge.currentContentBackground#673e2b4d
  • merge.currentHeaderBackground#dd8b674d
  • merge.incomingContentBackground#0e535e4d
  • merge.incomingHeaderBackground#30b5cc4d
  • mergeEditor.change.background#663a4b4d
  • mergeEditor.change.word.background#c77f9a4d
  • mergeEditor.conflict.unhandled.minimapOverViewRuler#b88d3f
  • mergeEditor.conflict.unhandledFocused.border#b88d3f
  • mergeEditor.conflict.unhandledUnfocused.border#b88d3f7a
  • mergeEditor.conflictingLines.background#b88d3f47
  • minimap.errorHighlight#e56369
  • minimap.findMatchHighlight#49b27880
  • minimap.infoHighlight#5391f5
  • minimap.selectionHighlight#0e555080
  • minimap.selectionOccurrenceHighlight#21554080
  • minimap.warningHighlight#b88d3f
  • minimapGutter.addedBackground#496342
  • minimapGutter.deletedBackground#784c4d
  • minimapGutter.modifiedBackground#386078
  • minimapSlider.activeBackground#505050a6
  • minimapSlider.background#3c3c3ca6
  • minimapSlider.hoverBackground#505050a6
  • notificationCenterHeader.background#2c2c2c
  • notificationCenterHeader.foreground#e0e0e0
  • notificationLink.foreground#4cb3a8
  • notifications.background#3c3c3c
  • notifications.border#202020
  • notifications.foreground#e0e0e0
  • notificationsErrorIcon.foreground#e56369
  • notificationsInfoIcon.foreground#5391f5
  • notificationsWarningIcon.foreground#b88d3f
  • notificationToast.border#444444
  • panel.background#2c2c2c
  • panel.border#202020
  • panelTitle.activeBorder#00988d
  • panelTitle.activeForeground#e0e0e0
  • panelTitle.inactiveForeground#a0a0a0
  • peekView.border#444444
  • peekViewEditor.background#202020
  • peekViewEditor.matchHighlightBackground#49b2784d
  • peekViewResult.background#2c2c2c
  • peekViewResult.fileForeground#e0e0e0
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#49b27800
  • peekViewResult.selectionBackground#0e5550
  • peekViewResult.selectionForeground#e0e0e0
  • peekViewTitle.background#3c3c3c
  • peekViewTitleDescription.foreground#777777
  • peekViewTitleLabel.foreground#e0e0e0
  • pickerGroup.border#3c3c3c
  • pickerGroup.foreground#4cb3a8
  • problemsErrorIcon.foreground#e56369
  • problemsInfoIcon.foreground#5391f5
  • problemsWarningIcon.foreground#b88d3f
  • quickInputList.focusBackground#0e5550
  • scmGraph.foreground1#00d881
  • scmGraph.foreground2#e3a100
  • scmGraph.foreground3#ff596c
  • scmGraph.foreground4#00cfff
  • scmGraph.foreground5#fe66ee
  • scmGraph.historyItemBaseRefColor#ca4a00
  • scmGraph.historyItemHoverAdditionsForeground#9cc691
  • scmGraph.historyItemHoverDefaultLabelBackground#505050
  • scmGraph.historyItemHoverDefaultLabelForeground#cccccc
  • scmGraph.historyItemHoverDeletionsForeground#e9a2a1
  • scmGraph.historyItemHoverLabelForeground#ffffff
  • scmGraph.historyItemRefColor#45a5ff
  • scmGraph.historyItemRemoteRefColor#a888c5
  • scrollbar.shadow#000000bb
  • scrollbarSlider.activeBackground#505050a6
  • scrollbarSlider.background#3c3c3ca6
  • scrollbarSlider.hoverBackground#505050a6
  • searchEditor.findMatchBackground#49b2784d
  • searchEditor.findMatchBorder#49b2784d
  • selection.background#00988d
  • settings.checkboxBackground#00988d
  • settings.checkboxBorder#00988d
  • settings.checkboxForeground#ffffff
  • settings.dropdownBackground#3c3c3c
  • settings.dropdownBorder#505050
  • settings.dropdownForeground#e0e0e0
  • settings.modifiedItemIndicator#0e5550
  • settings.numberInputBackground#2c2c2c
  • settings.numberInputBorder#505050
  • settings.numberInputForeground#e0e0e0
  • settings.textInputBackground#2c2c2c
  • settings.textInputBorder#505050
  • settings.textInputForeground#e0e0e0
  • sideBar.background#2c2c2c
  • sideBar.border#202020
  • sideBar.foreground#e0e0e0
  • sideBarSectionHeader.background#2c2c2c
  • sideBarSectionHeader.border#202020
  • sideBarSectionHeader.foreground#e0e0e0
  • statusBar.background#2c2c2c
  • statusBar.border#202020
  • statusBar.debuggingBackground#2c2c2c
  • statusBar.debuggingBorder#202020
  • statusBar.debuggingForeground#ffffff8c
  • statusBar.foreground#ffffff8c
  • statusBar.noFolderBackground#2c2c2c
  • statusBar.noFolderBorder#202020
  • statusBar.noFolderForeground#ffffff8c
  • statusBarItem.activeBackground#444444
  • statusBarItem.errorBackground#e56369
  • statusBarItem.errorHoverForeground#ffffff
  • statusBarItem.warningBackground#b88d3f
  • statusBarItem.warningHoverForeground#ffffff
  • tab.activeBackground#202020
  • tab.activeBorder#00988d
  • tab.activeForeground#e0e0e0
  • tab.activeModifiedBorder#00988d
  • tab.border#202020
  • tab.hoverBackground#202020
  • tab.hoverForeground#e0e0e0
  • tab.inactiveBackground#202020
  • tab.inactiveForeground#bbbbbb
  • tab.inactiveModifiedBorder#666666
  • tab.unfocusedActiveBackground#202020
  • tab.unfocusedActiveBorder#666666
  • tab.unfocusedActiveForeground#bbbbbb
  • tab.unfocusedActiveModifiedBorder#00988d
  • tab.unfocusedHoverBackground#202020
  • tab.unfocusedHoverForeground#e0e0e0
  • tab.unfocusedInactiveBackground#202020
  • tab.unfocusedInactiveForeground#bbbbbb
  • tab.unfocusedInactiveModifiedBorder#666666
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0084d4
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#45a0ea
  • terminal.ansiBrightCyan#4baecf
  • terminal.ansiBrightGreen#49b278
  • terminal.ansiBrightMagenta#cc69bf
  • terminal.ansiBrightRed#e56369
  • terminal.ansiBrightWhite#cccccc
  • terminal.ansiBrightYellow#b88d3f
  • terminal.ansiCyan#0092b6
  • terminal.ansiGreen#00985a
  • terminal.ansiMagenta#b447a8
  • terminal.ansiRed#ce3e4b
  • terminal.ansiWhite#bbbbbb
  • terminal.ansiYellow#a07100
  • terminal.background#202020
  • terminal.border#2c2c2c
  • terminal.foreground#bbbbbb
  • textLink.activeForeground#30b9b0
  • textLink.foreground#4cb3a8
  • titleBar.activeBackground#2c2c2c
  • titleBar.inactiveBackground#2c2c2c
  • welcomePage.background#202020
  • welcomePage.tileBackground#2c2c2c
  • welcomePage.tileHoverBackground#3c3c3c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, constant, punctuation, keyword.operator, storage.type.function.arrow#bbbbbb—
comment, punctuation.definition.comment, punctuation.terminator.statement.js, punctuation.terminator.statement.ts#808080—
token.error-token, invalid#cc8080—
keyword, keyword.operator.logical.python, storage, punctuation.definition.directive, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, meta.fstring.python constant.character.format.placeholder.other.python, constant.character.escape, support.other.escape.special.regexp, constant.other.character-class.regexp, punctuation.definition.keyword, punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.heading.markdown, punctuation.definition.quote.begin.markdown#c98568
#bf8d55—
token.warn-token, constant.language, support.variable.magic, variable.other.global.php, variable.other.global.php punctuation, meta.tag.other.unrecognized.html.derivative punctuation.definition.tag, meta.tag.other.unrecognized.html.derivative entity.name.tag, storage.type.annotation, punctuation.definition.annotation#ad9650—
constant.numeric, constant.other.color.rgb-value.hex.css, punctuation.definition.constant.css#959f59—
string, punctuation.definition.string, markup.inline.raw, markup.quote, keyword.other.unit, constant.character.set.regexp, constant.other.character-class.set.regexp, constant.other.character-class.range.regexp#79a76e—
comment.block.documentation storage.type, keyword.other.phpdoc, punctuation.definition.block.tag.jsdoc, keyword.other.phpdoc.php, meta.tag.custom entity.name.tag, meta.tag.custom punctuation.definition.tag, support.type, storage.type.php, keyword.other.type, source.go storage.type, entity.name.type, storage.type.built-in, source.cs keyword.type#5bab88—
meta.function-call.generic, meta.function-call entity.name.function, meta.function-call support.function.magic, meta.method-call entity.name.function, entity.name.function.call, entity.name.function.member, support.function#45aba3—
entity.name.tag, punctuation.definition.tag, source.css entity.other.attribute-name, meta.property-name.css, entity.other.attribute-name.id punctuation.definition.entity, meta.attribute.php, support.type.property-name.table.toml, punctuation.definition.table.toml#45a8ba
entity.name.class, entity.name.function, entity.name.type.class, support.function.magic, support.function.constructor, entity.name.function.decorator, meta.function.decorator support.type, punctuation.definition.decorator, punctuation.decorator, meta.decorator, meta.decorator meta.function-call entity.name.function, entity.other.inherited-class, meta.class.inheritance.python punctuation.separator.period.python, string.regexp punctuation.parenthesis, punctuation.definition.group.regexp, entity.name.tag.backreference.regexp, keyword.other.back-reference.regexp#5aa1cb
string.other.link, string.other.link.description.title.markdown punctuation.definition.string , markup.underline.link#5aa1cbunderline
token.info-token#7599d3
source.css support.constant, variable.language.special.self, variable.parameter.function.language.special.self, variable.language.special.cls, variable.parameter.function.language.special.cls, variable.language.this, variable.language.self, variable.language.cls, variable.language.this punctuation#9190d1—
#a888c5
token.debug-token, meta.attribute, entity.name.tag.yaml, fenced_code, entity.name.type.module, variable.other.property, variable.other.object.property, support.type.property-name, support.type.property-name.toml, support.type.vendored.property-name, support.variable.property#bb82b2
markup.heading#bb82b2italic
keyword.codetag.notation#c77f9a
markup.italic, variable.parameter.function, variable.parameter.function-call, variable.parameter.class, variable.parameter.class-call—italic
markup.bold—bold
markup.strikethrough—strikethrough