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#8fbfdc15
  • activityBar.activeBorder#8fbfdc
  • activityBar.background#141414
  • activityBar.border#343238
  • activityBar.foreground#e8e8d3
  • activityBar.inactiveForeground#8a8a82
  • activityBarBadge.background#8fbfdc
  • activityBarBadge.foreground#151515
  • badge.background#8fbfdc
  • badge.foreground#151515
  • breadcrumb.activeSelectionForeground#e8e8d3
  • breadcrumb.background#161616
  • breadcrumb.focusForeground#e8e8d3
  • breadcrumb.foreground#a8a8a0
  • breadcrumbPicker.background#1e1e1e
  • button.background#8fbfdc
  • button.foreground#151515
  • button.hoverBackground#a8d4eb
  • button.secondaryBackground#45424a
  • button.secondaryForeground#e8e8d3
  • button.secondaryHoverBackground#5a6a78
  • checkbox.background#1e1e1e
  • checkbox.border#343238
  • checkbox.foreground#e8e8d3
  • debugExceptionWidget.background#3a1515
  • debugExceptionWidget.border#a5553d
  • debugToolBar.background#1e1e1e
  • debugToolBar.border#343238
  • descriptionForeground#a8a8a0
  • diffEditor.diagonalFill#35323060
  • diffEditor.insertedLineBackground#2a301820
  • diffEditor.insertedTextBackground#99ad6a20
  • diffEditor.removedLineBackground#3a151520
  • diffEditor.removedTextBackground#cf6a4c20
  • dropdown.background#1e1e1e
  • dropdown.border#343238
  • dropdown.foreground#e8e8d3
  • dropdown.listBackground#161616
  • editor.background#151515
  • editor.findMatchBackground#8fbfdc30
  • editor.findMatchHighlightBackground#8fbfdc20
  • editor.findRangeHighlightBackground#8fbfdc15
  • editor.foldBackground#8fbfdc18
  • editor.foreground#e8e8d3
  • editor.hoverHighlightBackground#8fbfdc12
  • editor.inactiveSelectionBackground#8fbfdc18
  • editor.lineHighlightBackground#e8e8d308
  • editor.lineHighlightBorder#e8e8d30a
  • editor.rangeHighlightBackground#8fbfdc12
  • editor.selectionBackground#8fbfdc28
  • editor.selectionHighlightBackground#8fbfdc18
  • editor.wordHighlightBackground#8fbfdc18
  • editor.wordHighlightStrongBackground#fad07a25
  • editorBracketHighlight.foreground1#8197bf
  • editorBracketHighlight.foreground2#fad07a
  • editorBracketHighlight.foreground3#c6b6ee
  • editorBracketHighlight.foreground4#8fbfdc
  • editorBracketHighlight.foreground5#99ad6a
  • editorBracketHighlight.foreground6#ffb964
  • editorBracketHighlight.unexpectedBracket.foreground#cf6a4c
  • editorBracketMatch.background#8197bf30
  • editorBracketMatch.border#8197bf60
  • editorCursor.foreground#8fbfdc
  • editorError.foreground#cf6a4c
  • editorGroup.border#343238
  • editorGroupHeader.noTabsBackground#161616
  • editorGroupHeader.tabsBackground#141414
  • editorGroupHeader.tabsBorder#343238
  • editorGutter.addedBackground#99ad6a80
  • editorGutter.background#151515
  • editorGutter.commentRangeForeground#6a6a62
  • editorGutter.deletedBackground#cf6a4c80
  • editorGutter.foldingControlForeground#6a6a62
  • editorGutter.modifiedBackground#fad07a80
  • editorHint.foreground#7a7a72
  • editorHoverWidget.background#1e1e1e
  • editorHoverWidget.border#343238
  • editorIndentGuide.activeBackground1#4a4a48
  • editorIndentGuide.background1#353230
  • editorInfo.foreground#8fbfdc
  • editorLineNumber.activeForeground#d8d5c8
  • editorLineNumber.foreground#6a6a62
  • editorLink.activeForeground#a8d4eb
  • editorOverviewRuler.border#343238
  • editorRuler.foreground#e8e8d310
  • editorStickyScroll.border#343238
  • editorStickyScrollHover.background#8fbfdc12
  • editorSuggestWidget.background#1e1e1e
  • editorSuggestWidget.border#343238
  • editorSuggestWidget.foreground#e8e8d3
  • editorSuggestWidget.highlightForeground#fad07a
  • editorSuggestWidget.selectedBackground#8fbfdc35
  • editorWarning.foreground#fad07a
  • editorWhitespace.foreground#4a4a46
  • editorWidget.background#1e1e1e
  • editorWidget.border#343238
  • editorWidget.foreground#e8e8d3
  • errorForeground#cf6a4c
  • focusBorder#445c6c
  • foreground#e8e8d3
  • gitDecoration.addedResourceForeground#99ad6a
  • gitDecoration.conflictingResourceForeground#fad07a
  • gitDecoration.deletedResourceForeground#cf6a4c
  • gitDecoration.ignoredResourceForeground#5a5856
  • gitDecoration.modifiedResourceForeground#fad07a
  • gitDecoration.renamedResourceForeground#8fbfdc
  • gitDecoration.untrackedResourceForeground#99ad6a
  • icon.foreground#e8e8d3
  • input.background#1e1e1e
  • input.border#343238
  • input.foreground#e8e8d3
  • input.placeholderForeground#6e6a68
  • inputOption.activeBackground#8fbfdc25
  • inputOption.activeBorder#7aa2bb
  • inputOption.activeForeground#e8e8d3
  • inputValidation.errorBackground#3a1515
  • inputValidation.errorBorder#a5553d
  • inputValidation.infoBackground#1a2a30
  • inputValidation.infoBorder#7aa2bb
  • inputValidation.warningBackground#3a2810
  • inputValidation.warningBorder#c9a862
  • list.activeSelectionBackground#8fbfdc35
  • list.activeSelectionForeground#e8e8d3
  • list.dropBackground#8fbfdc30
  • list.errorForeground#cf6a4c
  • list.focusBackground#8fbfdc25
  • list.focusForeground#e8e8d3
  • list.highlightForeground#fad07a
  • list.hoverBackground#8fbfdc15
  • list.hoverForeground#e8e8d3
  • list.inactiveSelectionBackground#8fbfdc25
  • list.inactiveSelectionForeground#e8e8d3
  • list.warningForeground#fad07a
  • listFilterWidget.background#1e1e1e
  • listFilterWidget.noMatchesOutline#cf6a4c
  • listFilterWidget.outline#8fbfdc
  • menu.background#1e1e1e
  • menu.foreground#e8e8d3
  • menu.selectionBackground#8fbfdc35
  • menu.selectionForeground#e8e8d3
  • menu.separatorBackground#343238
  • menubar.selectionBackground#8fbfdc25
  • menubar.selectionForeground#e8e8d3
  • merge.border#343238
  • merge.commonContentBackground#1a1a1a20
  • merge.commonHeaderBackground#6a6a6230
  • merge.currentContentBackground#2a301820
  • merge.currentHeaderBackground#99ad6a30
  • merge.incomingContentBackground#1a2a3020
  • merge.incomingHeaderBackground#8197bf30
  • minimap.background#151515
  • minimap.errorHighlight#cf6a4c80
  • minimap.findMatchHighlight#8fbfdc30
  • minimap.selectionHighlight#8fbfdc30
  • minimap.warningHighlight#fad07a80
  • minimapSlider.activeBackground#8fbfdc45
  • minimapSlider.background#8fbfdc18
  • minimapSlider.hoverBackground#8fbfdc30
  • notificationCenter.border#343238
  • notificationCenterHeader.background#1a1a1a
  • notificationCenterHeader.foreground#e8e8d3
  • notificationLink.foreground#8fbfdc
  • notifications.background#1e1e1e
  • notifications.border#343238
  • notifications.foreground#e8e8d3
  • notificationsErrorIcon.foreground#cf6a4c
  • notificationsInfoIcon.foreground#8fbfdc
  • notificationsWarningIcon.foreground#fad07a
  • panel.background#161616
  • panel.border#343238
  • panelInput.border#343238
  • panelSection.border#343238
  • panelSection.dropBackground#8fbfdc30
  • panelSectionHeader.background#1a1a1a
  • panelSectionHeader.foreground#e8e8d3
  • panelTitle.activeBorder#8fbfdc
  • panelTitle.activeForeground#e8e8d3
  • panelTitle.inactiveForeground#8a8a82
  • peekView.border#343238
  • peekViewEditor.background#1a1a1a
  • peekViewEditor.matchHighlightBackground#fad07a30
  • peekViewEditorGutter.background#1a1a1a
  • peekViewResult.background#161616
  • peekViewResult.fileForeground#e8e8d3
  • peekViewResult.lineForeground#a8a8a0
  • peekViewResult.matchHighlightBackground#fad07a30
  • peekViewResult.selectionBackground#8fbfdc35
  • peekViewResult.selectionForeground#e8e8d3
  • peekViewTitle.background#141414
  • peekViewTitleDescription.foreground#a8a8a0
  • peekViewTitleLabel.foreground#e8e8d3
  • progressBar.background#8fbfdc
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#e8e8d360
  • scrollbarSlider.background#e8e8d325
  • scrollbarSlider.hoverBackground#e8e8d340
  • selection.background#8fbfdc40
  • settings.checkboxBackground#1e1e1e
  • settings.checkboxBorder#343238
  • settings.checkboxForeground#e8e8d3
  • settings.dropdownBackground#1e1e1e
  • settings.dropdownBorder#343238
  • settings.dropdownForeground#e8e8d3
  • settings.headerForeground#e8e8d3
  • settings.modifiedItemIndicator#fad07a
  • settings.numberInputBackground#1e1e1e
  • settings.numberInputBorder#343238
  • settings.numberInputForeground#e8e8d3
  • settings.textInputBackground#1e1e1e
  • settings.textInputBorder#343238
  • settings.textInputForeground#e8e8d3
  • sideBar.background#161616
  • sideBar.border#343238
  • sideBar.foreground#e8e8d3
  • sideBarSectionHeader.background#1a1a1a
  • sideBarSectionHeader.border#343238
  • sideBarSectionHeader.foreground#e8e8d3
  • sideBarTitle.foreground#e8e8d3
  • statusBar.background#161616
  • statusBar.border#343238
  • statusBar.debuggingBackground#cf6a4c
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#e8e8d3
  • statusBar.noFolderBackground#1a1a1a
  • statusBarItem.activeBackground#8fbfdc35
  • statusBarItem.errorBackground#cf6a4c
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#8fbfdc25
  • statusBarItem.prominentBackground#8fbfdc
  • statusBarItem.prominentForeground#151515
  • statusBarItem.prominentHoverBackground#a8d4eb
  • statusBarItem.warningBackground#fad07a
  • statusBarItem.warningForeground#151515
  • tab.activeBackground#1e1e1e
  • tab.activeBorder#00000000
  • tab.activeBorderTop#8fbfdc
  • tab.activeForeground#e8e8d3
  • tab.border#343238
  • tab.hoverBackground#1e1e1e
  • tab.hoverForeground#e8e8d3
  • tab.inactiveBackground#191919
  • tab.inactiveForeground#8a8a82
  • tab.lastPinnedBorder#343238
  • tab.unfocusedActiveForeground#a8a8a0
  • tab.unfocusedInactiveForeground#6a6a62
  • terminal.ansiBlack#252525
  • terminal.ansiBlue#8197bf
  • terminal.ansiBrightBlack#7a7268
  • terminal.ansiBrightBlue#a5b5d0
  • terminal.ansiBrightCyan#aad2e8
  • terminal.ansiBrightGreen#b8c993
  • terminal.ansiBrightMagenta#d9cff5
  • terminal.ansiBrightRed#e5786d
  • terminal.ansiBrightWhite#f5f5eb
  • terminal.ansiBrightYellow#ffb964
  • terminal.ansiCyan#8fbfdc
  • terminal.ansiGreen#99ad6a
  • terminal.ansiMagenta#c6b6ee
  • terminal.ansiRed#cf6a4c
  • terminal.ansiWhite#e8e8d3
  • terminal.ansiYellow#fad07a
  • terminal.background#151515
  • terminal.foreground#e8e8d3
  • terminal.selectionBackground#8fbfdc28
  • terminalCursor.foreground#8fbfdc
  • titleBar.activeBackground#141414
  • titleBar.activeForeground#e8e8d3
  • titleBar.border#343238
  • titleBar.inactiveBackground#121212
  • titleBar.inactiveForeground#8a8a82
  • tree.indentGuidesStroke#353230
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#908a82italic
variable, string constant.other.placeholder, variable.other.readwrite, variable.other.object#c6b6ee
variable.parameter, meta.function.parameter#d0c4f0
variable.language, variable.other.constant#cf6a4c
variable.other.property, variable.other.object.property, meta.object-literal.key#c8c8bc
constant.other.color#cf6a4c
invalid, invalid.illegal, invalid.deprecated#cf6a4c
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow#8197bf
storage.type, storage.type.function, storage.type.class#8197bf
storage.modifier, keyword.other.special-method#8197bfitalic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#8fbfdc
keyword.control.return#8197bf
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment#9ac0dc
punctuation, meta.brace, punctuation.section.embedded#d0d0c4
punctuation.definition.bracket, punctuation.definition.parameters, punctuation.definition.block, meta.brace.round, meta.brace.square, meta.brace.curly#b0b0a4
punctuation.separator, punctuation.delimiter, punctuation.terminator#c0c0b4
entity.name.tag, meta.tag.sgml#8197bf
entity.other.attribute-name#fad07aitalic
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#6a8a5a
entity.name.function, meta.function.declaration entity.name.function#fad07a
meta.function-call, variable.function, entity.name.function-call#fad07a
support.function, support.function.builtin#e07860
entity.name.method, entity.name.method-call#fad07a
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#cf6a4c
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#cf6a4c
support.constant, support.constant.builtin#e07860
constant.character.escape, constant.escape#e0786d
string, string.quoted, string.quoted.double, string.quoted.single, string.template#99ad6a
punctuation.definition.template-expression, meta.template.expression#85a868
string.regexp#ffb964
constant.other.symbol, constant.other.key#99ad6a
entity.name.class, entity.name.type.class, support.class#ffb964
meta.class entity.name.class, meta.class.declaration entity.name.type#ffc878
entity.name.type, support.type#ffb964
support.type.primitive, support.type.builtin#85a868italic
entity.name.type.interface#ffc878italic
entity.name.namespace, support.other.namespace, support.other.namespace.use.php, support.other.namespace.php, meta.use.php#fad07aitalic
entity.other.inherited-class#ffb964italic
support.type.property-name, source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#c8c8bc
support.constant.property-value, meta.property-value#c6b6ee
entity.name.module, entity.name.module.js, variable.import.parameter.js#fad07aitalic
entity.name.function.constructor, variable.function.constructor, support.function.construct#a8cce5
entity.other.attribute-name.class, entity.other.attribute-name.class.css#fad07a
entity.other.attribute-name.id, entity.other.attribute-name.id.css#8fbfdc
markup.inserted, markup.inserted.git_gutter#99ad6a
markup.deleted, markup.deleted.git_gutter#cf6a4c
markup.changed, markup.changed.git_gutter#fad07a
*url*, *link*, *uri*#8fbfdcunderline
meta.decorator, tag.decorator, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, punctuation.decorator#cf6a4citalic
source.json meta.structure.dictionary.json support.type.property-name.json#8fbfdc
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fad07a
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c6b6ee
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#99ad6a
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffb964
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8197bf
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#cf6a4c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8fbfdc
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#99ad6a
text.html.markdown, punctuation.definition.list_item.markdown#e8e8d3
text.html.markdown markup.inline.raw.markdown, markup.inline.raw#99ad6a
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6a6a62
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#fad07abold
markup.italic#e8e8d3italic
markup.bold, markup.bold string#f0f0e0bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#f0f0e0bold italic
markup.underline#8fbfdcunderline
markup.quote punctuation.definition.blockquote.markdown#6a6a62
markup.quote#a8a8a0italic
string.other.link.title.markdown, markup.underline.link#8fbfdc
string.other.link.description.title.markdown#99ad6aitalic
constant.other.reference.link.markdown#c6b6ee
markup.raw.block, markup.fenced_code.block.markdown#99ad6a
markup.raw.block.fenced.markdown#e8e8d3
punctuation.definition.fenced.markdown, punctuation.definition.markdown#6a6a62
variable.language.fenced.markdown, fenced_code.block.language#8fbfdc
meta.separator, meta.separator.markdown#6a6a62bold
markup.table#e8e8d3
punctuation.definition.list.begin.markdown#fad07abold