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#131321
  • activityBar.border#1f1f36
  • activityBar.foreground#5a5b9f
  • activityBar.inactiveForeground#52556d
  • activityBarBadge.background#e8e835
  • activityBarBadge.foreground#f1f1f2
  • badge.background#5a5b9f
  • badge.foreground#f1f1f2
  • breadcrumb.activeSelectionForeground#cecfd5
  • breadcrumb.focusForeground#cecfd5
  • breadcrumb.foreground#52556d
  • button.background#5a5b9f
  • button.foreground#f1f1f2
  • button.hoverBackground#6b6ba9
  • button.secondaryBackground#171829
  • button.secondaryForeground#cecfd5
  • descriptionForeground#52556d
  • dropdown.background#131321
  • dropdown.border#1f1f36
  • dropdown.foreground#cecfd5
  • editor.background#0e0f19
  • editor.findMatchBackground#00b14066
  • editor.findMatchHighlightBackground#00b14033
  • editor.foreground#cecfd5
  • editor.inactiveSelectionBackground#5a5b9f26
  • editor.lineHighlightBackground#5a5b9f1a
  • editor.lineHighlightBorder#5a5b9f00
  • editor.selectionBackground#5a5b9f4d
  • editor.wordHighlightBackground#5a5b9f33
  • editorBracketMatch.background#5a5b9f40
  • editorBracketMatch.border#5a5b9f99
  • editorCursor.foreground#5a5b9f
  • editorError.foreground#dd4132
  • editorGroup.border#1f1f36
  • editorGroupHeader.tabsBackground#131321
  • editorGroupHeader.tabsBorder#1f1f36
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#cecfd533
  • editorIndentGuide.background#cecfd514
  • editorInfo.foreground#e8e835
  • editorLineNumber.activeForeground#cecfd5
  • editorLineNumber.foreground#52556d
  • editorRuler.foreground#cecfd514
  • editorSuggestWidget.selectedBackground#5a5b9f40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#cecfd51a
  • editorWidget.background#131321
  • editorWidget.border#1f1f36
  • focusBorder#5a5b9f99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#52556d
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#52556d
  • input.background#131321
  • input.border#1f1f36
  • input.foreground#cecfd5
  • input.placeholderForeground#52556d
  • inputOption.activeBorder#5a5b9f
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#e8e835
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#5a5b9f4d
  • list.activeSelectionForeground#cecfd5
  • list.focusBackground#5a5b9f33
  • list.highlightForeground#5a5b9f
  • list.hoverBackground#5a5b9f26
  • list.inactiveSelectionBackground#5a5b9f26
  • minimap.background#0e0f19
  • minimap.findMatchHighlight#00b14099
  • minimap.selectionHighlight#5a5b9f66
  • notificationLink.foreground#5a5b9f
  • notifications.background#171829
  • notifications.foreground#cecfd5
  • panel.background#131321
  • panel.border#1f1f36
  • panelTitle.activeBorder#5a5b9f
  • panelTitle.activeForeground#cecfd5
  • panelTitle.inactiveForeground#52556d
  • peekView.border#5a5b9f
  • peekViewEditor.background#131321
  • peekViewResult.background#171829
  • peekViewTitle.background#131321
  • progressBar.background#5a5b9f
  • scrollbar.shadow#09091045
  • scrollbarSlider.activeBackground#cecfd559
  • scrollbarSlider.background#cecfd51f
  • scrollbarSlider.hoverBackground#cecfd540
  • selection.background#5a5b9f4d
  • sideBar.background#171829
  • sideBar.border#1f1f36
  • sideBar.foreground#cecfd5
  • sideBarSectionHeader.background#5a5b9f26
  • sideBarSectionHeader.foreground#cecfd5
  • sideBarTitle.foreground#cecfd5
  • statusBar.background#36375f
  • statusBar.border#1f1f36
  • statusBar.debuggingBackground#e8e835
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#9c9dc5
  • statusBar.noFolderBackground#131321
  • statusBarItem.hoverBackground#5a5b9f4d
  • statusBarItem.remoteBackground#5a5b9f
  • statusBarItem.remoteForeground#f1f1f2
  • tab.activeBackground#0e0f19
  • tab.activeBorder#5a5b9f
  • tab.activeBorderTop#5a5b9f00
  • tab.activeForeground#cecfd5
  • tab.border#1f1f36
  • tab.inactiveBackground#131321
  • tab.inactiveForeground#52556d
  • terminal.ansiBlack#0e0f19
  • terminal.ansiBlue#355490
  • terminal.ansiBrightBlack#52556d
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f1f1f2
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#cecfd5
  • terminal.ansiYellow#efc050
  • terminal.background#131321
  • terminal.foreground#cecfd5
  • terminalCursor.foreground#5a5b9f
  • textLink.activeForeground#ebeb53
  • textLink.foreground#e8e835
  • titleBar.activeBackground#131321
  • titleBar.activeForeground#cecfd5
  • titleBar.border#1f1f36
  • titleBar.inactiveBackground#131321
  • titleBar.inactiveForeground#52556d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#52556ditalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#7e7fb4bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#7e7fb4bold
storage.type, storage.modifier#7e7fb4bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#e8e835
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#7e7fb4
string.regexp#e8e835
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#00b140
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#7bc4e2bold
variable.other.constant, variable.other.enummember#7bc4e2bold
constant.character.escape#7e7fb4
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#8d7dacitalic
entity.name.type.parameter#8d7dacitalic
entity.name.function, meta.function entity.name.function#f7cac9bold
meta.function-call entity.name.function, support.function#f7cac9
meta.method-call entity.name.function, entity.name.function.member#f7cac9
variable, variable.other, variable.other.readwrite#cecfd5
variable.parameter#cecfd5italic
variable.language, variable.language.this, variable.language.self, variable.language.super#7e7fb4italic
variable.other.property, variable.other.object.property, meta.object-literal.key#cecfd5
entity.name.class, entity.name.type.class, support.class#ff3ca0bold italic
entity.other.inherited-class#ff3ca0italic
entity.name.tag, punctuation.definition.tag#7e7fb4bold
entity.other.attribute-name#f7cac9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#7e7fb4
punctuation, punctuation.separator, punctuation.terminator, meta.brace#52556d
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#8d7dacitalic
support.type.property-name.css, support.type.vendored.property-name.css#8d7dac
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff3ca0bold
support.constant.property-value.css, support.constant.color.css#7bc4e2
keyword.other.unit.css#00b140
support.type.property-name.json#8d7dac
markup.heading, markup.heading entity.name, entity.name.section.markdown#7e7fb4bold
markup.bold#7bc4e2bold
markup.italic#8d7dacitalic
markup.inline.raw, markup.raw#e8e835
markup.underline.link#f7cac9
markup.quote#52556ditalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050