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#f0ece0
  • activityBar.border#c4c0b6
  • activityBar.foreground#242521
  • activityBarBadge.background#444fcf
  • activityBarBadge.foreground#fcf7ef
  • badge.background#e6e4bf
  • badge.foreground#142010
  • button.background#e6e4bf
  • button.foreground#142010
  • button.hoverBackground#efc26f
  • diffEditor.border#c4c0b6
  • diffEditor.insertedLineBackground#d8f8e199
  • diffEditor.insertedTextBackground#c1f2d199
  • diffEditor.removedLineBackground#ffe6e199
  • diffEditor.removedTextBackground#ffd3d499
  • dropdown.background#fcf7ef
  • dropdown.border#c4c0b6
  • dropdown.foreground#242521
  • editor.background#fcf7ef
  • editor.findMatchBackground#efbf00
  • editor.findMatchHighlightBackground#cfceff99
  • editor.findRangeHighlightBackground#f0e8ba99
  • editor.foreground#242521
  • editor.hoverHighlightBackground#efc26f99
  • editor.inactiveSelectionBackground#ccdfff99
  • editor.lineHighlightBackground#f0e0d4
  • editor.selectionBackground#e0e7e5
  • editor.selectionHighlightBackground#e6e4bf99
  • editor.wordHighlightBackground#d0efbf99
  • editor.wordHighlightStrongBackground#afc0f099
  • editorBracketMatch.background#9fcfdf
  • editorBracketMatch.border#9a456f
  • editorCursor.foreground#007f00
  • editorError.foreground#dd0020
  • editorGutter.addedBackground#006f00
  • editorGutter.background#f8f3ea
  • editorGutter.deletedBackground#dd0020
  • editorGutter.modifiedBackground#bf4400
  • editorHint.foreground#59786f
  • editorIndentGuide.activeBackground1#c5c3b8
  • editorIndentGuide.background1#c4c0b6
  • editorInfo.foreground#006f00
  • editorLineNumber.activeForeground#242521
  • editorLineNumber.foreground#59786f
  • editorOverviewRuler.addedForeground#006f00
  • editorOverviewRuler.border#c4c0b6
  • editorOverviewRuler.deletedForeground#dd0020
  • editorOverviewRuler.modifiedForeground#bf4400
  • editorRuler.foreground#e5e3d8
  • editorWarning.foreground#bf4400
  • editorWhitespace.foreground#c4c0b6
  • gitDecoration.addedResourceForeground#006f00
  • gitDecoration.conflictingResourceForeground#ca3400
  • gitDecoration.deletedResourceForeground#8f1313
  • gitDecoration.ignoredResourceForeground#59786f
  • gitDecoration.modifiedResourceForeground#553d00
  • gitDecoration.submoduleResourceForeground#7f475a
  • gitDecoration.untrackedResourceForeground#00824f
  • input.background#fcf7ef
  • input.border#c4c0b6
  • input.foreground#242521
  • input.placeholderForeground#59786f
  • inputOption.activeBackground#e6e4bf
  • inputOption.activeBorder#444fcf
  • inputValidation.errorBackground#ffd4bf
  • inputValidation.errorBorder#dd0020
  • inputValidation.infoBackground#d0efbf
  • inputValidation.infoBorder#006f00
  • inputValidation.warningBackground#f0e8ba
  • inputValidation.warningBorder#bf4400
  • list.activeSelectionBackground#e6e4bf
  • list.activeSelectionForeground#142010
  • list.activeSelectionIconForeground#444fcf
  • list.focusBackground#e6e4bf
  • list.highlightForeground#444fcf
  • list.hoverBackground#efc26f
  • list.inactiveSelectionBackground#ccdfff
  • notificationCenterHeader.background#e5e3d8
  • notificationCenterHeader.foreground#242521
  • panel.background#fcf7ef
  • panel.border#c4c0b6
  • panelTitle.activeBorder#444fcf
  • panelTitle.activeForeground#242521
  • panelTitle.inactiveForeground#59786f
  • progressBar.background#444fcf
  • sideBar.background#f0ece0
  • sideBar.border#c4c0b6
  • sideBar.foreground#242521
  • sideBarSectionHeader.background#e5e3d8
  • sideBarSectionHeader.foreground#242521
  • sideBarTitle.foreground#242521
  • statusBar.background#c0df6f
  • statusBar.border#c4c0b6
  • statusBar.debuggingBackground#df9fff
  • statusBar.debuggingForeground#142010
  • statusBar.foreground#142010
  • statusBar.noFolderBackground#e5e3d8
  • statusBar.noFolderForeground#242521
  • tab.activeBackground#fcf7ef
  • tab.activeBorder#444fcf
  • tab.activeForeground#242521
  • tab.border#c4c0b6
  • tab.hoverBackground#f0e0d4
  • tab.hoverBorder#c4c0b6
  • tab.inactiveBackground#f0ece0
  • tab.inactiveForeground#59786f
  • tab.unfocusedActiveBackground#f8f3ea
  • tab.unfocusedActiveBorder#c4c0b6
  • tab.unfocusedActiveForeground#59786f
  • terminal.ansiBlack#242521
  • terminal.ansiBlue#375cc6
  • terminal.ansiBrightBlack#59786f
  • terminal.ansiBrightBlue#444fcf
  • terminal.ansiBrightCyan#3f6faf
  • terminal.ansiBrightGreen#557400
  • terminal.ansiBrightMagenta#bf456a
  • terminal.ansiBrightRed#dd0020
  • terminal.ansiBrightWhite#fcf7ef
  • terminal.ansiBrightYellow#bf4400
  • terminal.ansiCyan#1f70af
  • terminal.ansiGreen#006f00
  • terminal.ansiMagenta#9a456f
  • terminal.ansiRed#9f0d0f
  • terminal.ansiWhite#f0ece0
  • terminal.ansiYellow#a7601f
  • terminal.background#fcf7ef
  • terminal.foreground#242521
  • terminalCursor.foreground#007f00
  • titleBar.activeBackground#e5e3d8
  • titleBar.activeForeground#242521
  • titleBar.border#c4c0b6
  • titleBar.inactiveBackground#f8f3ea
  • titleBar.inactiveForeground#59786f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8f6f4aitalic
comment.documentation, comment.block.documentation, string.quoted.docstring#4f677f
keyword, storage, storage.modifier#8448aa
keyword.operator#59786f
storage.type, support.type, entity.name.type, entity.other.inherited-class#00824f
entity.name.function, support.function, meta.function-call, variable.function#bf456a
variable, support.variable, variable.other#007a9f
constant, constant.numeric, constant.character, constant.language, support.constant#065fbf
string, constant.other.symbol#444fcf
constant.character.escape, string.regexp#9a456f
punctuation#59786f
invalid, invalid.illegal#dd0020
markup.heading#9f0d0fbold
markup.bold, markup.italic#444fcfbold italic
meta.link, markup.underline.link#444fcfunderline
markup.list, markup.quote#7f475a
markup.inline.raw#bf456a
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