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#454955
  • activityBar.foreground#ffffff
  • activityBarBadge.background#72b01d
  • activityBarBadge.foreground#ffffff
  • badge.background#72b01d
  • badge.foreground#ffffff
  • button.background#98bc3e
  • button.foreground#ffffff
  • dropdown.background#fafafa
  • dropdown.border#fafafa
  • dropdown.foreground#454955
  • editor.background#ffffff
  • editor.foreground#454955
  • editor.hoverHighlightBackground#72b01d22
  • editor.lineHighlightBackground#f7f7f7
  • editor.selectionBackground#b3dd4933
  • editor.wordHighlightBackground#45495522
  • editor.wordHighlightStrongBackground#98bc3e22
  • editorBracketMatch.background#72b01d44
  • editorBracketMatch.border#98bc3e
  • 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#72b01d
  • editorOverviewRuler.addedForeground#59a50b
  • editorOverviewRuler.deletedForeground#a30e29
  • editorOverviewRuler.errorForeground#a30e29
  • editorOverviewRuler.findMatchForeground#98bc3e55
  • editorOverviewRuler.infoForeground#6a1faf
  • editorOverviewRuler.modifiedForeground#c48405
  • editorOverviewRuler.warningForeground#c48405
  • editorRuler.foreground#e6e6e6
  • editorSuggestWidget.foreground#454955
  • editorSuggestWidget.highlightForeground#72b01d
  • editorSuggestWidget.selectedBackground#d9d9d9
  • editorWhitespace.foreground#e6e6e6
  • editorWidget.background#f2f2f2
  • editorWidget.border#cccccc
  • extensionButton.prominentBackground#72b01d
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#8edb25
  • focusBorder#72b01d
  • foreground#454955
  • gitDecoration.conflictingResourceForeground#6a1faf
  • gitDecoration.deletedResourceForeground#a30e29
  • gitDecoration.ignoredResourceForeground#a6a6a6
  • gitDecoration.modifiedResourceForeground#c48405
  • gitDecoration.untrackedResourceForeground#59a50b
  • input.activeBorder#72b01d
  • input.background#ffffff
  • input.border#999999
  • input.foreground#454955
  • input.placeholderForeground#cccccc
  • inputOption.activeBorder#98bc3e
  • list.activeSelectionBackground#98bc3e
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#d9d9d9
  • list.hoverBackground#ffffff
  • list.inactiveSelectionBackground#ffffff
  • notification.background#d9d9d9
  • notification.buttonBackground#72b01d
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#454955
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#f5f5f5
  • panel.border#e0e0e0
  • panelTitle.activeBorder#72b01d
  • panelTitle.activeForeground#737373
  • panelTitle.inactiveForeground#bfbfbf
  • peekView.border#72b01d
  • peekViewEditor.background#fafafa
  • peekViewEditor.matchHighlightBackground#98bc3e55
  • peekViewEditorGutter.background#f0f0f0
  • peekViewResult.background#f2f2f2
  • peekViewResult.fileForeground#505563
  • peekViewResult.lineForeground#818799
  • peekViewResult.matchHighlightBackground#98bc3e55
  • peekViewResult.selectionBackground#ffffff
  • peekViewResult.selectionForeground#505563
  • peekViewTitle.background#fafafa
  • peekViewTitleDescription.foreground#3e424d
  • peekViewTitleLabel.foreground#454955
  • progressBar.background#454955
  • scrollbar.shadow#999999
  • scrollbarSlider.activeBackground#72b01daa
  • scrollbarSlider.background#45495535
  • scrollbarSlider.hoverBackground#72b01d55
  • sideBar.background#f2f2f2
  • sideBar.foreground#454955
  • sideBarSectionHeader.background#d9d9d9
  • sideBarSectionHeader.foreground#454955
  • statusBar.background#72b01d
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#98bc3e
  • tab.activeForeground#454955
  • tab.border#e0e0e0
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#abafbb
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#454955
  • terminal.ansiBrightBlack#ffffff
  • terminal.ansiBrightBlue#73798d
  • terminal.ansiBrightCyan#a5e251
  • terminal.ansiBrightGreen#a5e251
  • terminal.ansiBrightMagenta#c1d888
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#73798d
  • terminal.ansiBrightYellow#c1d888
  • terminal.ansiCyan#72b01d
  • terminal.ansiGreen#72b01d
  • terminal.ansiMagenta#98bc3e
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#505563
  • terminal.ansiYellow#98bc3e
  • terminal.background#ffffff
  • terminal.foreground#454955
  • titleBar.activeBackground#c7cad2
  • titleBar.activeForeground#454955
  • widget.shadow#cccccc55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#454955
comment#7b85a0
string#86baba
constant.numeric#afd1d1
constant.language#98bc3e
constant.character, constant.other#98bc3e
variable
keyword#98bc3e
storage#98bc3e
storage.type#72b01d
entity.name.class#98bc3eunderline
entity.other.inherited-class#98bc3e
entity.name.function#454955
variable.parameter#676d7f
entity.name.tag#72b01d
entity.other.attribute-name#98bc3e
support.function#72b01d
support.constant#98bc3e
support.type, support.class#98bc3e
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#86baba
meta.diff, meta.diff.header#7b85a0
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#566078
meta.property-value, support.constant.property-value, constant.other.color#86baba
meta.structure.dictionary.json string.quoted.double.json#98bc3e
meta.structure.dictionary.value.json string.quoted.double.json#86baba
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#454955
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#72b01d
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#72b01dnormal
variable.other#676d7fnormal
variable.parameter.function.coffee#afd1d1
entity.name.section.markdown#98bc3e
punctuation.definition.heading.markdown#98bc3e
markup.raw.inline.markdown#86baba
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#98bc3e
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#98bc3e
punctuation.definition.metadata.markdown#98bc3e
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#72b01d
markup.bold.markdown, markup.italic.markdown#72b01d
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#454955

Shiki preview

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

Loading...

Rainglow - Coding Theme