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—