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#FFFFFF
  • button.background#007bff
  • editor.background#F5F5F5
  • editor.foreground#333333
  • editor.lineHighlightBackground#E6F2FF
  • editor.selectionBackground#D3E8FF
  • editorGroupHeader.tabsBackground#FFFFFF
  • editorWhitespace.foreground#CCCCCC
  • list.activeSelectionBackground#007bff
  • list.hoverBackground#c6e1ff
  • panel.background#F8F8F8
  • sash.hoverBorder#c6e1ff
  • sideBar.background#F8F8F8
  • statusBar.background#696969
  • tab.activeBackground#F5F5F5
  • tab.inactiveBackground#FFFFFF
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#0078D2
  • terminal.ansiBrightBlack#6A737D
  • terminal.ansiBrightBlue#3399FF
  • terminal.ansiBrightCyan#00FFFF
  • terminal.ansiBrightGreen#A8FF60
  • terminal.ansiBrightMagenta#CC00CC
  • terminal.ansiBrightRed#FF3333
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FF8000
  • terminal.ansiCyan#00B3B3
  • terminal.ansiGreen#1EB85A
  • terminal.ansiMagenta#550080
  • terminal.ansiRed#550080
  • terminal.ansiWhite#F5F5F5
  • terminal.ansiYellow#FF6100
  • terminal.background#F5F5F5
  • terminal.foreground#333333

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6A737D
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.control.case#0078D2
entity.name.type, support.class, entity.other.attribute-name, meta.preprocessor, keyword.control.macro, entity.name.type.class, entity.name.type.enum, entity.name.type.struct, entity.name.type.union, entity.name.type.typedef, entity.name.type.trait, entity.name.type.interface#1EB85A
entity.name.function, support.function, meta.function, entity.name.method#FF6100
string, punctuation.definition.string, string.quoted, string.regexp, markup.inline.raw#550080
constant.numeric#00B3B3
variable, variable.language, variable.other, variable.parameter, variable.declaration#333333
keyword.operator#000000
entity.other.attribute-name.html, entity.other.attribute-name.js, entity.other.attribute-name.jsx, entity.other.attribute-name.ts, entity.other.attribute-name.tsx#1EB85A
constant.character#550080
markup.underline.link, meta.url, markup.link#006699
punctuation.accessor, punctuation.separator#333333
support.variable#333333
Yet Another Color Theme by Pedro Wiezel - VS Code Theme