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#fdf7e6
  • activityBar.foreground#586e75
  • activityBarBadge.background#66b5a9
  • badge.background#66b5a9
  • button.background#66b5a9
  • button.foreground#ffffff
  • dropdown.background#fdf6e4
  • dropdown.foreground#586e75
  • editor.background#fdf6e3
  • editor.foreground#586e75
  • editor.lineHighlightBackground#fdf6e4
  • editor.selectionBackground#66b5a940
  • editorBracketHighlight.foreground1#b58900
  • editorBracketHighlight.foreground2#d33682
  • editorBracketHighlight.foreground3#268bd2
  • editorBracketHighlight.foreground4#2aa198
  • editorBracketHighlight.foreground5#859900
  • editorBracketHighlight.foreground6#dc322f
  • editorCursor.foreground#66b5a9
  • editorError.foreground#dc322f
  • editorGroupHeader.tabsBackground#fdf7e5
  • editorIndentGuide.activeBackground1#586e754c
  • editorIndentGuide.background1#586e751a
  • editorInfo.foreground#268bd2
  • editorLineNumber.activeForeground#586e75
  • editorLineNumber.foreground#586e7566
  • editorWarning.foreground#b58900
  • editorWhitespace.foreground#586e7526
  • editorWidget.background#fdf6e4
  • focusBorder#66b5a9
  • gitDecoration.conflictingResourceForeground#b58900
  • gitDecoration.deletedResourceForeground#dc322f
  • gitDecoration.modifiedResourceForeground#268bd2
  • gitDecoration.untrackedResourceForeground#859900
  • input.background#fdf6e4
  • input.border#586e7533
  • input.foreground#586e75
  • inputOption.activeBorder#66b5a9
  • list.activeSelectionBackground#66b5a94c
  • list.hoverBackground#fdf6e4
  • panel.background#fdf6e3
  • panel.border#586e7526
  • progressBar.background#66b5a9
  • scrollbarSlider.activeBackground#586e754c
  • scrollbarSlider.background#586e751a
  • scrollbarSlider.hoverBackground#586e7533
  • selection.background#66b5a94c
  • sideBar.background#fdf6e4
  • sideBar.foreground#586e75
  • sideBarSectionHeader.background#fdf7e5
  • sideBarTitle.foreground#586e75
  • statusBar.background#fdf7e7
  • statusBar.foreground#586e75
  • tab.activeBackground#fdf6e3
  • tab.activeForeground#586e75
  • tab.inactiveBackground#fdf7e5
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#002b36
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#fdf6e3
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#eee8d5
  • terminal.ansiYellow#b58900
  • terminal.background#fdf6e3
  • terminal.foreground#586e75
  • titleBar.activeBackground#fdf6e4
  • titleBar.activeForeground#586e75

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#002b36italic
punctuation.definition.comment#002b36italic
comment.block.documentation#002b36italic
string#859900—
string.quoted#859900—
string.template, punctuation.definition.string.template#859900—
string.regexp#2aa198—
constant.numeric#b58900—
constant.language.boolean#b58900—
constant.language.null, constant.language.undefined#b58900—
constant.language, constant.other#b58900—
keyword#d33682—
keyword.control#d33682—
keyword.operator#586e75—
keyword.other#d33682—
storage.type#d33682—
storage.modifier#d33682—
entity.name.function#268bd2—
meta.function-call, support.function#268bd2—
variable, variable.other#dc322f—
variable.parameter#dc322fitalic
variable.language#dc322fitalic
entity.name.type, entity.name.class#b58900—
entity.name.type.interface#b58900—
entity.name.namespace, entity.name.module#b58900—
entity.name.tag#dc322f—
entity.other.attribute-name#b58900—
support.type.property-name#268bd2—
support.constant.property-value, constant.other.color#2aa198—
constant.character.escape#2aa198—
support.class, support.type#2aa198—
support.constant#2aa198—
keyword.operator, punctuation.accessor#586e75—
punctuation, punctuation.definition, punctuation.separator#586e75—
invalid, invalid.illegal#ffffff—