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#222222
  • activityBar.foreground#ffffff
  • activityBarBadge.background#d87627
  • activityBarBadge.foreground#ffffff
  • badge.background#d87627
  • badge.foreground#ffffff
  • button.background#ff4e50
  • button.foreground#ffffff
  • dropdown.background#fafafa
  • dropdown.border#fafafa
  • dropdown.foreground#222222
  • editor.background#ffffff
  • editor.foreground#222222
  • editor.hoverHighlightBackground#d8762722
  • editor.lineHighlightBackground#f7f7f7
  • editor.selectionBackground#ff4e5033
  • editor.wordHighlightBackground#c6bb1522
  • editor.wordHighlightStrongBackground#ff4e5022
  • editorBracketMatch.background#d8762744
  • editorBracketMatch.border#ff4e50
  • editorCursor.foreground#222222
  • editorGroup.background#f7f7f7
  • editorGroupHeader.tabsBackground#f7f7f7
  • editorGutter.addedBackground#59a50b
  • editorGutter.background#fafafa
  • editorGutter.deletedBackground#a30e29
  • editorGutter.modifiedBackground#c48405
  • editorIndentGuide.background#e6e6e6
  • editorLineNumber.foreground#cccccc
  • editorLink.activeForeground#d87627
  • editorOverviewRuler.addedForeground#59a50b
  • editorOverviewRuler.deletedForeground#a30e29
  • editorOverviewRuler.errorForeground#a30e29
  • editorOverviewRuler.findMatchForeground#ff4e5055
  • editorOverviewRuler.infoForeground#6a1faf
  • editorOverviewRuler.modifiedForeground#c48405
  • editorOverviewRuler.warningForeground#c48405
  • editorRuler.foreground#e6e6e6
  • editorSuggestWidget.foreground#222222
  • editorSuggestWidget.highlightForeground#d87627
  • editorSuggestWidget.selectedBackground#d9d9d9
  • editorWhitespace.foreground#e6e6e6
  • editorWidget.background#f2f2f2
  • editorWidget.border#cccccc
  • extensionButton.prominentBackground#d87627
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#e09152
  • focusBorder#d87627
  • foreground#222222
  • gitDecoration.conflictingResourceForeground#6a1faf
  • gitDecoration.deletedResourceForeground#a30e29
  • gitDecoration.ignoredResourceForeground#a6a6a6
  • gitDecoration.modifiedResourceForeground#c48405
  • gitDecoration.untrackedResourceForeground#59a50b
  • input.activeBorder#d87627
  • input.background#ffffff
  • input.border#999999
  • input.foreground#222222
  • input.placeholderForeground#cccccc
  • inputOption.activeBorder#ff4e50
  • list.activeSelectionBackground#ff4e50
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#d9d9d9
  • list.hoverBackground#ffffff
  • list.inactiveSelectionBackground#ffffff
  • notification.background#d9d9d9
  • notification.buttonBackground#d87627
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#222222
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#f5f5f5
  • panel.border#e0e0e0
  • panelTitle.activeBorder#d87627
  • panelTitle.activeForeground#737373
  • panelTitle.inactiveForeground#bfbfbf
  • peekView.border#d87627
  • peekViewEditor.background#fafafa
  • peekViewEditor.matchHighlightBackground#ff4e5055
  • peekViewEditorGutter.background#f0f0f0
  • peekViewResult.background#f2f2f2
  • peekViewResult.fileForeground#2f2f2f
  • peekViewResult.lineForeground#626262
  • peekViewResult.matchHighlightBackground#ff4e5055
  • peekViewResult.selectionBackground#ffffff
  • peekViewResult.selectionForeground#2f2f2f
  • peekViewTitle.background#fafafa
  • peekViewTitleDescription.foreground#1a1a1a
  • peekViewTitleLabel.foreground#222222
  • progressBar.background#c6bb15
  • scrollbar.shadow#999999
  • scrollbarSlider.activeBackground#d87627aa
  • scrollbarSlider.background#22222235
  • scrollbarSlider.hoverBackground#d8762755
  • sideBar.background#f2f2f2
  • sideBar.foreground#222222
  • sideBarSectionHeader.background#d9d9d9
  • sideBarSectionHeader.foreground#222222
  • statusBar.background#d87627
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#ff4e50
  • tab.activeForeground#222222
  • tab.border#e0e0e0
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#888888
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#c6bb15
  • terminal.ansiBrightBlack#ffffff
  • terminal.ansiBrightBlue#ede354
  • terminal.ansiBrightCyan#e8ad7d
  • terminal.ansiBrightGreen#e8ad7d
  • terminal.ansiBrightMagenta#ffb4b5
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#555555
  • terminal.ansiBrightYellow#ffb4b5
  • terminal.ansiCyan#d87627
  • terminal.ansiGreen#d87627
  • terminal.ansiMagenta#ff4e50
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#2f2f2f
  • terminal.ansiYellow#ff4e50
  • terminal.background#ffffff
  • terminal.foreground#222222
  • titleBar.activeBackground#a1a1a1
  • titleBar.activeForeground#222222
  • widget.shadow#cccccc55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#222222
comment#999999
string#c6bb15
constant.numeric#ff4e50
constant.language#ff4e50
constant.character, constant.other#ff4e50
variable
keyword#ff4e50
storage#ff4e50
storage.type#d87627
entity.name.class#ff4e50underline
entity.other.inherited-class#ff4e50
entity.name.function#c6bb15
variable.parameter#222222
entity.name.tag#d87627
entity.other.attribute-name#ff4e50
support.function#d87627
support.constant#ff4e50
support.type, support.class#ff4e50
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#c6bb15
meta.diff, meta.diff.header#999999
markup.deleted#e61f44
markup.inserted#A6E22E
markup.changed#f7b83d
constant.numeric.line-number.find-in-files - match#8FBE00A0
entity.name.filename.find-in-files#E6DB74
keyword.other#737373
meta.property-value, support.constant.property-value, constant.other.color#c6bb15
meta.structure.dictionary.json string.quoted.double.json#ff4e50
meta.structure.dictionary.value.json string.quoted.double.json#c6bb15
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#222222
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#d87627
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#d87627normal
variable.other#222222normal
variable.parameter.function.coffee#ff4e50
entity.name.section.markdown#ff4e50
punctuation.definition.heading.markdown#ff4e50
markup.raw.inline.markdown#c6bb15
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#ff4e50
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#ff4e50
punctuation.definition.metadata.markdown#ff4e50
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#d87627
markup.bold.markdown, markup.italic.markdown#d87627
markup.italic.markdownitalic
markup.bold.markdownbold
markup.raw.block.markdown#664e4d
markup.deleted.git_gutter#e61f44
markup.inserted.git_gutter#a7da1e
markup.changed.git_gutter#f7b83d
meta.template.expression#222222

Shiki preview

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

Loading...