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#00a6fb3f
  • activityBar.activeBorder#00000000
  • activityBar.background#f4f4f4
  • activityBar.border#cbc5bf
  • activityBar.foreground#00a6fb
  • activityBar.inactiveForeground#adadad
  • activityBarBadge.background#007acc
  • activityBarBadge.foreground#ffffff
  • badge.background#00a6fb
  • badge.foreground#ffffff
  • button.background#00a6fb7f
  • button.border#cbc5bf
  • button.foreground#eeffff
  • button.hoverBackground#00a6fb
  • debugIcon.breakpointForeground#ff5904
  • debugIcon.continueForeground#00a6fb
  • debugIcon.pauseForeground#00a6fb
  • debugIcon.restartForeground#45AC5B
  • debugIcon.startForeground#45AC5B
  • debugIcon.stepBackForeground#00a6fb
  • debugIcon.stepIntoForeground#00a6fb
  • debugIcon.stepOutForeground#00a6fb
  • debugIcon.stepOverForeground#00a6fb
  • debugIcon.stopForeground#ff5904
  • debugToolBar.background#f4f4f4
  • debugToolBar.border#cbc5bf
  • dropdown.background#f4f4f4
  • dropdown.border#cbc5bf
  • dropdown.foreground#1100007f
  • editor.background#f4f4f4
  • editor.findMatchHighlightBackground#ff000000
  • editor.findMatchHighlightBorder#00a6fb
  • editorBracketHighlight.foreground1#25bb89
  • editorBracketHighlight.foreground2#0086db9f
  • editorBracketHighlight.foreground3#0086db
  • editorBracketHighlight.foreground4#c168ae
  • editorBracketHighlight.foreground5#ff5904af
  • editorBracketHighlight.foreground6#ff0000af
  • editorBracketHighlight.unexpectedBracket.foreground#0c0606
  • editorCursor.foreground#aba59f
  • editorError.foreground#ff5904
  • editorGroupHeader.border#cbc5bf
  • editorGroupHeader.tabsBackground#efefef
  • editorGroupHeader.tabsBorder#cbc5bf
  • editorInfo.foreground#00a6fb
  • editorLightBulb.foreground#ffab4b
  • editorLightBulbAutoFix.foreground#45AC5B
  • editorLineNumber.activeForeground#00a6fb
  • editorLineNumber.foreground#0000006f
  • editorMarkerNavigation.background#f4f4f4
  • editorMarkerNavigationError.background#343a40
  • editorMarkerNavigationError.headerBackground#ff5904
  • editorMarkerNavigationInfo.background#343a40
  • editorMarkerNavigationInfo.headerBackground#00a6fb
  • editorMarkerNavigationWarning.background#343a40
  • editorMarkerNavigationWarning.headerBackground#ffab4b
  • editorStickyScroll.background#efefef
  • editorStickyScrollHover.background#00a6fbaf
  • editorWarning.foreground#ffab4b
  • editorWidget.background#f4f4f4
  • editorWidget.border#cbc5bf
  • editorWidget.foreground#000000af
  • errorForeground#ff5904
  • focusBorder#ffffff00
  • input.background#efefef
  • input.border#cbc5bf
  • input.foreground#00a6fb
  • input.placeholderForeground#0000005f
  • keybindingLabel.background#adadad
  • keybindingLabel.foreground#0000007f
  • list.activeSelectionBackground#00a6fb3f
  • list.activeSelectionForeground#0086db
  • list.inactiveSelectionBackground#eaeaea
  • list.inactiveSelectionForeground#00a6fb
  • minimap.errorHighlight#ff5904
  • notificationCenter.border#cbc5bf
  • notificationCenterHeader.background#00a6fb
  • notificationCenterHeader.foreground#ffffffaf
  • notifications.background#f4f4f4
  • notifications.border#cbc5bf
  • notifications.foreground#110000
  • notificationsErrorIcon.foreground#ff5904
  • notificationsInfoIcon.foreground#00a6fb
  • notificationsWarningIcon.foreground#ffab4b
  • notificationToast.border#cbc5bf
  • panelTitle.activeBorder#00a6fb
  • panelTitle.activeForeground#00a6fb
  • panelTitle.inactiveForeground#0000007f
  • problemsErrorIcon.foreground#ff5904
  • problemsInfoIcon.foreground#00a6fb
  • problemsWarningIcon.foreground#ffab4b
  • quickInput.background#f4f4f4
  • quickInput.foreground#000000af
  • quickInputList.focusBackground#0000002f
  • quickInputList.focusForeground#00a6fb
  • quickInputList.focusIconForeground#00a6fb
  • scrollbar.shadow#ffffff00
  • scrollbarSlider.activeBackground#00a6fbaf
  • scrollbarSlider.background#0000001f
  • scrollbarSlider.hoverBackground#0000003f
  • settings.checkboxForeground#00a6fb
  • settings.dropdownBackground#f4f4f4
  • settings.dropdownForeground#00a6fb
  • settings.modifiedItemIndicator#00a6fb
  • sideBar.background#efefef
  • sideBar.border#cbc5bf
  • sideBar.foreground#0000008f
  • sideBarSectionHeader.background#efefef
  • sideBarSectionHeader.border#cbc5bf
  • sideBarSectionHeader.foreground#0000008f
  • sideBarTitle.foreground#666666
  • statusBar.background#00a6fb
  • statusBar.border#00000000
  • statusBar.debuggingBackground#45AC5B
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#ffffffaf
  • statusBar.focusBorder#ffffff00
  • statusBar.foreground#ffffffaf
  • statusBar.noFolderBackground#00a6fb
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#ffffffaf
  • tab.activeBackground#f4f4f4
  • tab.activeBorder#cbc5bf
  • tab.activeBorderTop#cbc5bf
  • tab.activeForeground#00a6fb
  • tab.border#cbc5bf
  • tab.hoverForeground#00a6fb
  • tab.inactiveBackground#efefef
  • tab.inactiveForeground#0000007f
  • terminal.background#f4f4f4
  • terminal.dropBackground#00a6fb3f
  • terminal.selectionBackground#00a6fb1f
  • terminal.selectionForeground#00a6fb
  • terminalCommandDecoration.defaultBackground#00a6fb
  • terminalCommandDecoration.errorBackground#ff5904
  • terminalCommandDecoration.successBackground#45AC5B
  • terminalCursor.background#000000
  • terminalCursor.foreground#1100007f
  • textLink.activeForeground#00a6fb
  • textLink.foreground#696969
  • titleBar.activeBackground#00a6fb
  • titleBar.activeForeground#ffffffaf
  • titleBar.border#cbc5bf
  • titleBar.inactiveBackground#efefef
  • titleBar.inactiveForeground#1100007f
  • toolbar.activeBackground#00a6fb
  • toolbar.hoverBackground#00a6fb7f
  • widget.border#cbc5bf

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7f7f7fitalic bold
variable#5c5656
constant.other.color#0c0c0c
invalid, invalid.illegal#FF5370
punctuation.terminator, punctuation.separator.delimiter, punctuation.separator.parameters.python, punctuation.separator.arguments.python, punctuation.separator.dictionary.pair.json.comments#aaaaaa
punctuation.accessor, punctuation.separator.pointer-access, punctuation.separator.dot-access, keyword.operator.assignment, punctuation.separator.period.python#0086dbbold
keyword.operator, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.increment, keyword.operator.relational, keyword.operator.comparison#a1488ebold
keyword, keyword.control.break#a1488e
storage.type, storage.modifier, keyword.other#0086db
punctuation, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.control, constant.other.color, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag, keyword.other.template, keyword.other.substitution, meta.brace.round, meta.brace.square#0086db
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#258C3B
entity.name.function, support.function, punctuation.section.arguments.begin.bracket.round, punctuation.section.arguments.end.bracket.round, punctuation.section.parameters.begin.bracket.round, punctuation.section.parameters.end.bracket.round, punctuation.section.block.begin.bracket.curly.function.definition, punctuation.section.block.end.bracket.curly.function.definition, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.section.function.begin.python, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python#25bb89bold
meta.function-call, variable.function, meta.parens, keyword.other.special-method#0c0c0c
meta.block variable.other#5c5656
support.other.variable, string.other.link#f07178
keyword.other.unit#a1488e
meta.block, meta.parens.block, variable.parameter#5c5656
constant.numeric, constant.language, support.constant, constant.character, constant.escape#ffab4b
constant.other.placeholder, string, punctuation.definition.string.end, punctuation.definition.string.begin#0081d6italic
constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#0086dbbf
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#0086db
support.type#0086db
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#728c96
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370
variable.language#ffab4bitalic
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF
entity.other.attribute-name#a772ca
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffab4bitalic
entity.other.attribute-name.class#ffab4b
source.sass keyword.control#ff8282
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#89DDFF
constant.character.escape#0086dbBF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#ffab4b
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#45ac5b
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#F78C6C
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#FF5370
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#C17E70
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#82AAFF
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#f07178
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#C792EA
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#C3E88D
text.html.markdown, punctuation.definition.list_item.markdown#5c5656
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#a3c86d
markup.italic#f07178italic
markup.bold, markup.bold string#5c5656bold
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#5c5656bold
markup.underline#5c5656underline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#628adf
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#ffab4b
markup.raw.block#C792EA
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
meta.paragraph.markdown#5c5656
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#EEFFFF