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#eaeeec
  • activityBar.border#c4d5ca
  • activityBar.foreground#008e33
  • activityBar.inactiveForeground#5ca678
  • activityBarBadge.background#552746
  • activityBarBadge.foreground#f7f7f7
  • badge.background#008e33
  • badge.foreground#00270e
  • breadcrumb.activeSelectionForeground#00270e
  • breadcrumb.focusForeground#00270e
  • breadcrumb.foreground#5ca678
  • button.background#008e33
  • button.foreground#00270e
  • button.hoverBackground#00802e
  • button.secondaryBackground#eaeeec
  • button.secondaryForeground#00270e
  • descriptionForeground#5ca678
  • dropdown.background#f8f9f9
  • dropdown.border#c4d5ca
  • dropdown.foreground#00270e
  • editor.background#f8f9f9
  • editor.findMatchBackground#1b368c59
  • editor.findMatchHighlightBackground#1b368c26
  • editor.foreground#00270e
  • editor.inactiveSelectionBackground#008e331a
  • editor.lineHighlightBackground#008e3314
  • editor.lineHighlightBorder#008e3300
  • editor.selectionBackground#008e3333
  • editor.wordHighlightBackground#008e3326
  • editorBracketMatch.background#008e3333
  • editorBracketMatch.border#008e3380
  • editorCursor.foreground#008e33
  • editorError.foreground#bf1932
  • editorGroup.border#c4d5ca
  • editorGroupHeader.tabsBackground#f1f4f2
  • editorGroupHeader.tabsBorder#c4d5ca
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#00270e2e
  • editorIndentGuide.background#00270e14
  • editorInfo.foreground#552746
  • editorLineNumber.activeForeground#00270e
  • editorLineNumber.foreground#5ca678
  • editorRuler.foreground#00270e14
  • editorSuggestWidget.selectedBackground#008e3326
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#00270e1a
  • editorWidget.background#f8f9f9
  • editorWidget.border#c4d5ca
  • focusBorder#008e3380
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#5ca678
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#5ca678
  • input.background#f8f9f9
  • input.border#c4d5ca
  • input.foreground#00270e
  • input.placeholderForeground#5ca678
  • inputOption.activeBorder#008e33
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#552746
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#008e3333
  • list.activeSelectionForeground#00270e
  • list.focusBackground#008e3326
  • list.highlightForeground#008e33
  • list.hoverBackground#008e331a
  • list.inactiveSelectionBackground#008e331a
  • minimap.background#f8f9f9
  • minimap.findMatchHighlight#1b368c80
  • minimap.selectionHighlight#008e334d
  • notificationLink.foreground#008e33
  • notifications.background#f8f9f9
  • notifications.foreground#00270e
  • panel.background#f1f4f2
  • panel.border#c4d5ca
  • panelTitle.activeBorder#008e33
  • panelTitle.activeForeground#00270e
  • panelTitle.inactiveForeground#5ca678
  • peekView.border#008e33
  • peekViewEditor.background#f1f4f2
  • peekViewResult.background#eaeeec
  • peekViewTitle.background#f1f4f2
  • progressBar.background#008e33
  • scrollbar.shadow#00120614
  • scrollbarSlider.activeBackground#00270e4d
  • scrollbarSlider.background#00270e1a
  • scrollbarSlider.hoverBackground#00270e33
  • selection.background#008e3333
  • sideBar.background#f1f4f2
  • sideBar.border#c4d5ca
  • sideBar.foreground#00270e
  • sideBarSectionHeader.background#008e331a
  • sideBarSectionHeader.foreground#00270e
  • sideBarTitle.foreground#00270e
  • statusBar.background#008e33
  • statusBar.border#c4d5ca
  • statusBar.debuggingBackground#552746
  • statusBar.debuggingForeground#f7f7f7
  • statusBar.foreground#00270e
  • statusBar.noFolderBackground#eaeeec
  • statusBarItem.hoverBackground#f7f7f733
  • statusBarItem.remoteBackground#00792b
  • statusBarItem.remoteForeground#00270e
  • tab.activeBackground#f8f9f9
  • tab.activeBorder#008e33
  • tab.activeBorderTop#008e3300
  • tab.activeForeground#00270e
  • tab.border#c4d5ca
  • tab.inactiveBackground#f1f4f2
  • tab.inactiveForeground#5ca678
  • terminal.ansiBlack#00270e
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#5ca678
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f7f7f7
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f8f9f9
  • terminal.ansiYellow#d4a017
  • terminal.background#f1f4f2
  • terminal.foreground#00270e
  • terminalCursor.foreground#008e33
  • textLink.activeForeground#4b223e
  • textLink.foreground#552746
  • titleBar.activeBackground#f1f4f2
  • titleBar.activeForeground#00270e
  • titleBar.border#c4d5ca
  • titleBar.inactiveBackground#f1f4f2
  • titleBar.inactiveForeground#5ca678

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#5ca678italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#007f2ebold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#007f2ebold
storage.type, storage.modifier#007f2ebold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#5e2b4e
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#007f2e
string.regexp#5e2b4e
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#1b368c
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#007986bold
variable.other.constant, variable.other.enummember#007986bold
constant.character.escape#197c3e
entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.type.module, support.type, support.type.builtin#38793aitalic
entity.name.type.parameter#38793aitalic
entity.name.function, meta.function entity.name.function#7f6666bold
meta.function-call entity.name.function, support.function#7f6666
meta.method-call entity.name.function, entity.name.function.member#7f6666
variable, variable.other, variable.other.readwrite#00270e
variable.parameter#00270eitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#007f2eitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#00270e
entity.name.class, entity.name.type.class, support.class#6e6e19bold italic
entity.other.inherited-class#6e6e19italic
entity.name.tag, punctuation.definition.tag#007f2ebold
entity.other.attribute-name#7f6666italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#197c3e
punctuation, punctuation.separator, punctuation.terminator, meta.brace#5ca678
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#38793aitalic
support.type.property-name.css, support.type.vendored.property-name.css#38793a
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6e6e19bold
support.constant.property-value.css, support.constant.color.css#007986
keyword.other.unit.css#1b368c
support.type.property-name.json#38793a
markup.heading, markup.heading entity.name, entity.name.section.markdown#007f2ebold
markup.bold#007986bold
markup.italic#38793aitalic
markup.inline.raw, markup.raw#5e2b4e
markup.underline.link#7f6666
markup.quote#5ca678italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050