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#413e4f
  • activityBar.foreground#ffffff
  • activityBarBadge.background#3cbbb1
  • activityBarBadge.foreground#ffffff
  • badge.background#3cbbb1
  • badge.foreground#ffffff
  • button.background#ee4266
  • button.foreground#ffffff
  • dropdown.background#fafafa
  • dropdown.border#fafafa
  • dropdown.foreground#413e4f
  • editor.background#ffffff
  • editor.foreground#413e4f
  • editor.hoverHighlightBackground#3cbbb122
  • editor.lineHighlightBackground#f7f7f7
  • editor.selectionBackground#3cbbb133
  • editor.wordHighlightBackground#b3adba22
  • editor.wordHighlightStrongBackground#ee426622
  • editorBracketMatch.background#3cbbb144
  • editorBracketMatch.border#ee4266
  • 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#3cbbb1
  • editorOverviewRuler.addedForeground#59a50b
  • editorOverviewRuler.deletedForeground#a30e29
  • editorOverviewRuler.errorForeground#a30e29
  • editorOverviewRuler.findMatchForeground#ee426655
  • editorOverviewRuler.infoForeground#6a1faf
  • editorOverviewRuler.modifiedForeground#c48405
  • editorOverviewRuler.warningForeground#c48405
  • editorRuler.foreground#e6e6e6
  • editorSuggestWidget.foreground#413e4f
  • editorSuggestWidget.highlightForeground#3cbbb1
  • editorSuggestWidget.selectedBackground#d9d9d9
  • editorWhitespace.foreground#e6e6e6
  • editorWidget.background#f2f2f2
  • editorWidget.border#cccccc
  • extensionButton.prominentBackground#3cbbb1
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#5fcbc3
  • focusBorder#3cbbb1
  • foreground#413e4f
  • gitDecoration.conflictingResourceForeground#6a1faf
  • gitDecoration.deletedResourceForeground#a30e29
  • gitDecoration.ignoredResourceForeground#a6a6a6
  • gitDecoration.modifiedResourceForeground#c48405
  • gitDecoration.untrackedResourceForeground#59a50b
  • input.activeBorder#3cbbb1
  • input.background#ffffff
  • input.border#999999
  • input.foreground#413e4f
  • input.placeholderForeground#cccccc
  • inputOption.activeBorder#ee4266
  • list.activeSelectionBackground#ee4266
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#d9d9d9
  • list.hoverBackground#ffffff
  • list.inactiveSelectionBackground#ffffff
  • notification.background#d9d9d9
  • notification.buttonBackground#3cbbb1
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#413e4f
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#f5f5f5
  • panel.border#e0e0e0
  • panelTitle.activeBorder#3cbbb1
  • panelTitle.activeForeground#737373
  • panelTitle.inactiveForeground#bfbfbf
  • peekView.border#3cbbb1
  • peekViewEditor.background#fafafa
  • peekViewEditor.matchHighlightBackground#ee426655
  • peekViewEditorGutter.background#f0f0f0
  • peekViewResult.background#f2f2f2
  • peekViewResult.fileForeground#4d495d
  • peekViewResult.lineForeground#7d7895
  • peekViewResult.matchHighlightBackground#ee426655
  • peekViewResult.selectionBackground#ffffff
  • peekViewResult.selectionForeground#4d495d
  • peekViewTitle.background#fafafa
  • peekViewTitleDescription.foreground#3a3746
  • peekViewTitleLabel.foreground#413e4f
  • progressBar.background#b3adba
  • scrollbar.shadow#999999
  • scrollbarSlider.activeBackground#3cbbb1aa
  • scrollbarSlider.background#413e4f35
  • scrollbarSlider.hoverBackground#3cbbb155
  • sideBar.background#f2f2f2
  • sideBar.foreground#413e4f
  • sideBarSectionHeader.background#d9d9d9
  • sideBarSectionHeader.foreground#413e4f
  • statusBar.background#3cbbb1
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#ee4266
  • tab.activeForeground#413e4f
  • tab.border#e0e0e0
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#a6a3b6
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#b3adba
  • terminal.ansiBrightBlack#ffffff
  • terminal.ansiBrightBlue#e6e4e9
  • terminal.ansiBrightCyan#e6e4e9
  • terminal.ansiBrightGreen#85d8d1
  • terminal.ansiBrightMagenta#d7d0ef
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#706b88
  • terminal.ansiBrightYellow#f6a0b2
  • terminal.ansiCyan#b3adba
  • terminal.ansiGreen#3cbbb1
  • terminal.ansiMagenta#9484d6
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#4d495d
  • terminal.ansiYellow#ee4266
  • terminal.background#ffffff
  • terminal.foreground#413e4f
  • titleBar.activeBackground#c2bfcd
  • titleBar.activeForeground#413e4f
  • widget.shadow#cccccc55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#413e4f
comment#9d96bc
string#e5c71b
constant.numeric#e5c71b
constant.language#ee4266
constant.character, constant.other#ee4266
variable
keyword#9484d6
storage#ee4266
storage.type#3cbbb1
entity.name.class#ee4266underline
entity.other.inherited-class#ee4266
entity.name.function#b3adba
variable.parameter#413e4f
entity.name.tag#3cbbb1
entity.other.attribute-name#ee4266
support.function#b3adba
support.constant#ee4266
support.type, support.class#ee4266
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#e5c71b
meta.diff, meta.diff.header#9d96bc
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#71679e
meta.property-value, support.constant.property-value, constant.other.color#e5c71b
meta.structure.dictionary.json string.quoted.double.json#ee4266
meta.structure.dictionary.value.json string.quoted.double.json#e5c71b
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#413e4f
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#3cbbb1
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#3cbbb1normal
variable.other#413e4fnormal
variable.parameter.function.coffee#e5c71b
entity.name.section.markdown#ee4266
punctuation.definition.heading.markdown#9484d6
markup.raw.inline.markdown#e5c71b
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#9484d6
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#9484d6
punctuation.definition.metadata.markdown#9484d6
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#3cbbb1
markup.bold.markdown, markup.italic.markdown#3cbbb1
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#413e4f

Shiki preview

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

Loading...

Rainglow by Dayle Rees - VS Code Theme