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.activeBorder#00b8d450
  • activityBar.background#20292e
  • activityBar.dropBackground#00b8d450
  • activityBar.foreground#a7b6b8
  • activityBarBadge.background#00b8d45b
  • debugToolBar.background#232e33
  • diffEditor.insertedTextBackground#00ff001a
  • diffEditor.removedTextBackground#ff00001a
  • dropdown.background#20292e
  • editor.background#263238
  • editor.findMatchBackground#00b8d420
  • editor.findMatchBorder#00b8d410
  • editor.findMatchHighlightBackground#00b8d440
  • editor.findMatchHighlightBorder#00b8d410
  • editor.foreground#ECEFF1
  • editor.lineHighlightBackground#212b30
  • editor.rangeHighlightBackground#00b8d420
  • editor.selectionBackground#3b4d56
  • editorBracketMatch.background#354044
  • editorBracketMatch.border#FF000000
  • editorCodeLens.foreground#20292e
  • editorCursor.foreground#80deea
  • editorGroup.dropBackground#00b8d430
  • editorGroupHeader.tabsBackground#232e33
  • editorLineNumber.foreground#78909c
  • editorOverviewRuler.addedForeground#8BC34A
  • editorOverviewRuler.deletedForeground#EF5350
  • editorOverviewRuler.modifiedForeground#1DE9B6
  • editorSuggestWidget.background#29363d
  • editorSuggestWidget.border#29363d
  • editorSuggestWidget.foreground#e6f5f3
  • editorSuggestWidget.highlightForeground#e6f5f3
  • editorSuggestWidget.selectedBackground#00b8d450
  • editorWhitespace.foreground#4F5B62
  • editorWidget.background#232e33
  • editorWidget.border#29363d
  • focusBorder#2c383d
  • gitDecoration.conflictingResourceForeground#FF8A80ff
  • gitDecoration.deletedResourceForeground#EF5350
  • gitDecoration.ignoredResourceForeground#6a777a
  • gitDecoration.modifiedResourceForeground#e6f5f3
  • gitDecoration.untrackedResourceForeground#ccff90
  • input.background#20292e
  • input.foreground#ffffff
  • input.placeholderForeground#717e82
  • list.activeSelectionBackground#dff5f330
  • list.activeSelectionForeground#dff5f3
  • list.dropBackground#00b8d450
  • list.focusBackground#00b8d420
  • list.highlightForeground#eeffff
  • list.hoverBackground#2c383d
  • list.hoverForeground#a7b6b8
  • list.inactiveFocusBackground#00b8d450
  • list.inactiveSelectionBackground#2c383d
  • list.inactiveSelectionForeground#dff5f3
  • minimapGutter.addedBackground#8BC34A
  • minimapGutter.deletedBackground#EF5350
  • minimapGutter.modifiedBackground#1DE9B6
  • panel.background#273237
  • panel.border#232e33
  • panelTitle.activeBorder#00b8d450
  • peekView.border#00B8D4
  • peekViewEditor.background#20292e
  • peekViewEditor.matchHighlightBackground#00b8d420
  • peekViewEditor.matchHighlightBorder#00b8d420
  • peekViewResult.background#20292e
  • peekViewResult.matchHighlightBackground#00b8d420
  • peekViewTitle.background#20292e
  • pickerGroup.border#00b8d450
  • pickerGroup.foreground#00b8d450
  • scrollbar.shadow#263238
  • scrollbarSlider.activeBackground#a7b6b8
  • scrollbarSlider.background#20292e
  • scrollbarSlider.hoverBackground#20292ebf
  • sideBar.background#232e33
  • sideBar.foreground#a7b6b8
  • sideBarSectionHeader.background#20292e
  • sideBarSectionHeader.foreground#a7b6b8
  • sideBarTitle.foreground#a7b6b8
  • statusBar.background#20292e
  • statusBar.debuggingBackground#1DE9B6
  • statusBar.debuggingForeground#20292e
  • statusBar.foreground#a7b6b8
  • tab.activeBackground#232e33
  • tab.activeBorder#00b8d450
  • tab.activeForeground#eceff1
  • tab.border#232e33
  • tab.inactiveBackground#232e33
  • tab.inactiveForeground#a1b0b2
  • terminal.ansiBlack#313131
  • terminal.ansiBlue#4fb6f7
  • terminal.ansiBrightBlack#708284
  • terminal.ansiBrightBlue#4fb6f7
  • terminal.ansiBrightCyan#00b9cc
  • terminal.ansiBrightGreen#cddc39
  • terminal.ansiBrightMagenta#e23673
  • terminal.ansiBrightRed#ff5d4e
  • terminal.ansiBrightWhite#e6e5e5
  • terminal.ansiBrightYellow#ffcb43
  • terminal.ansiCyan#00b9cc
  • terminal.ansiGreen#cddc39
  • terminal.ansiMagenta#e23673
  • terminal.ansiRed#ff5d4e
  • terminal.ansiWhite#e6e5e5
  • terminal.ansiYellow#ffcb43
  • terminal.background#263238
  • terminal.foreground#eceff1
  • titleBar.activeBackground#20292e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ECEFF1
comment#4F5B62
string#1DE9B6
constant.numeric#64FFDA
constant.language, meta.preprocessor
constant.character, constant.other
variable.language, variable.other#00B8D4
keyword#62ebff
storage#ff4081 bold
storage.type#66D9EF
entity.name.class#C6FF00
entity.other.inherited-class#C6FF00
entity.name.function#FF8A80
variable.parameter#1DE9B6
entity.name.tag#00B8D4
entity.other.attribute-name#FF8A80
support.function#FF8A80
support.constant#66D9EF
support.type, support.class#66D9EF
support.other.variable
string constant#66d9ef
string.regexp
string variable#1DE9B6
punctuation.definition.variable#1DE9B6
entity#C6FF00
meta.tag.sgml.doctype.xml, declaration.sgml.html declaration.doctype, declaration.sgml.html declaration.doctype entity, declaration.sgml.html declaration.doctype string, declaration.xml-processing, declaration.xml-processing entity, declaration.xml-processing string, doctype#c8cecc
comment.block.html#4F5B62
entity.name.tag.script.html#FF4A52
text.html.basic meta.tag.other.html, text.html.basic meta.tag.any.html, text.html.basic meta.tag.block.any, text.html.basic meta.tag.inline.any, text.html.basic meta.tag.structure.any.html, text.html.basic source.js.embedded.html, punctuation.separator.key-value.html
text.html.basic entity.other.attribute-name.html
text.html.basic meta.tag.structure.any.html punctuation.definition.string.begin.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#1DE9B6
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#78909C
variable.parameter.handlebars#64FFDA
support.constant.handlebars, meta.function.block.start.handlebars#66d9ef
meta.preprocessor.at-rule keyword.control.at-rule#FF8A80
meta.selector.css entity.other.attribute-name.id#00E5FF
entity.other.attribute-name.id#FF8A80
meta.selector.css entity.other.attribute-name.class#00B8D4
support.type.property-name.css#FF8A80
meta.constructor.argument.css#64FFDA
punctuation.section.property-list.css#78909C
punctuation.definition.tag.css#ECEFF1
punctuation.separator.key-value.css, punctuation.terminator.rule.css#78909C
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-selector.css#1DE9B6
variable.other.less#ECEFF1
entity.other.less.mixin#64FFDA
entity.other.attribute-name.pseudo-element.less#FF4A52
meta.instance.constructor meta.function-call.constructor.js#C6FF00
meta.template.expression.js punctuation.definition.template-expression.begin.js, meta.template.expression.js punctuation.definition.template-expression.end.js, meta.template.expression.js punctuation.accessor#1DE9B6
meta.function.js, entity.name.function.js, support.function.dom.js#FF8A80
source.js meta.function.js punctuation.separator.parameter.function.js#CFD8DC
meta.property.object.js, keyword.operator.accessor.js#CFD8DC
source.js meta.group.braces.curly constant.other.object.key.js punctuation.separator.key-value.js#CFD8DC
source.js meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#1DE9B6
support.type.object.module.js, source.js meta.function.declaration.js support.class.js#66d9ef
support.type.object.module.js support.type.object.module.js#C6FF00
storage.type.js#66D9EF
text.html.basic source.js.embedded.html#1DE9B6
storage.type.function.js#ff8a80
constant.numeric.js#1DE9B6
variable.language.arguments.js, variable.language.super.js, variable.language.this.js, variable.language.self.js, variable.language.proto.js, variable.language.constructor.js, variable.language.prototype.js#0097a7
meta.brace.square.js#78909C
meta.brace.round, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js, punctuation.definition.group#CFD8DC
meta.brace.curly, meta.objectliteral.js, punctuation.definition.block.js#CFD8DC
meta.structure.dictionary.json string.quoted.double.json#1DE9B6
punctuation.section.embedded.coffee
support.function.builtin.shell#C6FF00
variable.other.normal.shell#00E5FF
source.shell#ECEFF1
meta.scope.for-in-loop.shell, variable.other.loop.shell#FF8A80
entity.name.function.shell#FF8A80
punctuation.definition.string.end.shell, punctuation.definition.string.begin.shell#E91E63
meta.scope.case-block.shell, meta.scope.case-body.shell#FF4A52
punctuation.definition.logical-expression.shell#FFFFFF
comment.line.number-sign.shell#78909C
markup.deleted.git_gutter#E91E63
markup.inserted.git_gutter#C6FF00
markup.changed.git_gutter#00B8D4
markup.ignored.git_gutter#78909C
markup.untracked.git_gutter#4F5B62
meta.property-value.css constant.other.color.rgb-value.css#64FFDA
meta.property-value.css keyword.other.unit.css#1DE9B6
source.css meta.selector.css entity.other.attribute-name.class.css punctuation.definition.entity.css#78909C