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#23788b27
  • activityBar.foreground#00a4c8
  • activityBarBadge.background#196292
  • button.background#00a4c8
  • button.foreground#EEFFFF
  • button.hoverBackground#196292
  • dropdown.background#343534
  • editor.background#202020
  • editor.findMatchBackground#00a4c8
  • editor.findMatchBorder#00a3c827
  • editor.foreground#bbbbbb
  • editor.selectionHighlightBackground#3d7e6d
  • editor.selectionHighlightBorder#3d7e6d
  • editorGroup.border#00a3c827
  • editorGroup.dropBackground#00a3c827
  • editorGroupHeader.border#00a3c827
  • editorGroupHeader.tabsBackground#343534
  • editorGroupHeader.tabsBorder#00a3c827
  • editorLineNumber.foreground#00a3c88a
  • editorWidget.background#343534
  • focusBorder#00a4c8
  • gitDecoration.addedResourceForeground#00a3c8
  • gitDecoration.conflictingResourceForeground#82aaff
  • gitDecoration.deletedResourceForeground#fc4c87dc
  • gitDecoration.ignoredResourceForeground#e06e94
  • gitDecoration.modifiedResourceForeground#00a3c8b0
  • gitDecoration.untrackedResourceForeground#91DACD
  • list.activeSelectionBackground#00a3c85e
  • list.dropBackground#00a3c81f
  • list.focusBackground#00a3c8
  • list.hoverBackground#00a3c827
  • menu.background#343534
  • minimap.background#343534
  • panel.background#232323
  • panel.border#00a3c827
  • panelTitle.activeForeground#EEFFFF
  • peekView.border#00a4c8
  • peekViewEditor.background#272727
  • scrollbarSlider.activeBackground#00a3c827
  • scrollbarSlider.background#084d8180
  • sideBar.border#00a3c827
  • sideBarSectionHeader.border#00a4c8
  • sideBarSectionHeader.foreground#00a4c8
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#00a3c869
  • statusBar.debuggingBackground#3d7e6d
  • statusBar.noFolderBackground#343534
  • tab.activeBackground#00a3c849
  • tab.activeBorderTop#00a4c8
  • tab.activeForeground#ffffff
  • tab.hoverBorder#00a4c8
  • tab.inactiveBackground#031e2449
  • terminal.border#00a4c8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#546E7A
punctuation#49CCE9
keyword.package.go, keyword.import.go, keyword.function.go#fc4c87dc
source.go, entity.name.package.go#F7ECB5
source.makefile, meta.scope.recipe.makefile, fenced_code.block.language.markdown#F7ECB5
markup.bold.markdown, markup.italic.markdown#91DACD
markup.quote.markdown#fc4c87dc
meta.embedded.block.shellscript, markup.bold.markdown, markup.italic.markdown#91DACD
entity.name.function.target.makefile, meta.scope.target.makefile, source.makefile#91DACD
variable, string constant.other.placeholder, variable.other.constant, meta.block variable.other, constant.other.color#ffffff
invalid, invalid.illegal#FF5370
storage.type, storage.modifier, entity.name.tag, entity.name.module.js, variable.import.parameter.js, variable.other.class.js, meta.export.default.tsx, keyword.operator.expression.instanceof, storage.modifier, keyword.operator.expression.typeof#fc4c87
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution, keyword.operator.assignment, keyword.operator.type#25b1f3
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded#FFFFFF
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.type.annotation, meta.type.declaration, meta.return.type, meta.var-single-variable#49cce9
support.other.variable, string.other.link, variable.parameter, variable.other.object#EEFFFF
constant.numeric, constant.character, constant.escape, keyword.other, constant.language.boolean.false, constant.language.null.js.jsx, constant.language.null.js, constant.language.null.tsx, constant.language.null.ts, constant.language.undefined.tsx, constant.language.undefined.ts, constant.language.undefined.js.jsx, constant.language.undefined.js#FF82B4
keyword.other.unit, support.constant#FF82B4
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, variable.other.object.property, variable.other.object.property, variable.other.object.property, variable.other.object.property, constant.language.boolean.true#91DACD
meta.object-literal.key, meta.object-binding-pattern-variable, variable.other.object.property, variable.other.property#F7ECB5
meta.field.declaration, support.class, markup.changed.git_gutter, entity.other.inherited-class, support.type.sys-types#83f0cc
meta.type.parameters, meta.type.declaration.ts, entity.name.type.interface, entity.other.inherited-class#ffffff
support.type.primitive, support.variable.property#98a1df
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#7FDBCA
variable.language#7FDBCA
meta.tag, meta.var.expr, keyword.operator.comparison, entity.name.method.js#98a1df
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF
entity.other.attribute-name#F7ECB5
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
entity.other.attribute-name.class#F7ECB5
source.sass keyword.control#82AAFF
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#89DDFF
constant.character.escape#89DDFF
*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#52E7E1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F7ECB5
punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown#82b1ff
text.html.markdown, punctuation.definition.list_item.markdown#EEFFFF
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#80aefc
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
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#ff869aunderline
markup.inline.raw.string.markdown#45c2de
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#45c2de
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#FFCB6B
markup.raw.block#C792EA
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#EEFFFF