Skip to main content
CodingTheme

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#414549
  • activityBar.foreground#e6e9ed
  • activityBarBadge.background#249388
  • activityBarBadge.foreground#ffffff
  • badge.background#249388
  • badge.foreground#ffffff
  • button.background#64964c
  • button.foreground#ffffff
  • dropdown.background#e0e4e9
  • dropdown.border#e0e4e9
  • dropdown.foreground#414549
  • editor.background#e6e9ed
  • editor.foreground#414549
  • editor.hoverHighlightBackground#24938822
  • editor.lineHighlightBackground#dde1e7
  • editor.selectionBackground#1a9d6b33
  • editor.wordHighlightBackground#1a9d6b22
  • editor.wordHighlightStrongBackground#64964c22
  • editorBracketMatch.background#24938844
  • editorBracketMatch.border#64964c
  • editorCursor.foreground#222222
  • editorGroup.background#dde1e7
  • editorGroupHeader.tabsBackground#dde1e7
  • editorGutter.addedBackground#59a50b
  • editorGutter.background#e0e4e9
  • editorGutter.deletedBackground#a30e29
  • editorGutter.modifiedBackground#c48405
  • editorIndentGuide.background#c8cfd8
  • editorLineNumber.foreground#abb5c2
  • editorLink.activeForeground#249388
  • editorOverviewRuler.addedForeground#59a50b
  • editorOverviewRuler.deletedForeground#a30e29
  • editorOverviewRuler.errorForeground#a30e29
  • editorOverviewRuler.findMatchForeground#64964c55
  • editorOverviewRuler.infoForeground#6a1faf
  • editorOverviewRuler.modifiedForeground#c48405
  • editorOverviewRuler.warningForeground#c48405
  • editorRuler.foreground#c8cfd8
  • editorSuggestWidget.foreground#414549
  • editorSuggestWidget.highlightForeground#249388
  • editorSuggestWidget.selectedBackground#bac2cd
  • editorWhitespace.foreground#c8cfd8
  • editorWidget.background#d7dce2
  • editorWidget.border#abb5c2
  • extensionButton.prominentBackground#249388
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#2ebcae
  • focusBorder#249388
  • foreground#414549
  • gitDecoration.conflictingResourceForeground#6a1faf
  • gitDecoration.deletedResourceForeground#a30e29
  • gitDecoration.ignoredResourceForeground#7e8ea2
  • gitDecoration.modifiedResourceForeground#c48405
  • gitDecoration.untrackedResourceForeground#59a50b
  • input.activeBorder#249388
  • input.background#e6e9ed
  • input.border#6f8198
  • input.foreground#414549
  • input.placeholderForeground#abb5c2
  • inputOption.activeBorder#64964c
  • list.activeSelectionBackground#64964c
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#bac2cd
  • list.hoverBackground#eff1f3
  • list.inactiveSelectionBackground#e6e9ed
  • notification.background#bac2cd
  • notification.buttonBackground#249388
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#414549
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#dadfe4
  • panel.border#c2cad3
  • panelTitle.activeBorder#249388
  • panelTitle.activeForeground#4e5b6c
  • panelTitle.inactiveForeground#9ca8b8
  • peekView.border#249388
  • peekViewEditor.background#e0e4e9
  • peekViewEditor.matchHighlightBackground#64964c55
  • peekViewEditorGutter.background#d4d9e0
  • peekViewResult.background#d7dce2
  • peekViewResult.fileForeground#4d5256
  • peekViewResult.lineForeground#7e858c
  • peekViewResult.matchHighlightBackground#64964c55
  • peekViewResult.selectionBackground#eceef1
  • peekViewResult.selectionForeground#4d5256
  • peekViewTitle.background#e0e4e9
  • peekViewTitleDescription.foreground#3a3d41
  • peekViewTitleLabel.foreground#414549
  • progressBar.background#1a9d6b
  • scrollbar.shadow#6f8198
  • scrollbarSlider.activeBackground#249388aa
  • scrollbarSlider.background#41454935
  • scrollbarSlider.hoverBackground#24938855
  • sideBar.background#d7dce2
  • sideBar.foreground#414549
  • sideBarSectionHeader.background#bac2cd
  • sideBarSectionHeader.foreground#414549
  • statusBar.background#249388
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#64964c
  • tab.activeForeground#414549
  • tab.border#c2cad3
  • tab.inactiveBackground#dadfe4
  • tab.inactiveForeground#a6abb0
  • terminal.ansiBlack#f5f6f8
  • terminal.ansiBlue#1a9d6b
  • terminal.ansiBrightBlack#ffffff
  • terminal.ansiBrightBlue#3edfa2
  • terminal.ansiBrightCyan#3edfa2
  • terminal.ansiBrightGreen#4ad3c5
  • terminal.ansiBrightMagenta#41aacb
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#71787f
  • terminal.ansiBrightYellow#9ac286
  • terminal.ansiCyan#1a9d6b
  • terminal.ansiGreen#249388
  • terminal.ansiMagenta#246c82
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#4d5256
  • terminal.ansiYellow#64964c
  • terminal.background#e6e9ed
  • terminal.foreground#414549
  • titleBar.activeBackground#c1c4c8
  • titleBar.activeForeground#414549
  • widget.shadow#abb5c255

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#414549
comment#405b75
string#858e43
constant.numeric#858e43
constant.language#64964c
constant.character, constant.other#64964c
variable
keyword#246c82
storage#64964c
storage.type#249388
entity.name.class#64964cunderline
entity.other.inherited-class#64964c
entity.name.function#1a9d6b
variable.parameter#8292a0
entity.name.tag#249388
entity.other.attribute-name#64964c
support.function#1a9d6b
support.constant#64964c
support.type, support.class#64964c
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#858e43
meta.diff, meta.diff.header#405b75
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#253544
meta.property-value, support.constant.property-value, constant.other.color#858e43
meta.structure.dictionary.json string.quoted.double.json#64964c
meta.structure.dictionary.value.json string.quoted.double.json#858e43
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#414549
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#249388
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#249388normal
variable.other#8292a0normal
variable.parameter.function.coffee#858e43
entity.name.section.markdown#64964c
punctuation.definition.heading.markdown#246c82
markup.raw.inline.markdown#858e43
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#246c82
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#246c82
punctuation.definition.metadata.markdown#246c82
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#249388
markup.bold.markdown, markup.italic.markdown#249388
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#414549

Shiki preview

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

Loading...