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#282c34
  • activityBar.foreground#d7dae0
  • debugConsole.errorForeground#e06c75
  • debugConsole.infoForeground#d7dae0
  • debugConsole.warningForeground#ff9632
  • editor.background#282c34
  • editor.foreground#d7dae0
  • editor.lineHighlightBackground#282c34
  • editor.selectionBackground#454545
  • editorCursor.foreground#d7dae0
  • editorGroupHeader.tabsBackground#2c313a
  • editorGutter.addedBackground#3e6a00
  • editorGutter.modifiedBackground#3e6a9d
  • editorHoverWidget.background#2c313a
  • editorIndentGuide.activeBackground1#898989
  • editorLineNumber.foreground#898989
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.selectedBackground#2c313a
  • editorSuggestWidget.selectedForeground#d7dae0
  • editorWidget.background#2c313a
  • focusBorder#d7dae0
  • gitDecoration.modifiedResourceForeground#0ad29a
  • gitDecoration.stageModifiedResourceForeground#0ad29a
  • input.background#282c34
  • inputOption.activeBorder#898989
  • list.activeSelectionForeground#d7dae0
  • list.focusHighlightForeground#ff9632
  • list.focusOutline#d7dae0
  • list.highlightForeground#ff9632
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • menu.background#2c3038f6
  • menu.foreground#d7dae0
  • menu.selectionBackground#5a5d5e4f
  • pickerGroup.foreground#d7dae0
  • quickInput.background#21252b
  • quickInput.foreground#d7dae0
  • quickInputList.focusBackground#2c313a
  • quickInputList.focusForeground#d7dae0
  • selection.background#454545
  • sideBar.background#21252b
  • sideBarSectionHeader.background#282c34
  • statusBar.background#282c34
  • statusBar.foreground#d7dae0
  • statusBar.noFolderBackground#282c34
  • statusBarItem.warningBackground#cc6633
  • tab.border#2c313a
  • tab.inactiveBackground#2c313a
  • textLink.foreground#72bfff
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#d7dae0
  • titleBar.inactiveBackground#282c34

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#2ac9ef
string#fda53d
keyword#e06c75
keyword.operator#e06c75
storage#e06c75
storage.modifier.import, storage.modifier.package#535353
support.function#e06c75
variable.parameter#F9F1A5
constant.numeric#0ad29a
constant.language#0ad29a
constant.other#0ad29aitalic
punctuation.definition.heading#e06c75
text.html.basic meta.tag.sgml.html punctuation.definition.tag.html, text.html.basic meta.tag.sgml.html meta.tag.sgml.doctype.html, text.html.basic meta.tag.sgml.html meta.tag.sgml.doctype.html string.quoted.double.doctype.identifiers-and-DTDs.html#535353
text.html.basic constant.character.entity.html, text.xml constant.character.entity.xml#0ad29a
entity.name.tag#e06c75
meta.tag.start, meta.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.html#e06c75
entity.other.attribute-name#72bfff
meta.selector.css entity.name.tag.css, meta.selector.css entity.other.attribute-name.class.css, meta.selector.css entity.other.attribute-name.id.css, meta.selector.css meta.attribute-selector.css entity.other.attribute-name.attribute.css, meta.selector.css meta.attribute-selector.css string.unquoted.attribute-value.css#e06c75
meta.selector.css meta.attribute-selector.css punctuation.separator.operator.css#e06c75
meta.selector.css entity.other.attribute-name.pseudo-class.css, meta.selector.css entity.other.attribute-name.pseudo-element.css#e06c75
keyword.control.at-rule, meta.at-rule support.type.property-name#72bfff
meta.at-rule support.constant#72bfff
meta.at-rule keyword.operator#e06c75
meta.property-name.css support.type.property-name.css#72bfff
meta.property-value.css#e06c75
meta.property-value.css support.constant, meta.property-value.css support.function, meta.property-value.css variable.parameter.misc.css, meta.property-value.css constant.other.color.rgb-value.css#0ad29a
meta.property-value.css constant.numeric.css, meta.property-value.css constant.numeric.css keyword.other.unit.css, meta.at-rule constant.numeric.css keyword.other.unit.css#72bfff
meta.property-value.css support.constant.color.w3c-standard-color-name.css#e06c75
punctuation.separator.key-value.css, punctuation.terminator.rule.css, punctuation.section.property-list.css#d7dae0
variable.language.js, storage.type.js, storage.type.function.js, meta.function.json.js storage.type.function.js, meta.class.instance.constructor, keyword.operator.new keyword.operator.new.js#e06c75
support.function.js, support.function.ts, support.function.dom.js, support.constant.js, entity.name.function.js, entity.name.function.ts, entity.name.function.tsx, meta.function.json.js variable.parameter.function.js#72bfff
text.xml meta.tag.preprocessor.xml punctuation.definition.tag.begin.xml, text.xml meta.tag.preprocessor.xml entity.name.tag.xml, text.xml meta.tag.preprocessor.xml entity.other.attribute-name.xml, text.xml meta.tag.preprocessor.xml string.quoted.double.xml, text.xml meta.tag.sgml.doctype.xml punctuation.definition.tag.begin.xml, text.xml meta.tag.sgml.doctype.xml keyword.doctype.xml#535353
text.tex.latex constant, text.tex.latex constant.other#e06c75
text.tex.latex string.other.math#72bfff
text.tex.latex string.other.math punctuation.section.group.tex, text.tex.latex string.other.math punctuation.definition.arguments#535353
text.tex.latex meta.function.section.latex entity.name.section.latex#0ad29a
text.tex.latex variable.parameter.function.latex#0ad29aitalic
text.tex.latex constant.other.reference#0ad29a
text.tex.latex meta.preamble.latex support.class.latex#72bfff
source.c++ meta.preprocessor#e06c75
markup.headingbold
markup.boldbold
markup.headingbold
markup.bold,todo.boldbold
markup.bold.markdownbold
entity.name.section#e06c75bold
keyword.other.importantbold
entity.name.type.namespacebold
sublimelinter.mark.error#D02000
sublimelinter.gutter-mark#FFFFFF
sublimelinter.mark.warning#DDB700
markup.deleted.git_gutter#F92672
markup.inserted.git_gutter#A6E22E
markup.changed.git_gutter#967EFB
markup.ignored.git_gutter#565656
markup.untracked.git_gutter#565656
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression#e06c75
meta.template.expression.js, meta.template.expression.ts, meta.template.expression#d7dae0
support.module.node.js, support.type.object.module.js, support.module.node.js#d7dae0
var.this, variable.language.this.js, variable.language.this.ts, variable.language.this.jsx, variable.language.this.tsx#72bfff
function.parameter#F9F1A5
keyword.oper#F9F1A5
keyword.operator.expression.delete, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.expression.typeof, keyword.operator.expression.void#e06c75
support.type.property-name.json#e06c75
keyword.operator.expression.import#e06c75
entity.name.type.namespace#72bfff
entity.name.type#72bfff
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#72bfff
string variable#72bfff
string.other.link.title#72bfff