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#e8e8ea
  • activityBar.border#bcbcd0
  • activityBar.foreground#1a1a2f
  • activityBarBadge.background#4250ef
  • activityBarBadge.foreground#f5f5ff
  • badge.background#f0dacf
  • badge.foreground#0a0a1f
  • button.background#f0dacf
  • button.foreground#0a0a1f
  • button.hoverBackground#eebb20
  • diffEditor.border#bcbcd0
  • diffEditor.insertedLineBackground#e4e4ff99
  • diffEditor.insertedTextBackground#dbdbff99
  • diffEditor.removedLineBackground#efefcb99
  • diffEditor.removedTextBackground#fff0af99
  • dropdown.background#f5f5ff
  • dropdown.border#bcbcd0
  • dropdown.foreground#1a1a2f
  • editor.background#f5f5ff
  • editor.findMatchBackground#fac200
  • editor.findMatchHighlightBackground#cbcfff99
  • editor.findRangeHighlightBackground#e3ea9a99
  • editor.foreground#1a1a2f
  • editor.hoverHighlightBackground#eebb2099
  • editor.inactiveSelectionBackground#c0dfff99
  • editor.lineHighlightBackground#f3e0d5
  • editor.selectionBackground#dadadf
  • editor.selectionHighlightBackground#f0dacf99
  • editor.wordHighlightBackground#d0dfff99
  • editor.wordHighlightStrongBackground#afafef99
  • editorBracketMatch.background#8fc0cf
  • editorBracketMatch.border#ba35af
  • editorCursor.foreground#0000bb
  • editorError.foreground#e00033
  • editorGutter.addedBackground#217a3c
  • editorGutter.background#efeff5
  • editorGutter.deletedBackground#e00033
  • editorGutter.modifiedBackground#965000
  • editorHint.foreground#70627f
  • editorIndentGuide.activeBackground1#b3b3c0
  • editorIndentGuide.background1#bcbcd0
  • editorInfo.foreground#217a3c
  • editorLineNumber.activeForeground#1a1a2f
  • editorLineNumber.foreground#70627f
  • editorOverviewRuler.addedForeground#217a3c
  • editorOverviewRuler.border#bcbcd0
  • editorOverviewRuler.deletedForeground#e00033
  • editorOverviewRuler.modifiedForeground#965000
  • editorRuler.foreground#d3d3e0
  • editorWarning.foreground#965000
  • editorWhitespace.foreground#bcbcd0
  • gitDecoration.addedResourceForeground#217a3c
  • gitDecoration.conflictingResourceForeground#d50f7f
  • gitDecoration.deletedResourceForeground#553d00
  • gitDecoration.ignoredResourceForeground#70627f
  • gitDecoration.modifiedResourceForeground#6f1343
  • gitDecoration.submoduleResourceForeground#196f70
  • gitDecoration.untrackedResourceForeground#008058
  • input.background#f5f5ff
  • input.border#bcbcd0
  • input.foreground#1a1a2f
  • input.placeholderForeground#70627f
  • inputOption.activeBackground#f0dacf
  • inputOption.activeBorder#4250ef
  • inputValidation.errorBackground#f0e0a0
  • inputValidation.errorBorder#e00033
  • inputValidation.infoBackground#d0dfff
  • inputValidation.infoBorder#217a3c
  • inputValidation.warningBackground#e3ea9a
  • inputValidation.warningBorder#965000
  • list.activeSelectionBackground#f0dacf
  • list.activeSelectionForeground#0a0a1f
  • list.activeSelectionIconForeground#4250ef
  • list.focusBackground#f0dacf
  • list.highlightForeground#4250ef
  • list.hoverBackground#eebb20
  • list.inactiveSelectionBackground#c0dfff
  • notificationCenterHeader.background#d3d3e0
  • notificationCenterHeader.foreground#1a1a2f
  • panel.background#f5f5ff
  • panel.border#bcbcd0
  • panelTitle.activeBorder#4250ef
  • panelTitle.activeForeground#1a1a2f
  • panelTitle.inactiveForeground#70627f
  • progressBar.background#4250ef
  • sideBar.background#e8e8ea
  • sideBar.border#bcbcd0
  • sideBar.foreground#1a1a2f
  • sideBarSectionHeader.background#d3d3e0
  • sideBarSectionHeader.foreground#1a1a2f
  • sideBarTitle.foreground#1a1a2f
  • statusBar.background#99c7ff
  • statusBar.border#bcbcd0
  • statusBar.debuggingBackground#3fbfff
  • statusBar.debuggingForeground#0a0a1f
  • statusBar.foreground#0a0a1f
  • statusBar.noFolderBackground#d3d3e0
  • statusBar.noFolderForeground#1a1a2f
  • tab.activeBackground#f5f5ff
  • tab.activeBorder#4250ef
  • tab.activeForeground#1a1a2f
  • tab.border#bcbcd0
  • tab.hoverBackground#f3e0d5
  • tab.hoverBorder#bcbcd0
  • tab.inactiveBackground#e8e8ea
  • tab.inactiveForeground#70627f
  • tab.unfocusedActiveBackground#efeff5
  • tab.unfocusedActiveBorder#bcbcd0
  • tab.unfocusedActiveForeground#70627f
  • terminal.ansiBlack#1a1a2f
  • terminal.ansiBlue#375cd8
  • terminal.ansiBrightBlack#70627f
  • terminal.ansiBrightBlue#4250ef
  • terminal.ansiBrightCyan#3f6faf
  • terminal.ansiBrightGreen#4a7d00
  • terminal.ansiBrightMagenta#cf25aa
  • terminal.ansiBrightRed#e00033
  • terminal.ansiBrightWhite#f5f5ff
  • terminal.ansiBrightYellow#965000
  • terminal.ansiCyan#1f6fbf
  • terminal.ansiGreen#217a3c
  • terminal.ansiMagenta#ba35af
  • terminal.ansiRed#d3303a
  • terminal.ansiWhite#e8e8ea
  • terminal.ansiYellow#805d00
  • terminal.background#f5f5ff
  • terminal.foreground#1a1a2f
  • terminalCursor.foreground#0000bb
  • titleBar.activeBackground#d3d3e0
  • titleBar.activeForeground#1a1a2f
  • titleBar.border#bcbcd0
  • titleBar.inactiveBackground#efeff5
  • titleBar.inactiveForeground#70627f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#77604aitalic
comment.documentation, comment.block.documentation, string.quoted.docstring#506fa0
keyword, storage, storage.modifier#6052cf
keyword.operator#70627f
storage.type, support.type, entity.name.type, entity.other.inherited-class#008058
entity.name.function, support.function, meta.function-call, variable.function#cf25aa
variable, support.variable, variable.other#1477b2
constant, constant.numeric, constant.character, constant.language, support.constant#065fff
string, constant.other.symbol#4250ef
constant.character.escape, string.regexp#ba35af
punctuation#70627f
invalid, invalid.illegal#e00033
markup.heading#d3303abold
markup.bold, markup.italic#4250efbold italic
meta.link, markup.underline.link#4250efunderline
markup.list, markup.quote#196f70
markup.inline.raw#cf25aa
markup.inserted, meta.diff.header.to-file#333399
markup.deleted, meta.diff.header.from-file#553d00
markup.changed, meta.diff.range#6f1343