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#fff
  • activityBar.foreground#101c32
  • debugConsole.errorForeground#c1121f
  • debugConsole.infoForeground#101c32
  • debugConsole.warningForeground#ff9632
  • diffEditor.insertedLineBackground#c6f0c233
  • diffEditor.insertedTextBackground#c6f0c240
  • diffEditor.removedLineBackground#fbdfe14d
  • editor.background#fff
  • editor.findMatchBackground#c6f0c2
  • editor.findMatchHighlightBackground#c6f0c24d
  • editor.findMatchHighlightBorder#219ebc
  • editor.foreground#101c32
  • editor.lineHighlightBackground#fff
  • editor.selectionBackground#add6ff69
  • editor.snippetTabstopHighlightBackground#d0d7de69
  • editor.wordHighlightBackground#add6ff26
  • editor.wordHighlightStrongBackground#add6ff26
  • editorCursor.foreground#101c32
  • editorIndentGuide.activeBackground1#bbbbbb
  • editorIndentGuide.background1#d0d7de69
  • editorLineNumber.foreground#bbbbbb
  • editorLink.activeForeground#FF6AC1
  • editorSuggestWidget.background#f6f8fa
  • editorSuggestWidget.selectedBackground#d0d7de69
  • editorSuggestWidget.selectedForeground#101c32
  • gitDecoration.addedResourceForeground#006d77
  • gitDecoration.modifiedResourceForeground#c1121f
  • gitDecoration.stageModifiedResourceForeground#006d77
  • list.activeSelectionBackground#add6ff69
  • list.activeSelectionForeground#101c32
  • list.focusOutline#219ebc
  • list.hoverBackground#add6ff26
  • list.inactiveSelectionBackground#d0d7de69
  • minimap.selectionHighlight#d0d7de69
  • quickInput.background#f6f8fa
  • quickInputList.focusBackground#d0d7de69
  • quickInputList.focusForeground#101c32
  • searchEditor.findMatchBackground#c6f0c2
  • sideBar.background#f6f8fa
  • sideBarSectionHeader.background#d0d7de69
  • statusBar.background#fff
  • statusBar.foreground#101c32
  • statusBar.noFolderBackground#fff
  • statusBarItem.warningBackground#cc6633
  • titleBar.activeBackground#fff
  • titleBar.activeForeground#101c32
  • titleBar.inactiveBackground#fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#219ebc—
string#c1121f—
keyword#386ac3—
keyword.operator#386ac3—
storage#386ac3—
storage.modifier.import, storage.modifier.package#535353—
support.function#386ac3—
variable.parameter#FF5C57—
constant.numeric#57C7FF—
constant.language#FF6AC1—
constant.other#FF6AC1italic
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#FF6AC1—
entity.name.tag#386ac3—
meta.tag.start, meta.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.html#386ac3—
entity.other.attribute-name#8431c5—
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#386ac3—
meta.selector.css meta.attribute-selector.css punctuation.separator.operator.css#535353—
meta.selector.css entity.other.attribute-name.pseudo-class.css, meta.selector.css entity.other.attribute-name.pseudo-element.css#535353—
keyword.control.at-rule, meta.at-rule support.type.property-name#8431c5—
meta.at-rule support.constant#57C7FF—
meta.at-rule keyword.operator#386ac3—
meta.property-name.css support.type.property-name.css#8431c5—
meta.property-value.css#535353—
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#FF6AC1
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#57C7FF—
meta.property-value.css support.constant.color.w3c-standard-color-name.css#386ac3—
punctuation.separator.key-value.css, punctuation.terminator.rule.css, punctuation.section.property-list.css#535353—
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#386ac3—
support.function.js, support.function.ts, support.function.dom.js, support.constant.js, entity.name.function.js, entity.name.function.ts, meta.function.json.js variable.parameter.function.js#FF6AC1—
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#386ac3
text.tex.latex string.other.math#57C7FF—
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#FF6AC1—
text.tex.latex variable.parameter.function.latex#FF6AC1italic
text.tex.latex constant.other.reference#FF6AC1
text.tex.latex meta.preamble.latex support.class.latex#57C7FF—
source.c++ meta.preprocessor#386ac3—
markup.heading—bold
markup.bold—bold
markup.heading—bold
markup.bold,todo.bold—bold
markup.bold.markdown—bold
entity.name.section—bold
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#386ac3—
meta.template.expression.js, meta.template.expression.ts, meta.template.expression#000000—
support.module.node.js, support.type.object.module.js, support.module.node.js#000000—
var.this, variable.language.this.js, variable.language.this.ts, variable.language.this.jsx, variable.language.this.tsx#4671bb—
function.parameter#FF5C57—
keyword.oper#FF5C57—
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#386ac3—
support.type.property-name.json#386ac3—
keyword.operator.expression.import#386ac3—
entity#FF6AC1—
entity.name.type.namespace#5978f3—
entity.name.type#163fe4—
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#163fe4—
string variable#353535—
viida by viida - VS Code Theme