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#202020
  • activityBar.foreground#D9E8F7
  • activityBarBadge.background#038cfc
  • badge.background#414339
  • badge.foreground#D9E8F7
  • button.background#038cfc
  • button.foreground#D9E8F7
  • button.hoverBackground#1177bb
  • button.secondaryBackground#3a3d41
  • button.secondaryForeground#D9E8F7
  • button.secondaryHoverBackground#038cfc
  • checkbox.background#3c3c3c
  • checkbox.border#3c3c3c
  • checkbox.foreground#D9E8F7
  • debugToolBar.background#1e1f1c
  • diffEditor.insertedTextBackground#4b661680
  • diffEditor.removedTextBackground#90274A70
  • dropdown.background#414339
  • dropdown.listBackground#1e1f1c
  • editor.background#202020
  • editor.findMatchBackground#FE9632
  • editor.findMatchHighlightBackground#fe953262
  • editor.foreground#D9E8F7
  • editor.lineHighlightBackground#3C3F41
  • editor.selectionBackground#878b9180
  • editor.selectionHighlightBackground#add6ff26
  • editor.wordHighlightBackground#4a4a7680
  • editor.wordHighlightStrongBackground#6a6a9680
  • editorCursor.foreground#ffff00
  • editorGroup.border#34352f
  • editorGroup.dropBackground#41433980
  • editorGroupHeader.tabsBackground#1e1f1c
  • editorHoverWidget.background#404040
  • editorHoverWidget.border#038cfc
  • editorHoverWidget.foreground#D9E8F7
  • editorHoverWidget.statusBarBackground#404040
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorLineNumber.activeForeground#D9E8F7
  • editorLineNumber.foreground#90908a
  • editorSuggestWidget.background#272822
  • editorSuggestWidget.border#404040
  • editorWhitespace.foreground#464741
  • editorWidget.background#3A3D41
  • extensionBadge.remoteBackground#007acc
  • extensionBadge.remoteForeground#D9E8F7
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#D9E8F7
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#007fd4
  • foreground#D9E8F7
  • input.background#414339
  • input.placeholderForeground#D9E8F7
  • inputOption.activeBorder#56584b
  • inputValidation.errorBackground#90274A
  • inputValidation.errorBorder#f92672
  • inputValidation.infoBackground#546190
  • inputValidation.infoBorder#819aff
  • inputValidation.warningBackground#848528
  • inputValidation.warningBorder#e2e22e
  • list.activeSelectionBackground#038cfc
  • list.dropBackground#038cfc5d
  • list.focusBackground#414339
  • list.highlightForeground#f8f8f2
  • list.hoverBackground#038cfc5d
  • list.inactiveSelectionBackground#038cfc8e
  • menu.background#404040
  • menu.foreground#D9E8F7
  • menubar.selectionBackground#598DEFB3
  • menubar.selectionBorder#598DEF00
  • menubar.selectionForeground#D9E8F7
  • minimap.selectionHighlight#878b9180
  • notificationLink.foreground#3794ff
  • panel.border#b9bfd6
  • panelTitle.activeBorder#414339
  • panelTitle.activeForeground#D9E8F7
  • panelTitle.inactiveForeground#414339
  • peekView.border#007acc
  • peekViewEditor.background#272822
  • peekViewEditor.matchHighlightBackground#75715E
  • peekViewResult.background#1e1f1c
  • peekViewResult.matchHighlightBackground#75715E
  • peekViewResult.selectionBackground#414339
  • peekViewTitle.background#1e1f1c
  • pickerGroup.foreground#414339
  • progressBar.background#0e70c0
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#db4aab
  • scrollbarSlider.background#db36a49f
  • scrollbarSlider.hoverBackground#db42a8d2
  • selection.background#878b9180
  • settings.numberInputBackground#292929
  • settings.textInputBackground#292929
  • sideBar.background#202020
  • sideBarSectionHeader.background#202020
  • sideBarSectionHeader.border#202020
  • sideBarTitle.foreground#D9E8F7
  • statusBar.background#202020
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingForeground#D9E8F7
  • statusBar.foreground#D9E8F7
  • statusBar.noFolderBackground#68217a
  • statusBar.noFolderForeground#D9E8F7
  • statusBarItem.activeBackground#D9E8F72e
  • statusBarItem.hoverBackground#D9E8F71f
  • statusBarItem.prominentBackground#00000080
  • statusBarItem.prominentForeground#D9E8F7
  • statusBarItem.prominentHoverBackground#0000004d
  • tab.activeBackground#2f7beca1
  • tab.border#038cfc
  • tab.inactiveBackground#3a3a3a
  • tab.inactiveForeground#D9E8F7
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#6A7EC8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#819aff
  • terminal.ansiBrightCyan#66D9EF
  • terminal.ansiBrightGreen#A6E22E
  • terminal.ansiBrightMagenta#AE81FF
  • terminal.ansiBrightRed#f92672
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#e2e22e
  • terminal.ansiCyan#56ADBC
  • terminal.ansiGreen#86B42B
  • terminal.ansiMagenta#8C6BC8
  • terminal.ansiRed#C4265E
  • terminal.ansiWhite#e3e3dd
  • terminal.ansiYellow#B3B42B
  • titleBar.activeBackground#202020
  • toolbar.activeBackground#4283F58F
  • toolbar.hoverBackground#4283F58F
  • toolbar.hoverOutline#4283F500
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#D9E8F7—
comment#808080—
string, punctuation.definition.string, support.constant.property-value, string.quoted.double.shell, support.function.variable.quoted.single.elixir, storage.type.string#17c6a3a6—
punctuation.definition.template-expression, punctuation.section.embedded#F92672—
meta.template.expression#D9E8F7—
constant.numeric, constant.language, constant.other, constant.character#9876AA—
variable, source.elixir.embedded.source, string source.groovy, string meta.embedded.line.ruby#FFBF26—
support.other.variable#ED7F48bold
meta.object-literal.key, meta.object.member, variable.other.property, variable.other.object.property, support.variable.property, variable.object.property, support.type.property-name, meta.property-name, entity.name.tag.yaml, constant.other.key, constant.other.object.key.js, string.unquoted.label.js, support.type.map.key, variable.graphql, keyword.operator#D9E8F7—
keyword, keyword.operator.expression, keyword.operator.type.asserts, keyword.operator.new, keyword.other.special-method.elixir, meta.control.flow, meta.link, markup.quote, markup.changed, variable.interpolation, variable.language, storage, storage.type, entity.name.tag#DD2867bold
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, entity.other.inherited-class#1290C3—
entity.name.function, meta.require, meta.function-call, meta.method-call, variable.function, support.function, support.function.any-method#1EB540—
variable.parameter, entity.other.attribute-name#79ABFF
support.constant#66D9EF
invalid#D9E8F7
invalid.deprecated#D9E8F7—
meta.diff, meta.diff.header#75715E—
markup.deleted#F92672—
markup.inserted#A6E22E—
markup.changed#E6DB74—
constant.numeric.line-number.find-in-files - match#9876AAA0—
entity.name.filename.find-in-files#E6DB74—
markup.list#E6DB74—
markup.bold, markup.italic#66D9EF—
markup.inline.raw#FD971F
markup.heading#A6E22E—
markup.heading.setext#A6E22Ebold
markup.heading.markdown—bold
markup.quote.markdown#75715E
markup.bold.markdown—bold
string.other.link.title.markdown,string.other.link.description.markdown#AE81FF—
markup.underline.link.markdown,markup.underline.link.image.markdown#E6DB74—
markup.italic.markdown—
markup.list.unnumbered.markdown, markup.list.numbered.markdown#D9E8F7—
punctuation.definition.list.begin.markdown#A6E22E—
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—

Shiki preview

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

Loading...

RainbowDrops by WithOutCat - VS Code Theme