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#1e2227
  • activityBar.foreground#9da5b4
  • activityBar.inactiveForeground#6b717d88
  • activityBarBadge.background#8780d8
  • activityBarBadge.foreground#080808
  • badge.background#8780d8
  • badge.foreground#080808
  • button.background#2c313a
  • button.foreground#9da5b4
  • button.separator#6B717D65
  • debugToolBar.background#1e2227
  • dropdown.background#1e2227
  • dropdown.border#1e2227
  • dropdown.foreground#9da5b4
  • editor.background#1e2227
  • editor.findMatchBackground#6b717d88
  • editor.findMatchHighlightBackground#6b717d88
  • editor.foreground#9da5b4
  • editor.hoverHighlightBackground#6b717d88
  • editor.lineHighlightBackground#2c313a
  • editor.selectionBackground#6b717d88
  • editorBracketHighlight.foreground1#B6BD7E
  • editorBracketHighlight.foreground2#9e784e
  • editorBracketHighlight.foreground3#4d92a6
  • editorBracketHighlight.foreground4#ef99a0
  • editorBracketHighlight.foreground5#777777
  • editorBracketHighlight.foreground6#8780d8
  • editorBracketHighlight.unexpectedBracket.foreground#E0616C
  • editorCursor.background#8780d8
  • editorCursor.foreground#8780d8
  • editorGroupHeader.tabsBackground#1e2227
  • editorGutter.addedBackground#8780d8
  • editorGutter.deletedBackground#E0616C
  • editorGutter.modifiedBackground#eed49f
  • editorHoverWidget.background#1e2227
  • editorHoverWidget.border#1e2227
  • editorHoverWidget.foreground#9da5b4
  • editorOverviewRuler.addedBackground#8780d8
  • editorOverviewRuler.deletedBackground#E0616C
  • editorOverviewRuler.modifiedBackground#eed49f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWidget.background#1e2227
  • editorWidget.border#1e2227
  • editorWidget.foreground#9da5b4
  • focusBorder#2c313a
  • gitDecoration.deletedResourceForeground#E0616C
  • gitDecoration.ignoredResourceForeground#6b717d88
  • gitDecoration.modifiedResourceForeground#eed49f
  • gitDecoration.stageModifiedResourceForeground#ef99a0
  • gitDecoration.untrackedResourceForeground#65cf86
  • input.background#343a450e
  • input.foreground#9da5b4
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#9da5b4
  • list.activeSelectionIconForeground#9da5b4
  • list.hoverBackground#2c313a
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionIconForeground#9da5b4
  • menu.foreground#9da5b4
  • menu.separatorBackground#343a450e
  • progressBar.background#8780d8
  • scrollbar.shadow#23252c
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#1e2227
  • sideBar.foreground#9da5b4
  • sideBarSectionHeader.background#1e2227
  • sideBarSectionHeader.foreground#9da5b4
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#1e2227
  • statusBar.foreground#9da5b4
  • tab.activeBackground#323842d7
  • tab.activeForeground#9da5b4
  • tab.border#181a1f6c
  • tab.hoverBackground#323842d7
  • tab.hoverForeground#9da5b4
  • tab.inactiveBackground#1e2227
  • tab.inactiveForeground#6b717d88
  • terminal.ansiBlack#6b717d88
  • terminal.ansiBlue#4DADB9
  • terminal.ansiBrightBlack#6b717d88
  • terminal.ansiBrightBlue#4DADB9
  • terminal.ansiBrightCyan#4DADB9
  • terminal.ansiBrightGreen#5D9B5F
  • terminal.ansiBrightMagenta#8780d8
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightWhite#e6e6e6
  • terminal.ansiBrightYellow#CC9343D0
  • terminal.ansiCyan#4DADB9
  • terminal.ansiGreen#5D9B5F
  • terminal.ansiMagenta#8780d8
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#CC9343D0
  • terminal.background#1e2227
  • terminal.foreground#9da5b4
  • terminal.selectionBackground#6b717d88
  • textLink.activeForeground#00f867
  • textLink.foreground#00f86798
  • titleBar.activeBackground#1e2227
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#1e2227
  • titleBar.inactiveForeground#6b717d88

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b717dbebold
variable, string constant.other.placeholder#B6BD7E
constant.other.color#ffffff
invalid, invalid.illegal#E06C75
storage.type, storage.modifier#8780d8
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#9da5b4
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#c84d4d
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#f07178
keyword.control#d19a66
support.type.object.console#9deda0
meta.block variable.other#f07178
support.other.variable, string.other.link#f07178
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#CC9343D0
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#39c264
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#f05a6f
support.type#B2CCD6
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#999EA0
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370
variable.language#FF5370italic
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF
entity.other.attribute-name#CC9343D0
entity.other.attribute-name.id #c84d4d
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#f05a6fitalic
entity.other.attribute-name.class#c84d4d
source.sass keyword.control#82AAFF
markup.inserted#39c264
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#9da5b4
constant.character.escape#9da5b4
*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#c84d4d
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c84d4d
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#c84d4d
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#c84d4d
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#c84d4d
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#c84d4d
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#c84d4d
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#c84d4d
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#c84d4d
support.type.property-name.json punctuation#c84d4d
punctuation.definition.list.begin.markdown#8780d8
punctuation.definition.bold.markdown#CC9343D0
support.type.property-name.json#c84d4d
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#c84d4d
text.html.markdown, punctuation.definition.list_item.markdown#9da5b4
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#9da5b4
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#c84d4d
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#CC9343D0
markup.italic#B6BD7Eitalic
markup.bold, markup.bold string#8780d8bold
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#f07178bold
markup.underline#CC9343D0bold
markup.quote punctuation.definition.blockquote.markdown#9da5b4
markup.quotebold
string.other.link.title.markdown#82AAFF
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#A3071C
markup.raw.block#9da5b4
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#9da5b4
source.java#9da5b4
storage.modifier.import.java,storage.type.java,storage.type.generic.java#8780d8
source.lua#8780d8
variable.language.self.lua#6CDE98C9
keyword.operator.lua#9da5b4
keyword.control.lua#CC9343D0
meta.function.lua#9da5b4
variable.parameter.function.lua#82b5fb
variable.other.lua#B6BD7E
source.python#9da5b4
variable.parameter.function.python, meta.function-call.arguments.python#CC91CED0
meta.function-call.python, meta.function-call.generic.python#9FD1D1
punctuation.python#9da5b4
keyword.control#8780d8