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#faf6f5
  • activityBar.foreground#242120
  • activityBar.inactiveForeground#999593
  • activityBarBadge.background#b65318
  • activityBarBadge.foreground#faf6f5
  • badge.background#b65318
  • badge.foreground#faf6f5
  • button.background#b65318
  • button.foreground#faf6f5
  • button.hoverBackground#924417
  • diffEditor.insertedTextBackground#56841326
  • diffEditor.removedTextBackground#b8496326
  • dropdown.background#f0edec
  • dropdown.border#cdc9c7
  • editor.background#faf6f5
  • editor.foreground#242120
  • editor.inactiveSelectionBackground#e4e0de
  • editor.lineHighlightBackground#f0edec
  • editor.selectionBackground#e4e0de
  • editor.wordHighlightBackground#e4e0de
  • editorBracketMatch.border#b65318
  • editorCursor.foreground#b65318
  • editorError.foreground#b84963
  • editorHoverWidget.background#f0edec
  • editorHoverWidget.border#cdc9c7
  • editorIndentGuide.activeBackground1#b4afad
  • editorIndentGuide.background1#cdc9c7
  • editorInfo.foreground#008490
  • editorLineNumber.activeForeground#807c7a
  • editorLineNumber.foreground#999593
  • editorSuggestWidget.background#f0edec
  • editorSuggestWidget.selectedBackground#e4e0de
  • editorWarning.foreground#8e7100
  • editorWhitespace.foreground#b4afad
  • editorWidget.background#f0edec
  • editorWidget.border#cdc9c7
  • errorForeground#b84963
  • focusBorder#b65318
  • gitDecoration.deletedResourceForeground#b84963
  • gitDecoration.ignoredResourceForeground#999593
  • gitDecoration.modifiedResourceForeground#8e7100
  • gitDecoration.untrackedResourceForeground#568413
  • input.background#f0edec
  • input.border#cdc9c7
  • input.foreground#242120
  • input.placeholderForeground#999593
  • list.activeSelectionBackground#e4e0de
  • list.activeSelectionForeground#242120
  • list.highlightForeground#b65318
  • list.hoverBackground#f0edec
  • list.inactiveSelectionBackground#e4e0de
  • notificationCenterHeader.background#f0edec
  • notifications.background#f0edec
  • notifications.foreground#242120
  • panel.background#f0edec
  • panel.border#cdc9c7
  • panelTitle.activeForeground#242120
  • panelTitle.inactiveForeground#999593
  • progressBar.background#b65318
  • scrollbarSlider.activeBackground#b4afad
  • scrollbarSlider.background#cdc9c7
  • scrollbarSlider.hoverBackground#b4afad
  • sideBar.background#f0edec
  • sideBar.border#cdc9c7
  • sideBar.foreground#807c7a
  • sideBarSectionHeader.background#f0edec
  • sideBarTitle.foreground#242120
  • statusBar.background#f0edec
  • statusBar.debuggingBackground#b65318
  • statusBar.debuggingForeground#faf6f5
  • statusBar.foreground#807c7a
  • statusBar.noFolderBackground#f0edec
  • statusBarItem.remoteBackground#008490
  • statusBarItem.remoteForeground#faf6f5
  • tab.activeBackground#faf6f5
  • tab.activeBorderTop#b65318
  • tab.activeForeground#242120
  • tab.border#cdc9c7
  • tab.inactiveBackground#f0edec
  • tab.inactiveForeground#999593
  • terminal.ansiBlack#242120
  • terminal.ansiBlue#0979c4
  • terminal.ansiBrightBlack#807c7a
  • terminal.ansiBrightBlue#0f619d
  • terminal.ansiBrightCyan#006a74
  • terminal.ansiBrightGreen#456a13
  • terminal.ansiBrightMagenta#913c5d
  • terminal.ansiBrightRed#943c50
  • terminal.ansiBrightWhite#faf6f5
  • terminal.ansiBrightYellow#735a00
  • terminal.ansiCyan#008490
  • terminal.ansiGreen#568413
  • terminal.ansiMagenta#b44a74
  • terminal.ansiRed#b84963
  • terminal.ansiWhite#b4afad
  • terminal.ansiYellow#8e7100
  • terminal.background#faf6f5
  • terminal.foreground#242120
  • textLink.activeForeground#0979c4
  • textLink.foreground#0979c4
  • titleBar.activeBackground#faf6f5
  • titleBar.activeForeground#242120
  • titleBar.inactiveBackground#faf6f5
  • titleBar.inactiveForeground#999593

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#999593italic
string, string.quoted, constant.character.escape#8e7100
constant.numeric, constant.language, constant.character#7662c2
keyword, keyword.control, storage, storage.type, storage.modifier, keyword.operator.new#b44a74
entity.name.function, support.function, meta.function-call#568413
entity.name.class, entity.name.type, entity.other.inherited-class, support.class, support.type#008490
variable, variable.other, meta.definition.variable#242120
variable.parameter#b65318
entity.name.tag, punctuation.definition.tag#b44a74
entity.other.attribute-name#568413
keyword.operator#b84963
invalid, invalid.illegal#b84963
string.regexp#8e7100
markup.heading#0979c4bold
markup.bold#242120bold
markup.italic#242120italic
markup.underline.link#0979c4
punctuation, punctuation.separator, punctuation.terminator#807c7a
Pyrokai by Patrick Powers - VS Code Theme