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#e4dbc0
  • activityBar.border#7f785f
  • activityBar.foreground#231a1f
  • activityBarBadge.background#3a3da0
  • activityBarBadge.foreground#f1ecd0
  • badge.background#dfc8af
  • badge.foreground#2f1005
  • button.background#dfc8af
  • button.foreground#2f1005
  • button.hoverBackground#c0cbd7
  • diffEditor.border#7f785f
  • diffEditor.insertedLineBackground#d0e7c299
  • diffEditor.insertedTextBackground#b0e7b099
  • diffEditor.removedLineBackground#f0d9bc99
  • diffEditor.removedTextBackground#f8c8a699
  • dropdown.background#f1ecd0
  • dropdown.border#7f785f
  • dropdown.foreground#231a1f
  • editor.background#f1ecd0
  • editor.findMatchBackground#efbf00
  • editor.findMatchHighlightBackground#cfceff99
  • editor.findRangeHighlightBackground#e7de8099
  • editor.foreground#231a1f
  • editor.hoverHighlightBackground#c0cbd799
  • editor.inactiveSelectionBackground#c7dbe899
  • editor.lineHighlightBackground#ecdfba
  • editor.selectionBackground#ddc5af
  • editor.selectionHighlightBackground#dfc8af99
  • editor.wordHighlightBackground#cdeeb099
  • editor.wordHighlightStrongBackground#c5d8a299
  • editorBracketMatch.background#9fd0cc
  • editorBracketMatch.border#822478
  • editorCursor.foreground#774400
  • editorError.foreground#9a0000
  • editorGutter.addedBackground#226022
  • editorGutter.background#e7e0ca
  • editorGutter.deletedBackground#9a0000
  • editorGutter.modifiedBackground#843300
  • editorHint.foreground#685f53
  • editorIndentGuide.activeBackground1#aea88e
  • editorIndentGuide.background1#7f785f
  • editorInfo.foreground#226022
  • editorLineNumber.activeForeground#231a1f
  • editorLineNumber.foreground#685f53
  • editorOverviewRuler.addedForeground#226022
  • editorOverviewRuler.border#7f785f
  • editorOverviewRuler.deletedForeground#9a0000
  • editorOverviewRuler.modifiedForeground#843300
  • editorRuler.foreground#cec8ae
  • editorWarning.foreground#843300
  • editorWhitespace.foreground#7f785f
  • gitDecoration.addedResourceForeground#226022
  • gitDecoration.conflictingResourceForeground#8f0038
  • gitDecoration.deletedResourceForeground#8f1013
  • gitDecoration.ignoredResourceForeground#685f53
  • gitDecoration.modifiedResourceForeground#553d00
  • gitDecoration.submoduleResourceForeground#524874
  • gitDecoration.untrackedResourceForeground#006e50
  • input.background#f1ecd0
  • input.border#7f785f
  • input.foreground#231a1f
  • input.placeholderForeground#685f53
  • inputOption.activeBackground#dfc8af
  • inputOption.activeBorder#3a3da0
  • inputValidation.errorBackground#f2d4b5
  • inputValidation.errorBorder#9a0000
  • inputValidation.infoBackground#cdeeb0
  • inputValidation.infoBorder#226022
  • inputValidation.warningBackground#e7de80
  • inputValidation.warningBorder#843300
  • list.activeSelectionBackground#dfc8af
  • list.activeSelectionForeground#2f1005
  • list.activeSelectionIconForeground#3a3da0
  • list.focusBackground#dfc8af
  • list.highlightForeground#3a3da0
  • list.hoverBackground#c0cbd7
  • list.inactiveSelectionBackground#c7dbe8
  • notificationCenterHeader.background#cec8ae
  • notificationCenterHeader.foreground#231a1f
  • panel.background#f1ecd0
  • panel.border#7f785f
  • panelTitle.activeBorder#3a3da0
  • panelTitle.activeForeground#231a1f
  • panelTitle.inactiveForeground#685f53
  • progressBar.background#3a3da0
  • sideBar.background#e4dbc0
  • sideBar.border#7f785f
  • sideBar.foreground#231a1f
  • sideBarSectionHeader.background#cec8ae
  • sideBarSectionHeader.foreground#231a1f
  • sideBarTitle.foreground#231a1f
  • statusBar.background#cfab80
  • statusBar.border#7f785f
  • statusBar.debuggingBackground#dfafff
  • statusBar.debuggingForeground#2f1005
  • statusBar.foreground#2f1005
  • statusBar.noFolderBackground#cec8ae
  • statusBar.noFolderForeground#231a1f
  • tab.activeBackground#f1ecd0
  • tab.activeBorder#3a3da0
  • tab.activeForeground#231a1f
  • tab.border#7f785f
  • tab.hoverBackground#ecdfba
  • tab.hoverBorder#7f785f
  • tab.inactiveBackground#e4dbc0
  • tab.inactiveForeground#685f53
  • tab.unfocusedActiveBackground#e7e0ca
  • tab.unfocusedActiveBorder#7f785f
  • tab.unfocusedActiveForeground#685f53
  • terminal.ansiBlack#231a1f
  • terminal.ansiBlue#113384
  • terminal.ansiBrightBlack#685f53
  • terminal.ansiBrightBlue#3a3da0
  • terminal.ansiBrightCyan#4a5d90
  • terminal.ansiBrightGreen#3a7800
  • terminal.ansiBrightMagenta#960f4f
  • terminal.ansiBrightRed#9a0000
  • terminal.ansiBrightWhite#f1ecd0
  • terminal.ansiBrightYellow#843300
  • terminal.ansiCyan#125a7f
  • terminal.ansiGreen#226022
  • terminal.ansiMagenta#822478
  • terminal.ansiRed#882000
  • terminal.ansiWhite#e4dbc0
  • terminal.ansiYellow#6b4500
  • terminal.background#f1ecd0
  • terminal.foreground#231a1f
  • terminalCursor.foreground#774400
  • titleBar.activeBackground#cec8ae
  • titleBar.activeForeground#231a1f
  • titleBar.border#7f785f
  • titleBar.inactiveBackground#e7e0ca
  • titleBar.inactiveForeground#685f53

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a5937italic
comment.documentation, comment.block.documentation, string.quoted.docstring#304f60
keyword, storage, storage.modifier#50119f
keyword.operator#685f53
storage.type, support.type, entity.name.type, entity.other.inherited-class#006e50
entity.name.function, support.function, meta.function-call, variable.function#960f4f
variable, support.variable, variable.other#00676f
constant, constant.numeric, constant.character, constant.language, support.constant#000080
string, constant.other.symbol#3a3da0
constant.character.escape, string.regexp#822478
punctuation#685f53
invalid, invalid.illegal#9a0000
markup.heading#882000bold
markup.bold, markup.italic#3a3da0bold italic
meta.link, markup.underline.link#3a3da0underline
markup.list, markup.quote#524874
markup.inline.raw#960f4f
markup.inserted, meta.diff.header.to-file#005200
markup.deleted, meta.diff.header.from-file#8f1013
markup.changed, meta.diff.range#553d00