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#ddd6c1
  • activityBar.dropBackground#eee8d5
  • activityBar.foreground#584c27
  • activityBarBadge.background#b58900
  • badge.background#b58900aa
  • button.background#ac9d57
  • debugExceptionWidget.background#ddd6c1
  • debugExceptionWidget.border#ab395b
  • debugToolBar.background#ddd6c1
  • dropdown.background#eee8d5
  • dropdown.border#d3af86
  • editor.background#FCF9EF
  • editor.foreground#586E75
  • editor.lineHighlightBackground#eee8d5
  • editor.selectionBackground#eee8d5
  • editorCursor.foreground#657b83
  • editorGroup.border#ddd6c1
  • editorGroup.dropBackground#ddd6c1aa
  • editorGroupHeader.tabsBackground#d9d2c2
  • editorGutter.background#eee8d5
  • editorHoverWidget.background#ccc4b0
  • editorLineNumber.activeForeground#6f7776
  • editorLineNumber.foreground#9ca8a6
  • editorWhitespace.foreground#586e7580
  • editorWidget.background#eee8d5
  • extensionButton.prominentBackground#b58900
  • extensionButton.prominentHoverBackground#584c27aa
  • focusBorder#d3af86
  • input.background#ddd6c1
  • input.foreground#586e75
  • input.placeholderForeground#586e75aa
  • inputOption.activeBorder#d3af86
  • list.activeSelectionBackground#dfca88
  • list.activeSelectionForeground#6c6c6c
  • list.focusBackground#dfca8866
  • list.highlightForeground#b58900
  • list.hoverBackground#dfca8844
  • list.inactiveSelectionBackground#d1cbb8
  • panel.border#ddd6c1
  • peekView.border#b58900
  • peekViewEditor.background#fffbf2
  • peekViewEditor.matchHighlightBackground#7744aa40
  • peekViewResult.background#eee8d5
  • peekViewTitle.background#eee8d5
  • pickerGroup.border#2aa19899
  • pickerGroup.foreground#2aa19899
  • progressBar.background#b58900
  • selection.background#ccc4b0
  • sideBar.background#eee8d5
  • sideBarTitle.foreground#586e75
  • statusBar.background#eee8d5
  • statusBar.debuggingBackground#eee8d5
  • statusBar.foreground#586e75
  • statusBar.noFolderBackground#eee8d5
  • statusBarItem.prominentBackground#ddd6c1
  • statusBarItem.prominentHoverBackground#ddd6c199
  • tab.activeBackground#fdf6e3
  • tab.border#ddd6c1
  • tab.inactiveBackground#d3cbb7
  • tab.inactiveForeground#586e75
  • terminal.ansiBlack#657b83
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#657b83
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#859900
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#eee8d5
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#eee8d5
  • terminal.ansiYellow#b58900
  • terminal.foreground#657b83
  • titleBar.activeBackground#eee8d5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#93A1A1italic
comment.block.preprocessor#93A1A1
comment.documentation, comment.block.documentation#708787
invalid.illegal#660000
keyword.operator#2AA198
keyword, storage#2AA198
storage.type, support.type#2AA198
constant.language, support.constant, variable.language#2AA198
variable, support.variable#586E75
variable.parameter#DBAB15
entity.name.function, support.function#586E75bold
entity.name.type, entity.other.inherited-class, support.class, source.go#DBAB15bold
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#DBAB15
string#657B83
constant.character.escape#D33682
string.regexp#D33682
constant.other.symbol#657B83
punctuation#657B83
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#93A1A1
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#D33682
entity.name.tag#D33682
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#D33682italic
constant.character.entity, punctuation.definition.entity#586E75
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector.css#2AA198
meta.property-name, support.type.property-name#586E75
meta.property-value, meta.property-value constant.other, support.constant.property-value#DBAB15
keyword.other.importantbold
markup.deleted#dc322f
markup.changed#cb4b16
markup.inserted#219186
markup.quote#859900
markup.list#B58900
markup.bold, markup.italic#D33682
markup.inline.raw#2AA198
markup.heading#268BD2
markup.heading.setext#268BD2
Alligator by alligator-vscode-color-theme - VS Code Theme