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#101112
  • activityBar.border#1b1c1e
  • activityBar.foreground#4e5358
  • activityBar.inactiveForeground#4e5358
  • activityBarBadge.background#ffaa4d
  • activityBarBadge.foreground#f1f1f2
  • badge.background#4e5358
  • badge.foreground#f1f1f2
  • breadcrumb.activeSelectionForeground#cdcfd0
  • breadcrumb.focusForeground#cdcfd0
  • breadcrumb.foreground#4e5358
  • button.background#4e5358
  • button.foreground#f1f1f2
  • button.hoverBackground#606469
  • button.secondaryBackground#141617
  • button.secondaryForeground#cdcfd0
  • descriptionForeground#4e5358
  • dropdown.background#101112
  • dropdown.border#1b1c1e
  • dropdown.foreground#cdcfd0
  • editor.background#0c0d0e
  • editor.findMatchBackground#76ff7b66
  • editor.findMatchHighlightBackground#76ff7b33
  • editor.foreground#cdcfd0
  • editor.inactiveSelectionBackground#4e535826
  • editor.lineHighlightBackground#4e53581a
  • editor.lineHighlightBorder#4e535800
  • editor.selectionBackground#4e53584d
  • editor.wordHighlightBackground#4e535833
  • editorBracketMatch.background#4e535840
  • editorBracketMatch.border#4e535899
  • editorCursor.foreground#4e5358
  • editorError.foreground#dd4132
  • editorGroup.border#1b1c1e
  • editorGroupHeader.tabsBackground#101112
  • editorGroupHeader.tabsBorder#1b1c1e
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#cdcfd033
  • editorIndentGuide.background#cdcfd014
  • editorInfo.foreground#ffaa4d
  • editorLineNumber.activeForeground#cdcfd0
  • editorLineNumber.foreground#4e5358
  • editorRuler.foreground#cdcfd014
  • editorSuggestWidget.selectedBackground#4e535840
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#cdcfd01a
  • editorWidget.background#101112
  • editorWidget.border#1b1c1e
  • focusBorder#4e535899
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#4e5358
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#4e5358
  • input.background#101112
  • input.border#1b1c1e
  • input.foreground#cdcfd0
  • input.placeholderForeground#4e5358
  • inputOption.activeBorder#4e5358
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#ffaa4d
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#4e53584d
  • list.activeSelectionForeground#cdcfd0
  • list.focusBackground#4e535833
  • list.highlightForeground#4e5358
  • list.hoverBackground#4e535826
  • list.inactiveSelectionBackground#4e535826
  • minimap.background#0c0d0e
  • minimap.findMatchHighlight#76ff7b99
  • minimap.selectionHighlight#4e535866
  • notificationLink.foreground#4e5358
  • notifications.background#141617
  • notifications.foreground#cdcfd0
  • panel.background#101112
  • panel.border#1b1c1e
  • panelTitle.activeBorder#4e5358
  • panelTitle.activeForeground#cdcfd0
  • panelTitle.inactiveForeground#4e5358
  • peekView.border#4e5358
  • peekViewEditor.background#101112
  • peekViewResult.background#141617
  • peekViewTitle.background#101112
  • progressBar.background#4e5358
  • scrollbar.shadow#08080945
  • scrollbarSlider.activeBackground#cdcfd059
  • scrollbarSlider.background#cdcfd01f
  • scrollbarSlider.hoverBackground#cdcfd040
  • selection.background#4e53584d
  • sideBar.background#141617
  • sideBar.border#1b1c1e
  • sideBar.foreground#cdcfd0
  • sideBarSectionHeader.background#4e535826
  • sideBarSectionHeader.foreground#cdcfd0
  • sideBarTitle.foreground#cdcfd0
  • statusBar.background#2f3235
  • statusBar.border#1b1c1e
  • statusBar.debuggingBackground#ffaa4d
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#95989b
  • statusBar.noFolderBackground#101112
  • statusBarItem.hoverBackground#4e53584d
  • statusBarItem.remoteBackground#4e5358
  • statusBarItem.remoteForeground#f1f1f2
  • tab.activeBackground#0c0d0e
  • tab.activeBorder#4e5358
  • tab.activeBorderTop#4e535800
  • tab.activeForeground#cdcfd0
  • tab.border#1b1c1e
  • tab.inactiveBackground#101112
  • tab.inactiveForeground#4e5358
  • terminal.ansiBlack#0c0d0e
  • terminal.ansiBlue#2f506d
  • terminal.ansiBrightBlack#4e5358
  • 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#cdcfd0
  • terminal.ansiYellow#efc050
  • terminal.background#101112
  • terminal.foreground#cdcfd0
  • terminalCursor.foreground#4e5358
  • textLink.activeForeground#ffb768
  • textLink.foreground#ffaa4d
  • titleBar.activeBackground#101112
  • titleBar.activeForeground#cdcfd0
  • titleBar.border#1b1c1e
  • titleBar.inactiveBackground#101112
  • titleBar.inactiveForeground#4e5358

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#4e5358italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#808586bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#808586bold
storage.type, storage.modifier#808586bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#ffaa4d
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#808586
string.regexp#ffaa4d
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#76ff7b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#009473bold
variable.other.constant, variable.other.enummember#009473bold
constant.character.escape#808486
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#99d6eaitalic
entity.name.type.parameter#99d6eaitalic
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#cdcfd0
variable.parameter#cdcfd0italic
variable.language, variable.language.this, variable.language.self, variable.language.super#808586italic
variable.other.property, variable.other.object.property, meta.object-literal.key#cdcfd0
entity.name.class, entity.name.type.class, support.class#ad6ab3bold italic
entity.other.inherited-class#ad6ab3italic
entity.name.tag, punctuation.definition.tag#808586bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#808486
punctuation, punctuation.separator, punctuation.terminator, meta.brace#4e5358
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#99d6eaitalic
support.type.property-name.css, support.type.vendored.property-name.css#99d6ea
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ad6ab3bold
support.constant.property-value.css, support.constant.color.css#009473
keyword.other.unit.css#76ff7b
support.type.property-name.json#99d6ea
markup.heading, markup.heading entity.name, entity.name.section.markdown#808586bold
markup.bold#009473bold
markup.italic#99d6eaitalic
markup.inline.raw, markup.raw#ffaa4d
markup.underline.link#e8d4e2
markup.quote#4e5358italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050