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#e8f0f0
  • activityBar.border#b4c4c0
  • activityBar.foreground#34494a
  • activityBarBadge.background#5f5fdf
  • activityBarBadge.foreground#f6fff9
  • badge.background#ccedff
  • badge.foreground#243228
  • button.background#ccedff
  • button.foreground#243228
  • button.hoverBackground#ffc09f
  • diffEditor.border#b4c4c0
  • diffEditor.insertedLineBackground#d7ffe599
  • diffEditor.insertedTextBackground#c9ffda99
  • diffEditor.removedLineBackground#ffe9e699
  • diffEditor.removedTextBackground#ffd6e099
  • dropdown.background#f6fff9
  • dropdown.border#b4c4c0
  • dropdown.foreground#34494a
  • editor.background#f6fff9
  • editor.findMatchBackground#efcf00
  • editor.findMatchHighlightBackground#afdfff99
  • editor.findRangeHighlightBackground#ffecba99
  • editor.foreground#34494a
  • editor.hoverHighlightBackground#ffc09f99
  • editor.inactiveSelectionBackground#ccdfff99
  • editor.lineHighlightBackground#f9e0e5
  • editor.selectionBackground#d0e6ff
  • editor.selectionHighlightBackground#ccedff99
  • editor.wordHighlightBackground#ccf5dd99
  • editor.wordHighlightStrongBackground#f0bfff99
  • editorBracketMatch.background#7fddd0
  • editorBracketMatch.border#d5206f
  • editorCursor.foreground#bf005f
  • editorError.foreground#d03003
  • editorGutter.addedBackground#1a870f
  • editorGutter.background#f0f8f4
  • editorGutter.deletedBackground#d03003
  • editorGutter.modifiedBackground#b6540f
  • editorHint.foreground#777294
  • editorIndentGuide.activeBackground1#c0c6c3
  • editorIndentGuide.background1#b4c4c0
  • editorInfo.foreground#1a870f
  • editorLineNumber.activeForeground#34494a
  • editorLineNumber.foreground#777294
  • editorOverviewRuler.addedForeground#1a870f
  • editorOverviewRuler.border#b4c4c0
  • editorOverviewRuler.deletedForeground#d03003
  • editorOverviewRuler.modifiedForeground#b6540f
  • editorRuler.foreground#e0e6e3
  • editorWarning.foreground#b6540f
  • editorWhitespace.foreground#b4c4c0
  • gitDecoration.addedResourceForeground#1a870f
  • gitDecoration.conflictingResourceForeground#cf2f4f
  • gitDecoration.deletedResourceForeground#8f1313
  • gitDecoration.ignoredResourceForeground#777294
  • gitDecoration.modifiedResourceForeground#553d00
  • gitDecoration.submoduleResourceForeground#9d5e7a
  • gitDecoration.untrackedResourceForeground#007f68
  • input.background#f6fff9
  • input.border#b4c4c0
  • input.foreground#34494a
  • input.placeholderForeground#777294
  • inputOption.activeBackground#ccedff
  • inputOption.activeBorder#5f5fdf
  • inputValidation.errorBackground#ffe8e0
  • inputValidation.errorBorder#d03003
  • inputValidation.infoBackground#ccf5dd
  • inputValidation.infoBorder#1a870f
  • inputValidation.warningBackground#ffecba
  • inputValidation.warningBorder#b6540f
  • list.activeSelectionBackground#ccedff
  • list.activeSelectionForeground#243228
  • list.activeSelectionIconForeground#5f5fdf
  • list.focusBackground#ccedff
  • list.highlightForeground#5f5fdf
  • list.hoverBackground#ffc09f
  • list.inactiveSelectionBackground#ccdfff
  • notificationCenterHeader.background#e0e6e3
  • notificationCenterHeader.foreground#34494a
  • panel.background#f6fff9
  • panel.border#b4c4c0
  • panelTitle.activeBorder#5f5fdf
  • panelTitle.activeForeground#34494a
  • panelTitle.inactiveForeground#777294
  • progressBar.background#5f5fdf
  • sideBar.background#e8f0f0
  • sideBar.border#b4c4c0
  • sideBar.foreground#34494a
  • sideBarSectionHeader.background#e0e6e3
  • sideBarSectionHeader.foreground#34494a
  • sideBarTitle.foreground#34494a
  • statusBar.background#90e8b0
  • statusBar.border#b4c4c0
  • statusBar.debuggingBackground#df8fff
  • statusBar.debuggingForeground#243228
  • statusBar.foreground#243228
  • statusBar.noFolderBackground#e0e6e3
  • statusBar.noFolderForeground#34494a
  • tab.activeBackground#f6fff9
  • tab.activeBorder#5f5fdf
  • tab.activeForeground#34494a
  • tab.border#b4c4c0
  • tab.hoverBackground#f9e0e5
  • tab.hoverBorder#b4c4c0
  • tab.inactiveBackground#e8f0f0
  • tab.inactiveForeground#777294
  • tab.unfocusedActiveBackground#f0f8f4
  • tab.unfocusedActiveBorder#b4c4c0
  • tab.unfocusedActiveForeground#777294
  • terminal.ansiBlack#34494a
  • terminal.ansiBlue#375cc6
  • terminal.ansiBrightBlack#777294
  • terminal.ansiBrightBlue#5f5fdf
  • terminal.ansiBrightCyan#3f6faf
  • terminal.ansiBrightGreen#4a7d00
  • terminal.ansiBrightMagenta#cb26a0
  • terminal.ansiBrightRed#d03003
  • terminal.ansiBrightWhite#f6fff9
  • terminal.ansiBrightYellow#b6540f
  • terminal.ansiCyan#1f6fbf
  • terminal.ansiGreen#1a870f
  • terminal.ansiMagenta#d5206f
  • terminal.ansiRed#c42d2f
  • terminal.ansiWhite#e8f0f0
  • terminal.ansiYellow#a45f22
  • terminal.background#f6fff9
  • terminal.foreground#34494a
  • terminalCursor.foreground#bf005f
  • titleBar.activeBackground#e0e6e3
  • titleBar.activeForeground#34494a
  • titleBar.border#b4c4c0
  • titleBar.inactiveBackground#f0f8f4
  • titleBar.inactiveForeground#777294

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#876450italic
comment.documentation, comment.block.documentation, string.quoted.docstring#5f6abf
keyword, storage, storage.modifier#9435b4
keyword.operator#777294
storage.type, support.type, entity.name.type, entity.other.inherited-class#007f68
entity.name.function, support.function, meta.function-call, variable.function#cb26a0
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#d5206f
punctuation#777294
invalid, invalid.illegal#d03003
markup.heading#c42d2fbold
markup.bold, markup.italic#5f5fdfbold italic
meta.link, markup.underline.link#5f5fdfunderline
markup.list, markup.quote#9d5e7a
markup.inline.raw#cb26a0
markup.inserted, meta.diff.header.to-file#005000
markup.deleted, meta.diff.header.from-file#8f1313
markup.changed, meta.diff.range#553d00