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#272524
  • activityBar.border#272524
  • activityBar.foreground#5D5B5A
  • activityBarBadge.background#F4ADFC
  • activityBarBadge.foreground#272524
  • badge.background#F4ADFC
  • badge.foreground#272524
  • button.background#F4ADFC
  • button.foreground#272524
  • debugExceptionWidget.background#2F2C2B
  • debugExceptionWidget.border#5D5B5A33
  • debugToolBar.background#272524
  • diffEditor.insertedTextBackground#185D8E33
  • diffEditor.removedTextBackground#7270A033
  • dropdown.background#2F2C2B
  • dropdown.border#5D5B5A77
  • dropdown.foreground#C9C8C899
  • editor.background#272524
  • editor.findMatchBackground#F4ADFC0e
  • editor.findMatchBorder#F4ADFC
  • editor.findMatchHighlightBackground#F4ADFC0e
  • editor.findMatchHighlightBorder#F4ADFC66
  • editor.findRangeHighlightBackground#5D5B5A44
  • editor.findRangeHighlightBorder#27252400
  • editor.foreground#C9C8C8
  • editor.inactiveSelectionBackground#5D5B5A44
  • editor.lineHighlightBackground#C9C8C822
  • editor.rangeHighlightBackground#5D5B5A33
  • editor.selectionBackground#5D5B5A77
  • editor.selectionHighlightBackground#5D5B5A44
  • editor.selectionHighlightBorder#5D5B5A
  • editor.wordHighlightBackground#5D5B5A44
  • editor.wordHighlightStrongBackground#185D8E77
  • editorBracketMatch.background#5D5B5A33
  • editorBracketMatch.border#5D5B5A55
  • editorCodeLens.foreground#5D5B5Ab0
  • editorCursor.foreground#F4ADFC
  • editorError.foreground#7996AA
  • editorGroup.border#5D5B5A33
  • editorGroupHeader.noTabsBackground#272524
  • editorGroupHeader.tabsBackground#272524
  • editorGroupHeader.tabsBorder#272524
  • editorGutter.addedBackground#185D8Ebb
  • editorGutter.deletedBackground#7996AAbb
  • editorGutter.modifiedBackground#7270A0bb
  • editorHoverWidget.background#2F2C2B
  • editorHoverWidget.border#5D5B5A22
  • editorIndentGuide.activeBackground#5D5B5A77
  • editorIndentGuide.background#5D5B5A44
  • editorLineNumber.activeForeground#5D5B5A
  • editorLineNumber.foreground#5D5B5A92
  • editorLink.activeForeground#F4ADFC
  • editorMarkerNavigation.background#2F2C2B
  • editorOverviewRuler.addedForeground#185D8Ebb
  • editorOverviewRuler.border#5D5B5A33
  • editorOverviewRuler.deletedForeground#7996AAbb
  • editorOverviewRuler.errorForeground#7996AA
  • editorOverviewRuler.modifiedForeground#7270A0bb
  • editorOverviewRuler.warningForeground#F4ADFC
  • editorRuler.foreground#5D5B5A44
  • editorSuggestWidget.background#2F2C2B
  • editorSuggestWidget.border#5D5B5A22
  • editorSuggestWidget.highlightForeground#F4ADFC
  • editorSuggestWidget.selectedBackground#5D5B5A33
  • editorWarning.foreground#F4ADFC
  • editorWhitespace.foreground#5D5B5A66
  • editorWidget.background#2F2C2B
  • extensionButton.prominentBackground#F4ADFC
  • extensionButton.prominentForeground#272524
  • extensionButton.prominentHoverBackground#F4ADFCb3
  • focusBorder#5D5B5A77
  • foreground#C9C8C899
  • gitDecoration.deletedResourceForeground#7996AAcc
  • gitDecoration.ignoredResourceForeground#C9C8C866
  • gitDecoration.modifiedResourceForeground#7270A0cc
  • gitDecoration.submoduleResourceForeground#5989AAb0
  • gitDecoration.untrackedResourceForeground#185D8Ecc
  • input.background#2F2C2B
  • input.border#5D5B5A55
  • input.foreground#C9C8C8
  • input.placeholderForeground#5D5B5A77
  • inputOption.activeBorder#F4ADFC
  • inputValidation.errorBackground#272524
  • inputValidation.errorBorder#7996AA
  • inputValidation.infoBackground#272524
  • inputValidation.infoBorder#185D8E
  • inputValidation.warningBackground#272524
  • inputValidation.warningBorder#7270A0
  • list.activeSelectionBackground#5D5B5A33
  • list.activeSelectionForeground#C9C8C8
  • list.focusBackground#5D5B5A33
  • list.focusForeground#C9C8C899
  • list.highlightForeground#F4ADFC
  • list.hoverBackground#5D5B5A33
  • list.hoverForeground#C9C8C899
  • list.inactiveSelectionBackground#5D5B5A33
  • list.inactiveSelectionForeground#C9C8C899
  • list.invalidItemForeground#C9C8C877
  • panel.background#272524
  • panel.border#5D5B5A33
  • panelTitle.activeBorder#F4ADFC
  • panelTitle.activeForeground#C9C8C8
  • panelTitle.inactiveForeground#C9C8C899
  • peekView.border#5D5B5A33
  • peekViewEditor.background#2F2C2B
  • peekViewEditor.matchHighlightBackground#F4ADFC44
  • peekViewResult.background#2F2C2B
  • peekViewResult.fileForeground#C9C8C899
  • peekViewResult.matchHighlightBackground#F4ADFC44
  • peekViewTitle.background#2F2C2B
  • peekViewTitleDescription.foreground#C9C8C899
  • peekViewTitleLabel.foreground#C9C8C899
  • pickerGroup.border#5D5B5A33
  • pickerGroup.foreground#C9C8C8b3
  • progressBar.background#F4ADFC
  • scrollbar.shadow#5D5B5A33
  • scrollbarSlider.activeBackground#C9C8C892
  • scrollbarSlider.background#C9C8C844
  • scrollbarSlider.hoverBackground#C9C8C877
  • selection.background#C9C8C877
  • settings.headerForeground#C9C8C8
  • settings.modifiedItemIndicator#185D8E
  • sideBar.background#272524
  • sideBar.border#272524
  • sideBarSectionHeader.background#272524
  • sideBarSectionHeader.foreground#C9C8C899
  • sideBarTitle.foreground#C9C8C899
  • statusBar.background#272524
  • statusBar.border#272524
  • statusBar.debuggingBackground#7270A0
  • statusBar.debuggingForeground#272524dd
  • statusBar.foreground#C9C8C8
  • statusBar.noFolderBackground#2F2C2B
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#5D5B5A33
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#272524
  • tab.activeBorder#F4ADFC
  • tab.activeForeground#C9C8C8
  • tab.border#272524
  • tab.inactiveBackground#272524
  • tab.inactiveForeground#C9C8C899
  • tab.unfocusedActiveBorder#C9C8C899
  • tab.unfocusedActiveForeground#C9C8C899
  • tab.unfocusedInactiveForeground#C9C8C899
  • terminal.ansiBlack#272524
  • terminal.ansiBlue#7996AA
  • terminal.ansiBrightBlack#5D5B5A
  • terminal.ansiBrightBlue#7996AA
  • terminal.ansiBrightCyan#D0C29F
  • terminal.ansiBrightGreen#185D8E
  • terminal.ansiBrightMagenta#5989AA
  • terminal.ansiBrightRed#F4FCAD
  • terminal.ansiBrightWhite#C9C8C8
  • terminal.ansiBrightYellow#7270A0
  • terminal.ansiCyan#D0C29F
  • terminal.ansiGreen#185D8E
  • terminal.ansiMagenta#5989AA
  • terminal.ansiRed#F4ADFC
  • terminal.ansiWhite#C9C8C8
  • terminal.ansiYellow#7270A0
  • terminal.background#272524
  • terminal.foreground#C9C8C8
  • textBlockQuote.background#2F2C2B
  • textLink.activeForeground#F4ADFC
  • textLink.foreground#F4ADFC
  • textPreformat.foreground#C9C8C8
  • titleBar.activeBackground#272524
  • titleBar.activeForeground#C9C8C8
  • titleBar.border#272524
  • titleBar.inactiveBackground#272524
  • titleBar.inactiveForeground#C9C8C8
  • walkThrough.embeddedEditorBackground#2F2C2B
  • widget.shadow#1D1C1B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#C9C8C8
comment#5D5B5Ab0italic
string, constant.other.symbol#185D8E
string.regexp, constant.character, constant.other#D0C29F
constant.numeric#F4ADFC
constant.language#F4ADFC
variable#C9C8C8
variable.member#F4ADFC
variable.language#185D8Eitalic
storage#7270A0
keyword#7270A0
keyword.operator#7270A0
punctuation.separator, punctuation.terminator#C9C8C8b0
punctuation.section#C9C8C8
punctuation.accessor#7270A0
source.java storage.type, source.haskell storage.type, source.c storage.type#7996AA
entity.other.inherited-class#185D8E
storage.type.function#7270A0
source.java storage.type.primitive#185D8E
entity.name.function#7270A0
variable.parameter, meta.parameter#5989AA
variable.function, variable.annotation, meta.function-call.generic, support.function.go#7270A0
support.function, support.macro#F4ADFC
entity.name.import, entity.name.package#185D8E
entity.name#7996AA
entity.name.tag, meta.tag.sgml#185D8E
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#185D8E77
entity.other.attribute-name#7270A0
support.constant#7270A0italic
support.type, support.class, source.go storage.type#185D8E
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#5989AA
invalid#7996AA
meta.diff, meta.diff.header#5989AA
source.ruby variable.other.readwrite#7270A0
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#7996AA
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#5D5B5Ab0
support.type.property-name#185D8Enormal
constant.numeric.line-number.find-in-files - match#5D5B5Ab0
constant.numeric.line-number.match#7270A0
entity.name.filename.find-in-files#185D8E
message.error#7996AA
markup.heading, markup.heading entity.name#185D8Ebold
markup.underline.link, string.other.link#185D8E
markup.italic#F4ADFCitalic
markup.bold#F4ADFCbold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#5D5B5Ab0bold
markup.quote#D0C29Fitalic
markup.list punctuation.definition.list.begin#7270A0
markup.inserted#185D8E
markup.changed#7270A0
markup.deleted#7996AA
markup.strike#5989AA
markup.table#185D8E
text.html.markdown markup.inline.raw#7270A0
text.html.markdown meta.dummy.line-break#5D5B5Ab0
punctuation.definition.markdown#5D5B5Ab0
Xresources Theme by Jack Vandergriff - VS Code Theme