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#202020
  • activityBar.border#646464
  • activityBar.foreground#dedede
  • editor.background#3f3f3f
  • editor.foreground#dcdccc
  • editor.lineHighlightBackground#101010
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#585858
  • editor.selectionHighlightBackground#00ff0064
  • editorBracketHighlight.foreground1#9f9d6d
  • editorBracketHighlight.foreground2#9f9d6d
  • editorBracketHighlight.foreground3#9f9d6d
  • editorBracketHighlight.foreground4#9f9d6d
  • editorBracketHighlight.foreground5#9f9d6d
  • editorBracketHighlight.foreground6#9f9d6d
  • editorBracketMatch.background#3f3f3f
  • editorBracketMatch.border#00000000
  • editorCursor.foreground#8faf9f
  • editorGroupHeader.tabsBackground#202020
  • editorGutter.background#0c0c0c
  • editorIndentGuide.activeBackground#f0f9f9
  • editorIndentGuide.background#4f5f5f
  • editorLineNumber.activeForeground#8a8a8a
  • editorLineNumber.dimmedForeground#8a8a8a
  • editorLineNumber.foreground#8a8a8a
  • foreground#ffffff
  • list.activeSelectionBackground#626262
  • list.focusOutline#4d4d4d
  • list.hoverBackground#4d4d4d
  • list.inactiveSelectionBackground#333333
  • selection.background#585858
  • sideBar.background#3f3f3f
  • sideBar.border#646464
  • sideBarSectionHeader.background#00000000
  • statusBar.background#202020
  • statusBar.border#646464
  • statusBar.debuggingBackground#202020
  • statusBar.foreground#e0e0e0
  • statusBar.noFolderBackground#202020
  • tab.activeBackground#414141
  • tab.activeBorderTop#80d4b2
  • tab.border#646464
  • tab.inactiveBackground#202020
  • tab.inactiveForeground#7f7f7f
  • titleBar.activeBackground#202020
  • tree.indentGuidesStroke#6d6d6d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7f9f7fitalic bold
comment.documentation, comment.block.documentation, comment.line.double-slash.documentation, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc#7f9f7fitalic
keyword, constant.language, storage.modifier.extends, storage.type.namespace, variable.language, keyword.operator.delete, storage.type.js#dfc47dbold
storage.type, storage.modifier, keyword.other.package#cedf99bold
constant.numeric#8cd0d3
string.quoted.double, string.template#cc9393
string.quoted.single#dca3a3
string.quoted.double.xml, string.quoted.double.html#c89191
string.templateitalic bold
punctuation.bracket, punctuation.separator, punctuation.terminator, punctuation.section, keyword.operator, storage.type.function.arrow#9f9d6dbold
punctuation.separator.key-value#dcdcccbold
punctuation.definition.parameters, punctuation.definition.end, punctuation.definition.block, punctuation.definition.begin, meta.brace.round, meta.brace.square#00ff00bold
keyword.control.directive, meta.preprocessor#ffcfaf
keyword.other.documentation.javadoc.java#7f9f7fitalic
storage.type.java, storage.type.generic.java, storage.type.annotation, storage.modifier.import, storage.modifier.package#dcdcdc
meta.tag.metadata.doctype#dcdccc
meta.tag.structure, meta.tag.metadata#e3ceab
string.quoted.double.htmlbold
entity.other.attribute-name.html, punctuation.separator.namespace#dfdfdfbold
entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml, entity.other.attribute-name.namespace.xml, punctuation.separator.namespace#bec89ebold
entity.name.tag, entity.name.tag.localname.xml, punctuation.definition.tag#e3ceab
meta.tag.preprocessor#7f9f7f
support.type.property-name.json#cedf99
string.quoted.double.json#dcdccc
constant.language.json#dfc47dbold
constant.language.register#dfc47d
meta.property-value, keyword.other.unit.px, keyword.other.unit.percentage, constant.numeric.css#8cd0d3bold
support.type.property-name.css#c2be9ebold
keyword.other.unit#8cd0d3bold
string.quoted.single.css, string.quoted.double.css#808080
entity.other.attribute-name.class#cedf99
entity.other.attribute-name.id, entity.other.attribute-name.pseudo-class#cedf99bold
punctuation.definition.entity.css, punctuation.separator.key-value.css, punctuation.definition.keyword.css#9f9d6dbold
keyword.operator.logical.only.media.css, keyword.operator.logical.and.media.css, keyword.control.at-rule.media.css, meta.at-rule.media.header.css#e3c00bbold
keyword.operator.pattern.css#dcdcccbold
storage.type.function#dfc47dbold
markup.heading.markdown#ff8040bold
markup.list.unnumbered.markdown#e3ceabitalic
punctuation.definition.link.description, string.other.link.description.markdown#edd6editalic
markup.bold.markdown#e3ceabbold
entity.name.function.python, support.function.magic.python#cedf99
string.quoted.docstring.multi.python#7f9f7f
constant.language.python, variable.language.special.self.python#dcdccc
support.function.builtin.shell#e3ceabbold

Shiki preview

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

Loading...