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#f0e8d9
  • activityBar.border#00000000
  • activityBar.foreground#585040
  • activityBar.inactiveForeground#9a8f7d
  • activityBarBadge.background#70553a
  • activityBarBadge.foreground#fcf5e6
  • button.background#70553a
  • button.foreground#fcf5e6
  • dropdown.background#ede4d2
  • dropdown.listBackground#ede4d2
  • editor.background#fcf5e6
  • editor.foreground#585040
  • editor.lineHighlightBackground#f0e8d9
  • editor.selectionBackground#e4d8bA
  • editor.wordHighlightBackground#e4d8ba85
  • editor.wordHighlightBorder#e4d8ba
  • editor.wordHighlightStrongBackground#e4d8ba75
  • editor.wordHighlightStrongBorder#e4d8ba
  • editorBracketHighlight.foreground1#585040
  • editorBracketHighlight.foreground2#585040
  • editorBracketHighlight.foreground3#585040
  • editorBracketHighlight.foreground4#585040
  • editorBracketHighlight.foreground5#585040
  • editorBracketHighlight.foreground6#585040
  • editorCursor.foreground#585040
  • editorGroup.border#9a8f7d40
  • editorGroupHeader.tabsBackground#f0e8d9
  • editorHoverWidget.background#ede4d2
  • editorIndentGuide.activeBackground1#58504080
  • editorIndentGuide.background1#9a8f7d33
  • editorLineNumber.activeForeground#585040
  • editorLineNumber.foreground#9a8f7d
  • editorLink.activeForeground#855a35
  • editorSuggestWidget.background#ede4d2
  • editorSuggestWidget.selectedBackground#e4d8bA
  • editorWhitespace.foreground#9a8f7d
  • editorWidget.background#ede4d2
  • editorWidget.border#9a8f7d
  • errorForeground#c48484
  • focusBorder#9a8f7d60
  • foreground#585040
  • input.background#f0e8d9
  • input.border#9a8f7d40
  • input.foreground#585040
  • input.placeholderForeground#9a8f7d
  • list.activeSelectionBackground#e4d8bA
  • list.activeSelectionForeground#585040
  • list.focusBackground#e4d8bA
  • list.highlightForeground#70553a
  • list.hoverBackground#f0e8d9
  • list.inactiveSelectionBackground#e4d8bA80
  • panel.background#f0e8d9
  • panel.border#00000000
  • panelTitle.activeBorder#70553a
  • panelTitle.activeForeground#585040
  • panelTitle.inactiveForeground#9a8f7d
  • peekView.border#9a8f7d
  • peekViewEditor.background#fcf5e6
  • peekViewEditor.matchHighlightBackground#e4d8ba
  • peekViewEditorGutter.background#fcf5e6
  • peekViewResult.background#ede4d2
  • peekViewResult.matchHighlightBackground#e4d8ba
  • peekViewResult.selectionBackground#e4d8bA
  • peekViewResult.selectionForeground#585040
  • peekViewTitle.background#f0e8d9
  • peekViewTitleDescription.foreground#70553a
  • peekViewTitleLabel.foreground#585040
  • quickInput.background#ede4d2
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#9a8f7d
  • scrollbarSlider.background#e4d8bA
  • scrollbarSlider.hoverBackground#9a8f7d
  • selection.background#e4d8bA
  • sideBar.background#f0e8d9
  • sideBar.border#00000000
  • sideBar.foreground#585040
  • sideBarSectionHeader.background#f0e8d9
  • statusBar.background#585040
  • statusBar.border#00000000
  • statusBar.debuggingBackground#70553a
  • statusBar.debuggingForeground#fcf5e6
  • statusBar.foreground#fcf5e6
  • statusBar.noFolderBackground#585040
  • tab.activeBackground#fcf5e6
  • tab.activeBorderTop#00000000
  • tab.activeForeground#585040
  • tab.border#00000000
  • tab.inactiveBackground#f0e8d9
  • tab.inactiveForeground#9a8f7d
  • tab.unfocusedActiveBorderTop#00000000
  • textLink.activeForeground#585040
  • textLink.foreground#855a35
  • titleBar.activeBackground#f0e8d9
  • titleBar.activeForeground#585040
  • titleBar.border#00000000
  • titleBar.inactiveBackground#f0e8d9
  • titleBar.inactiveForeground#9a8f7d
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9a8f7ditalic
punctuation#585040
keyword, storage.type, storage.modifier#70553abold
entity.name.function, support.function, entity.name.class, entity.name.type, support.type, support.class#5e6a75
string, constant.numeric, constant.language, constant.character, constant.other#72785b
variable.parameteritalic
entity.name.tag#70553a
entity.other.attribute-name#5e6a75
invalid#c48484

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...