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