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#f0d8cf
  • activityBar.border#c0b4a6
  • activityBar.foreground#393330
  • activityBarBadge.background#5f55df
  • activityBarBadge.foreground#ffead8
  • badge.background#f3c4c4
  • badge.foreground#40231f
  • button.background#f3c4c4
  • button.foreground#40231f
  • button.hoverBackground#afdeaf
  • diffEditor.border#c0b4a6
  • diffEditor.insertedLineBackground#e2efc099
  • diffEditor.insertedTextBackground#d0e6b099
  • diffEditor.removedLineBackground#f5d0b099
  • diffEditor.removedTextBackground#f8c6b699
  • dropdown.background#ffead8
  • dropdown.border#c0b4a6
  • dropdown.foreground#393330
  • editor.background#ffead8
  • editor.findMatchBackground#efbf00
  • editor.findMatchHighlightBackground#afbeff99
  • editor.findRangeHighlightBackground#efe48f99
  • editor.foreground#393330
  • editor.hoverHighlightBackground#afdeaf99
  • editor.inactiveSelectionBackground#cfdff099
  • editor.lineHighlightBackground#fad8bf
  • editor.selectionBackground#dbe0c0
  • editor.selectionHighlightBackground#f3c4c499
  • editor.wordHighlightBackground#d0f0bc99
  • editor.wordHighlightStrongBackground#f5bfc599
  • editorBracketMatch.background#efafbf
  • editorBracketMatch.border#a23ea4
  • editorCursor.foreground#208f10
  • editorError.foreground#b20f00
  • editorGutter.addedBackground#007000
  • editorGutter.background#f7e2d2
  • editorGutter.deletedBackground#b20f00
  • editorGutter.modifiedBackground#b44405
  • editorHint.foreground#6e678f
  • editorIndentGuide.activeBackground1#c7b2ab
  • editorIndentGuide.background1#c0b4a6
  • editorInfo.foreground#007000
  • editorLineNumber.activeForeground#393330
  • editorLineNumber.foreground#6e678f
  • editorOverviewRuler.addedForeground#007000
  • editorOverviewRuler.border#c0b4a6
  • editorOverviewRuler.deletedForeground#b20f00
  • editorOverviewRuler.modifiedForeground#b44405
  • editorRuler.foreground#e7d2cb
  • editorWarning.foreground#b44405
  • editorWhitespace.foreground#c0b4a6
  • gitDecoration.addedResourceForeground#007000
  • gitDecoration.conflictingResourceForeground#aa184f
  • gitDecoration.deletedResourceForeground#8f1313
  • gitDecoration.ignoredResourceForeground#6e678f
  • gitDecoration.modifiedResourceForeground#553d00
  • gitDecoration.submoduleResourceForeground#8a5f4a
  • gitDecoration.untrackedResourceForeground#00704f
  • input.background#ffead8
  • input.border#c0b4a6
  • input.foreground#393330
  • input.placeholderForeground#6e678f
  • inputOption.activeBackground#f3c4c4
  • inputOption.activeBorder#5f55df
  • inputValidation.errorBackground#ffd4b5
  • inputValidation.errorBorder#b20f00
  • inputValidation.infoBackground#d0f0bc
  • inputValidation.infoBorder#007000
  • inputValidation.warningBackground#efe48f
  • inputValidation.warningBorder#b44405
  • list.activeSelectionBackground#f3c4c4
  • list.activeSelectionForeground#40231f
  • list.activeSelectionIconForeground#5f55df
  • list.focusBackground#f3c4c4
  • list.highlightForeground#5f55df
  • list.hoverBackground#afdeaf
  • list.inactiveSelectionBackground#cfdff0
  • notificationCenterHeader.background#e7d2cb
  • notificationCenterHeader.foreground#393330
  • panel.background#ffead8
  • panel.border#c0b4a6
  • panelTitle.activeBorder#5f55df
  • panelTitle.activeForeground#393330
  • panelTitle.inactiveForeground#6e678f
  • progressBar.background#5f55df
  • sideBar.background#f0d8cf
  • sideBar.border#c0b4a6
  • sideBar.foreground#393330
  • sideBarSectionHeader.background#e7d2cb
  • sideBarSectionHeader.foreground#393330
  • sideBarTitle.foreground#393330
  • statusBar.background#e9a0a0
  • statusBar.border#c0b4a6
  • statusBar.debuggingBackground#bf9fff
  • statusBar.debuggingForeground#40231f
  • statusBar.foreground#40231f
  • statusBar.noFolderBackground#e7d2cb
  • statusBar.noFolderForeground#393330
  • tab.activeBackground#ffead8
  • tab.activeBorder#5f55df
  • tab.activeForeground#393330
  • tab.border#c0b4a6
  • tab.hoverBackground#fad8bf
  • tab.hoverBorder#c0b4a6
  • tab.inactiveBackground#f0d8cf
  • tab.inactiveForeground#6e678f
  • tab.unfocusedActiveBackground#f7e2d2
  • tab.unfocusedActiveBorder#c0b4a6
  • tab.unfocusedActiveForeground#6e678f
  • terminal.ansiBlack#393330
  • terminal.ansiBlue#375cc6
  • terminal.ansiBrightBlack#6e678f
  • terminal.ansiBrightBlue#5f55df
  • terminal.ansiBrightCyan#4060a0
  • terminal.ansiBrightGreen#557000
  • terminal.ansiBrightMagenta#bf2c90
  • terminal.ansiBrightRed#b20f00
  • terminal.ansiBrightWhite#ffead8
  • terminal.ansiBrightYellow#b44405
  • terminal.ansiCyan#3f69af
  • terminal.ansiGreen#007000
  • terminal.ansiMagenta#a23ea4
  • terminal.ansiRed#b0000f
  • terminal.ansiWhite#f0d8cf
  • terminal.ansiYellow#906200
  • terminal.background#ffead8
  • terminal.foreground#393330
  • terminalCursor.foreground#208f10
  • titleBar.activeBackground#e7d2cb
  • titleBar.activeForeground#393330
  • titleBar.border#c0b4a6
  • titleBar.inactiveBackground#f7e2d2
  • titleBar.inactiveForeground#6e678f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8d6068italic
comment.documentation, comment.block.documentation, string.quoted.docstring#546f70
keyword, storage, storage.modifier#6448ca
keyword.operator#6e678f
storage.type, support.type, entity.name.type, entity.other.inherited-class#00704f
entity.name.function, support.function, meta.function-call, variable.function#bf2c90
variable, support.variable, variable.other#0f7688
constant, constant.numeric, constant.character, constant.language, support.constant#265fbf
string, constant.other.symbol#5f55df
constant.character.escape, string.regexp#a23ea4
punctuation#6e678f
invalid, invalid.illegal#b20f00
markup.heading#b0000fbold
markup.bold, markup.italic#5f55dfbold italic
meta.link, markup.underline.link#5f55dfunderline
markup.list, markup.quote#8a5f4a
markup.inline.raw#bf2c90
markup.inserted, meta.diff.header.to-file#005000
markup.deleted, meta.diff.header.from-file#8f1313
markup.changed, meta.diff.range#553d00