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#00262b
  • activityBar.border#003e45
  • activityBar.foreground#00b5cc
  • activityBar.inactiveForeground#408ca0
  • activityBarBadge.background#ff8272
  • activityBarBadge.foreground#f2f4f6
  • badge.background#00b5cc
  • badge.foreground#001b1f
  • breadcrumb.activeSelectionForeground#cbdee4
  • breadcrumb.focusForeground#cbdee4
  • breadcrumb.foreground#408ca0
  • button.background#00b5cc
  • button.foreground#001b1f
  • button.hoverBackground#1abcd1
  • button.secondaryBackground#002f35
  • button.secondaryForeground#cbdee4
  • descriptionForeground#408ca0
  • dropdown.background#00262b
  • dropdown.border#003e45
  • dropdown.foreground#cbdee4
  • editor.background#001d21
  • editor.findMatchBackground#5c068c66
  • editor.findMatchHighlightBackground#5c068c33
  • editor.foreground#cbdee4
  • editor.inactiveSelectionBackground#00b5cc26
  • editor.lineHighlightBackground#00b5cc1a
  • editor.lineHighlightBorder#00b5cc00
  • editor.selectionBackground#00b5cc4d
  • editor.wordHighlightBackground#00b5cc33
  • editorBracketMatch.background#00b5cc40
  • editorBracketMatch.border#00b5cc99
  • editorCursor.foreground#00b5cc
  • editorError.foreground#dd4132
  • editorGroup.border#003e45
  • editorGroupHeader.tabsBackground#00262b
  • editorGroupHeader.tabsBorder#003e45
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#cbdee433
  • editorIndentGuide.background#cbdee414
  • editorInfo.foreground#ff8272
  • editorLineNumber.activeForeground#cbdee4
  • editorLineNumber.foreground#408ca0
  • editorRuler.foreground#cbdee414
  • editorSuggestWidget.selectedBackground#00b5cc40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#cbdee41a
  • editorWidget.background#00262b
  • editorWidget.border#003e45
  • focusBorder#00b5cc99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#408ca0
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#408ca0
  • input.background#00262b
  • input.border#003e45
  • input.foreground#cbdee4
  • input.placeholderForeground#408ca0
  • inputOption.activeBorder#00b5cc
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#ff8272
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#00b5cc4d
  • list.activeSelectionForeground#cbdee4
  • list.focusBackground#00b5cc33
  • list.highlightForeground#00b5cc
  • list.hoverBackground#00b5cc26
  • list.inactiveSelectionBackground#00b5cc26
  • minimap.background#001d21
  • minimap.findMatchHighlight#5c068c99
  • minimap.selectionHighlight#00b5cc66
  • notificationLink.foreground#00b5cc
  • notifications.background#002f35
  • notifications.foreground#cbdee4
  • panel.background#00262b
  • panel.border#003e45
  • panelTitle.activeBorder#00b5cc
  • panelTitle.activeForeground#cbdee4
  • panelTitle.inactiveForeground#408ca0
  • peekView.border#00b5cc
  • peekViewEditor.background#00262b
  • peekViewResult.background#002f35
  • peekViewTitle.background#00262b
  • progressBar.background#00b5cc
  • scrollbar.shadow#00121445
  • scrollbarSlider.activeBackground#cbdee459
  • scrollbarSlider.background#cbdee41f
  • scrollbarSlider.hoverBackground#cbdee440
  • selection.background#00b5cc4d
  • sideBar.background#002f35
  • sideBar.border#003e45
  • sideBar.foreground#cbdee4
  • sideBarSectionHeader.background#00b5cc26
  • sideBarSectionHeader.foreground#cbdee4
  • sideBarTitle.foreground#cbdee4
  • statusBar.background#006d7a
  • statusBar.border#003e45
  • statusBar.debuggingBackground#ff8272
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#66d3e0
  • statusBar.noFolderBackground#00262b
  • statusBarItem.hoverBackground#00b5cc4d
  • statusBarItem.remoteBackground#00b5cc
  • statusBarItem.remoteForeground#001b1f
  • tab.activeBackground#001d21
  • tab.activeBorder#00b5cc
  • tab.activeBorderTop#00b5cc00
  • tab.activeForeground#cbdee4
  • tab.border#003e45
  • tab.inactiveBackground#00262b
  • tab.inactiveForeground#408ca0
  • terminal.ansiBlack#001d21
  • terminal.ansiBlue#0881a7
  • terminal.ansiBrightBlack#408ca0
  • 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#cbdee4
  • terminal.ansiYellow#efc050
  • terminal.background#00262b
  • terminal.foreground#cbdee4
  • terminalCursor.foreground#00b5cc
  • textLink.activeForeground#ff9587
  • textLink.foreground#ff8272
  • titleBar.activeBackground#00262b
  • titleBar.activeForeground#cbdee4
  • titleBar.border#003e45
  • titleBar.inactiveBackground#00262b
  • titleBar.inactiveForeground#408ca0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#408ca0italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#00b5ccbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#00b5ccbold
storage.type, storage.modifier#00b5ccbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#ff8272
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#00b5cc
string.regexp#ff8272
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#a474bf
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#7f87acbold
variable.other.constant, variable.other.enummember#7f87acbold
constant.character.escape#26c0d4
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#5790bbitalic
entity.name.type.parameter#5790bbitalic
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#cbdee4
variable.parameter#cbdee4italic
variable.language, variable.language.this, variable.language.self, variable.language.super#00b5ccitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#cbdee4
entity.name.class, entity.name.type.class, support.class#4e9a2fbold italic
entity.other.inherited-class#4e9a2fitalic
entity.name.tag, punctuation.definition.tag#00b5ccbold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#26c0d4
punctuation, punctuation.separator, punctuation.terminator, meta.brace#408ca0
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#5790bbitalic
support.type.property-name.css, support.type.vendored.property-name.css#5790bb
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4e9a2fbold
support.constant.property-value.css, support.constant.color.css#7f87ac
keyword.other.unit.css#a474bf
support.type.property-name.json#5790bb
markup.heading, markup.heading entity.name, entity.name.section.markdown#00b5ccbold
markup.bold#7f87acbold
markup.italic#5790bbitalic
markup.inline.raw, markup.raw#ff8272
markup.underline.link#e8d4e2
markup.quote#408ca0italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050