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#1F1F1F
  • button.background#405060
  • editor.background#1A1A1A
  • editor.foreground#D4D4D4
  • editor.lineHighlightBackground#222222
  • editor.selectionBackground#40506080
  • editorGroupHeader.tabsBackground#1A1A1A
  • editorWhitespace.foreground#505050
  • list.activeSelectionBackground#405060
  • list.hoverBackground#282828
  • panel.background#222222
  • sash.hoverBorder#405060
  • sideBar.background#222222
  • statusBar.background#1A1A1A
  • tab.activeBackground#1A1A1A
  • tab.inactiveBackground#222222
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#3399FF
  • terminal.ansiBrightBlack#505050
  • terminal.ansiBrightBlue#60B6FF
  • 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#BE58F7
  • terminal.ansiRed#BE58F7
  • terminal.ansiWhite#D4D4D4
  • terminal.ansiYellow#FF6100
  • terminal.background#1A1A1A
  • terminal.foreground#D4D4D4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8E9DA8
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.control.case#3399FF
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#BE58F7
constant.numeric#00B3B3
variable, variable.language, variable.other, variable.parameter, variable.declaration#D4D4D4
keyword.operator#D4D4D4
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#BE58F7
markup.underline.link, meta.url, markup.link#60B6FF
punctuation.accessor, punctuation.separator#D4D4D4
support.variable#D4D4D4