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.activeBorder#e6b450
  • activityBar.background#1a1a1a
  • activityBar.border#1e232b
  • activityBar.foreground#ffffff99
  • activityBar.inactiveForeground#ffffff99
  • activityBarBadge.background#e6b450
  • activityBarBadge.foreground#734d00
  • badge.background#ffcc6633
  • badge.foreground#31DCE4
  • button.background#31DCE4
  • button.foreground#805500
  • button.hoverBackground#fac761
  • button.secondaryBackground#707a8c33
  • button.secondaryForeground#ffffff99
  • button.secondaryHoverBackground#707a8c80
  • debugConsoleInputIcon.foreground#31DCE4
  • debugExceptionWidget.background#1c212b
  • debugExceptionWidget.border#171b24
  • debugIcon.breakpointDisabledForeground#f29e7480
  • debugIcon.breakpointForeground#f29e74
  • debugToolBar.background#1c212b
  • descriptionForeground#ffffff99
  • diffEditor.diagonalFill#171b24
  • diffEditor.insertedTextBackground#87d96c1f
  • diffEditor.removedTextBackground#f279831f
  • dropdown.background#1a1a1a
  • dropdown.border#707a8c45
  • dropdown.foreground#ffffff99
  • editor.background#1a1a1a
  • editor.findMatchBackground#695380
  • editor.findMatchBorder#695380
  • editor.findMatchHighlightBackground#69538066
  • editor.findMatchHighlightBorder#5c467266
  • editor.findRangeHighlightBackground#69538040
  • editor.foreground#B4B4B4
  • editor.inactiveSelectionBackground#409fff21
  • editor.lineHighlightBackground#1a1f29
  • editor.rangeHighlightBackground#69538033
  • editor.selectionBackground#409fff40
  • editor.selectionHighlightBackground#87d96c26
  • editor.selectionHighlightBorder#87d96c00
  • editor.snippetTabstopHighlightBackground#87d96c33
  • editor.wordHighlightBackground#80bfff14
  • editor.wordHighlightBorder#80bfff80
  • editor.wordHighlightStrongBackground#87d96c14
  • editor.wordHighlightStrongBorder#87d96c80
  • editorBracketHighlight.foreground1#ff75b5
  • editorBracketHighlight.foreground2#b084eb
  • editorBracketHighlight.foreground3#45a9f9
  • editorBracketHighlight.foreground4#ffb86c
  • editorBracketHighlight.foreground5#19f9d8
  • editorBracketHighlight.foreground6#22982a
  • editorBracketHighlight.unexpectedBracket.foreground#ff2c6d
  • editorBracketMatch.background#8a91994d
  • editorBracketMatch.border#8a91994d
  • editorCodeLens.foreground#b8cfe680
  • editorCursor.foreground#ffcc66
  • editorError.foreground#ff6666
  • editorGroup.background#1c212b
  • editorGroup.border#171b24
  • editorGroupHeader.noTabsBackground#1a1a1a
  • editorGroupHeader.tabsBackground#1a1a1a
  • editorGroupHeader.tabsBorder#171b24
  • editorGutter.addedBackground#87d96ccc
  • editorGutter.deletedBackground#f27983cc
  • editorGutter.modifiedBackground#80bfffcc
  • editorHoverWidget.background#1a1a1a
  • editorHoverWidget.border#171b24
  • editorIndentGuide.activeBackground#8a919959
  • editorIndentGuide.background#8a91992e
  • editorLineNumber.activeForeground#8a9199cc
  • editorLineNumber.foreground#8a919966
  • editorLink.activeForeground#31DCE4
  • editorMarkerNavigation.background#1c212b
  • editorOverviewRuler.addedForeground#87d96c
  • editorOverviewRuler.border#171b24
  • editorOverviewRuler.bracketMatchForeground#8a9199b3
  • editorOverviewRuler.deletedForeground#f27983
  • editorOverviewRuler.errorForeground#ff6666
  • editorOverviewRuler.findMatchForeground#695380
  • editorOverviewRuler.modifiedForeground#80bfff
  • editorOverviewRuler.warningForeground#31DCE4
  • editorOverviewRuler.wordHighlightForeground#80bfff66
  • editorOverviewRuler.wordHighlightStrongForeground#87d96c66
  • editorRuler.foreground#8a91992e
  • editorSuggestWidget.background#1c212b
  • editorSuggestWidget.border#171b24
  • editorSuggestWidget.highlightForeground#31DCE4
  • editorSuggestWidget.selectedBackground#63759926
  • editorWarning.foreground#31DCE4
  • editorWhitespace.foreground#8a919966
  • editorWidget.background#1a1a1a
  • editorWidget.border#171b24
  • errorForeground#ff6666
  • extensionButton.prominentBackground#31DCE4
  • extensionButton.prominentForeground#805500
  • extensionButton.prominentHoverBackground#fac761
  • focusBorder#ffffff99
  • foreground#ffffff99
  • gitDecoration.conflictingResourceForeground
  • gitDecoration.deletedResourceForeground#f27983b3
  • gitDecoration.ignoredResourceForeground#707a8c80
  • gitDecoration.modifiedResourceForeground#80bfffb3
  • gitDecoration.submoduleResourceForeground#dfbfffb3
  • gitDecoration.untrackedResourceForeground#87d96cb3
  • icon.foreground#ffffff99
  • input.background#1a1a1a
  • input.border#707a8c45
  • input.foreground#ffffff99
  • input.placeholderForeground#707a8c80
  • inputOption.activeBackground#ffcc6633
  • inputOption.activeBorder#ffcc664d
  • inputOption.activeForeground#31DCE4
  • inputValidation.errorBackground#1a1a1a
  • inputValidation.errorBorder#ff6666
  • inputValidation.infoBackground#1a1a1a
  • inputValidation.infoBorder#5ccfe6
  • inputValidation.warningBackground#1a1a1a
  • inputValidation.warningBorder#ffd173
  • keybindingLabel.background#707a8c1a
  • keybindingLabel.border#cccac21a
  • keybindingLabel.bottomBorder#cccac21a
  • keybindingLabel.foreground#ffffff99
  • list.activeSelectionBackground#63759926
  • list.activeSelectionForeground#ffffff99
  • list.deemphasizedForeground#ff6666
  • list.errorForeground#ff6666
  • list.filterMatchBackground#5c467266
  • list.filterMatchBorder#69538066
  • list.focusBackground#63759926
  • list.focusForeground#ffffff99
  • list.focusOutline#63759926
  • list.highlightForeground#31DCE4
  • list.hoverBackground#63759926
  • list.inactiveSelectionBackground#69758c1f
  • list.inactiveSelectionForeground#ffffff99
  • list.invalidItemForeground#707a8c4d
  • listFilterWidget.background#1c212b
  • listFilterWidget.noMatchesOutline#ff6666
  • listFilterWidget.outline#31DCE4
  • minimap.background#1a1a1a
  • minimap.errorHighlight#ff6666
  • minimap.findMatchHighlight#695380
  • minimap.selectionHighlight#409fff40
  • minimapGutter.addedBackground#87d96c
  • minimapGutter.deletedBackground#f27983
  • minimapGutter.modifiedBackground#80bfff
  • panel.background#1a1a1a
  • panel.border#171b24
  • panelTitle.activeBorder#31DCE4
  • panelTitle.activeForeground#ffffff99
  • panelTitle.inactiveForeground#ffffff99
  • peekView.border#63759926
  • peekViewEditor.background#1a1a1a
  • peekViewEditor.matchHighlightBackground#69538066
  • peekViewEditor.matchHighlightBorder#5c467266
  • peekViewResult.background#1a1a1a
  • peekViewResult.fileForeground#ffffff99
  • peekViewResult.lineForeground#ffffff99
  • peekViewResult.matchHighlightBackground#4F326D66
  • peekViewResult.selectionBackground#63759926
  • peekViewTitle.background#63759926
  • peekViewTitleDescription.foreground#ffffff99
  • peekViewTitleLabel.foreground#ffffff99
  • pickerGroup.border#171b24
  • pickerGroup.foreground#707a8c80
  • progressBar.background#31DCE4
  • scrollbar.shadow#171b2400
  • scrollbarSlider.activeBackground#707a8cb3
  • scrollbarSlider.background#707a8c66
  • scrollbarSlider.hoverBackground#ffffff99
  • selection.background#409fff40
  • settings.headerForeground#ffffff99
  • settings.modifiedItemIndicator#80bfff
  • sideBar.background#1a1a1a
  • sideBar.border#171b24
  • sideBarSectionHeader.background#1a1a1a
  • sideBarSectionHeader.border#171b24
  • sideBarSectionHeader.foreground#ffffff99
  • sideBarTitle.foreground#ffffff99
  • statusBar.background#1a1a1a
  • statusBar.border#171b24
  • statusBar.debuggingBackground#f29e74
  • statusBar.debuggingForeground#1a1a1a
  • statusBar.foreground#ffffff99
  • statusBar.noFolderBackground#1c212b
  • statusBarItem.activeBackground#707a8c33
  • statusBarItem.hoverBackground#707a8c33
  • statusBarItem.prominentBackground#171b24
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#0e3c47
  • statusBarItem.remoteForeground#ffffff99
  • tab.activeBackground#2D2C2C
  • tab.activeBorder#31DCE4
  • tab.activeBorderTop#31DCE4
  • tab.activeForeground#ffffff99
  • tab.border#252526
  • tab.inactiveBackground#1a1a1a
  • tab.inactiveForeground#ffffff99
  • tab.unfocusedActiveBorderTop#ffffff99
  • tab.unfocusedActiveForeground#ffffff99
  • tab.unfocusedInactiveForeground#ffffff99
  • terminal.ansiBlack#171b24
  • terminal.ansiBlue#6dcbfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#73d0ff
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#d5ff80
  • terminal.ansiBrightMagenta#dfbfff
  • terminal.ansiBrightRed#f28779
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd173
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#87d96c
  • terminal.ansiMagenta#dabafa
  • terminal.ansiRed#ed8274
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#facc6e
  • terminal.background#1a1a1a
  • terminal.foreground#ffffff99
  • textBlockQuote.background#1c212b
  • textLink.activeForeground#31DCE4
  • textLink.foreground#31DCE4
  • textPreformat.foreground#ffffff99
  • titleBar.activeBackground#1a1a1a
  • titleBar.activeForeground#ffffff99
  • titleBar.border#171b24
  • titleBar.inactiveBackground#1a1a1a
  • titleBar.inactiveForeground#ffffff99
  • tree.indentGuidesStroke#8a919959
  • walkThrough.embeddedEditorBackground#1c212b
  • welcomePage.buttonBackground#ffcc6666
  • welcomePage.progress.background#1a1f29
  • welcomePage.tileBackground#1a1a1a
  • welcomePage.tileShadow#12151cb3
  • widget.shadow#12151cb3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ffffff99
comment#666666italic
string, constant.other.symbol#b0d47e
string.regexp, constant.character, constant.other#95E6CB
constant.numeric#d2a6ff
constant.language#cc856c
variable, variable.parameter.function-call#B4B4B4
variable.member#71e5f0
variable.language#39BAE6italic
storage#C792E9
keyword#C792E9
keyword.control.import.python#f69b76
keyword.control.flow.python#C792E9
keyword.operator#EE5D43
punctuation.separator, punctuation.terminator#BFBDB6B3
punctuation.section#BFBDB6
punctuation.accessor#F29668
punctuation.definition.template-expression#FF8F40
punctuation.section.embedded#FF8F40
meta.embedded#BFBDB6
source.java storage.type, source.haskell storage.type, source.c storage.type#73d0ff
entity.other.inherited-class#39BAE6
storage.type.function#c792e9
source.java storage.type.primitive#73D0FF
variable.parameter, meta.parameter#B4B4B4
support.function.magic.python#D5C055
variable.parameter.function.language.special.self.python#C41D8C
variable.function, variable.annotation, meta.function-call.generic, support.function.go#61AFEF
support.function, support.macro#F07178
entity.name.import, entity.name.package#AAD94C
entity.name.namespace#6FC1AD
entity.name.type.class#31DCE4italic
entity.name.function#61AFEF
entity.name.tag, meta.tag.sgml#ffcb6b
support.class.component#73D0FF
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#39BAE680
entity.other.attribute-name#FFB454
support.constant#F29668italic
support.type, support.class, source.go storage.type#39BAE6
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#E6B673
invalid#D95757
meta.diff, meta.diff.header#C594C5
source.ruby variable.other.readwrite#FFB454
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#73D0FF
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#b8cfe680
support.type.property-name#39BAE6normal
constant.numeric.line-number.find-in-files - match#ACB6BF8C
constant.numeric.line-number.match#FF8F40
entity.name.filename.find-in-files#AAD94C
message.error#D95757
markup.heading, markup.heading entity.name#AAD94Cbold
markup.underline.link, string.other.link#39BAE6
markup.italic#F07178italic
markup.bold#F07178bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#ACB6BF8Cbold
markup.quote#95E6CBitalic
markup.list punctuation.definition.list.begin#FFB454
markup.inserted#7FD962
markup.changed#73B8FF
markup.deleted#F26D78
markup.strike#E6B673
markup.table#39BAE6
text.html.markdown markup.inline.raw#F29668
text.html.markdown meta.dummy.line-break#ACB6BF8C
punctuation.definition.markdown#ACB6BF8C