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#2f3030
  • activityBar.foreground#ffffff
  • activityBarBadge.background#3da09a
  • activityBarBadge.foreground#ffffff
  • badge.background#3da09a
  • badge.foreground#ffffff
  • button.background#008299
  • button.foreground#ffffff
  • dropdown.background#fafafa
  • dropdown.border#fafafa
  • dropdown.foreground#2f3030
  • editor.background#ffffff
  • editor.foreground#2f3030
  • editor.hoverHighlightBackground#3da09a22
  • editor.lineHighlightBackground#f7f7f7
  • editor.selectionBackground#00809733
  • editor.wordHighlightBackground#83aa2922
  • editor.wordHighlightStrongBackground#00829922
  • editorBracketMatch.background#3da09a44
  • editorBracketMatch.border#008299
  • 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#3da09a
  • editorOverviewRuler.addedForeground#59a50b
  • editorOverviewRuler.deletedForeground#a30e29
  • editorOverviewRuler.errorForeground#a30e29
  • editorOverviewRuler.findMatchForeground#00829955
  • editorOverviewRuler.infoForeground#6a1faf
  • editorOverviewRuler.modifiedForeground#c48405
  • editorOverviewRuler.warningForeground#c48405
  • editorRuler.foreground#e6e6e6
  • editorSuggestWidget.foreground#2f3030
  • editorSuggestWidget.highlightForeground#3da09a
  • editorSuggestWidget.selectedBackground#d9d9d9
  • editorWhitespace.foreground#e6e6e6
  • editorWidget.background#f2f2f2
  • editorWidget.border#cccccc
  • extensionButton.prominentBackground#3da09a
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#53bdb7
  • focusBorder#3da09a
  • foreground#2f3030
  • gitDecoration.conflictingResourceForeground#6a1faf
  • gitDecoration.deletedResourceForeground#a30e29
  • gitDecoration.ignoredResourceForeground#a6a6a6
  • gitDecoration.modifiedResourceForeground#c48405
  • gitDecoration.untrackedResourceForeground#59a50b
  • input.activeBorder#3da09a
  • input.background#ffffff
  • input.border#999999
  • input.foreground#2f3030
  • input.placeholderForeground#cccccc
  • inputOption.activeBorder#008299
  • list.activeSelectionBackground#008299
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#d9d9d9
  • list.hoverBackground#ffffff
  • list.inactiveSelectionBackground#ffffff
  • notification.background#d9d9d9
  • notification.buttonBackground#3da09a
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#2f3030
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#f5f5f5
  • panel.border#e0e0e0
  • panelTitle.activeBorder#3da09a
  • panelTitle.activeForeground#737373
  • panelTitle.inactiveForeground#bfbfbf
  • peekView.border#3da09a
  • peekViewEditor.background#fafafa
  • peekViewEditor.matchHighlightBackground#00829955
  • peekViewEditorGutter.background#f0f0f0
  • peekViewResult.background#f2f2f2
  • peekViewResult.fileForeground#3c3d3d
  • peekViewResult.lineForeground#6e7070
  • peekViewResult.matchHighlightBackground#00829955
  • peekViewResult.selectionBackground#ffffff
  • peekViewResult.selectionForeground#3c3d3d
  • peekViewTitle.background#fafafa
  • peekViewTitleDescription.foreground#272828
  • peekViewTitleLabel.foreground#2f3030
  • progressBar.background#83aa29
  • scrollbar.shadow#999999
  • scrollbarSlider.activeBackground#3da09aaa
  • scrollbarSlider.background#2f303035
  • scrollbarSlider.hoverBackground#3da09a55
  • sideBar.background#f2f2f2
  • sideBar.foreground#2f3030
  • sideBarSectionHeader.background#d9d9d9
  • sideBarSectionHeader.foreground#2f3030
  • statusBar.background#3da09a
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#008299
  • tab.activeForeground#2f3030
  • tab.border#e0e0e0
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#949797
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#83aa29
  • terminal.ansiBrightBlack#ffffff
  • terminal.ansiBrightBlue#b4d960
  • terminal.ansiBrightCyan#75ccc6
  • terminal.ansiBrightGreen#78cbc6
  • terminal.ansiBrightMagenta#c7ccd2
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#616464
  • terminal.ansiBrightYellow#00d9ff
  • terminal.ansiCyan#3ba099
  • terminal.ansiGreen#3da09a
  • terminal.ansiMagenta#8e99a5
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#3c3d3d
  • terminal.ansiYellow#008299
  • terminal.background#ffffff
  • terminal.foreground#2f3030
  • titleBar.activeBackground#aeb0b0
  • titleBar.activeForeground#2f3030
  • widget.shadow#cccccc55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#2f3030
comment#bbbbbb
string#777747
constant.numeric#8fbe00
constant.language#008299
constant.character, constant.other#008299
variable
keyword#8e99a5
storage#008299
storage.type#3da09a
entity.name.class#008299underline
entity.other.inherited-class#008299
entity.name.function#83aa29
variable.parameter#2f3030
entity.name.tag#3da09a
entity.other.attribute-name#008299
support.function#3ba099
support.constant#008299
support.type, support.class#008299
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#777747
meta.diff, meta.diff.header#bbbbbb
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#959595
meta.property-value, support.constant.property-value, constant.other.color#777747
meta.structure.dictionary.json string.quoted.double.json#008299
meta.structure.dictionary.value.json string.quoted.double.json#777747
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#2f3030
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#3da09a
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#3da09anormal
variable.other#2f3030normal
variable.parameter.function.coffee#8fbe00
entity.name.section.markdown#008299
punctuation.definition.heading.markdown#8e99a5
markup.raw.inline.markdown#777747
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#8e99a5
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#8e99a5
punctuation.definition.metadata.markdown#8e99a5
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#3da09a
markup.bold.markdown, markup.italic.markdown#3da09a
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#2f3030

Shiki preview

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

Loading...