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#f2e9db
  • activityBar.border#c8bdb6
  • activityBar.foreground#584141
  • activityBarBadge.background#5f5fdf
  • activityBarBadge.foreground#fff5ea
  • badge.background#ffd5d3
  • badge.foreground#542f38
  • button.background#ffd5d3
  • button.foreground#542f38
  • button.hoverBackground#b0e0df
  • diffEditor.border#c8bdb6
  • diffEditor.insertedLineBackground#e0f3e099
  • diffEditor.insertedTextBackground#ccefcf99
  • diffEditor.removedLineBackground#ffe3e399
  • diffEditor.removedTextBackground#ffd4d899
  • dropdown.background#fff5ea
  • dropdown.border#c8bdb6
  • dropdown.foreground#584141
  • editor.background#fff5ea
  • editor.findMatchBackground#efbf00
  • editor.findMatchHighlightBackground#cfceff99
  • editor.findRangeHighlightBackground#ffe0aa99
  • editor.foreground#584141
  • editor.hoverHighlightBackground#b0e0df99
  • editor.inactiveSelectionBackground#ccdfff99
  • editor.lineHighlightBackground#f9e2b2
  • editor.selectionBackground#f0d2df
  • editor.selectionHighlightBackground#ffd5d399
  • editor.wordHighlightBackground#ddf5cc99
  • editor.wordHighlightStrongBackground#febccf99
  • editorBracketMatch.background#8fcfdf
  • editorBracketMatch.border#ca3e54
  • editorCursor.foreground#cf1f00
  • editorError.foreground#ce3f00
  • editorGutter.addedBackground#007a0a
  • editorGutter.background#f7efe6
  • editorGutter.deletedBackground#ce3f00
  • editorGutter.modifiedBackground#b75515
  • editorHint.foreground#63728f
  • editorIndentGuide.activeBackground1#c9c0b8
  • editorIndentGuide.background1#c8bdb6
  • editorInfo.foreground#007a0a
  • editorLineNumber.activeForeground#584141
  • editorLineNumber.foreground#63728f
  • editorOverviewRuler.addedForeground#007a0a
  • editorOverviewRuler.border#c8bdb6
  • editorOverviewRuler.deletedForeground#ce3f00
  • editorOverviewRuler.modifiedForeground#b75515
  • editorRuler.foreground#e9e0d8
  • editorWarning.foreground#b75515
  • editorWhitespace.foreground#c8bdb6
  • gitDecoration.addedResourceForeground#007a0a
  • gitDecoration.conflictingResourceForeground#cf2f4f
  • gitDecoration.deletedResourceForeground#8f1313
  • gitDecoration.ignoredResourceForeground#63728f
  • gitDecoration.modifiedResourceForeground#553d00
  • gitDecoration.submoduleResourceForeground#8f5f4a
  • gitDecoration.untrackedResourceForeground#0f7f5f
  • input.background#fff5ea
  • input.border#c8bdb6
  • input.foreground#584141
  • input.placeholderForeground#63728f
  • inputOption.activeBackground#ffd5d3
  • inputOption.activeBorder#5f5fdf
  • inputValidation.errorBackground#ffdde5
  • inputValidation.errorBorder#ce3f00
  • inputValidation.infoBackground#ddf5cc
  • inputValidation.infoBorder#007a0a
  • inputValidation.warningBackground#ffe0aa
  • inputValidation.warningBorder#b75515
  • list.activeSelectionBackground#ffd5d3
  • list.activeSelectionForeground#542f38
  • list.activeSelectionIconForeground#5f5fdf
  • list.focusBackground#ffd5d3
  • list.highlightForeground#5f5fdf
  • list.hoverBackground#b0e0df
  • list.inactiveSelectionBackground#ccdfff
  • notificationCenterHeader.background#e9e0d8
  • notificationCenterHeader.foreground#584141
  • panel.background#fff5ea
  • panel.border#c8bdb6
  • panelTitle.activeBorder#5f5fdf
  • panelTitle.activeForeground#584141
  • panelTitle.inactiveForeground#63728f
  • progressBar.background#5f5fdf
  • sideBar.background#f2e9db
  • sideBar.border#c8bdb6
  • sideBar.foreground#584141
  • sideBarSectionHeader.background#e9e0d8
  • sideBarSectionHeader.foreground#584141
  • sideBarTitle.foreground#584141
  • statusBar.background#ffaf72
  • statusBar.border#c8bdb6
  • statusBar.debuggingBackground#df9fff
  • statusBar.debuggingForeground#542f38
  • statusBar.foreground#542f38
  • statusBar.noFolderBackground#e9e0d8
  • statusBar.noFolderForeground#584141
  • tab.activeBackground#fff5ea
  • tab.activeBorder#5f5fdf
  • tab.activeForeground#584141
  • tab.border#c8bdb6
  • tab.hoverBackground#f9e2b2
  • tab.hoverBorder#c8bdb6
  • tab.inactiveBackground#f2e9db
  • tab.inactiveForeground#63728f
  • tab.unfocusedActiveBackground#f7efe6
  • tab.unfocusedActiveBorder#c8bdb6
  • tab.unfocusedActiveForeground#63728f
  • terminal.ansiBlack#584141
  • terminal.ansiBlue#375cc6
  • terminal.ansiBrightBlack#63728f
  • terminal.ansiBrightBlue#5f5fdf
  • terminal.ansiBrightCyan#3f6faf
  • terminal.ansiBrightGreen#5f7200
  • terminal.ansiBrightMagenta#cb2f80
  • terminal.ansiBrightRed#ce3f00
  • terminal.ansiBrightWhite#fff5ea
  • terminal.ansiBrightYellow#b75515
  • terminal.ansiCyan#3f60af
  • terminal.ansiGreen#007a0a
  • terminal.ansiMagenta#ca3e54
  • terminal.ansiRed#ba2d2f
  • terminal.ansiWhite#f2e9db
  • terminal.ansiYellow#a45a22
  • terminal.background#fff5ea
  • terminal.foreground#584141
  • terminalCursor.foreground#cf1f00
  • titleBar.activeBackground#e9e0d8
  • titleBar.activeForeground#584141
  • titleBar.border#c8bdb6
  • titleBar.inactiveBackground#f7efe6
  • titleBar.inactiveForeground#63728f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9a625aitalic
comment.documentation, comment.block.documentation, string.quoted.docstring#4f6f8f
keyword, storage, storage.modifier#8448aa
keyword.operator#63728f
storage.type, support.type, entity.name.type, entity.other.inherited-class#0f7f5f
entity.name.function, support.function, meta.function-call, variable.function#cb2f80
variable, support.variable, variable.other#0f7b8f
constant, constant.numeric, constant.character, constant.language, support.constant#265fbf
string, constant.other.symbol#5f5fdf
constant.character.escape, string.regexp#ca3e54
punctuation#63728f
invalid, invalid.illegal#ce3f00
markup.heading#ba2d2fbold
markup.bold, markup.italic#5f5fdfbold italic
meta.link, markup.underline.link#5f5fdfunderline
markup.list, markup.quote#8f5f4a
markup.inline.raw#cb2f80
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