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#eaefef
  • activityBar.border#b0b7c0
  • activityBar.foreground#232323
  • activityBarBadge.background#4244ef
  • activityBarBadge.foreground#fcffff
  • badge.background#cceff5
  • badge.foreground#051524
  • button.background#cceff5
  • button.foreground#051524
  • button.hoverBackground#eab5ff
  • diffEditor.border#b0b7c0
  • diffEditor.insertedLineBackground#d7fff599
  • diffEditor.insertedTextBackground#c9ffea99
  • diffEditor.removedLineBackground#ffe9e699
  • diffEditor.removedTextBackground#ffd6e099
  • dropdown.background#fcffff
  • dropdown.border#b0b7c0
  • dropdown.foreground#232323
  • editor.background#fcffff
  • editor.findMatchBackground#fac200
  • editor.findMatchHighlightBackground#cbcfff99
  • editor.findRangeHighlightBackground#ffe9bf99
  • editor.foreground#232323
  • editor.hoverHighlightBackground#eab5ff99
  • editor.inactiveSelectionBackground#baeeff99
  • editor.lineHighlightBackground#dff6e4
  • editor.selectionBackground#d4eaf3
  • editor.selectionHighlightBackground#cceff599
  • editor.wordHighlightBackground#ccefcf99
  • editor.wordHighlightStrongBackground#aae0bf99
  • editorBracketMatch.background#cab0ef
  • editorBracketMatch.border#aa44c5
  • editorCursor.foreground#0055bb
  • editorError.foreground#d03003
  • editorGutter.addedBackground#008a00
  • editorGutter.background#f7f9f9
  • editorGutter.deletedBackground#d03003
  • editorGutter.modifiedBackground#b6532f
  • editorHint.foreground#66657f
  • editorIndentGuide.activeBackground1#b5b8b8
  • editorIndentGuide.background1#b0b7c0
  • editorInfo.foreground#008a00
  • editorLineNumber.activeForeground#232323
  • editorLineNumber.foreground#66657f
  • editorOverviewRuler.addedForeground#008a00
  • editorOverviewRuler.border#b0b7c0
  • editorOverviewRuler.deletedForeground#d03003
  • editorOverviewRuler.modifiedForeground#b6532f
  • editorRuler.foreground#d7dbdb
  • editorWarning.foreground#b6532f
  • editorWhitespace.foreground#b0b7c0
  • gitDecoration.addedResourceForeground#008a00
  • gitDecoration.conflictingResourceForeground#cf2f4f
  • gitDecoration.deletedResourceForeground#8f1313
  • gitDecoration.ignoredResourceForeground#66657f
  • gitDecoration.modifiedResourceForeground#553d00
  • gitDecoration.submoduleResourceForeground#204f9a
  • gitDecoration.untrackedResourceForeground#00845f
  • input.background#fcffff
  • input.border#b0b7c0
  • input.foreground#232323
  • input.placeholderForeground#66657f
  • inputOption.activeBackground#cceff5
  • inputOption.activeBorder#4244ef
  • inputValidation.errorBackground#ffdfda
  • inputValidation.errorBorder#d03003
  • inputValidation.infoBackground#ccefcf
  • inputValidation.infoBorder#008a00
  • inputValidation.warningBackground#ffe9bf
  • inputValidation.warningBorder#b6532f
  • list.activeSelectionBackground#cceff5
  • list.activeSelectionForeground#051524
  • list.activeSelectionIconForeground#4244ef
  • list.focusBackground#cceff5
  • list.highlightForeground#4244ef
  • list.hoverBackground#eab5ff
  • list.inactiveSelectionBackground#baeeff
  • notificationCenterHeader.background#d7dbdb
  • notificationCenterHeader.foreground#232323
  • panel.background#fcffff
  • panel.border#b0b7c0
  • panelTitle.activeBorder#4244ef
  • panelTitle.activeForeground#232323
  • panelTitle.inactiveForeground#66657f
  • progressBar.background#4244ef
  • sideBar.background#eaefef
  • sideBar.border#b0b7c0
  • sideBar.foreground#232323
  • sideBarSectionHeader.background#d7dbdb
  • sideBarSectionHeader.foreground#232323
  • sideBarTitle.foreground#232323
  • statusBar.background#9ad0ff
  • statusBar.border#b0b7c0
  • statusBar.debuggingBackground#df8fff
  • statusBar.debuggingForeground#051524
  • statusBar.foreground#051524
  • statusBar.noFolderBackground#d7dbdb
  • statusBar.noFolderForeground#232323
  • tab.activeBackground#fcffff
  • tab.activeBorder#4244ef
  • tab.activeForeground#232323
  • tab.border#b0b7c0
  • tab.hoverBackground#dff6e4
  • tab.hoverBorder#b0b7c0
  • tab.inactiveBackground#eaefef
  • tab.inactiveForeground#66657f
  • tab.unfocusedActiveBackground#f7f9f9
  • tab.unfocusedActiveBorder#b0b7c0
  • tab.unfocusedActiveForeground#66657f
  • terminal.ansiBlack#232323
  • terminal.ansiBlue#004fc0
  • terminal.ansiBrightBlack#66657f
  • terminal.ansiBrightBlue#4244ef
  • terminal.ansiBrightCyan#3a6dd2
  • terminal.ansiBrightGreen#468400
  • terminal.ansiBrightMagenta#c0469a
  • terminal.ansiBrightRed#d03003
  • terminal.ansiBrightWhite#fcffff
  • terminal.ansiBrightYellow#b6532f
  • terminal.ansiCyan#1f6fbf
  • terminal.ansiGreen#008a00
  • terminal.ansiMagenta#aa44c5
  • terminal.ansiRed#c42d2f
  • terminal.ansiWhite#eaefef
  • terminal.ansiYellow#aa6100
  • terminal.background#fcffff
  • terminal.foreground#232323
  • terminalCursor.foreground#0055bb
  • titleBar.activeBackground#d7dbdb
  • titleBar.activeForeground#232323
  • titleBar.border#b0b7c0
  • titleBar.inactiveBackground#f7f9f9
  • titleBar.inactiveForeground#66657f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a5f2fitalic
comment.documentation, comment.block.documentation, string.quoted.docstring#305f9f
keyword, storage, storage.modifier#7f5ae0
keyword.operator#66657f
storage.type, support.type, entity.name.type, entity.other.inherited-class#00845f
entity.name.function, support.function, meta.function-call, variable.function#c0469a
variable, support.variable, variable.other#007a85
constant, constant.numeric, constant.character, constant.language, support.constant#065fff
string, constant.other.symbol#4244ef
constant.character.escape, string.regexp#aa44c5
punctuation#66657f
invalid, invalid.illegal#d03003
markup.heading#c42d2fbold
markup.bold, markup.italic#4244efbold italic
meta.link, markup.underline.link#4244efunderline
markup.list, markup.quote#204f9a
markup.inline.raw#c0469a
markup.inserted, meta.diff.header.to-file#004840
markup.deleted, meta.diff.header.from-file#8f1313
markup.changed, meta.diff.range#553d00
Ef (εὖ) themes for VSCode by bzy-debug - VS Code Theme