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#111110
  • activityBar.foreground#E8E8E0
  • badge.background#6B7C4E
  • badge.foreground#FFFFFF
  • button.background#6B7C4E
  • button.foreground#FFFFFF
  • dropdown.background#242422
  • dropdown.foreground#E8E8E0
  • editor.background#1C1C1A
  • editor.foreground#E8E8E0
  • editor.lineHighlightBackground#242422
  • editor.selectionBackground#3A3A32
  • editorBracketMatch.background#3A3A3240
  • editorBracketMatch.border#8B9B6B
  • editorCursor.foreground#6B7C4E
  • editorLineNumber.activeForeground#8B9B6B
  • editorLineNumber.foreground#4A4A44
  • input.background#242422
  • input.border#3A3A32
  • input.foreground#E8E8E0
  • list.activeSelectionBackground#3A3A32
  • list.hoverBackground#2A2A28
  • panel.background#161614
  • sideBar.background#161614
  • sideBar.foreground#C8C8C0
  • sideBarTitle.foreground#8B9B6B
  • statusBar.background#4A5535
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#1C1C1A
  • tab.activeForeground#FFFFFF
  • tab.inactiveBackground#161614
  • terminal.background#1C1C1A
  • terminal.foreground#E8E8E0
  • titleBar.activeBackground#1C1C1A
  • titleBar.activeForeground#E8E8E0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5A50italic
string, string.quoted, string.template, string.interpolated#8B9B6B
constant.character.escape, string.regexp#B8C89A
punctuation.definition.template-expression, punctuation.section.embedded#FFFFFF
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#B8C89A
constant.language, support.constant, constant.language.boolean, constant.language.null, constant.language.undefined#B8C89A
keyword, keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#FFFFFFbold
storage.type, storage.modifier, keyword.control.def, keyword.control.class#FFFFFFbold
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison#C8C8B8
entity.name.function, meta.function entity.name.function#A8B888
meta.function-call entity.name.function, variable.function, support.function, meta.method-call entity.name.function, entity.name.function.call#A8B888
support.function.builtin, support.function.magic, meta.function-call support.function#A8B888
meta.method-call, variable.function.member#A8B888
entity.name.type, entity.name.class, support.type, support.class, entity.name.type.class#6B7C4E
entity.other.inherited-class#6B7C4Eitalic
entity.name.type.interface, entity.name.type.parameter, entity.name.type.enum#7A8B5A
variable, variable.other, variable.other.readwrite#E8E8E0
variable.parameter, variable.parameter.function#C8C8B8
variable.other.property, variable.other.object.property, meta.object-literal.key, support.variable.property#A8B888
variable.language, variable.language.this, variable.language.self, variable.language.special#FFFFFFitalic
meta.decorator, entity.name.function.decorator, punctuation.definition.decorator, meta.annotation#6B7C4E
keyword.control.import, keyword.control.export, keyword.control.from, keyword.other.import#FFFFFF
entity.name.import, entity.name.package, support.module#8B9B6B
entity.name.tag, punctuation.definition.tag#FFFFFF
entity.other.attribute-name#8B9B6B
support.type.property-name, meta.property-name#A8B888
support.constant.property-value, meta.property-value#8B9B6B
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6B7C4E
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator#6A6A60
markup.heading, entity.name.section#FFFFFFbold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code#8B9B6B