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.activeBorder#ff8c42
  • activityBar.background#faf8fc
  • activityBar.foreground#8b7a9f
  • activityBarBadge.background#ff8c42
  • activityBarBadge.foreground#ffffff
  • badge.background#ff8c42
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#8b4c7a
  • breadcrumb.focusForeground#2d1f3d
  • breadcrumb.foreground#8b7a9f
  • breadcrumbPicker.background#ffffff
  • button.background#ff8c42
  • button.foreground#ffffff
  • button.hoverBackground#ff9c5a
  • checkbox.background#ffffff
  • checkbox.border#d4b8e8
  • diffEditor.insertedTextBackground#5fa06920
  • diffEditor.removedTextBackground#d85a5a20
  • dropdown.background#ffffff
  • dropdown.border#d4b8e8
  • dropdown.foreground#2d1f3d
  • editor.background#faf8fc
  • editor.foreground#2d1f3d
  • editor.lineHighlightBackground#f5f0ff
  • editor.selectionBackground#e8d4f5
  • editor.selectionHighlightBackground#f0e5fa80
  • editorBracketMatch.background#f0e5fa
  • editorBracketMatch.border#ff8c42
  • editorCursor.foreground#ff8c42
  • editorError.foreground#d85a5a
  • editorGutter.addedBackground#5fa069
  • editorGutter.background#faf8fc
  • editorGutter.deletedBackground#d85a5a
  • editorGutter.modifiedBackground#d4a84f
  • editorHint.foreground#3fa3a3
  • editorIndentGuide.activeBackground1#d4b8e8
  • editorIndentGuide.background1#e8d4f5
  • editorInfo.foreground#4b7bb1
  • editorLineNumber.activeForeground#6b4c8f
  • editorLineNumber.foreground#b8a8d0
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#d4b8e8
  • editorSuggestWidget.foreground#2d1f3d
  • editorSuggestWidget.highlightForeground#ff8c42
  • editorSuggestWidget.selectedBackground#f0e5fa
  • editorWarning.foreground#d4a84f
  • editorWhitespace.foreground#e8d4f5
  • editorWidget.background#ffffff
  • editorWidget.border#d4b8e8
  • input.background#ffffff
  • input.border#d4b8e8
  • input.foreground#2d1f3d
  • inputOption.activeBorder#ff8c42
  • list.activeSelectionBackground#e8d4f5
  • list.activeSelectionForeground#8b4c7a
  • list.focusBackground#e8d4f5
  • list.hoverBackground#f5f0ff
  • list.inactiveSelectionBackground#f5f0ff
  • merge.commonHeaderBackground#d4b8e840
  • merge.currentHeaderBackground#4b7bb140
  • merge.incomingHeaderBackground#5fa06940
  • panel.background#faf8fc
  • panel.border#d4b8e8
  • panelTitle.activeForeground#8b4c7a
  • panelTitle.inactiveForeground#8b7a9f
  • peekView.border#ff8c42
  • peekViewEditor.background#ffffff
  • peekViewResult.background#f5f0ff
  • peekViewResult.selectionBackground#e8d4f5
  • progressBar.background#ff8c42
  • scrollbarSlider.activeBackground#b498c880
  • scrollbarSlider.background#d4b8e880
  • scrollbarSlider.hoverBackground#c4a8d880
  • sideBar.background#f5f0ff
  • sideBar.foreground#4a3d5a
  • sideBarSectionHeader.background#f5f0ff
  • sideBarSectionHeader.foreground#6b4c8f
  • sideBarTitle.foreground#8b4c7a
  • statusBar.background#faf8fc
  • statusBar.debuggingBackground#b88bc7
  • statusBar.foreground#6b4c8f
  • statusBar.noFolderBackground#faf8fc
  • statusBarItem.activeBackground#e8d4f5
  • statusBarItem.hoverBackground#f0e5fa
  • tab.activeBackground#ffffff
  • tab.activeBorder#ff8c42
  • tab.activeForeground#8b4c7a
  • tab.border#faf8fc
  • tab.hoverBackground#faf8fc
  • tab.inactiveBackground#f5f0ff
  • tab.inactiveForeground#8b7a9f
  • terminal.ansiBlack#faf8fc
  • terminal.ansiBlue#4b7bb1
  • terminal.ansiBrightBlack#b8a8d0
  • terminal.ansiBrightBlue#5b8bc1
  • terminal.ansiBrightCyan#4fb3b3
  • terminal.ansiBrightGreen#6fb069
  • terminal.ansiBrightMagenta#b88bc7
  • terminal.ansiBrightRed#e85a5a
  • terminal.ansiBrightWhite#3d2f4d
  • terminal.ansiBrightYellow#f4b866
  • terminal.ansiCyan#3fa3a3
  • terminal.ansiGreen#5fa069
  • terminal.ansiMagenta#a86bc7
  • terminal.ansiRed#d85a5a
  • terminal.ansiWhite#2d1f3d
  • terminal.ansiYellow#d4a84f
  • terminal.background#faf8fc
  • terminal.foreground#2d1f3d
  • textBlockQuote.background#f5f0ff
  • textBlockQuote.border#d4b8e8
  • textCodeBlock.background#f5f0ff
  • textLink.activeForeground#3b6ba1
  • textLink.foreground#4b7bb1
  • textPreformat.foreground#8b4c7a
  • titleBar.activeBackground#faf8fc
  • titleBar.activeForeground#2d1f3d
  • titleBar.inactiveBackground#faf8fc
  • titleBar.inactiveForeground#8b7a9f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8b7a9fitalic
string, string.quoted, string.template#5fa069
constant.numeric, constant.language.boolean, constant.language.null#d4a84f
keyword, storage.type, storage.modifier, keyword.control#8b4c7abold
entity.name.function, meta.function-call.generic, support.function#4b7bb1
entity.name.class, entity.name.type.class, support.class#8b4c7abold
variable, variable.other, variable.parameter#2d1f3d
entity.name.type, support.type, storage.type#3fa3a3
variable.other.property, support.type.property-name#a86bc7
entity.name.tag, punctuation.definition.tag#d85a5a
entity.other.attribute-name#d4a84f
constant, constant.other, constant.language#ff8c42
keyword.operator, punctuation#6b4c8f
string.regexp#3fa3a3
markup.bold#8b4c7abold
markup.italicitalic
markup.heading#8b4c7abold
markup.underline.link#4b7bb1underline
markup.inline.raw, markup.fenced_code.block#8b4c7a
meta.diff.header#4b7bb1
markup.deleted#d85a5a
markup.inserted#5fa069
invalid, invalid.illegal#d85a5a
invalid.deprecated#d4a84fstrikethrough