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#00262f
  • activityBar.border#003d4d
  • activityBar.foreground#00b4e1
  • activityBar.inactiveForeground#408ca6
  • activityBarBadge.background#f7a08b
  • activityBarBadge.foreground#f2f4f6
  • badge.background#00b4e1
  • badge.foreground#001b22
  • breadcrumb.activeSelectionForeground#cbdee5
  • breadcrumb.focusForeground#cbdee5
  • breadcrumb.foreground#408ca6
  • button.background#00b4e1
  • button.foreground#001b22
  • button.hoverBackground#1abce4
  • button.secondaryBackground#002f3b
  • button.secondaryForeground#cbdee5
  • descriptionForeground#408ca6
  • dropdown.background#00262f
  • dropdown.border#003d4d
  • dropdown.foreground#cbdee5
  • editor.background#001d24
  • editor.findMatchBackground#4e9a2f66
  • editor.findMatchHighlightBackground#4e9a2f33
  • editor.foreground#cbdee5
  • editor.inactiveSelectionBackground#00b4e126
  • editor.lineHighlightBackground#00b4e11a
  • editor.lineHighlightBorder#00b4e100
  • editor.selectionBackground#00b4e14d
  • editor.wordHighlightBackground#00b4e133
  • editorBracketMatch.background#00b4e140
  • editorBracketMatch.border#00b4e199
  • editorCursor.foreground#00b4e1
  • editorError.foreground#dd4132
  • editorGroup.border#003d4d
  • editorGroupHeader.tabsBackground#00262f
  • editorGroupHeader.tabsBorder#003d4d
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#cbdee533
  • editorIndentGuide.background#cbdee514
  • editorInfo.foreground#f7a08b
  • editorLineNumber.activeForeground#cbdee5
  • editorLineNumber.foreground#408ca6
  • editorRuler.foreground#cbdee514
  • editorSuggestWidget.selectedBackground#00b4e140
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#cbdee51a
  • editorWidget.background#00262f
  • editorWidget.border#003d4d
  • focusBorder#00b4e199
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#408ca6
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#408ca6
  • input.background#00262f
  • input.border#003d4d
  • input.foreground#cbdee5
  • input.placeholderForeground#408ca6
  • inputOption.activeBorder#00b4e1
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#f7a08b
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#00b4e14d
  • list.activeSelectionForeground#cbdee5
  • list.focusBackground#00b4e133
  • list.highlightForeground#00b4e1
  • list.hoverBackground#00b4e126
  • list.inactiveSelectionBackground#00b4e126
  • minimap.background#001d24
  • minimap.findMatchHighlight#4e9a2f99
  • minimap.selectionHighlight#00b4e166
  • notificationLink.foreground#00b4e1
  • notifications.background#002f3b
  • notifications.foreground#cbdee5
  • panel.background#00262f
  • panel.border#003d4d
  • panelTitle.activeBorder#00b4e1
  • panelTitle.activeForeground#cbdee5
  • panelTitle.inactiveForeground#408ca6
  • peekView.border#00b4e1
  • peekViewEditor.background#00262f
  • peekViewResult.background#002f3b
  • peekViewTitle.background#00262f
  • progressBar.background#00b4e1
  • scrollbar.shadow#00121645
  • scrollbarSlider.activeBackground#cbdee559
  • scrollbarSlider.background#cbdee51f
  • scrollbarSlider.hoverBackground#cbdee540
  • selection.background#00b4e14d
  • sideBar.background#002f3b
  • sideBar.border#003d4d
  • sideBar.foreground#cbdee5
  • sideBarSectionHeader.background#00b4e126
  • sideBarSectionHeader.foreground#cbdee5
  • sideBarTitle.foreground#cbdee5
  • statusBar.background#006c87
  • statusBar.border#003d4d
  • statusBar.debuggingBackground#f7a08b
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#66d2ed
  • statusBar.noFolderBackground#00262f
  • statusBarItem.hoverBackground#00b4e14d
  • statusBarItem.remoteBackground#00b4e1
  • statusBarItem.remoteForeground#001b22
  • tab.activeBackground#001d24
  • tab.activeBorder#00b4e1
  • tab.activeBorderTop#00b4e100
  • tab.activeForeground#cbdee5
  • tab.border#003d4d
  • tab.inactiveBackground#00262f
  • tab.inactiveForeground#408ca6
  • terminal.ansiBlack#001d24
  • terminal.ansiBlue#0880b1
  • terminal.ansiBrightBlack#408ca6
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f2f4f6
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#cbdee5
  • terminal.ansiYellow#efc050
  • terminal.background#00262f
  • terminal.foreground#cbdee5
  • terminalCursor.foreground#00b4e1
  • textLink.activeForeground#f8ae9c
  • textLink.foreground#f7a08b
  • titleBar.activeBackground#00262f
  • titleBar.activeForeground#cbdee5
  • titleBar.border#003d4d
  • titleBar.inactiveBackground#00262f
  • titleBar.inactiveForeground#408ca6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#408ca6italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#00b4e1bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#00b4e1bold
storage.type, storage.modifier#00b4e1bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#f7a08b
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#00b4e1
string.regexp#f7a08b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#4e9a2f
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#7d7eb8bold
variable.other.constant, variable.other.enummember#7d7eb8bold
constant.character.escape#26bfe6
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#5c908citalic
entity.name.type.parameter#5c908citalic
entity.name.function, meta.function entity.name.function#e8d4e2bold
meta.function-call entity.name.function, support.function#e8d4e2
meta.method-call entity.name.function, entity.name.function.member#e8d4e2
variable, variable.other, variable.other.readwrite#cbdee5
variable.parameter#cbdee5italic
variable.language, variable.language.this, variable.language.self, variable.language.super#00b4e1italic
variable.other.property, variable.other.object.property, meta.object-literal.key#cbdee5
entity.name.class, entity.name.type.class, support.class#a474bfbold italic
entity.other.inherited-class#a474bfitalic
entity.name.tag, punctuation.definition.tag#00b4e1bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#26bfe6
punctuation, punctuation.separator, punctuation.terminator, meta.brace#408ca6
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#5c908citalic
support.type.property-name.css, support.type.vendored.property-name.css#5c908c
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#a474bfbold
support.constant.property-value.css, support.constant.color.css#7d7eb8
keyword.other.unit.css#4e9a2f
support.type.property-name.json#5c908c
markup.heading, markup.heading entity.name, entity.name.section.markdown#00b4e1bold
markup.bold#7d7eb8bold
markup.italic#5c908citalic
markup.inline.raw, markup.raw#f7a08b
markup.underline.link#e8d4e2
markup.quote#408ca6italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050