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#fdf6e3
  • editor.lineHighlightBackground#eee8d5
  • editor.selectionBackground#93a1a1bb
  • editorBracketMatch.background#00000065
  • editorCursor.background#fdf6e3
  • editorCursor.foreground#dc322f
  • editorGroup.border#ddd6c1
  • editorGroup.dropBackground#ddd6c1aa
  • editorGroupHeader.tabsBackground#fdf6e3
  • editorHoverWidget.background#ccc4b0
  • editorIndentGuide.activeBackground#081e2550
  • editorIndentGuide.background#eee8d599
  • editorLineNumber.activeForeground#567983
  • editorLineNumber.foreground#586e7560
  • 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
  • minimap.selectionHighlight#eee8d5
  • 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
  • scrollbar.shadow#999999
  • scrollbarSlider.background#00000024
  • 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
  • statusBarItem.remoteBackground#ac9d57
  • tab.activeBackground#fdf6e3
  • tab.activeModifiedBorder#cb4b16
  • tab.border#ddd6c1
  • tab.inactiveBackground#eee8d5
  • tab.inactiveForeground#586e75
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#586e75
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • 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
  • titleBar.activeBackground#fdf6e3
  • titleBar.inactiveBackground#eee8d5
  • walkThrough.embeddedEditorBackground#00000014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, source#586e75
comment, punctuation.definition.comment#839496aaitalic
comment.block.preprocessor#839496
comment.documentation, comment.block.documentation, comment.block.documentation punctuation.definition.comment , meta.property-value, meta.property-value constant.other, support.constant.property-value#657b83
invalid.illegal, entity.name.exception, markup.error, markup.traceback#660000
keyword.operator, keyword, storage, storage.type, support.type, constant.language, support.constant, variable.language, constant.character.escape, markup.heading#073642bold
variable, support.variable, meta.function-call.arguments#586e75
entity.name.function, support.function, meta.function-call#073642italic
entity.name.type, entity.name.namespace, entity.name.scope-resolution, entity.other.inherited-class, support.class#073642bold italic
entity.name.section, keyword.other.important, markup.boldbold
constant.numeric, constant.character, constant.language.symbol, constant#073642
string#657b83e0
string source, text source, meta.embedded.line variable, string.regexp, constant.other.symbol, punctuation, entity.name.tag, constant.character.entity, punctuation.definition.entity, meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css, meta.property-name, support.type.property-name, meta.link, markup.output, markup.raw, markup.prompt, markup.quote, markup.list#073642
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html, meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.js, punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#839496
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#8190A0italic
markup.changed, markup.deleted, markup.inserted#000000
markup.italicitalic
markup.underlineunderline
markup.italic#657b83italic
markup.bold#657b83bold
markup.inline.raw#657b83
meta.diff.range, meta.diff.index, meta.separator, meta.diff.header.from-file, meta.diff.header.to-file#434343
meta.jsx.children.js#333333ff
token.info-token#316bcd
token.warn-token#cd9731
token.error-token#cd3131
token.debug-token#800080
blind-themes by saahilclaypool - VS Code Theme