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.activeBorder#5B8FB9
  • activityBar.background#000
  • activityBar.border#000
  • activityBar.foreground#73bbf6
  • activityBar.inactiveForeground#5B8FB9
  • activityBarBadge.background#5B8FB9
  • activityBarBadge.foreground#000
  • badge.background#03001C
  • badge.foreground#5B8FB9
  • button.background#03001C
  • button.foreground#5B8FB9
  • button.hoverBackground#301E67
  • button.secondaryBackground#5B8FB933
  • button.secondaryForeground#5B8FB9
  • button.secondaryHoverBackground#5B8FB980
  • debugConsoleInputIcon.foreground#5B8FB9
  • debugExceptionWidget.background#301E67
  • debugExceptionWidget.border#6b7d8f1f
  • debugIcon.breakpointDisabledForeground#ed936680
  • debugIcon.breakpointForeground#ed9366
  • debugToolBar.background#03001C
  • descriptionForeground#5B8FB9
  • diffEditor.diagonalFill#6b7d8f1f
  • diffEditor.insertedTextBackground#6cbf431f
  • diffEditor.removedTextBackground#ff73831f
  • dropdown.background#000
  • dropdown.foreground#5B8FB9
  • editor.background#000
  • editor.findMatchBackground#5B8FB9cc
  • editor.findMatchBorder#5B8FB9cc
  • editor.findMatchHighlightBackground#5b8fb981
  • editor.findMatchHighlightBorder#5b8fb981
  • editor.findRangeHighlightBackground#5B8FB940
  • editor.foldBackground#00383eb1
  • editor.foreground#5B8FB9
  • editor.inactiveSelectionBackground#5b8fb955
  • editor.lineHighlightBackground#5B8FB91a
  • editor.rangeHighlightBackground#5B8FB933
  • editor.selectionBackground#5b8fb975
  • editor.selectionHighlightBackground#6cbf4326
  • editor.selectionHighlightBorder#6cbf4300
  • editor.snippetTabstopHighlightBackground#6cbf4333
  • editor.wordHighlightBackground#478acc14
  • editor.wordHighlightBorder#478acc80
  • editor.wordHighlightStrongBackground#6cbf4314
  • editor.wordHighlightStrongBorder#6cbf4380
  • editorBracketMatch.background#5B8FB94d
  • editorBracketMatch.border#5B8FB94d
  • editorCodeLens.foreground#787b8099
  • editorCursor.foreground#5B8FB9
  • editorError.foreground#e65050
  • editorGroup.border#5B8FB9
  • editorGroupHeader.noTabsBackground#000
  • editorGroupHeader.tabsBackground#000
  • editorGroupHeader.tabsBorder#000
  • editorGutter.addedBackground#6cbf43cc
  • editorGutter.deletedBackground#ff7383cc
  • editorGutter.modifiedBackground#478acccc
  • editorHoverWidget.background#03001C
  • editorHoverWidget.border#301E67
  • editorHoverWidget.foreground#6eaadb
  • editorLineNumber.activeForeground#5B8FB9
  • editorLineNumber.foreground#5B8FB999
  • editorLink.activeForeground#5B8FB9
  • editorMarkerNavigation.background#301E67
  • editorOverviewRuler.addedForeground#6cbf43
  • editorOverviewRuler.border#6b7d8f1f
  • editorOverviewRuler.bracketMatchForeground#5B8FB9b3
  • editorOverviewRuler.deletedForeground#ff7383
  • editorOverviewRuler.errorForeground#e65050
  • editorOverviewRuler.findMatchForeground#5B8FB92b
  • editorOverviewRuler.modifiedForeground#478acc
  • editorOverviewRuler.warningForeground#5B8FB9
  • editorOverviewRuler.wordHighlightForeground#478acc66
  • editorOverviewRuler.wordHighlightStrongForeground#6cbf4366
  • editorRuler.foreground#5B8FB92e
  • editorSuggestWidget.background#03001C
  • editorSuggestWidget.border#6b7d8f1f
  • editorSuggestWidget.highlightForeground#5B8FB9
  • editorSuggestWidget.selectedBackground#301E67
  • editorWarning.foreground#5B8FB9
  • editorWhitespace.foreground#5B8FB966
  • editorWidget.background#03001C
  • editorWidget.border#6b7d8f1f
  • errorForeground#5B8FB9
  • extensionButton.prominentBackground#5B8FB9
  • extensionButton.prominentForeground#B6EADA
  • extensionButton.prominentHoverBackground#f9a52e
  • focusBorder#03001C
  • foreground#5B8FB9
  • gitDecoration.conflictingResourceForeground#489ee3
  • gitDecoration.deletedResourceForeground#ff7383b3
  • gitDecoration.ignoredResourceForeground#5B8FB980
  • gitDecoration.modifiedResourceForeground#c7c757b3
  • gitDecoration.submoduleResourceForeground#489ee3b3
  • gitDecoration.untrackedResourceForeground#6cbf43b3
  • icon.foreground#5B8FB9
  • input.background#03001C
  • input.border#03001cc2
  • input.foreground#B6EADA
  • input.placeholderForeground#301E67
  • inputOption.activeBackground#5B8FB933
  • inputOption.activeBorder#301E67
  • inputOption.activeForeground#301E67
  • inputValidation.errorBackground#03001C
  • inputValidation.errorBorder#03001C
  • inputValidation.infoBackground#000
  • inputValidation.infoBorder#03001C
  • inputValidation.warningBackground#000
  • inputValidation.warningBorder#03001C
  • keybindingLabel.background#5B8FB91a
  • keybindingLabel.border#5B8FB91a
  • keybindingLabel.bottomBorder#5B8FB91a
  • keybindingLabel.foreground#5B8FB9
  • list.activeSelectionBackground#301E67
  • list.activeSelectionForeground#B6EADA
  • list.deemphasizedForeground#B6EADA
  • list.errorForeground#e65050
  • list.filterMatchBackground#03001C
  • list.filterMatchBorder#03001C
  • list.focusBackground#03001C
  • list.focusForeground#5B8FB9
  • list.focusOutline#56728f1f
  • list.highlightForeground#5B8FB9
  • list.hoverBackground#301E67c3
  • list.hoverForeground#B6EADA
  • list.inactiveSelectionBackground#6b7d8f1f
  • list.inactiveSelectionForeground#5B8FB9
  • list.invalidItemForeground#5B8FB94d
  • listFilterWidget.background#03001C
  • listFilterWidget.noMatchesOutline#03001C
  • listFilterWidget.outline#03001C
  • minimap.background#000
  • minimap.errorHighlight#e65050
  • minimap.findMatchHighlight#5B8FB92b
  • minimap.selectionHighlight#5B8FB9
  • minimapGutter.addedBackground#6cbf43
  • minimapGutter.deletedBackground#ff7383
  • minimapGutter.modifiedBackground#478acc
  • panel.background#000
  • panel.border#6b7d8f1f
  • panelTitle.activeBorder#5B8FB9
  • panelTitle.activeForeground#B6EADA
  • panelTitle.inactiveForeground#5B8FB9
  • peekView.border#56728f1f
  • peekViewEditor.background#03001C
  • peekViewEditor.matchHighlightBackground#5B8FB9cc
  • peekViewEditor.matchHighlightBorder#8f30efcc
  • peekViewResult.background#03001C
  • peekViewResult.fileForeground#5B8FB9
  • peekViewResult.lineForeground#5B8FB9
  • peekViewResult.matchHighlightBackground#5B8FB9cc
  • peekViewResult.selectionBackground#56728f1f
  • peekViewTitle.background#56728f1f
  • peekViewTitleDescription.foreground#5B8FB9
  • peekViewTitleLabel.foreground#5B8FB9
  • pickerGroup.border#6b7d8f1f
  • pickerGroup.foreground#5B8FB980
  • progressBar.background#03001C
  • scrollbar.shadow#03001C
  • scrollbarSlider.activeBackground#5B8FB9
  • scrollbarSlider.background#5B8FB9
  • scrollbarSlider.hoverBackground#5b8fb9e0
  • selection.background#b6eada
  • settings.headerForeground#5B8FB9
  • settings.modifiedItemIndicator#478acc
  • sideBar.background#000
  • sideBar.border#000
  • sideBarSectionHeader.background#000
  • sideBarSectionHeader.border#000
  • sideBarSectionHeader.foreground#5B8FB9
  • sideBarTitle.foreground#5B8FB9
  • statusBar.background#000
  • statusBar.border#000
  • statusBar.debuggingBackground#03001C
  • statusBar.debuggingForeground#5B8FB9
  • statusBar.foreground#5B8FB9
  • statusBar.noFolderBackground#301E67
  • statusBarItem.activeBackground#03001C
  • statusBarItem.hoverBackground#5B8FB933
  • statusBarItem.prominentBackground#6b7d8f1f
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#301E67
  • statusBarItem.remoteForeground#5B8FB9
  • tab.activeBackground#000
  • tab.activeBorder#5B8FB9
  • tab.activeForeground#5B8FB9
  • tab.border#000
  • tab.inactiveBackground#000
  • tab.inactiveForeground#5B8FB9
  • tab.unfocusedActiveBorder#5B8FB9
  • tab.unfocusedActiveForeground#5B8FB9
  • tab.unfocusedInactiveForeground#5B8FB9
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3199e1
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#B6EADA
  • terminal.ansiBrightCyan#4cbf99
  • terminal.ansiBrightGreen#86b300
  • terminal.ansiBrightMagenta#a37acc
  • terminal.ansiBrightRed#f07171
  • terminal.ansiBrightWhite#ababab
  • terminal.ansiBrightYellow#f2ae49
  • terminal.ansiCyan#46ba94
  • terminal.ansiGreen#6cbf43
  • terminal.ansiMagenta#9e75c7
  • terminal.ansiRed#ea6c6d
  • terminal.ansiWhite#939393
  • terminal.ansiYellow#eca944
  • terminal.background#000
  • terminal.foreground#5B8FB9
  • textBlockQuote.background#03001C
  • textLink.activeForeground#5B8FB9
  • textLink.foreground#5B8FB9
  • textPreformat.foreground#301E67
  • titleBar.activeBackground#000
  • titleBar.activeForeground#5B8FB9
  • titleBar.border#000
  • titleBar.inactiveBackground#000
  • titleBar.inactiveForeground#5B8FB9
  • tree.indentGuidesStroke#5B8FB959
  • walkThrough.embeddedEditorBackground#301E67
  • welcomePage.progress.background#5B8FB91a
  • welcomePage.tileBackground#000
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#5B8FB9
comment#5b90b9a0italic
string, constant.other.symbol#00b300
string.regexp, constant.character, constant.other#5B8FB9
constant.numeric#7cc4ff
constant.language#5B8FB9
variable, variable.parameter.function-call#5B8FB9
variable.member#5B8FB9
variable.language#5B8FB9italic
storage#5B8FB9
keyword#5B8FB9
keyword.operator#B6EADA
punctuation.separator, punctuation.terminator#5B8FB9b3
punctuation.section#5B8FB9
punctuation.accessor#5B8FB9
punctuation.definition.template-expression#5B8FB9
punctuation.section.embedded#5B8FB9
meta.embedded#5B8FB9
source.java storage.type, source.haskell storage.type, source.c storage.type#B6EADAitalic underline
entity.other.inherited-class#55b4d4italic
storage.type.function#5B8FB9
source.java storage.type.primitive#55b4d4
entity.name.function#7cc4ffitalic
variable.parameter, meta.parameter#5B8FB9
variable.function, variable.annotation, meta.function-call.generic, support.function.go#5B8FB9
support.function, support.macro#5B8FB9
entity.name.import, entity.name.package#5B8FB9
entity.name#a3d6e3bold italic underline
entity.name.tag, meta.tag.sgml#489ee3italic
support.class.component#489ee3
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#489ee380
entity.other.attribute-name#c7c757
support.constant#489ee3italic
support.type, support.class, source.go storage.type#489ee3
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#489ee3
invalid#e65050
meta.diff, meta.diff.header#489ee3
source.ruby variable.other.readwrite#489ee3
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#c7c757
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#c7c75799
support.type.property-name#5B8FB9italic
constant.numeric.line-number.find-in-files - match#787b8099
constant.numeric.line-number.match#5B8FB9
entity.name.filename.find-in-files#86b300
message.error#e65050
text.html.markdown, punctuation.definition.list_item.markdown#5B8FB9
markup.heading, markup.heading entity.name#B6EADAbold
markup.underline.link#489ee3italic
string.other.link#5B8FB9bold
markup.italic#489ee3italic
markup.bold#489ee3bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw#489ee3italic
markup.raw.inline#489ee3italic
meta.separator#787b8099bold
markup.quote#4cbf99italic
markup.list punctuation.definition.list.begin#c7c757
markup.inserted#6cbf43
markup.changed#478acc
markup.deleted#ff7383
markup.strike#9e7c4c
markup.table#55b4d4
text.html.markdown markup.inline.raw#5B8FB9
text.html.markdown meta.dummy.line-break#787b8099
punctuation.definition.markdown#787b8099
Blacky by Kumar Ashish Ranjan - VS Code Theme