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
Ef (εὖ) themes for VSCode by bzy-debug - VS Code Theme