Skip to main content
Coding Theme

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#212026
  • activityBar.foreground#cbc1d5
  • activityBarBadge.background#2b2b2c
  • activityBarBadge.foreground#cbc1d5
  • badge.background#3a1a74
  • badge.foreground#ffffff
  • button.background#ef746f
  • button.foreground#ffffff
  • contrastBorder#5d4d7a
  • debugToolBar.background#0a0814
  • dropdown.background#212026
  • dropdown.border#5d4d7a
  • dropdown.foreground#cbc1d5
  • editor.background#1f2022
  • editor.foreground#cbc1d5
  • editor.hoverHighlightBackground#b3cc5722
  • editor.inactiveSelectionBackground#3b314d
  • editor.lineHighlightBackground#212026
  • editor.selectionBackground#5d4d7a
  • editor.selectionHighlightBackground#3b314d
  • editor.wordHighlightBackground#ffbe4022
  • editor.wordHighlightStrongBackground#ef746f22
  • editorBracketMatch.background#5d4d7a
  • editorBracketMatch.border#686868
  • editorCursor.foreground#e3dedd
  • editorGroupHeader.noTabsBackground#292b2e
  • editorGroupHeader.tabsBackground#292b2e
  • editorGutter.addedBackground#a7da1e
  • editorGutter.background#1f2022
  • editorGutter.deletedBackground#e61f44
  • editorGutter.modifiedBackground#f7b83d
  • editorIndentGuide.background#3f3e41
  • editorLineNumber.foreground#5d4d7a
  • editorLink.activeForeground#b3cc57
  • editorOverviewRuler.addedForeground#a7da1e
  • editorOverviewRuler.deletedForeground#e61f44
  • editorOverviewRuler.errorForeground#e61f44
  • editorOverviewRuler.findMatchForeground#ef746f55
  • editorOverviewRuler.infoForeground#9d37fc
  • editorOverviewRuler.modifiedForeground#f7b83d
  • editorOverviewRuler.warningForeground#f7b83d
  • editorRuler.foreground#2d3136
  • editorSuggestWidget.foreground#c7d0d9
  • editorSuggestWidget.highlightForeground#b3cc57
  • editorSuggestWidget.selectedBackground#454b51
  • editorWhitespace.foreground#2d3136
  • editorWidget.background#2d3136
  • editorWidget.border#454b51
  • extensionButton.prominentBackground#3a1a74
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#110031
  • focusBorder#b3cc57
  • foreground#c7d0d9
  • gitDecoration.conflictingResourceForeground#9d37fc
  • gitDecoration.deletedResourceForeground#e61f44
  • gitDecoration.ignoredResourceForeground#5c646d
  • gitDecoration.modifiedResourceForeground#f7b83d
  • gitDecoration.untrackedResourceForeground#a7da1e
  • input.background#0a0b0c
  • input.border#393e43
  • input.foreground#c7d0d9
  • input.placeholderForeground#40464c
  • inputOption.activeBorder#ef746f
  • list.activeSelectionBackground#100a14
  • list.activeSelectionForeground#b2b2b2
  • list.dropBackground#100a14
  • list.focusBackground#100a14
  • list.highlightForeground#686868
  • list.hoverBackground#100a14
  • list.inactiveSelectionBackground#212026
  • panel.background#2d3136
  • panel.border#454b51
  • panelTitle.activeBorder#b3cc57
  • panelTitle.inactiveForeground#68717b
  • peekView.border#b3cc57
  • peekViewEditor.background#0d0e0f
  • peekViewEditor.matchHighlightBackground#ef746f55
  • peekViewEditorGutter.background#111314
  • peekViewResult.background#222528
  • peekViewResult.fileForeground#bbc6d1
  • peekViewResult.lineForeground#a9b6c4
  • peekViewResult.matchHighlightBackground#ef746f55
  • peekViewResult.selectionBackground#1b1d20
  • peekViewResult.selectionForeground#c7d0d9
  • peekViewTitle.background#111314
  • peekViewTitleDescription.foreground#bec8d3
  • peekViewTitleLabel.foreground#c7d0d9
  • progressBar.background#ffbe40
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#b3cc57aa
  • scrollbarSlider.background#454b51aa
  • scrollbarSlider.hoverBackground#b3cc5755
  • sideBar.background#292b2e
  • sideBar.foreground#c7d0d9
  • sideBarSectionHeader.background#212026
  • sideBarSectionHeader.foreground#c7d0d9
  • sideBarTitle.foreground#cbc1d5
  • statusBar.background#222226
  • statusBar.debuggingBackground#222226
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#222226
  • statusBarItem.activeBackground#827591
  • statusBarItem.hoverBackground#827591
  • statusBarItem.prominentBackground#827591
  • statusBarItem.prominentHoverBackground#827591
  • tab.activeBackground#5d4d7a
  • tab.activeForeground#cbc1d5
  • tab.border#5d4d7a
  • tab.inactiveBackground#212026
  • tab.inactiveForeground#a094a2
  • terminal.ansiBlack#222528
  • terminal.ansiBlue#ffbe40
  • terminal.ansiBrightBlack#454b51
  • terminal.ansiBrightBlue#ffe1a6
  • terminal.ansiBrightCyan#fcc0b2
  • terminal.ansiBrightGreen#d6e4a5
  • terminal.ansiBrightMagenta#8dd3dd
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f9cdcb
  • terminal.ansiCyan#f86f50
  • terminal.ansiGreen#b3cc57
  • terminal.ansiMagenta#3fb4c5
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#d6dde3
  • terminal.ansiYellow#ef746f
  • terminal.background#0a0b0c
  • terminal.foreground#c7d0d9
  • titleBar.activeBackground#0d0e0f
  • widget.shadow#5d4d7a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#424C55
string#C78FEB
constant.numeric#C78FEB
constant.language#EF746F
constant.character, constant.other#EF746F
variable
keyword#3FB4C5
storage#EF746F
storage.type#B3CC57
entity.name.class#EF746Funderline
entity.other.inherited-class#EF746F
entity.name.function#FFBE40
variable.parameter#F4F7FA
entity.name.tag#B3CC57
entity.other.attribute-name#EF746F
support.function#F86F50
support.constant#EF746F
support.type, support.class#EF746F
support.other.variable
invalid#CF433E
invalid.deprecated#CF433E
meta.structure.dictionary.json string.quoted.double.json#C78FEB
meta.diff, meta.diff.header#424C55
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#637280
meta.property-value, support.constant.property-value, constant.other.color#C78FEB
meta.structure.dictionary.json string.quoted.double.json#EF746F
meta.structure.dictionary.value.json string.quoted.double.json#C78FEB
meta.property-value punctuation.separator.key-value#C7D0D9
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#B3CC57
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#B3CC57
variable.other#F4F7FA
variable.parameter.function.coffee#C78FEB
entity.name.section.markdown#EF746F
punctuation.definition.heading.markdown#3FB4C5
markup.raw.inline.markdown#C78FEB
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#3FB4C5
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#3FB4C5
punctuation.definition.metadata.markdown#3FB4C5
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#B3CC57
markup.bold.markdown, markup.italic.markdown#B3CC57
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#C7D0D9
comment#99999999
punctuation.definition.comment#99999999
keyword.operator.new#3CA4C4
keyword.other.new#3CA4C4
keyword.other#3CA4C4
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
Soothing Theme by alireza - VS Code Theme