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.background#202020
  • activityBar.border#202020
  • activityBar.foreground#717171
  • activityBarBadge.background#8CA6BD
  • activityBarBadge.foreground#202020
  • badge.background#FF9473
  • badge.foreground#202020
  • button.background#FF9473
  • button.foreground#202020
  • button.hoverBackground#FF9473BB
  • debugExceptionWidget.background#262626
  • debugExceptionWidget.border#2D2D2D
  • debugToolBar.background#262626
  • debugToolBar.border#8CA6BD
  • diffEditor.insertedTextBackground#95E6CB44
  • diffEditor.removedTextBackground#F5617444
  • dropdown.background#232323
  • dropdown.listBackground#232323
  • editor.background#1C1C1C
  • editor.findMatchBackground#8CA6BD33
  • editor.findMatchHighlightBackground#8CA6BD33
  • editor.findRangeHighlightBackground#8CA6BD33
  • editor.foreground#DDD7CA
  • editor.lineHighlightBackground#2F2F2F
  • editor.rangeHighlightBackground#262626
  • editor.selectionBackground#2D2D2D
  • editor.wordHighlightBackground#8CA6BD33
  • editor.wordHighlightStrongBackground#8CA6BD33
  • editorBracketHighlight.foreground1#FFCC66
  • editorBracketHighlight.foreground2#7FCDFF
  • editorBracketHighlight.foreground3#B084EB
  • editorBracketHighlight.foreground4#FF75BC
  • editorBracketHighlight.foreground5#93FEC0
  • editorBracketMatch.border#2F2F2F
  • editorCursor.foreground#FFCC66
  • editorError.foreground#FF4551
  • editorGroup.border#2D2D2D
  • editorGroup.emptyBackground#262626
  • editorGroupHeader.noTabsBackground#232323
  • editorGroupHeader.tabsBackground#202020
  • editorGutter.addedBackground#76CC9A
  • editorGutter.deletedBackground#FF4551
  • editorGutter.modifiedBackground#7DBBD1
  • editorHoverWidget.background#262626
  • editorHoverWidget.border#2D2D2D
  • editorIndentGuide.background#262626
  • editorLineNumber.activeForeground#DDD7CA
  • editorLineNumber.foreground#505050
  • editorLink.activeForeground#FFCC66
  • editorMarkerNavigation.background#262626
  • editorOverviewRuler.addedForeground#8CA6BD
  • editorOverviewRuler.border#2D2D2D
  • editorOverviewRuler.deletedForeground#F56174AA
  • editorOverviewRuler.errorForeground#FF4551
  • editorOverviewRuler.modifiedForeground#76CC9AAA
  • editorOverviewRuler.warningForeground#FFCC66
  • editorRuler.foreground#2D2D2D
  • editorSuggestWidget.background#262626
  • editorSuggestWidget.border#2D2D2D
  • editorSuggestWidget.highlightForeground#FFCC66
  • editorSuggestWidget.selectedBackground#2A2A2A
  • editorWarning.foreground#FFCC66
  • editorWhitespace.foreground#2F2F2F
  • editorWidget.background#262626
  • extensionButton.prominentBackground#FFCC66AA
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#FFCC66BB
  • focusBorder#7171718A
  • foreground#717171
  • gitDecoration.conflictingResourceForeground#FF455187
  • gitDecoration.deletedResourceForeground#FF75BC87
  • gitDecoration.ignoredResourceForeground#71717177
  • gitDecoration.modifiedResourceForeground#8CA6BD87
  • gitDecoration.untrackedResourceForeground#7ef2ae87
  • input.background#262626
  • input.border#7171714C
  • input.foreground#DDD7CA
  • input.placeholderForeground#7171718A
  • inputOption.activeBorder#7171718A
  • inputValidation.errorBackground#232323
  • inputValidation.errorBorder#FF4551
  • inputValidation.infoBackground#232323
  • inputValidation.infoBorder#8CA6BD
  • inputValidation.warningBackground#232323
  • inputValidation.warningBorder#FFD580
  • list.activeSelectionBackground#2D2D2D
  • list.activeSelectionForeground#DDD7CA
  • list.focusBackground#2A2A2A
  • list.focusForeground#DDD7CA
  • list.highlightForeground#FFCC66
  • list.hoverBackground#2A2A2A
  • list.hoverForeground#DDD7CA
  • list.inactiveSelectionBackground#202020
  • list.inactiveSelectionForeground#DDD7CA
  • listFilterWidget.background#202020
  • listFilterWidget.noMatchesOutline#FF4551
  • listFilterWidget.outline#8CA6BD
  • notificationCenter.border#202020
  • notificationCenterHeader.background#202020
  • notificationCenterHeader.foreground#8CA6BD
  • notificationLink.foreground#FF9473
  • notifications.background#2D2D2D
  • notifications.foreground#FFFFFF
  • notificationToast.border#202020
  • panel.background#202020
  • panel.border#202020B3
  • panelTitle.activeBorder#202020
  • panelTitle.activeForeground#FF9473
  • panelTitle.inactiveForeground#717171
  • peekView.border#2D2D2D
  • peekViewEditor.background#262626
  • peekViewEditor.matchHighlightBackground#FFCC6633
  • peekViewResult.background#262626
  • peekViewResult.fileForeground#717171
  • peekViewResult.matchHighlightBackground#FFCC6633
  • peekViewTitle.background#262626
  • peekViewTitleDescription.foreground#717171
  • peekViewTitleLabel.foreground#717171
  • pickerGroup.border#2D2D2D
  • pickerGroup.foreground#FFCC66
  • progressBar.background#8CA6BD
  • scrollbar.shadow#20202000
  • scrollbarSlider.activeBackground#FFFFFF22
  • scrollbarSlider.background#FFFFFF11
  • scrollbarSlider.hoverBackground#FFFFFF22
  • selection.background#2D2D2DFF
  • sideBar.background#202020
  • sideBar.border#202020
  • sideBar.foreground#717171DD
  • sideBarSectionHeader.background#202020
  • sideBarSectionHeader.foreground#8CA6BD
  • sideBarTitle.foreground#8CA6BD99
  • statusBar.background#202020
  • statusBar.border#202020
  • statusBar.debuggingBackground#8CA6BD
  • statusBar.debuggingForeground#202020
  • statusBar.foreground#717171
  • statusBar.noFolderBackground#262626
  • tab.activeBackground#1C1C1C
  • tab.activeForeground#8CA6BD
  • tab.border#1C1C1C
  • tab.inactiveBackground#202020
  • tab.inactiveForeground#717171
  • tab.unfocusedActiveForeground#DDD7CAAA
  • tab.unfocusedInactiveForeground#717171
  • terminal.ansiBlue#8CA6BD
  • terminal.ansiBrightBlack#717171
  • terminal.ansiBrightBlue#7DBBD1
  • terminal.ansiBrightCyan#DAA3FF
  • terminal.ansiBrightGreen#66d494
  • terminal.ansiBrightMagenta#FFA7D3
  • terminal.ansiBrightRed#F56174
  • terminal.ansiBrightWhite#E6E6E6
  • terminal.ansiBrightYellow#FFCC66
  • terminal.ansiCyan#C38EFD
  • terminal.ansiGreen#7ef2ae
  • terminal.ansiMagenta#FF75BC
  • terminal.ansiRed#F56174
  • terminal.ansiWhite#DDD7CA
  • terminal.ansiYellow#FF9473
  • terminal.background#202020
  • terminal.border#2A2A2A
  • terminal.foreground#DDD7CA
  • terminal.tab.activeBorder#FFCC66
  • terminalCursor.background#202020
  • terminalCursor.foreground#FF9473
  • textBlockQuote.background#262626
  • textLink.activeForeground#FFCC66
  • textLink.foreground#FFCC66
  • textPreformat.foreground#DDD7CA
  • titleBar.activeBackground#202020
  • titleBar.activeForeground#717171
  • titleBar.border#202020
  • titleBar.inactiveBackground#202020
  • titleBar.inactiveForeground#717171
  • walkThrough.embeddedEditorBackground#262626
  • widget.shadow#202020B3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag#f56174—
comment#717171italic
keyword#FF75BC—
keyword.control, keyword.operator.new#FF75BC—
keyword.operator#FFCC66—
keyword.operator.logical, keyword.operator.comparison#FFCC66—
storage#FF9473—
constant#FF9473—
constant.character.escape#8CA6BD—
variable#E6E6E6—
variable.parameter#BBBBBB—
meta.object-binding-pattern-variable.js variable#FFCC66—
variable.other.constant, variable.language.this, variable.interpolation#FFA7D3—
variable.other.object#FFA7D3—
variable.other.property#E6E6E6—
invalid.illegal#FF4551—
invalid.deprecated#FF4551CC—
string#7ef2ae—
punctuation.definition.template-expression#FFCC66—
support#FFCC66—
support.class#FFCC66—
support.type.object.module.js#C38EFD—
support.function#7DBBD1—
entity.name.function#7DBBD1—
entity.other.inherited-class#FFA7D3—
entity.name.tag.yaml#FFCC66—
meta.decorator punctuation.decorator#FF9473—
meta.decorator variable#7DBBD1—
keyword.other.special-method#8CA6BD—
keyword.control.at-rule#C38EFD—
keyword.other.important#F56174—
variable.interpolation#FF75BC—
meta.source.handlebars entity.name.tag#7DBBD1—
punctuation.definition.expression, punctuation.definition.subexpression, punctuation.definition.block.unescaped, punctuation.definition.tag#F5617487—
entity.name.function.expression#FF75BC—
entity.unescaped.expression#C38EFD—
constant.other.symbol#7ef2ae—
entity.expression variable.parameter.name#FF9473—
entity.expression variable.parameter.value#7DBBD1—
entity.expression support.function.builtin#FFA7D3—
entity.name.tag.html#FFCC66—
entity.other.attribute-name.handlebars#FFCC66—
support.class.component#FF75BCitalic
meta.tag.js entity.name.tag#FFCC66—
entity.other.attribute-name#FF9473—
markup.bold#FF9473bold
punctuation.definition.bold.markdown#FFCC66bold
markup.changed#FF75BC—
markup.deleted#F56174—
markup.italic#FFA7D3italic
punctuation.definition.italic.markdown#FF75BCitalic
markup.inserted#7ef2ae—
punctuation.definition.heading#7ef2ae—
entity.name.section.markdown#BBBBBB—
markup.quote#FF9473—
markup.inline.raw#7ef2aeitalic
beginning.punctuation.definition.list#FF75BC—
markup.fenced_code.block.markdown punctuation.definition.markdown#757575—
fenced_code.block.language#BBBBBBitalic
string.other.link#BBBBBB
meta.link.inline.markdown#8CA6BDitalic
text.html.markdown punctuation.definition.string#FFCC66
entity.name.type.class.js#7DBBD1—
keyword.control.as.js#FFA7D3—
keyword.control.from.js.jsx#FFA7D3—
keyword.control.export.js#C38EFD—
entity.name.tag.js.jsx, support.class.component.js.jsx#F56174—
variable.language.super.js.jsx#8CA6BD—
meta.tag.structure.any.html, meta.tag.other.html, entity.name.tag.html, meta.tag.metadata.script.html, entity.name.tag.jade#F56174—
entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html#F56174—
entity.name.tag.css#F56174—
support.type.property-name.css#E6E6E6—
variable.scss#FFA7D3—
entity.name.tag.reference.scss#F56174—
keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css#FF9473—
string.regexp#7DBBD1—
string.regexp keyword, string.regexp keyword.control#FF75BC
string.regexp keyword.operator#FFA7D3—
comment.block.documentation—
entity.name.type.instance.jsdoc punctuation.definition#FFCC66italic
entity.name.type.instance.jsdoc#CDCDCDitalic
comment.block storage#FFCC66—
comment.block storage.custom, variable.other.jsdoc, variable.other.jsdoc punctuation.definition.string#FFA7D3—
meta.tag.xml#F56174—
meta.function-call.python#A9C3D9—
support.type.property-name.json#CFAFFA—
Search Lights by endigma - VS Code Theme