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#041522
  • activityBar.border#072236
  • activityBar.foreground#1464a0
  • activityBar.inactiveForeground#678194
  • activityBarBadge.background#ff6b00
  • activityBarBadge.foreground#f6f6f6
  • badge.background#1464a0
  • badge.foreground#f6f6f6
  • breadcrumb.activeSelectionForeground#d6dce1
  • breadcrumb.focusForeground#d6dce1
  • breadcrumb.foreground#678194
  • button.background#1464a0
  • button.foreground#f6f6f6
  • button.hoverBackground#2c74aa
  • button.secondaryBackground#051a2a
  • button.secondaryForeground#d6dce1
  • descriptionForeground#678194
  • dropdown.background#041522
  • dropdown.border#072236
  • dropdown.foreground#d6dce1
  • editor.background#03101a
  • editor.findMatchBackground#9e4fa566
  • editor.findMatchHighlightBackground#9e4fa533
  • editor.foreground#d6dce1
  • editor.inactiveSelectionBackground#1464a026
  • editor.lineHighlightBackground#1464a01a
  • editor.lineHighlightBorder#1464a000
  • editor.selectionBackground#1464a04d
  • editor.wordHighlightBackground#1464a033
  • editorBracketMatch.background#1464a040
  • editorBracketMatch.border#1464a099
  • editorCursor.foreground#1464a0
  • editorError.foreground#dd4132
  • editorGroup.border#072236
  • editorGroupHeader.tabsBackground#041522
  • editorGroupHeader.tabsBorder#072236
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#d6dce133
  • editorIndentGuide.background#d6dce114
  • editorInfo.foreground#ff6b00
  • editorLineNumber.activeForeground#d6dce1
  • editorLineNumber.foreground#678194
  • editorRuler.foreground#d6dce114
  • editorSuggestWidget.selectedBackground#1464a040
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#d6dce11a
  • editorWidget.background#041522
  • editorWidget.border#072236
  • focusBorder#1464a099
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#678194
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#678194
  • input.background#041522
  • input.border#072236
  • input.foreground#d6dce1
  • input.placeholderForeground#678194
  • inputOption.activeBorder#1464a0
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#ff6b00
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#1464a04d
  • list.activeSelectionForeground#d6dce1
  • list.focusBackground#1464a033
  • list.highlightForeground#1464a0
  • list.hoverBackground#1464a026
  • list.inactiveSelectionBackground#1464a026
  • minimap.background#03101a
  • minimap.findMatchHighlight#9e4fa599
  • minimap.selectionHighlight#1464a066
  • notificationLink.foreground#1464a0
  • notifications.background#051a2a
  • notifications.foreground#d6dce1
  • panel.background#041522
  • panel.border#072236
  • panelTitle.activeBorder#1464a0
  • panelTitle.activeForeground#d6dce1
  • panelTitle.inactiveForeground#678194
  • peekView.border#1464a0
  • peekViewEditor.background#041522
  • peekViewResult.background#051a2a
  • peekViewTitle.background#041522
  • progressBar.background#1464a0
  • scrollbar.shadow#020a1045
  • scrollbarSlider.activeBackground#d6dce159
  • scrollbarSlider.background#d6dce11f
  • scrollbarSlider.hoverBackground#d6dce140
  • selection.background#1464a04d
  • sideBar.background#051a2a
  • sideBar.border#072236
  • sideBar.foreground#d6dce1
  • sideBarSectionHeader.background#1464a026
  • sideBarSectionHeader.foreground#d6dce1
  • sideBarTitle.foreground#d6dce1
  • statusBar.background#0c3c60
  • statusBar.border#072236
  • statusBar.debuggingBackground#ff6b00
  • statusBar.debuggingForeground#f6f6f6
  • statusBar.foreground#72a2c6
  • statusBar.noFolderBackground#041522
  • statusBarItem.hoverBackground#1464a04d
  • statusBarItem.remoteBackground#1464a0
  • statusBarItem.remoteForeground#f6f6f6
  • tab.activeBackground#03101a
  • tab.activeBorder#1464a0
  • tab.activeBorderTop#1464a000
  • tab.activeForeground#d6dce1
  • tab.border#072236
  • tab.inactiveBackground#041522
  • tab.inactiveForeground#678194
  • terminal.ansiBlack#03101a
  • terminal.ansiBlue#125891
  • terminal.ansiBrightBlack#678194
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f6f6f6
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#d6dce1
  • terminal.ansiYellow#efc050
  • terminal.background#041522
  • terminal.foreground#d6dce1
  • terminalCursor.foreground#1464a0
  • textLink.activeForeground#ff8126
  • textLink.foreground#ff6b00
  • titleBar.activeBackground#041522
  • titleBar.activeForeground#d6dce1
  • titleBar.border#072236
  • titleBar.inactiveBackground#041522
  • titleBar.inactiveForeground#678194

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#678194italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#4886b5bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#4886b5bold
storage.type, storage.modifier#4886b5bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#ff6b00
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#4886b5
string.regexp#ff6b00
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#ad6ab3
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#8d7dacbold
variable.other.constant, variable.other.enummember#8d7dacbold
constant.character.escape#4786b4
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#388f9bitalic
entity.name.type.parameter#388f9bitalic
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#d6dce1
variable.parameter#d6dce1italic
variable.language, variable.language.this, variable.language.self, variable.language.super#4886b5italic
variable.other.property, variable.other.object.property, meta.object-literal.key#d6dce1
entity.name.class, entity.name.type.class, support.class#76ff7bbold italic
entity.other.inherited-class#76ff7bitalic
entity.name.tag, punctuation.definition.tag#4886b5bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#4786b4
punctuation, punctuation.separator, punctuation.terminator, meta.brace#678194
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#388f9bitalic
support.type.property-name.css, support.type.vendored.property-name.css#388f9b
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#76ff7bbold
support.constant.property-value.css, support.constant.color.css#8d7dac
keyword.other.unit.css#ad6ab3
support.type.property-name.json#388f9b
markup.heading, markup.heading entity.name, entity.name.section.markdown#4886b5bold
markup.bold#8d7dacbold
markup.italic#388f9bitalic
markup.inline.raw, markup.raw#ff6b00
markup.underline.link#e8d4e2
markup.quote#678194italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050