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.foreground#584c27
  • activityBarBadge.background#b58900
  • badge.background#b58900aa
  • button.background#ac9d57
  • debugExceptionWidget.background#ddd6c1
  • debugExceptionWidget.border#ab395b
  • debugToolBar.background#ddd6c1
  • dropdown.background#ece3cc
  • dropdown.border#d3af86
  • editor.background#fbf3db
  • editor.findMatchHighlightForeground#fbf3db
  • editor.foreground#53676d
  • editor.lineHighlightBackground#ece3cc
  • editor.selectionBackground#ece3cc
  • editorCursor.foreground#53676d
  • editorGroup.border#ddd6c1
  • editorGroup.dropBackground#ddd6c1aa
  • editorGroupHeader.tabsBackground#d9d2c2
  • editorHoverWidget.background#ece3cc
  • editorLineNumber.activeForeground#909995
  • editorLineNumber.dimmedForeground#909995
  • editorLineNumber.foreground#909995
  • editorWhitespace.foreground#3a4d5380
  • editorWidget.background#ece3cc
  • extensionButton.prominentBackground#b58900
  • extensionButton.prominentHoverBackground#584c27aa
  • focusBorder#b49471
  • input.background#ddd6c1
  • input.foreground#3a4d53
  • input.placeholderForeground#3a4d53aa
  • inputOption.activeBorder#d3af86
  • list.activeSelectionBackground#dfca88
  • list.activeSelectionForeground#6c6c6c
  • list.highlightForeground#b58900
  • list.hoverBackground#dfca8844
  • list.inactiveSelectionBackground#d1cbb8
  • list.warningForeground#53676d
  • minimap.selectionHighlight#ece3cc
  • notebook.cellEditorBackground#f7f0e0
  • panel.border#ddd6c1
  • peekView.border#b58900
  • peekViewEditor.background#fffbf2
  • peekViewEditor.matchHighlightBackground#7744aa40
  • peekViewResult.background#ece3cc
  • peekViewTitle.background#ece3cc
  • pickerGroup.border#2aa19899
  • pickerGroup.foreground#2aa19899
  • ports.iconRunningProcessForeground#2aa19899
  • progressBar.background#b58900
  • quickInputList.focusBackground#dfca8866
  • selection.background#878b9180
  • sideBar.background#ece3cc
  • sideBarTitle.foreground#3a4d53
  • statusBar.background#ece3cc
  • statusBar.debuggingBackground#ece3cc
  • statusBar.foreground#3a4d53
  • statusBar.noFolderBackground#ece3cc
  • statusBarItem.prominentBackground#ddd6c1
  • statusBarItem.prominentHoverBackground#ddd6c199
  • statusBarItem.remoteBackground#ac9d57
  • tab.activeBackground#fbf3db
  • tab.activeModifiedBorder#cb4b16
  • tab.border#ddd6c1
  • tab.inactiveBackground#d3cbb7
  • tab.inactiveForeground#3a4d53
  • tab.lastPinnedBorder#fbf3db
  • terminal.ansiBlack#3a4d53
  • terminal.ansiBlue#0072d4
  • terminal.ansiBrightBlack#3a4d53
  • terminal.ansiBrightBlue#006dce
  • terminal.ansiBrightCyan#00978a
  • terminal.ansiBrightGreen#428b00
  • terminal.ansiBrightMagenta#c44392
  • terminal.ansiBrightRed#d2212d
  • terminal.ansiBrightWhite#fbf3db
  • terminal.ansiBrightYellow#a78300
  • terminal.ansiCyan#009c8f
  • terminal.ansiGreen#489100
  • terminal.ansiMagenta#ca4898
  • terminal.ansiRed#d2212d
  • terminal.ansiWhite#ece3cc
  • terminal.ansiYellow#ad8900
  • terminal.background#fbf3db
  • titleBar.activeBackground#ece3cc
  • walkThrough.embeddedEditorBackground#00000014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#909995—
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language#006dce—
entity, entity.name#8762c6—
variable.parameter.function#3a4d53—
entity.name.tag#489100—
keyword#d2212d—
storage, storage.type#d2212d—
storage.modifier.package, storage.modifier.import, storage.type.java#3a4d53—
string, punctuation.definition.string, string punctuation.section.embedded source#0072d4—
support#0072d4—
meta.property-name#0072d4—
variable#c25d1e—
variable.other#3a4d53—
invalid.broken#d2212ditalic
invalid.deprecated#d2212ditalic
invalid.illegal#d2212ditalic
invalid.unimplemented#d2212ditalic
carriage-return#fbf3dbitalic underline
message.error#d2212d—
string variable#0072d4—
source.regexp, string.regexp#3a4d53—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#3a4d53—
string.regexp constant.character.escape#489100bold
support.constant#0072d4—
support.variable#0072d4—
meta.module-reference#0072d4—
punctuation.definition.list.begin.markdown#c25d1e—
markup.heading, markup.heading entity.name#0072d4bold
markup.quote#489100—
markup.italic#3a4d53italic
markup.bold#3a4d53bold
markup.underline—underline
markup.strikethrough—strikethrough
markup.inline.raw#0072d4—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#d2212d—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#489100—
markup.changed, punctuation.definition.changed#c25d1e—
markup.ignored, markup.untracked#F6F8FA—
meta.diff.range#8762c6bold
meta.diff.header#0072d4—
meta.separator#0072d4bold
meta.output#0072d4—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#53676d—
brackethighlighter.unmatched#d2212d—
constant.other.reference.link, string.other.link#3a4d53underline
token.info-token#0072d4—
token.warn-token#ad8900—
token.error-token#d2212d—
token.debug-token#ca4898—
Solarized Light Extras by Nikolay Neustroev - VS Code Theme