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#1A1F25
  • activityBar.border#2C3844
  • activityBar.foreground#DEE3E8
  • activityBar.inactiveForeground#7F8C8D
  • badge.background#7A9AD4
  • badge.foreground#DEE3E8
  • diffEditor.insertedTextBackground#6AA66A33
  • diffEditor.removedTextBackground#FF4D4D33
  • editor.background#1E232A
  • editor.findMatchBackground#FFCA2866
  • editor.findMatchHighlightBackground#FFCA2844
  • editor.foreground#DEE3E8
  • editor.lineHighlightBackground#2C384580
  • editor.selectionBackground#365A8F66
  • editor.selectionHighlightBackground#365A8F44
  • editor.wordHighlightBackground#6AA66A44
  • editor.wordHighlightStrongBackground#7A9AD444
  • editorBracketMatch.background#365A8F44
  • editorBracketMatch.border#7A9AD4
  • editorCodeLens.foreground#7F8C8D
  • editorCursor.foreground#DEE3E8
  • editorHoverWidget.background#1C2127
  • editorHoverWidget.border#2C3844
  • editorHoverWidget.foreground#DEE3E8
  • editorLineNumber.activeForeground#A7C8E6
  • editorLineNumber.foreground#4F5760
  • editorSuggestWidget.background#1C2127
  • editorSuggestWidget.foreground#DEE3E8
  • editorSuggestWidget.selectedBackground#2C3844
  • focusBorder#7A9AD4
  • gitDecoration.addedResourceForeground#6AA66A
  • gitDecoration.conflictingResourceForeground#C586C0
  • gitDecoration.deletedResourceForeground#FF4D4D
  • gitDecoration.modifiedResourceForeground#FFCA28
  • gitDecoration.untrackedResourceForeground#7BC07B
  • input.background#1C2127
  • input.border#2C3844
  • inputValidation.errorBorder#FF4D4D
  • inputValidation.infoBorder#7A9AD4
  • inputValidation.warningBorder#FFCA28
  • list.activeSelectionBackground#2C3844
  • list.activeSelectionForeground#DEE3E8
  • list.focusBackground#2F3A46
  • list.focusForeground#DEE3E8
  • list.highlightForeground#7A9AD4
  • list.hoverBackground#2C384466
  • list.hoverForeground#DEE3E8
  • list.inactiveSelectionBackground#2C3844
  • list.inactiveSelectionForeground#DEE3E8
  • menu.background#1C2127
  • menu.foreground#DEE3E8
  • menu.selectionBackground#2C3844
  • menu.selectionBorder#7A9AD4
  • menu.selectionForeground#DEE3E8
  • menu.separatorBackground#2C3844
  • scrollbarSlider.activeBackground#7A9AD499
  • scrollbarSlider.background#7A9AD455
  • scrollbarSlider.hoverBackground#7A9AD477
  • sideBar.background#1C2127
  • sideBar.border#2C3844
  • sideBar.foreground#DEE3E8
  • sideBarSectionHeader.background#222830
  • statusBar.background#181C22
  • statusBar.debuggingBackground#FF4D4D
  • statusBar.foreground#DEE3E8
  • statusBar.noFolderBackground#1A1F25
  • statusBarItem.errorBackground#FF4D4D33
  • statusBarItem.warningBackground#FFCA2833
  • tab.activeBackground#222830
  • tab.activeForeground#DEE3E8
  • tab.hoverBackground#2C3844
  • tab.inactiveBackground#1A1F25
  • tab.inactiveForeground#8A929A
  • terminal.ansiBlack#1E232A
  • terminal.ansiBlue#7A9AD4
  • terminal.ansiBrightBlack#7F8C8D
  • terminal.ansiBrightBlue#8AB4F8
  • terminal.ansiBrightCyan#2AA198
  • terminal.ansiBrightGreen#7BC07B
  • terminal.ansiBrightMagenta#B16286
  • terminal.ansiBrightRed#FF4D4D
  • terminal.ansiBrightWhite#DEE3E8
  • terminal.ansiBrightYellow#FFCA28
  • terminal.ansiCyan#2AA198
  • terminal.ansiGreen#6AA66A
  • terminal.ansiMagenta#B16286
  • terminal.ansiRed#FF4D4D
  • terminal.ansiWhite#D1D6D1
  • terminal.ansiYellow#FFCA28
  • terminal.background#1A1F25
  • terminal.foreground#DEE3E8
  • terminalCursor.foreground#DEE3E8
  • titleBar.activeBackground#1A1F25
  • titleBar.activeForeground#DEE3E8
  • titleBar.inactiveBackground#2C3844
  • titleBar.inactiveForeground#7F8C8D
  • widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, storage.modifier#7A9AD4bold
string, string.quoted, string.regexp#7BC07B—
string.template, string.interpolated, meta.template.expression, meta.embedded.expression, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#7BC07B
constant.numeric, constant.language.boolean#FFCA28—
comment, punctuation.definition.comment, comment.block.documentation#9CA3AF
entity.name.function, support.function#FF4D4D—
entity.name.type, support.class, support.type#7A9AD4—
variable, variable.parameter#DEE3E8—
entity.name.tag, meta.tag.html#7A9AD4bold
entity.other.attribute-name#FFCA28—
punctuation, meta.delimiter#7A9AD4—
keyword.operator#7A9AD4—