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#EEF1F0
  • activityBar.border#C8D0CD
  • activityBar.foreground#9E2E37
  • activityBarBadge.background#9E2E37
  • activityBarBadge.foreground#FDFDFC
  • badge.background#9E2E37
  • badge.foreground#FDFDFC
  • button.background#9E2E37
  • button.foreground#FDFDFC
  • button.hoverBackground#9E2E37
  • dropdown.background#FDFDFC
  • dropdown.border#C8D0CD
  • dropdown.foreground#000000
  • editor.background#FDFDFC
  • editor.foreground#000000
  • editor.lineHighlightBackground#EEF1F0CC
  • editor.selectionBackground#E0EBE866
  • editorBracketMatch.background#E0EBE855
  • editorBracketMatch.border#9E2E37
  • editorCursor.foreground#9E2E37
  • editorGroupHeader.tabsBackground#EEF1F0
  • editorIndentGuide.activeBackground#C8D0CD
  • editorIndentGuide.background#C8D0CD88
  • editorLineNumber.activeForeground#3D7168
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#C8D0CD66
  • focusBorder#C8D0CD
  • foreground#000000
  • gitDecoration.deletedResourceForeground#9B2730
  • gitDecoration.modifiedResourceForeground#A07622
  • gitDecoration.untrackedResourceForeground#376C56
  • input.background#FDFDFC
  • input.border#C8D0CD
  • input.foreground#000000
  • inputOption.activeBorder#9E2E37
  • list.activeSelectionBackground#E0EBE8
  • list.activeSelectionForeground#000000
  • list.focusOutline#9E2E37
  • list.hoverBackground#FDFDFC
  • list.inactiveSelectionBackground#E0EBE8
  • minimap.selectionHighlight#E0EBE8AA
  • panel.background#EEF1F0
  • panel.border#C8D0CD
  • peekView.border#C8D0CD
  • peekViewEditor.background#FDFDFC
  • peekViewTitle.background#EEF1F0
  • scrollbarSlider.activeBackground#9E2E37AA
  • scrollbarSlider.background#C8D0CD66
  • scrollbarSlider.hoverBackground#C8D0CD99
  • sideBar.background#F8F8F6
  • sideBar.border#C8D0CD
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#EEF1F0
  • statusBar.border#C8D0CD
  • statusBar.foreground#000000
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#000000
  • tab.border#C8D0CD
  • tab.inactiveBackground#E0EBE8
  • tab.inactiveForeground#3D7168
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3D7168
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#3D7168
  • terminal.ansiMagenta#9E2E37
  • terminal.ansiRed#9E2E37
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#E0EBE8
  • terminal.background#FDFDFC
  • terminal.foreground#000000
  • titleBar.activeBackground#EEF1F0
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F8F8F6
  • titleBar.inactiveForeground#000000
  • widget.shadow#6C787F55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6C787Fitalic
string, constant.other.symbol, string.regexp, string.template#3D7168
constant.character.escape#9E2E37
constant.numeric#9E2E37
constant.language.boolean, constant.language.null, constant.language.undefined#9E2E37
constant, entity.name.constant, support.constant#9E2E37
keyword, storage.type, storage.modifier, storage.type.function#9E2E37
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#9E2E37
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#6C787F
storage.type.class, storage.type.interface, storage.type.enum#9E2E37
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#6C787F
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#3D7168
support.type.builtin, entity.name.type.primitive#3D7168
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#2C333A
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#9E2E37
variable.parameter, variable.parameter.function#2C333A
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#3D7168
variable, meta.definition.variable, variable.other.readwrite#2C333A
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#9E2E37
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#6C787F
entity.other.attribute-name, entity.other.attribute-name.html#3D7168
support.class.component, entity.name.tag.template.value#9E2E37
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#376C56
entity.other.attribute-name.class.css, entity.other.attribute-name.class#9E2E37
entity.other.attribute-name.id.css, entity.other.attribute-name.id#9E2E37
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#3D7168
markup.heading#9E2E37bold
markup.boldbold
markup.italicitalic
markup.quote#2C333A
markup.inline.raw, markup.fenced_code#3D7168
invalid, invalid.illegal#C22929