Skip to main content
Coding Theme

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#0066cc
  • activityBar.background#f6f6f6
  • activityBar.border#e5e5e5
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#999999
  • activityBarBadge.background#007acc
  • button.background#0066cc
  • button.foreground#ffffff
  • button.hoverBackground#0052a3
  • dropdown.background#ffffff
  • dropdown.border#e5e5e5
  • editor.background#ffffff
  • editor.findMatchBackground#ffdf5d
  • editor.findMatchHighlightBackground#ffdf5d66
  • editor.foreground#000000
  • editor.lineHighlightBackground#f6f8fa
  • editor.selectionBackground#b3d7ff
  • editor.selectionHighlightBackground#e8f4fd
  • editor.wordHighlightBackground#b3d4fc66
  • editorBracketMatch.background#b3d7ff
  • editorBracketMatch.border#005cc5
  • editorCodeLens.foreground#808080
  • editorCursor.foreground#000000
  • editorError.foreground#d70022
  • editorGroupHeader.tabsBackground#f6f6f6
  • editorHint.foreground#6c6c6c
  • editorIndentGuide.activeBackground#d0d0d0
  • editorIndentGuide.background#f0f0f0
  • editorInfo.foreground#0066cc
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#a0a0a0
  • editorRuler.foreground#d0d0d0
  • editorWarning.foreground#ad9000
  • editorWhitespace.foreground#d0d0d0
  • input.background#ffffff
  • input.border#e5e5e5
  • input.foreground#000000
  • inputOption.activeBorder#0066cc
  • inputValidation.errorBackground#ffffff
  • inputValidation.errorBorder#d70022
  • inputValidation.infoBackground#ffffff
  • inputValidation.infoBorder#0066cc
  • inputValidation.warningBackground#ffffff
  • inputValidation.warningBorder#ad9000
  • list.activeSelectionBackground#0066cc
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#0066cc
  • list.focusForeground#ffffff
  • list.hoverBackground#e6e6e6
  • list.inactiveSelectionBackground#d4d4d4
  • minimap.background#f8f8f8
  • minimapSlider.activeBackground#c0c0c088
  • minimapSlider.background#c0c0c033
  • minimapSlider.hoverBackground#c0c0c044
  • panel.background#f8f8f8
  • panel.border#e0e0e0
  • scrollbarSlider.activeBackground#c0c0c088
  • scrollbarSlider.background#c0c0c033
  • scrollbarSlider.hoverBackground#c0c0c044
  • sideBar.background#f6f6f6
  • sideBar.border#e5e5e5
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#f6f6f6
  • sideBarSectionHeader.foreground#666666
  • sideBarTitle.foreground#333333
  • statusBar.background#f5f5f5
  • statusBar.border#e0e0e0
  • statusBar.debuggingBackground#ffcc02
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#f5f5f5
  • tab.activeBackground#ffffff
  • tab.activeForeground#000000
  • tab.border#e0e0e0
  • tab.inactiveBackground#f0f0f0
  • tab.inactiveForeground#666666
  • terminal.background#ffffff
  • terminal.foreground#000000
  • tree.indentGuidesStroke#d0d0d0
  • tree.tableColumnsBorder#e5e5e5
  • tree.tableOddRowsBackground#f9f9f9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#536579italic
variable, string constant.other.placeholder#24292e
constant.other.color#24292e
invalid, invalid.illegal#f97583
keyword, storage.type, storage.modifier, keyword.control, keyword.operator, keyword.other.import, keyword.other.package#ad3da4
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#d73a49
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#22863a
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, entity.name.function.member, support.function.builtin#4b21b0
meta.block variable.other#24292e
support.other.variable, string.other.link#e36209
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.language.boolean, constant.language.null#272ad8
string, string.quoted, string.quoted.single, string.quoted.double, string.template, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#d12f1b
entity.name, entity.name.class, entity.name.type, entity.name.type.class, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.name.namespace, entity.other.inherited-class#703daa
support.type#005cc5
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#005cc5
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#24292e
variable.language#6f42c1italic
entity.name.method.js#6f42c1italic
meta.class-method.js entity.name.function.js, variable.function.constructor#6f42c1
entity.other.attribute-name#6f42c1
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#6f42c1italic
entity.other.attribute-name.class#6f42c1
source.sass keyword.control#6f42c1
markup.inserted#22863a
markup.deleted#b31d28
markup.changed#e36209
string.regexp#032f62
constant.character.escape#032f62
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6f42c1italic
source.js constant.other.object.key.js string.unquoted.label.js#24292eitalic
source.json meta.structure.dictionary.json support.type.property-name.json#6f42c1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#005cc5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e36209
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d73a49
text.html.markdown, punctuation.definition.list_item.markdown#24292e
text.html.markdown markup.inline.raw.markdown#032f62
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6a737d
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#005cc5
markup.italic#24292eitalic
markup.bold, markup.bold string#24292ebold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#24292ebold
markup.underline#d73a49underline
markup.quote punctuation.definition.blockquote.markdown#6a737d
markup.quoteitalic
string.other.link.title.markdown#005cc5
string.other.link.description.title.markdown#6f42c1
constant.other.reference.link.markdown#032f62
markup.raw.block#6f42c1
markup.raw.block.fenced.markdown#24292e
punctuation.definition.fenced.markdown#24292e
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#032f62
variable.language.fenced.markdown#6a737d
meta.separator#6a737dbold
markup.table#24292e
source.swift storage.type.attribute, source.swift keyword.other.declaration-specifier#ad3da4
source.swift support.type, source.swift entity.name.type#703daa
source.objc meta.preprocessor, source.objcpp meta.preprocessor#ad3da4
source.objc entity.name.type.class, source.objcpp entity.name.type.class#703daa
source.ts entity.name.type, source.tsx entity.name.type, source.js entity.name.type, source.jsx entity.name.type#703daa
source.python entity.name.function.decorator, source.python meta.function.decorator#ad3da4
Xcode Light Theme by yugosdex - VS Code Theme