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#ffffff
  • activityBar.border#f0f0f0
  • activityBar.foreground#000000
  • editor.background#ffffff
  • editor.foreground#000000
  • editor.lineHighlightBackground#e8e8ff
  • editor.lineHighlightBorder#e8e8ff
  • editor.selectionBackground#c0c0c0
  • editor.selectionHighlightBackground#00ff0064
  • editorBracketHighlight.foreground1#000080
  • editorBracketHighlight.foreground2#000080
  • editorBracketHighlight.foreground3#000080
  • editorBracketHighlight.foreground4#000080
  • editorBracketHighlight.foreground5#000080
  • editorBracketHighlight.foreground6#000080
  • editorBracketMatch.background#ffffff
  • editorBracketMatch.border#00000000
  • editorCursor.foreground#8000ff
  • editorGroupHeader.tabsBackground#f0f0f0
  • editorGutter.background#e4e4e4
  • editorIndentGuide.activeBackground#ff0000
  • editorIndentGuide.background#c0c0c0
  • editorLineNumber.activeForeground#808080
  • editorLineNumber.foreground#808080
  • list.activeSelectionBackground#cce8ff
  • list.activeSelectionForeground#000000
  • list.focusOutline#00000000
  • list.hoverBackground#e5f3ff
  • list.inactiveSelectionBackground#d9d9d9
  • selection.background#c0c0c0
  • sideBar.background#ffffff
  • sideBar.border#000000
  • sideBarSectionHeader.background#00000000
  • sideBarTitle.foreground#000000
  • statusBar.background#f0f0f0
  • statusBar.border#000000
  • statusBar.debuggingBackground#f0f0f0
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#f0f0f0
  • tab.activeBackground#f0f0f0
  • tab.activeBorderTop#faaa3c
  • tab.border#00000000
  • tab.inactiveBackground#c0c0c0
  • tab.inactiveForeground#808080
  • titleBar.activeBackground#ffffff
  • tree.indentGuidesStroke#6d6d6d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#008000
comment.documentation, comment.block.documentation, comment.block.javadoc, comment.line.double-slash.documentation, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc#008080
keyword, constant.language, storage.modifier.extends, storage.type.namespace.directive, variable.language, keyword.operator.delete#0000ffbold
storage.modifier.import, storage.modifier.package#000000
constant.numeric#ff8000
string.quoted.double, string.quoted.single#808080
string.quoted.double.xml, string.quoted.double.html#8000ffbold
string.template#000080
punctuation.bracket, punctuation.separator, punctuation.terminator, punctuation.section, punctuation.definition.parameters, punctuation.definition.begin, punctuation.definition.end, punctuation.definition.block, keyword.operator, meta.brace.round, meta.brace.square, storage.type.function.arrow#000080bold
keyword.control.directive, meta.preprocessor#804000
storage.modifier, keyword.other.package, storage.type#8000FF
storage.type.java, storage.type.generic.java, storage.type.annotation#000000
entity.other.attribute-name, punctuation.separator.namespace#FF0000
entity.name.tag, meta.tag#0000FF
meta.tag.preprocessor#FF0000
support.type.property-name.json#8000ff
string.quoted.double.json#800000
constant.language.json#18af8abold
constant.language.register#8080ff
entity.other.attribute-name.pseudo-class#ff8000bold
meta.property-value, keyword.other.unit.px, keyword.other.unit.percentage, constant.numeric.css#000000bold
support.type.property-name.css#8080c0bold
punctuation.separator.key-value.html#000000
storage.type.function, storage.type.js#0000ffbold
markup.heading.markdown#ff8000bold
markup.list.unnumbered.markdown#000080italic
punctuation.definition.link.description, string.other.link.description.markdown#8000ffitalic
constant.language.python, support.function.builtin.python#880088bold
entity.name.function.python, support.function.magic.python#ff00ff
string.quoted.docstring.multi.python#ff8000
constant.numeric.dec.python, constant.numeric.float.python#ff0000
support.function.builtin.shell#0000ffbold

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...