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#006b1f20
  • activityBar.activeBorder#006b1f
  • activityBar.background#f8f8f8
  • activityBar.border#d4d4d4
  • activityBar.foreground#1a1a1a
  • activityBar.inactiveForeground#888888
  • activityBarBadge.background#ffffff
  • activityBarBadge.foreground#000000
  • disabledForeground#666666
  • editor.background#eeeeee
  • editor.compositionBorder#1a1a1a
  • editor.foreground#1a1a1a
  • editor.inactiveSelectionBackground#80cbc440
  • editor.placeholder.foreground#9ca3af
  • editor.selectionBackground#006b1f86
  • editor.selectionForeground#ffffff
  • editor.selectionHighlightBackground#cc880020
  • editor.selectionHighlightBorder#cc8800
  • editorBracketHighlight.foreground1#006b1f
  • editorBracketHighlight.foreground2#2d7c4a
  • editorBracketHighlight.foreground3#47663b
  • editorBracketHighlight.foreground4#1976D2
  • editorBracketHighlight.foreground5#5e88c7
  • editorBracketHighlight.foreground6#1a1a1a
  • editorBracketHighlight.unexpectedBracket.foreground#d50000
  • editorBracketPairGuide.activeBackground1#006b1f40
  • editorBracketPairGuide.activeBackground2#2d7c4a40
  • editorBracketPairGuide.activeBackground3#47663b40
  • editorBracketPairGuide.activeBackground4#1976D240
  • editorBracketPairGuide.activeBackground5#5e88c740
  • editorBracketPairGuide.activeBackground6#1a1a1a40
  • editorBracketPairGuide.background1#006b1f20
  • editorBracketPairGuide.background2#2d7c4a20
  • editorBracketPairGuide.background3#47663b20
  • editorBracketPairGuide.background4#1976D220
  • editorBracketPairGuide.background5#5e88c720
  • editorBracketPairGuide.background6#1a1a1a20
  • editorCursor.background#ffffff
  • editorCursor.foreground#1a1a1a
  • editorGroupHeader.tabsBackground#fafafa
  • editorGroupHeader.tabsBorder#d4d4d4
  • editorGutter.addedBackground#006b1fa8
  • editorGutter.deletedBackground#d50000a8
  • editorGutter.modifiedBackground#cc8800a8
  • editorLineNumber.activeForeground#78db8e
  • editorLineNumber.dimmedForeground#d1d5db
  • editorLineNumber.foreground#9ca3af
  • editorMultiCursor.primary.background#ffffff
  • editorMultiCursor.primary.foreground#cc8800
  • editorMultiCursor.secondary.background#ffffff
  • editorMultiCursor.secondary.foreground#cc8800
  • editorOverviewRuler.addedForeground#006b1fa8
  • editorOverviewRuler.deletedForeground#d50000a8
  • editorOverviewRuler.modifiedForeground#cc8800a8
  • focusBorder#ffffff
  • foreground#1a1a1a
  • gitDecoration.addedResourceForeground#006b1fa8
  • gitDecoration.conflictingResourceForeground#ff5722a8
  • gitDecoration.deletedResourceForeground#d50000a8
  • gitDecoration.ignoredResourceForeground#888888a8
  • gitDecoration.modifiedResourceForeground#cc8800a8
  • gitDecoration.submoduleResourceForeground#1976D2a8
  • gitDecoration.untrackedResourceForeground#006b1fa8
  • list.activeSelectionBackground#d4d4d4
  • list.activeSelectionForeground#1a1a1a
  • list.focusBackground#1565C060
  • list.focusForeground#1a1a1a
  • list.hoverBackground#1565C020
  • list.inactiveSelectionBackground#e8e8e8
  • list.inactiveSelectionForeground#1a1a1a
  • menu.background#ffffff
  • menu.border#d4d4d4
  • menu.foreground#1a1a1a
  • menu.selectionBackground#1565C060
  • menu.selectionForeground#1a1a1a
  • panel.background#f8f8f8
  • panel.border#d4d4d4
  • panelTitle.activeBorder#006b1f
  • panelTitle.activeForeground#1a1a1a
  • panelTitle.inactiveForeground#888888
  • selection.background#1565C060
  • sideBar.background#fafafa
  • sideBar.border#d4d4d4
  • sideBar.dropBackground#f0717880
  • sideBar.foreground#777777
  • sideBarActivityBarTop.border#1a1a1a
  • sideBarSectionHeader.background#f8f8f8
  • sideBarSectionHeader.border#d4d4d4
  • sideBarSectionHeader.foreground#777777
  • sideBarStickyScroll.background#f0f0f0
  • sideBarStickyScroll.border#d4d4d4
  • sideBarStickyScroll.shadow#00000020
  • sideBarTitle.background#ffffff
  • sideBarTitle.border#d4d4d4
  • sideBarTitle.foreground#1a1a1a
  • statusBar.background#f8f8f8
  • statusBar.border#d4d4d4
  • statusBar.debuggingBackground#ff5722
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#1a1a1a
  • statusBar.noFolderBackground#f8f8f8
  • tab.activeBackground#eeeeee
  • tab.activeBorder#eeeeee
  • tab.activeForeground#1a1a1a
  • tab.border#d4d4d4
  • tab.inactiveBackground#fafafa
  • tab.inactiveForeground#555555
  • tab.unfocusedActiveBackground#eeeeee
  • tab.unfocusedActiveForeground#555555
  • tab.unfocusedInactiveBackground#fafafa
  • tab.unfocusedInactiveForeground#888888
  • titleBar.activeBackground#f5f5f5
  • titleBar.activeForeground#1a1a1a
  • titleBar.border#d4d4d4
  • titleBar.inactiveBackground#e8e8e8
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b7280italic
variable, string constant.other.placeholder#1a1a1a
constant.other.color#0066CC
invalid, invalid.illegal#d50000
keyword, storage.type, storage.modifier#006b1f
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#1a1a1a
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#1976D2
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#1565C0
meta.block variable.other#2e5a96
support.other.variable, string.other.link#2e5a96
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#424242
string, 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#2d6e3e
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#2e5a96
support.type#cc8800
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#cc8800
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#c53030
variable.language#c53030italic
entity.name.method.js#2e5a96italic
meta.class-method.js entity.name.function.js, variable.function.constructor#2e5a96
entity.other.attribute-name#006b1f
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#b8860bitalic
entity.other.attribute-name.class#b8860b
source.sass keyword.control#2e5a96
markup.inserted#2d6e3e
markup.deleted#c53030
markup.changed#9333ea
string.regexp#0891b2
constant.character.escape#0891b2
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#2e5a96italic
source.js constant.other.object.key.js string.unquoted.label.js#c53030italic
source.json meta.structure.dictionary.json support.type.property-name.json#9333ea
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b8860b
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#d97706
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#c53030
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#8b5a3c
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#2e5a96
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#be185d
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#9333ea
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#2d6e3e
text.html.markdown, punctuation.definition.list_item.markdown#1a1a1a
text.html.markdown markup.inline.raw.markdown#9333ea
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6b7280
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#2d6e3e
markup.italic#be185ditalic
markup.bold, markup.bold string#be185dbold
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#be185dbold
markup.underline#d97706underline
markup.quote punctuation.definition.blockquote.markdown#6b7280
markup.quoteitalic
string.other.link.title.markdown#2e5a96
string.other.link.description.title.markdown#9333ea
constant.other.reference.link.markdown#b8860b
markup.raw.block#9333ea
markup.raw.block.fenced.markdown#9ca3af
punctuation.definition.fenced.markdown#9ca3af
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#1a1a1a
variable.language.fenced.markdown#6b7280
meta.separator#6b7280bold
markup.table#1a1a1a