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.activeBorder#c0bdd1
  • activityBar.background#645e82
  • activityBar.foreground#c0bdd1
  • activityBar.inactiveForeground#958db8
  • activityBarBadge.background#3a364b
  • activityBarBadge.foreground#f8f8f0
  • badge.background#3a364b
  • badge.foreground#f8f8f0
  • button.background#c9e7d5
  • button.foreground#3a364b
  • button.hoverBackground#c2ffdf
  • debugIcon.breakpointCurrentStackframeForeground#e6c000
  • debugIcon.breakpointDisabledForeground#8077a8
  • debugIcon.breakpointForeground#ff857f
  • debugIcon.breakpointStackframeForeground#e6c000
  • debugIcon.continueForeground#b8a2ce
  • debugIcon.disconnectForeground#ff857f
  • debugIcon.pauseForeground#b8a2ce
  • debugIcon.restartForeground#c2ffdf
  • debugIcon.startForeground#c2ffdf
  • debugIcon.stepBackForeground#b8a2ce
  • debugIcon.stepIntoForeground#b8a2ce
  • debugIcon.stepOutForeground#b8a2ce
  • debugIcon.stepOverForeground#b8a2ce
  • debugIcon.stopForeground#ff857f
  • debugToolBar.background#3a364b
  • diffEditor.insertedTextBackground#c9e7d52e
  • diffEditor.removedTextBackground#ff857f3e
  • dropdown.background#3a364b
  • dropdown.border#3a364b
  • dropdown.foreground#f8f8f2
  • editor.background#5a5475
  • editor.findMatchBackground#f9f1586e
  • editor.findMatchHighlightBackground#e6c0006e
  • editor.findRangeHighlightBackground#3a364b9e
  • editor.foldPlaceholderForeground#c0bdd1
  • editor.foreground#f8f8f2
  • editor.hoverHighlightBackground#958db8ae
  • editor.inactiveSelectionBackground#8077a84e
  • editor.lineHighlightBackground#716799
  • editor.selectionBackground#8077a8
  • editor.selectionHighlightBackground#8077a83e
  • editor.wordHighlightBackground#8077a84e
  • editorBracketHighlight.foreground1#f9f158
  • editorBracketHighlight.foreground2#C5A3FF
  • editorBracketHighlight.foreground3#ffb8d1
  • editorBracketMatch.background#b8a2ce
  • editorCodeLens.foreground#958db8
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#ff857f
  • editorGroup.border#464258
  • editorGroup.dropBackground#958db871
  • editorGroupHeader.noTabsBackground#5a5475
  • editorGroupHeader.tabsBackground#3a364b
  • editorGutter.addedBackground#c9e7d5ce
  • editorGutter.addedSecondaryBackground#c9e7d5ce
  • editorGutter.deletedBackground#ffb8d1ce
  • editorGutter.deletedSecondaryBackground#ffb8d1ce
  • editorGutter.modifiedBackground#f9f158ce
  • editorGutter.modifiedSecondaryBackground#f9f158ce
  • editorHoverWidget.background#3a364b
  • editorIndentGuide.activeBackground1#958db8
  • editorIndentGuide.background1#8077a8
  • editorInfo.foreground#958db8
  • editorLightBulb.foreground#b8a2ce
  • editorLightBulbAutoFix.foreground#e6c000
  • editorLineNumber.activeForeground#958db8
  • editorLineNumber.foreground#8077a8
  • editorLink.activeForeground#ff857f
  • editorMarkerNavigation.background#3a364b
  • editorOverviewRuler.addedForeground#c9e7d58e
  • editorOverviewRuler.border#5a547500
  • editorOverviewRuler.bracketMatchForeground#c0bdd1
  • editorOverviewRuler.deletedForeground#ffb8d18e
  • editorOverviewRuler.errorForeground#ff857f
  • editorOverviewRuler.findMatchForeground#e6c0008e
  • editorOverviewRuler.modifiedForeground#f9f1588e
  • editorRuler.foreground#a8757b
  • editorSuggestWidget.background#3a364b
  • editorSuggestWidget.border#3a364b
  • editorSuggestWidget.highlightForeground#ff857f
  • editorWarning.foreground#e6c000
  • editorWhitespace.foreground#8077a8
  • editorWidget.background#5a5475
  • errorForeground#f8f8f2
  • extensionButton.prominentBackground#c9e7d5
  • extensionButton.prominentForeground#3a364b
  • extensionButton.prominentHoverBackground#c2ffdf
  • extensionIcon.preReleaseForeground#c9e7d5
  • extensionIcon.sponsorForeground#C5A3FF
  • extensionIcon.starForeground#e6c000
  • focusBorder#c9e7d5
  • foreground#f8f8f0
  • gitDecoration.addedResourceForeground#c9e7d5
  • gitDecoration.conflictingResourceForeground#ff857f
  • gitDecoration.deletedResourceForeground#ffb8d1
  • gitDecoration.ignoredResourceForeground#c0bdd1
  • gitDecoration.modifiedResourceForeground#f9f158
  • gitDecoration.untrackedResourceForeground#c2ffdf
  • gitlens.gutterBackgroundColor#3a364b
  • gitlens.gutterForegroundColor#ffb8d1
  • gitlens.gutterUncommittedForegroundColor#c9e7d5
  • gitlens.lineHighlightBackgroundColor#ffb8d15e
  • gitlens.lineHighlightOverviewRulerColor#ff857f
  • input.background#3a364b
  • input.border#5a5475
  • input.foreground#f8f8f2
  • input.placeholderForeground#c0bdd1
  • inputOption.activeBackground#645e82
  • inputOption.activeBorder#c9e7d5
  • inputOption.activeForeground#f8f8f2
  • inputValidation.errorBackground#ffb8d1
  • inputValidation.errorBorder#ff857f
  • inputValidation.errorForeground#3a364b
  • inputValidation.infoBackground#958db8
  • inputValidation.infoBorder#b8a2ce
  • inputValidation.infoForeground#3a364b
  • inputValidation.warningBackground#f9f158
  • inputValidation.warningBorder#e6c000
  • inputValidation.warningForeground#272241
  • list.activeSelectionBackground#8077a8
  • list.activeSelectionForeground#f8f8f2
  • list.dropBackground#7d7796
  • list.errorForeground#ff857f
  • list.focusBackground#716799
  • list.highlightForeground#ff857f
  • list.hoverBackground#645e82
  • list.hoverForeground#f8f8f2
  • list.inactiveFocusBackground#7d7796
  • list.inactiveSelectionBackground#5a5475
  • list.inactiveSelectionForeground#f8f8f2
  • list.warningForeground#ebb2cf
  • menu.background#3a364b
  • menu.selectionBackground#5a5475
  • menu.separatorBackground#8077a8
  • menubar.selectionBackground#5a5475
  • menubar.selectionForeground#f8f8f0
  • merge.currentHeaderBackground#c2ffdf6e
  • merge.incomingHeaderBackground#b8a2ce8e
  • minimap.errorHighlight#ff857f8e
  • minimap.findMatchHighlight#f9f1588e
  • minimap.selectionHighlight#8077a88e
  • minimap.warningHighlight#e6c0008e
  • minimapGutter.addedBackground#c9e7d58e
  • minimapGutter.deletedBackground#ffb8d18e
  • minimapGutter.modifiedBackground#f9f1588e
  • panel.border#645e82
  • panelInput.border#645e82
  • panelTitle.activeBorder#958db8
  • panelTitle.activeForeground#f8f8f0
  • panelTitle.inactiveForeground#c0bdd1
  • peekView.border#958db8
  • peekViewEditor.background#3a364b
  • peekViewEditor.matchHighlightBackground#e6c0006e
  • peekViewResult.background#5a5475
  • peekViewResult.lineForeground#c0bdd1
  • peekViewResult.matchHighlightBackground#e6c0006e
  • peekViewResult.selectionBackground#8077a8
  • peekViewTitle.background#3a364b
  • pickerGroup.border#8077a8
  • pickerGroup.foreground#c2ffdf
  • scrollbar.shadow#3a364b
  • scrollbarSlider.activeBackground#8077a8ae
  • scrollbarSlider.background#7167998e
  • scrollbarSlider.hoverBackground#3a364bae
  • selection.background#c0bdd1
  • settings.modifiedItemIndicator#c9e7d5
  • sideBar.background#3a364b
  • sideBar.dropBackground#464258
  • sideBar.foreground#f8f8f0
  • sideBarSectionHeader.background#645e82
  • statusBar.background#8077a8
  • statusBar.debuggingBackground#ffb8d1
  • statusBar.debuggingForeground#3a364b
  • statusBar.foreground#f8f8f0
  • statusBar.noFolderBackground#645e82
  • statusBar.noFolderForeground#f8f8f2
  • tab.border#5a5475
  • tab.inactiveBackground#3a364b
  • tab.inactiveForeground#c0bdd1
  • terminal.ansiBlack#3A364B
  • terminal.ansiBlue#8C7899
  • terminal.ansiBrightBlack#C0BDD1
  • terminal.ansiBrightBlue#EBC9FF
  • terminal.ansiBrightCyan#C2FFDF
  • terminal.ansiBrightGreen#C9E7D5
  • terminal.ansiBrightMagenta#CEC3FF
  • terminal.ansiBrightRed#FFB8D1
  • terminal.ansiBrightWhite#F8F8F2
  • terminal.ansiBrightYellow#F9F158
  • terminal.ansiCyan#AFECAD
  • terminal.ansiGreen#A3CAC0
  • terminal.ansiMagenta#958DB8
  • terminal.ansiRed#FF857F
  • terminal.ansiWhite#FFEFFF
  • terminal.ansiYellow#E6C000
  • terminal.background#5a5475
  • terminal.foreground#F8F8F2
  • terminalCommandDecoration.errorBackground#ff857f
  • terminalCommandDecoration.successBackground#c9e7d5
  • terminalCursor.foreground#F8F8F0
  • textBlockQuote.background#716799
  • textBlockQuote.border#c9e7d5
  • textLink.activeForeground#ff857f
  • textLink.foreground#ffb8d1
  • textPreformat.foreground#e6c000
  • textSeparator.foreground#c0bdd1
  • titleBar.activeBackground#645e82
  • titleBar.activeForeground#c0bdd1
  • titleBar.inactiveBackground#3a364b
  • titleBar.inactiveForeground#b9b9b9
  • widget.shadow#3a364b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#E6C000
string#FFEA00
constant.numeric#C5A3FF
constant.language#C5A3FF
constant.character, constant.other#C5A3FF
variable
keyword#FFB8D1
storage#FFB8D1
storage.type#C2FFDFitalic
entity.name.class#FFF352underline
variable.language.this#d5c6f0
entity.other.inherited-class#FFF352italic underline
entity.name.function#FFF352
variable.parameter#FF857Fitalic
entity.name.tag#FFB8D1
entity.other.attribute-name#FFF352
support.function#C2FFDF
support.constant#C2FFDF
support.type, support.class#C2FFDFitalic
support.other.variable
invalid#ffb0b0
invalid.deprecated#dfdfcb
meta.diff, meta.diff.header#FFF352italic
markup.deleted#fa736e
markup.changed#fa9d99
markup.inserted#afecad
markup.quote#FF857F
markup.bold#C2FFDFbold
markup.italic#C2FFDFitalic
markup.inline.raw#FFF352
markup.heading.markdown#ddbb88bold
text.html.php punctuation.section.embedded.begin.php, text.html.php punctuation.section.embedded.end.php#d5c6f0
source.java storage.modifier.import, source.java storage.modifier.package#dda0b4
source.java keyword.other.documentation.javadoc.java#9966b8
source.clojure meta.symbol#beb0cc
source.clojure entity.global, source.clojure meta.definition.global#df7e9f
source.clojure constant.keyword#c19fd8
source.clojure meta.symbol meta.expression, source.clojure meta.vector#df7e9f
source.python variable.language.special.self.python, source.python variable.language.special.cls.python#FF857F
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6