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#f5e9cb
  • activityBar.border#c5baa6
  • activityBar.foreground#484431
  • activityBarBadge.background#5f5fdf
  • activityBarBadge.foreground#fff6d8
  • badge.background#ffe2a8
  • badge.foreground#403328
  • button.background#ffe2a8
  • button.foreground#403328
  • button.hoverBackground#deb4f0
  • diffEditor.border#c5baa6
  • diffEditor.insertedLineBackground#eef3c299
  • diffEditor.insertedTextBackground#d7ecb099
  • diffEditor.removedLineBackground#f5deb099
  • diffEditor.removedTextBackground#f8d0b699
  • dropdown.background#fff6d8
  • dropdown.border#c5baa6
  • dropdown.foreground#484431
  • editor.background#fff6d8
  • editor.findMatchBackground#efbf00
  • editor.findMatchHighlightBackground#cfceff99
  • editor.findRangeHighlightBackground#ffe89f99
  • editor.foreground#484431
  • editor.hoverHighlightBackground#deb4f099
  • editor.inactiveSelectionBackground#cce4f299
  • editor.lineHighlightBackground#fae7b0
  • editor.selectionBackground#f0d4d8
  • editor.selectionHighlightBackground#ffe2a899
  • editor.wordHighlightBackground#ddf5ac99
  • editor.wordHighlightStrongBackground#c4d47a99
  • editorBracketMatch.background#afcf8f
  • editorBracketMatch.border#aa3e74
  • editorCursor.foreground#a07f00
  • editorError.foreground#c74400
  • editorGutter.addedBackground#007a0a
  • editorGutter.background#f9efd4
  • editorGutter.deletedBackground#c74400
  • editorGutter.modifiedBackground#ba5205
  • editorHint.foreground#68708a
  • editorIndentGuide.activeBackground1#c7b7a6
  • editorIndentGuide.background1#c5baa6
  • editorInfo.foreground#007a0a
  • editorLineNumber.activeForeground#484431
  • editorLineNumber.foreground#68708a
  • editorOverviewRuler.addedForeground#007a0a
  • editorOverviewRuler.border#c5baa6
  • editorOverviewRuler.deletedForeground#c74400
  • editorOverviewRuler.modifiedForeground#ba5205
  • editorRuler.foreground#e7d7c6
  • editorWarning.foreground#ba5205
  • editorWhitespace.foreground#c5baa6
  • gitDecoration.addedResourceForeground#007a0a
  • gitDecoration.conflictingResourceForeground#c02945
  • gitDecoration.deletedResourceForeground#8f1313
  • gitDecoration.ignoredResourceForeground#68708a
  • gitDecoration.modifiedResourceForeground#553d00
  • gitDecoration.submoduleResourceForeground#80431a
  • gitDecoration.untrackedResourceForeground#008250
  • input.background#fff6d8
  • input.border#c5baa6
  • input.foreground#484431
  • input.placeholderForeground#68708a
  • inputOption.activeBackground#ffe2a8
  • inputOption.activeBorder#5f5fdf
  • inputValidation.errorBackground#ffd4b5
  • inputValidation.errorBorder#c74400
  • inputValidation.infoBackground#ddf5ac
  • inputValidation.infoBorder#007a0a
  • inputValidation.warningBackground#ffe89f
  • inputValidation.warningBorder#ba5205
  • list.activeSelectionBackground#ffe2a8
  • list.activeSelectionForeground#403328
  • list.activeSelectionIconForeground#5f5fdf
  • list.focusBackground#ffe2a8
  • list.highlightForeground#5f5fdf
  • list.hoverBackground#deb4f0
  • list.inactiveSelectionBackground#cce4f2
  • notificationCenterHeader.background#e7d7c6
  • notificationCenterHeader.foreground#484431
  • panel.background#fff6d8
  • panel.border#c5baa6
  • panelTitle.activeBorder#5f5fdf
  • panelTitle.activeForeground#484431
  • panelTitle.inactiveForeground#68708a
  • progressBar.background#5f5fdf
  • sideBar.background#f5e9cb
  • sideBar.border#c5baa6
  • sideBar.foreground#484431
  • sideBarSectionHeader.background#e7d7c6
  • sideBarSectionHeader.foreground#484431
  • sideBarTitle.foreground#484431
  • statusBar.background#f3cf72
  • statusBar.border#c5baa6
  • statusBar.debuggingBackground#df9fff
  • statusBar.debuggingForeground#403328
  • statusBar.foreground#403328
  • statusBar.noFolderBackground#e7d7c6
  • statusBar.noFolderForeground#484431
  • tab.activeBackground#fff6d8
  • tab.activeBorder#5f5fdf
  • tab.activeForeground#484431
  • tab.border#c5baa6
  • tab.hoverBackground#fae7b0
  • tab.hoverBorder#c5baa6
  • tab.inactiveBackground#f5e9cb
  • tab.inactiveForeground#68708a
  • tab.unfocusedActiveBackground#f9efd4
  • tab.unfocusedActiveBorder#c5baa6
  • tab.unfocusedActiveForeground#68708a
  • terminal.ansiBlack#484431
  • terminal.ansiBlue#375cc6
  • terminal.ansiBrightBlack#68708a
  • terminal.ansiBrightBlue#5f5fdf
  • terminal.ansiBrightCyan#4060a0
  • terminal.ansiBrightGreen#5a7400
  • terminal.ansiBrightMagenta#b02f80
  • terminal.ansiBrightRed#c74400
  • terminal.ansiBrightWhite#fff6d8
  • terminal.ansiBrightYellow#ba5205
  • terminal.ansiCyan#3f60af
  • terminal.ansiGreen#007a0a
  • terminal.ansiMagenta#aa3e74
  • terminal.ansiRed#ba2d2f
  • terminal.ansiWhite#f5e9cb
  • terminal.ansiYellow#a26310
  • terminal.background#fff6d8
  • terminal.foreground#484431
  • terminalCursor.foreground#a07f00
  • titleBar.activeBackground#e7d7c6
  • titleBar.activeForeground#484431
  • titleBar.border#c5baa6
  • titleBar.inactiveBackground#f9efd4
  • titleBar.inactiveForeground#68708a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7f6f1aitalic
comment.documentation, comment.block.documentation, string.quoted.docstring#4f6f8f
keyword, storage, storage.modifier#6448ca
keyword.operator#68708a
storage.type, support.type, entity.name.type, entity.other.inherited-class#008250
entity.name.function, support.function, meta.function-call, variable.function#b02f80
variable, support.variable, variable.other#0f708a
constant, constant.numeric, constant.character, constant.language, support.constant#265fbf
string, constant.other.symbol#5f5fdf
constant.character.escape, string.regexp#aa3e74
punctuation#68708a
invalid, invalid.illegal#c74400
markup.heading#ba2d2fbold
markup.bold, markup.italic#5f5fdfbold italic
meta.link, markup.underline.link#5f5fdfunderline
markup.list, markup.quote#80431a
markup.inline.raw#b02f80
markup.inserted, meta.diff.header.to-file#005000
markup.deleted, meta.diff.header.from-file#8f1313
markup.changed, meta.diff.range#553d00