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#141c28
  • activityBar.border#2a3545
  • activityBar.foreground#5BBCD6
  • activityBar.inactiveForeground#5a6a80
  • activityBarBadge.background#5BBCD6
  • activityBarBadge.foreground#141c28
  • badge.background#5BBCD6
  • badge.foreground#141c28
  • button.background#5BBCD6
  • button.foreground#141c28
  • button.hoverBackground#7BCCE6
  • descriptionForeground#a0a8a5
  • dropdown.background#243040
  • dropdown.border#2a3545
  • dropdown.foreground#e8e4df
  • editor.background#1a2332
  • editor.findMatchBackground#5BBCD650
  • editor.findMatchHighlightBackground#5BBCD640
  • editor.foreground#e8e4df
  • editor.hoverHighlightBackground#5BBCD620
  • editor.lineHighlightBackground#243040
  • editor.selectionBackground#5BBCD640
  • editor.selectionHighlightBackground#5BBCD630
  • editor.wordHighlightBackground#5BBCD630
  • editor.wordHighlightStrongBackground#5BBCD650
  • editorBracketHighlight.foreground1#a0a8a5
  • editorBracketHighlight.foreground2#a0a8a5
  • editorBracketHighlight.foreground3#a0a8a5
  • editorBracketHighlight.foreground4#a0a8a5
  • editorBracketHighlight.foreground5#a0a8a5
  • editorBracketHighlight.foreground6#a0a8a5
  • editorBracketHighlight.unexpectedBracket.foreground#e07080
  • editorBracketMatch.background#5BBCD650
  • editorBracketMatch.border#5BBCD6
  • editorCursor.foreground#5BBCD6
  • editorError.foreground#e07080
  • editorGroupHeader.tabsBackground#101820
  • editorGutter.background#1a2332
  • editorIndentGuide.activeBackground#3a4560
  • editorIndentGuide.background#2a3545
  • editorInfo.foreground#5BBCD6
  • editorLineNumber.activeForeground#e8e4df
  • editorLineNumber.foreground#4a5a70
  • editorWarning.foreground#e0b050
  • editorWhitespace.foreground#3a4560
  • focusBorder#5BBCD6
  • foreground#e8e4df
  • gitDecoration.addedResourceForeground#6ABA7A
  • gitDecoration.conflictingResourceForeground#c08050
  • gitDecoration.deletedResourceForeground#e07080
  • gitDecoration.ignoredResourceForeground#3a4a60
  • gitDecoration.modifiedResourceForeground#e0b050
  • gitDecoration.untrackedResourceForeground#6ABA7A
  • input.background#243040
  • input.border#2a3545
  • input.foreground#e8e4df
  • input.placeholderForeground#5a6a80
  • inputOption.activeBorder#5BBCD6
  • list.activeSelectionBackground#5BBCD640
  • list.activeSelectionForeground#e8e4df
  • list.focusBackground#5BBCD640
  • list.highlightForeground#5BBCD6
  • list.hoverBackground#2a3545
  • list.inactiveSelectionBackground#2a3545
  • list.inactiveSelectionForeground#e8e4df
  • panel.background#141c28
  • panel.border#2a3545
  • panelTitle.activeBorder#5BBCD6
  • panelTitle.activeForeground#e8e4df
  • panelTitle.inactiveForeground#a0a8a5
  • peekView.border#5BBCD6
  • peekViewEditor.background#1a2332
  • peekViewEditor.matchHighlightBackground#5BBCD650
  • peekViewResult.background#141c28
  • peekViewResult.selectionBackground#5BBCD640
  • peekViewTitle.background#141c28
  • peekViewTitleDescription.foreground#a0a8a5
  • peekViewTitleLabel.foreground#e8e4df
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#5a6580
  • scrollbarSlider.background#3a456080
  • scrollbarSlider.hoverBackground#4a5570a0
  • selection.background#5BBCD640
  • sideBar.background#141c28
  • sideBar.border#2a3545
  • sideBar.foreground#e8e4df
  • sideBarSectionHeader.background#101820
  • sideBarSectionHeader.foreground#e8e4df
  • sideBarTitle.foreground#e8e4df
  • statusBar.background#101820
  • statusBar.border#2a3545
  • statusBar.debuggingBackground#5BBCD6
  • statusBar.debuggingForeground#141c28
  • statusBar.foreground#a0a8a5
  • statusBar.noFolderBackground#101820
  • tab.activeBackground#1a2332
  • tab.activeBorder#5BBCD6
  • tab.activeBorderTop#5BBCD6
  • tab.activeForeground#e8e4df
  • tab.border#2a3545
  • tab.inactiveBackground#141c28
  • tab.inactiveForeground#a0a8a5
  • terminal.ansiBlack#141c28
  • terminal.ansiBlue#5BBCD6
  • terminal.ansiBrightBlack#5a6a80
  • terminal.ansiBrightBlue#7BCCE6
  • terminal.ansiBrightCyan#9BDCF6
  • terminal.ansiBrightGreen#8ADA9A
  • terminal.ansiBrightMagenta#c090b0
  • terminal.ansiBrightRed#f0909a
  • terminal.ansiBrightWhite#f0ece7
  • terminal.ansiBrightYellow#f0c060
  • terminal.ansiCyan#7BCCE6
  • terminal.ansiGreen#6ABA7A
  • terminal.ansiMagenta#b080a0
  • terminal.ansiRed#E08080
  • terminal.ansiWhite#e8e4df
  • terminal.ansiYellow#e0b050
  • terminal.background#1a2332
  • terminal.foreground#e8e4df
  • titleBar.activeBackground#141c28
  • titleBar.activeForeground#e8e4df
  • titleBar.border#2a3545
  • titleBar.inactiveBackground#101820
  • titleBar.inactiveForeground#a0a8a5
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a6a80italic
comment.block.documentation, comment.block.javadoc#6a7a90italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type, storage.modifier#5BBCD6
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison#a0a8a5
entity.name.function, meta.function-call, support.function#7BCCE6
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, entity.name.struct, support.type, support.class#c09860
entity.other.inherited-class#c09860
variable, variable.other, variable.parameter, variable.other.readwrite#E8DCD0
variable.language, variable.other.constant#e07080
entity.name.tag, meta.tag#5BBCD6
entity.other.attribute-name#E8DCD0
string, string.quoted, string.template#6ABA7A
string.regexp#7ACA8A
constant.character.escape#8ADA9A
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#e07080
constant.language, constant.language.boolean#e07080
constant.other#e07080
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator#a0a8a5
meta.brace, punctuation.definition.block, punctuation.definition.parameters#a0a8a5
support.constant, support.variable#e07080
meta.decorator, entity.name.function.decorator#c09860
markup.heading#5BBCD6bold
markup.italicitalic
markup.boldbold
markup.underline.link#7BCCE6
markup.inline.raw, markup.fenced_code#6ABA7A
markup.inserted#6ABA7A
markup.deleted#e07080
markup.changed#e0b050
invalid, invalid.illegal#e07080