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#f6ece8
  • activityBar.border#baafba
  • activityBar.foreground#222222
  • activityBarBadge.background#4250ef
  • activityBarBadge.foreground#fff8f0
  • badge.background#fadacf
  • badge.foreground#111133
  • button.background#fadacf
  • button.foreground#111133
  • button.hoverBackground#b4cfff
  • diffEditor.border#baafba
  • diffEditor.insertedLineBackground#e0f3e099
  • diffEditor.insertedTextBackground#ccefcf99
  • diffEditor.removedLineBackground#ffe3e399
  • diffEditor.removedTextBackground#ffd4d899
  • dropdown.background#fff8f0
  • dropdown.border#baafba
  • dropdown.foreground#222222
  • editor.background#fff8f0
  • editor.findMatchBackground#fac200
  • editor.findMatchHighlightBackground#cbcfff99
  • editor.findRangeHighlightBackground#ffe5ba99
  • editor.foreground#222222
  • editor.hoverHighlightBackground#b4cfff99
  • editor.inactiveSelectionBackground#cfdff999
  • editor.lineHighlightBackground#f9e8c0
  • editor.selectionBackground#caeafa
  • editor.selectionHighlightBackground#fadacf99
  • editor.wordHighlightBackground#cff5d099
  • editor.wordHighlightStrongBackground#aaeccf99
  • editorBracketMatch.background#afbfef
  • editorBracketMatch.border#ba35af
  • editorCursor.foreground#1144ff
  • editorError.foreground#dd1100
  • editorGutter.addedBackground#217a3c
  • editorGutter.background#f9f2ef
  • editorGutter.deletedBackground#dd1100
  • editorGutter.modifiedBackground#9f4a00
  • editorHint.foreground#63728f
  • editorIndentGuide.activeBackground1#c7c0ba
  • editorIndentGuide.background1#baafba
  • editorInfo.foreground#217a3c
  • editorLineNumber.activeForeground#222222
  • editorLineNumber.foreground#63728f
  • editorOverviewRuler.addedForeground#217a3c
  • editorOverviewRuler.border#baafba
  • editorOverviewRuler.deletedForeground#dd1100
  • editorOverviewRuler.modifiedForeground#9f4a00
  • editorRuler.foreground#e7e0da
  • editorWarning.foreground#9f4a00
  • editorWhitespace.foreground#baafba
  • gitDecoration.addedResourceForeground#217a3c
  • gitDecoration.conflictingResourceForeground#c04440
  • gitDecoration.deletedResourceForeground#8f1313
  • gitDecoration.ignoredResourceForeground#63728f
  • gitDecoration.modifiedResourceForeground#553d00
  • gitDecoration.submoduleResourceForeground#856f4a
  • gitDecoration.untrackedResourceForeground#008058
  • input.background#fff8f0
  • input.border#baafba
  • input.foreground#222222
  • input.placeholderForeground#63728f
  • inputOption.activeBackground#fadacf
  • inputOption.activeBorder#4250ef
  • inputValidation.errorBackground#ffdfe6
  • inputValidation.errorBorder#dd1100
  • inputValidation.infoBackground#cff5d0
  • inputValidation.infoBorder#217a3c
  • inputValidation.warningBackground#ffe5ba
  • inputValidation.warningBorder#9f4a00
  • list.activeSelectionBackground#fadacf
  • list.activeSelectionForeground#111133
  • list.activeSelectionIconForeground#4250ef
  • list.focusBackground#fadacf
  • list.highlightForeground#4250ef
  • list.hoverBackground#b4cfff
  • list.inactiveSelectionBackground#cfdff9
  • notificationCenterHeader.background#e7e0da
  • notificationCenterHeader.foreground#222222
  • panel.background#fff8f0
  • panel.border#baafba
  • panelTitle.activeBorder#4250ef
  • panelTitle.activeForeground#222222
  • panelTitle.inactiveForeground#63728f
  • progressBar.background#4250ef
  • sideBar.background#f6ece8
  • sideBar.border#baafba
  • sideBar.foreground#222222
  • sideBarSectionHeader.background#e7e0da
  • sideBarSectionHeader.foreground#222222
  • sideBarTitle.foreground#222222
  • statusBar.background#f8cf8f
  • statusBar.border#baafba
  • statusBar.debuggingBackground#df8fff
  • statusBar.debuggingForeground#111133
  • statusBar.foreground#111133
  • statusBar.noFolderBackground#e7e0da
  • statusBar.noFolderForeground#222222
  • tab.activeBackground#fff8f0
  • tab.activeBorder#4250ef
  • tab.activeForeground#222222
  • tab.border#baafba
  • tab.hoverBackground#f9e8c0
  • tab.hoverBorder#baafba
  • tab.inactiveBackground#f6ece8
  • tab.inactiveForeground#63728f
  • tab.unfocusedActiveBackground#f9f2ef
  • tab.unfocusedActiveBorder#baafba
  • tab.unfocusedActiveForeground#63728f
  • terminal.ansiBlack#222222
  • terminal.ansiBlue#375cd8
  • terminal.ansiBrightBlack#63728f
  • terminal.ansiBrightBlue#4250ef
  • terminal.ansiBrightCyan#3f70a0
  • terminal.ansiBrightGreen#4a7d00
  • terminal.ansiBrightMagenta#cf25aa
  • terminal.ansiBrightRed#dd1100
  • terminal.ansiBrightWhite#fff8f0
  • terminal.ansiBrightYellow#9f4a00
  • terminal.ansiCyan#1f6fbf
  • terminal.ansiGreen#217a3c
  • terminal.ansiMagenta#ba35af
  • terminal.ansiRed#cc3333
  • terminal.ansiWhite#f6ece8
  • terminal.ansiYellow#8a5d00
  • terminal.background#fff8f0
  • terminal.foreground#222222
  • terminalCursor.foreground#1144ff
  • titleBar.activeBackground#e7e0da
  • titleBar.activeForeground#222222
  • titleBar.border#baafba
  • titleBar.inactiveBackground#f9f2ef
  • titleBar.inactiveForeground#63728f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#765640italic
comment.documentation, comment.block.documentation, string.quoted.docstring#406f90
keyword, storage, storage.modifier#6052cf
keyword.operator#63728f
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#1f77bb
constant, constant.numeric, constant.character, constant.language, support.constant#065fff
string, constant.other.symbol#4250ef
constant.character.escape, string.regexp#ba35af
punctuation#63728f
invalid, invalid.illegal#dd1100
markup.heading#cc3333bold
markup.bold, markup.italic#4250efbold italic
meta.link, markup.underline.link#4250efunderline
markup.list, markup.quote#856f4a
markup.inline.raw#cf25aa
markup.inserted, meta.diff.header.to-file#005000
markup.deleted, meta.diff.header.from-file#8f1313
markup.changed, meta.diff.range#553d00