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#fbf2cd
  • activityBar.foreground#3c3836
  • activityBarBadge.background#ad3b14
  • badge.background#ad3b14
  • button.background#ad3b14
  • button.foreground#ffffff
  • dropdown.background#fbf2ca
  • dropdown.foreground#3c3836
  • editor.background#fbf1c7
  • editor.foreground#3c3836
  • editor.lineHighlightBackground#fbf2ca
  • editor.selectionBackground#ad3b1440
  • editorBracketHighlight.foreground1#d79921
  • editorBracketHighlight.foreground2#b16286
  • editorBracketHighlight.foreground3#458588
  • editorBracketHighlight.foreground4#689d6a
  • editorBracketHighlight.foreground5#98971a
  • editorBracketHighlight.foreground6#cc241d
  • editorCursor.foreground#ad3b14
  • editorError.foreground#cc241d
  • editorGroupHeader.tabsBackground#fbf2cb
  • editorIndentGuide.activeBackground1#3c38364c
  • editorIndentGuide.background1#3c38361a
  • editorInfo.foreground#458588
  • editorLineNumber.activeForeground#3c3836
  • editorLineNumber.foreground#3c383666
  • editorWarning.foreground#d79921
  • editorWhitespace.foreground#3c383626
  • editorWidget.background#fbf2ca
  • focusBorder#ad3b14
  • gitDecoration.conflictingResourceForeground#d79921
  • gitDecoration.deletedResourceForeground#cc241d
  • gitDecoration.modifiedResourceForeground#458588
  • gitDecoration.untrackedResourceForeground#98971a
  • input.background#fbf2ca
  • input.border#3c383633
  • input.foreground#3c3836
  • inputOption.activeBorder#ad3b14
  • list.activeSelectionBackground#ad3b144c
  • list.hoverBackground#fbf2ca
  • panel.background#fbf1c7
  • panel.border#3c383626
  • progressBar.background#ad3b14
  • scrollbarSlider.activeBackground#3c38364c
  • scrollbarSlider.background#3c38361a
  • scrollbarSlider.hoverBackground#3c383633
  • selection.background#ad3b144c
  • sideBar.background#fbf2ca
  • sideBar.foreground#3c3836
  • sideBarSectionHeader.background#fbf2cb
  • sideBarTitle.foreground#3c3836
  • statusBar.background#fcf3cf
  • statusBar.foreground#3c3836
  • tab.activeBackground#fbf1c7
  • tab.activeForeground#3c3836
  • tab.inactiveBackground#fbf2cb
  • terminal.ansiBlack#fbf1c7
  • terminal.ansiBlue#458588
  • terminal.ansiBrightBlack#928374
  • terminal.ansiBrightBlue#076678
  • terminal.ansiBrightCyan#427b58
  • terminal.ansiBrightGreen#79740e
  • terminal.ansiBrightMagenta#8f3f71
  • terminal.ansiBrightRed#9d0006
  • terminal.ansiBrightWhite#3c3836
  • terminal.ansiBrightYellow#b57614
  • terminal.ansiCyan#689d6a
  • terminal.ansiGreen#98971a
  • terminal.ansiMagenta#b16286
  • terminal.ansiRed#cc241d
  • terminal.ansiWhite#7c6f64
  • terminal.ansiYellow#d79921
  • terminal.background#fbf1c7
  • terminal.foreground#3c3836
  • titleBar.activeBackground#fbf2ca
  • titleBar.activeForeground#3c3836

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#928374italic
punctuation.definition.comment#928374italic
comment.block.documentation#928374italic
string#98971a—
string.quoted#98971a—
string.template, punctuation.definition.string.template#98971a—
string.regexp#689d6a—
constant.numeric#d79921—
constant.language.boolean#d79921—
constant.language.null, constant.language.undefined#d79921—
constant.language, constant.other#d79921—
keyword#b16286—
keyword.control#b16286—
keyword.operator#3c3836—
keyword.other#b16286—
storage.type#b16286—
storage.modifier#b16286—
entity.name.function#458588—
meta.function-call, support.function#458588—
variable, variable.other#cc241d—
variable.parameter#cc241ditalic
variable.language#cc241ditalic
entity.name.type, entity.name.class#d79921—
entity.name.type.interface#d79921—
entity.name.namespace, entity.name.module#d79921—
entity.name.tag#cc241d—
entity.other.attribute-name#d79921—
support.type.property-name#458588—
support.constant.property-value, constant.other.color#689d6a—
constant.character.escape#689d6a—
support.class, support.type#689d6a—
support.constant#689d6a—
keyword.operator, punctuation.accessor#3c3836—
punctuation, punctuation.definition, punctuation.separator#3c3836—
invalid, invalid.illegal#ffffff—