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#205a68
  • activityBar.foreground#ffffff
  • activityBarBadge.background#148b97
  • activityBarBadge.foreground#ffffff
  • badge.background#148b97
  • badge.foreground#ffffff
  • button.background#c49a52
  • button.foreground#ffffff
  • dropdown.background#fafafa
  • dropdown.border#fafafa
  • dropdown.foreground#205a68
  • editor.background#ffffff
  • editor.foreground#205a68
  • editor.hoverHighlightBackground#148b9722
  • editor.lineHighlightBackground#f7f7f7
  • editor.selectionBackground#148b9733
  • editor.wordHighlightBackground#e8744a22
  • editor.wordHighlightStrongBackground#c49a5222
  • editorBracketMatch.background#148b9744
  • editorBracketMatch.border#c49a52
  • editorCursor.foreground#333333
  • 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#148b97
  • editorOverviewRuler.addedForeground#59a50b
  • editorOverviewRuler.deletedForeground#a30e29
  • editorOverviewRuler.errorForeground#a30e29
  • editorOverviewRuler.findMatchForeground#c49a5255
  • editorOverviewRuler.infoForeground#6a1faf
  • editorOverviewRuler.modifiedForeground#c48405
  • editorOverviewRuler.warningForeground#c48405
  • editorRuler.foreground#e6e6e6
  • editorSuggestWidget.foreground#205a68
  • editorSuggestWidget.highlightForeground#148b97
  • editorSuggestWidget.selectedBackground#d9d9d9
  • editorWhitespace.foreground#e6e6e6
  • editorWidget.background#f2f2f2
  • editorWidget.border#cccccc
  • extensionButton.prominentBackground#148b97
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#1ab4c4
  • focusBorder#148b97
  • foreground#205a68
  • gitDecoration.conflictingResourceForeground#6a1faf
  • gitDecoration.deletedResourceForeground#a30e29
  • gitDecoration.ignoredResourceForeground#a6a6a6
  • gitDecoration.modifiedResourceForeground#c48405
  • gitDecoration.untrackedResourceForeground#59a50b
  • input.activeBorder#148b97
  • input.background#ffffff
  • input.border#999999
  • input.foreground#205a68
  • input.placeholderForeground#cccccc
  • inputOption.activeBorder#c49a52
  • list.activeSelectionBackground#c49a52
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#d9d9d9
  • list.hoverBackground#ffffff
  • list.inactiveSelectionBackground#ffffff
  • notification.background#d9d9d9
  • notification.buttonBackground#148b97
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#205a68
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#f5f5f5
  • panel.border#e0e0e0
  • panelTitle.activeBorder#148b97
  • panelTitle.activeForeground#737373
  • panelTitle.inactiveForeground#bfbfbf
  • peekView.border#148b97
  • peekViewEditor.background#fafafa
  • peekViewEditor.matchHighlightBackground#c49a5255
  • peekViewEditorGutter.background#f0f0f0
  • peekViewResult.background#f2f2f2
  • peekViewResult.fileForeground#266b7b
  • peekViewResult.lineForeground#42acc5
  • peekViewResult.matchHighlightBackground#c49a5255
  • peekViewResult.selectionBackground#ffffff
  • peekViewResult.selectionForeground#266b7b
  • peekViewTitle.background#fafafa
  • peekViewTitleDescription.foreground#1c505c
  • peekViewTitleLabel.foreground#205a68
  • progressBar.background#e8744a
  • scrollbar.shadow#999999
  • scrollbarSlider.activeBackground#148b97aa
  • scrollbarSlider.background#205a6835
  • scrollbarSlider.hoverBackground#148b9755
  • sideBar.background#f2f2f2
  • sideBar.foreground#205a68
  • sideBarSectionHeader.background#d9d9d9
  • sideBarSectionHeader.foreground#205a68
  • statusBar.background#148b97
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#c49a52
  • tab.activeForeground#205a68
  • tab.border#e0e0e0
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#7dc5d7
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#e8744a
  • terminal.ansiBrightBlack#ffffff
  • terminal.ansiBrightBlue#f3baa5
  • terminal.ansiBrightCyan#2ed3e3
  • terminal.ansiBrightGreen#2ed3e3
  • terminal.ansiBrightMagenta#f1afb1
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#389db6
  • terminal.ansiBrightYellow#dec69e
  • terminal.ansiCyan#148b97
  • terminal.ansiGreen#148b97
  • terminal.ansiMagenta#e2585d
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#266b7b
  • terminal.ansiYellow#c49a52
  • terminal.background#ffffff
  • terminal.foreground#205a68
  • titleBar.activeBackground#a4d7e3
  • titleBar.activeForeground#205a68
  • widget.shadow#cccccc55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#205a68
comment#b1d6e0
string#7fc181
constant.numeric#7fc181
constant.language#c49a52
constant.character, constant.other#c49a52
variable
keyword#e2585d
storage#c49a52
storage.type#148b97
entity.name.class#c49a52underline
entity.other.inherited-class#c49a52
entity.name.function#e8744a
variable.parameter#205a68
entity.name.tag#148b97
entity.other.attribute-name#c49a52
support.function#148b97
support.constant#c49a52
support.type, support.class#c49a52
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#7fc181
meta.diff, meta.diff.header#b1d6e0
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#7ab9ca
meta.property-value, support.constant.property-value, constant.other.color#7fc181
meta.structure.dictionary.json string.quoted.double.json#c49a52
meta.structure.dictionary.value.json string.quoted.double.json#7fc181
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#205a68
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#148b97
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#148b97normal
variable.other#205a68normal
variable.parameter.function.coffee#7fc181
entity.name.section.markdown#c49a52
punctuation.definition.heading.markdown#e2585d
markup.raw.inline.markdown#7fc181
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#e2585d
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#e2585d
punctuation.definition.metadata.markdown#e2585d
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#148b97
markup.bold.markdown, markup.italic.markdown#148b97
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#205a68

Shiki preview

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

Loading...

Rainglow - Coding Theme