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.heading—bold
markup.bold—bold
markup.heading—bold
markup.bold,todo.bold—bold
markup.bold.markdown—bold
entity.name.section#e06c75bold
keyword.other.important—bold
entity.name.type.namespace—bold
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—