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.headingbold
markup.boldbold
markup.headingbold
markup.bold,todo.boldbold
markup.bold.markdownbold
entity.name.sectionbold
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#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