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#f2e9db
  • activityBar.border#c8bdb6
  • activityBar.foreground#584141
  • activityBarBadge.background#5f5fdf
  • activityBarBadge.foreground#fff5ea
  • badge.background#ffd5d3
  • badge.foreground#542f38
  • button.background#ffd5d3
  • button.foreground#542f38
  • button.hoverBackground#b0e0df
  • diffEditor.border#c8bdb6
  • diffEditor.insertedLineBackground#e0f3e099
  • diffEditor.insertedTextBackground#ccefcf99
  • diffEditor.removedLineBackground#ffe3e399
  • diffEditor.removedTextBackground#ffd4d899
  • dropdown.background#fff5ea
  • dropdown.border#c8bdb6
  • dropdown.foreground#584141
  • editor.background#fff5ea
  • editor.findMatchBackground#efbf00
  • editor.findMatchHighlightBackground#cfceff99
  • editor.findRangeHighlightBackground#ffe0aa99
  • editor.foreground#584141
  • editor.hoverHighlightBackground#b0e0df99
  • editor.inactiveSelectionBackground#ccdfff99
  • editor.lineHighlightBackground#f9e2b2
  • editor.selectionBackground#f0d2df
  • editor.selectionHighlightBackground#ffd5d399
  • editor.wordHighlightBackground#ddf5cc99
  • editor.wordHighlightStrongBackground#febccf99
  • editorBracketMatch.background#8fcfdf
  • editorBracketMatch.border#ca3e54
  • editorCursor.foreground#cf1f00
  • editorError.foreground#ce3f00
  • editorGutter.addedBackground#007a0a
  • editorGutter.background#f7efe6
  • editorGutter.deletedBackground#ce3f00
  • editorGutter.modifiedBackground#b75515
  • editorHint.foreground#63728f
  • editorIndentGuide.activeBackground1#c9c0b8
  • editorIndentGuide.background1#c8bdb6
  • editorInfo.foreground#007a0a
  • editorLineNumber.activeForeground#584141
  • editorLineNumber.foreground#63728f
  • editorOverviewRuler.addedForeground#007a0a
  • editorOverviewRuler.border#c8bdb6
  • editorOverviewRuler.deletedForeground#ce3f00
  • editorOverviewRuler.modifiedForeground#b75515
  • editorRuler.foreground#e9e0d8
  • editorWarning.foreground#b75515
  • editorWhitespace.foreground#c8bdb6
  • gitDecoration.addedResourceForeground#007a0a
  • gitDecoration.conflictingResourceForeground#cf2f4f
  • gitDecoration.deletedResourceForeground#8f1313
  • gitDecoration.ignoredResourceForeground#63728f
  • gitDecoration.modifiedResourceForeground#553d00
  • gitDecoration.submoduleResourceForeground#8f5f4a
  • gitDecoration.untrackedResourceForeground#0f7f5f
  • input.background#fff5ea
  • input.border#c8bdb6
  • input.foreground#584141
  • input.placeholderForeground#63728f
  • inputOption.activeBackground#ffd5d3
  • inputOption.activeBorder#5f5fdf
  • inputValidation.errorBackground#ffdde5
  • inputValidation.errorBorder#ce3f00
  • inputValidation.infoBackground#ddf5cc
  • inputValidation.infoBorder#007a0a
  • inputValidation.warningBackground#ffe0aa
  • inputValidation.warningBorder#b75515
  • list.activeSelectionBackground#ffd5d3
  • list.activeSelectionForeground#542f38
  • list.activeSelectionIconForeground#5f5fdf
  • list.focusBackground#ffd5d3
  • list.highlightForeground#5f5fdf
  • list.hoverBackground#b0e0df
  • list.inactiveSelectionBackground#ccdfff
  • notificationCenterHeader.background#e9e0d8
  • notificationCenterHeader.foreground#584141
  • panel.background#fff5ea
  • panel.border#c8bdb6
  • panelTitle.activeBorder#5f5fdf
  • panelTitle.activeForeground#584141
  • panelTitle.inactiveForeground#63728f
  • progressBar.background#5f5fdf
  • sideBar.background#f2e9db
  • sideBar.border#c8bdb6
  • sideBar.foreground#584141
  • sideBarSectionHeader.background#e9e0d8
  • sideBarSectionHeader.foreground#584141
  • sideBarTitle.foreground#584141
  • statusBar.background#ffaf72
  • statusBar.border#c8bdb6
  • statusBar.debuggingBackground#df9fff
  • statusBar.debuggingForeground#542f38
  • statusBar.foreground#542f38
  • statusBar.noFolderBackground#e9e0d8
  • statusBar.noFolderForeground#584141
  • tab.activeBackground#fff5ea
  • tab.activeBorder#5f5fdf
  • tab.activeForeground#584141
  • tab.border#c8bdb6
  • tab.hoverBackground#f9e2b2
  • tab.hoverBorder#c8bdb6
  • tab.inactiveBackground#f2e9db
  • tab.inactiveForeground#63728f
  • tab.unfocusedActiveBackground#f7efe6
  • tab.unfocusedActiveBorder#c8bdb6
  • tab.unfocusedActiveForeground#63728f
  • terminal.ansiBlack#584141
  • terminal.ansiBlue#375cc6
  • terminal.ansiBrightBlack#63728f
  • terminal.ansiBrightBlue#5f5fdf
  • terminal.ansiBrightCyan#3f6faf
  • terminal.ansiBrightGreen#5f7200
  • terminal.ansiBrightMagenta#cb2f80
  • terminal.ansiBrightRed#ce3f00
  • terminal.ansiBrightWhite#fff5ea
  • terminal.ansiBrightYellow#b75515
  • terminal.ansiCyan#3f60af
  • terminal.ansiGreen#007a0a
  • terminal.ansiMagenta#ca3e54
  • terminal.ansiRed#ba2d2f
  • terminal.ansiWhite#f2e9db
  • terminal.ansiYellow#a45a22
  • terminal.background#fff5ea
  • terminal.foreground#584141
  • terminalCursor.foreground#cf1f00
  • titleBar.activeBackground#e9e0d8
  • titleBar.activeForeground#584141
  • titleBar.border#c8bdb6
  • titleBar.inactiveBackground#f7efe6
  • titleBar.inactiveForeground#63728f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9a625aitalic
comment.documentation, comment.block.documentation, string.quoted.docstring#4f6f8f
keyword, storage, storage.modifier#8448aa
keyword.operator#63728f
storage.type, support.type, entity.name.type, entity.other.inherited-class#0f7f5f
entity.name.function, support.function, meta.function-call, variable.function#cb2f80
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#ca3e54
punctuation#63728f
invalid, invalid.illegal#ce3f00
markup.heading#ba2d2fbold
markup.bold, markup.italic#5f5fdfbold italic
meta.link, markup.underline.link#5f5fdfunderline
markup.list, markup.quote#8f5f4a
markup.inline.raw#cb2f80
markup.inserted, meta.diff.header.to-file#005000
markup.deleted, meta.diff.header.from-file#8f1313
markup.changed, meta.diff.range#553d00