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#ebeeee
  • activityBar.border#cad6d4
  • activityBar.foreground#379188
  • activityBar.inactiveForeground#78a7a2
  • activityBarBadge.background#701d25
  • activityBarBadge.foreground#f7f7f7
  • badge.background#379188
  • badge.foreground#0f2825
  • breadcrumb.activeSelectionForeground#0f2825
  • breadcrumb.focusForeground#0f2825
  • breadcrumb.foreground#78a7a2
  • button.background#379188
  • button.foreground#0f2825
  • button.hoverBackground#32837a
  • button.secondaryBackground#ebeeee
  • button.secondaryForeground#0f2825
  • descriptionForeground#78a7a2
  • dropdown.background#f8f9f9
  • dropdown.border#cad6d4
  • dropdown.foreground#0f2825
  • editor.background#f8f9f9
  • editor.findMatchBackground#78be2059
  • editor.findMatchHighlightBackground#78be2026
  • editor.foreground#0f2825
  • editor.inactiveSelectionBackground#3791881a
  • editor.lineHighlightBackground#37918814
  • editor.lineHighlightBorder#37918800
  • editor.selectionBackground#37918833
  • editor.wordHighlightBackground#37918826
  • editorBracketMatch.background#37918833
  • editorBracketMatch.border#37918880
  • editorCursor.foreground#379188
  • editorError.foreground#bf1932
  • editorGroup.border#cad6d4
  • editorGroupHeader.tabsBackground#f2f4f3
  • editorGroupHeader.tabsBorder#cad6d4
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#0f28252e
  • editorIndentGuide.background#0f282514
  • editorInfo.foreground#701d25
  • editorLineNumber.activeForeground#0f2825
  • editorLineNumber.foreground#78a7a2
  • editorRuler.foreground#0f282514
  • editorSuggestWidget.selectedBackground#37918826
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#0f28251a
  • editorWidget.background#f8f9f9
  • editorWidget.border#cad6d4
  • focusBorder#37918880
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#78a7a2
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#78a7a2
  • input.background#f8f9f9
  • input.border#cad6d4
  • input.foreground#0f2825
  • input.placeholderForeground#78a7a2
  • inputOption.activeBorder#379188
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#701d25
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#37918833
  • list.activeSelectionForeground#0f2825
  • list.focusBackground#37918826
  • list.highlightForeground#379188
  • list.hoverBackground#3791881a
  • list.inactiveSelectionBackground#3791881a
  • minimap.background#f8f9f9
  • minimap.findMatchHighlight#78be2080
  • minimap.selectionHighlight#3791884d
  • notificationLink.foreground#379188
  • notifications.background#f8f9f9
  • notifications.foreground#0f2825
  • panel.background#f2f4f3
  • panel.border#cad6d4
  • panelTitle.activeBorder#379188
  • panelTitle.activeForeground#0f2825
  • panelTitle.inactiveForeground#78a7a2
  • peekView.border#379188
  • peekViewEditor.background#f2f4f3
  • peekViewResult.background#ebeeee
  • peekViewTitle.background#f2f4f3
  • progressBar.background#379188
  • scrollbar.shadow#07121114
  • scrollbarSlider.activeBackground#0f28254d
  • scrollbarSlider.background#0f28251a
  • scrollbarSlider.hoverBackground#0f282533
  • selection.background#37918833
  • sideBar.background#f2f4f3
  • sideBar.border#cad6d4
  • sideBar.foreground#0f2825
  • sideBarSectionHeader.background#3791881a
  • sideBarSectionHeader.foreground#0f2825
  • sideBarTitle.foreground#0f2825
  • statusBar.background#379188
  • statusBar.border#cad6d4
  • statusBar.debuggingBackground#701d25
  • statusBar.debuggingForeground#f7f7f7
  • statusBar.foreground#0f2825
  • statusBar.noFolderBackground#ebeeee
  • statusBarItem.hoverBackground#f7f7f733
  • statusBarItem.remoteBackground#2f7b74
  • statusBarItem.remoteForeground#0f2825
  • tab.activeBackground#f8f9f9
  • tab.activeBorder#379188
  • tab.activeBorderTop#37918800
  • tab.activeForeground#0f2825
  • tab.border#cad6d4
  • tab.inactiveBackground#f2f4f3
  • tab.inactiveForeground#78a7a2
  • terminal.ansiBlack#0f2825
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#78a7a2
  • 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#f2f4f3
  • terminal.foreground#0f2825
  • terminalCursor.foreground#379188
  • textLink.activeForeground#631a21
  • textLink.foreground#701d25
  • titleBar.activeBackground#f2f4f3
  • titleBar.activeForeground#0f2825
  • titleBar.border#cad6d4
  • titleBar.inactiveBackground#f2f4f3
  • titleBar.inactiveForeground#78a7a2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#78a7a2italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#2d796fbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#2d796fbold
storage.type, storage.modifier#2d796fbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#7c2029
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#2d796f
string.regexp#7c2029
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#4f7d15
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#4a6fa5bold
variable.other.constant, variable.other.enummember#4a6fa5bold
constant.character.escape#3a756f
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#007894italic
entity.name.type.parameter#007894italic
entity.name.function, meta.function entity.name.function#786d74bold
meta.function-call entity.name.function, support.function#786d74
meta.method-call entity.name.function, entity.name.function.member#786d74
variable, variable.other, variable.other.readwrite#0f2825
variable.parameter#0f2825italic
variable.language, variable.language.this, variable.language.self, variable.language.super#2d796fitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#0f2825
entity.name.class, entity.name.type.class, support.class#5f4b8bbold italic
entity.other.inherited-class#5f4b8bitalic
entity.name.tag, punctuation.definition.tag#2d796fbold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#3a756f
punctuation, punctuation.separator, punctuation.terminator, meta.brace#78a7a2
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#007894italic
support.type.property-name.css, support.type.vendored.property-name.css#007894
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5f4b8bbold
support.constant.property-value.css, support.constant.color.css#4a6fa5
keyword.other.unit.css#4f7d15
support.type.property-name.json#007894
markup.heading, markup.heading entity.name, entity.name.section.markdown#2d796fbold
markup.bold#4a6fa5bold
markup.italic#007894italic
markup.inline.raw, markup.raw#7c2029
markup.underline.link#786d74
markup.quote#78a7a2italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050