Skip to main content
Coding Theme

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#1A1A1A
  • activityBar.foreground#00A6FF
  • activityBar.inactiveForeground#7d8fa3
  • badge.background#00A6FF
  • badge.foreground#FFFFFF
  • button.background#333333
  • button.foreground#ffffff
  • dropdown.background#252525
  • dropdown.foreground#ffffff
  • editor.background#1A1A1A
  • editor.findMatchBackground#333333
  • editor.findMatchHighlightBackground#33333300
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#252525
  • editor.selectionBackground#333333
  • editorBracketMatch.background#333333
  • editorBracketMatch.border#333333
  • editorCursor.foreground#00A6FF
  • editorHoverWidget.background#252525
  • editorHoverWidget.foreground#ffffff
  • editorLineNumber.activeForeground#00A6FF
  • editorLineNumber.foreground#7d8fa3
  • editorSuggestWidget.background#252525
  • editorSuggestWidget.foreground#ffffff
  • focusBorder#333333
  • foreground#ffffff
  • input.background#252525
  • input.foreground#ffffff
  • input.placeholderForeground#7d8fa3
  • list.activeSelectionBackground#333333
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#252525
  • list.hoverForeground#ffffff
  • minimap.background#1A1A1A
  • panel.background#161616
  • panel.border#1A1A1A
  • scrollbarSlider.background#333333
  • scrollbarSlider.hoverBackground#444444
  • selection.background#333333
  • sideBar.background#1A1A1A
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.foreground#ffffff
  • statusBar.background#151515
  • statusBar.foreground#ffffff
  • statusBarItem.hoverBackground#333333
  • tab.activeBackground#1A1A1A
  • tab.activeBorder#00A6FF
  • tab.activeForeground#ffffff
  • tab.inactiveBackground#1E1E1E
  • tab.inactiveForeground#7d8fa3
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#00A6FF
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#00A6FF
  • terminal.ansiBrightCyan#29B8DB
  • terminal.ansiBrightGreen#4cd84c
  • terminal.ansiBrightMagenta#D670D6
  • terminal.ansiBrightRed#ff3333
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd700
  • terminal.ansiCyan#11A8CD
  • terminal.ansiGreen#4cd84c
  • terminal.ansiMagenta#BC3FBC
  • terminal.ansiRed#ff3333
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffd700
  • terminal.background#1A1A1A
  • terminal.foreground#ffffff
  • terminalCursor.foreground#00A6FF
  • titleBar.activeBackground#1A1A1A
  • titleBar.activeForeground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7d8fa3
string#4cd84c
punctuation.definition.string.begin,punctuation.definition.string.end#4cd84c
constant.character.escape#4cd84c
constant.numeric#ff5500
keyword#00A6FF
storage#00A6FF
keyword.control#00A6FF
keyword.operator#e6e9f0
meta.require, support.function.any-method, variable.function, entity.name.function#ffffff
support.class, entity.name.type.class, entity.name.class#b8c2e0
entity.name.type, support.type#b8c2e0
variable#ffffff
variable.language#b8c2e0
constant#ffffff
entity.name.tag#00A6FF
support.class.component#66ccff
entity.other.attribute-name#e6e9f0
constant.language.bool#b8c2e0
punctuation.separator.delimiter, punctuation.definition, punctuation.section#9ca7c2
punctuation.section.parens, punctuation.section.brackets#9ca7c2
string.regexp#ffffff
markup.heading, entity.name.section.markdown#ffffff
markup.underline.link.markdown#00A6FF
markup.boldbold
markup.italicitalic
invalid.illegal, invalid.deprecated#ff3333
Gruber blue by Hazem - VS Code Theme