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#6ee7b7b3
  • activityBar.background#050810
  • activityBar.border#050810
  • activityBar.foreground#506878cc
  • activityBar.inactiveForeground#50687899
  • activityBarBadge.background#6ee7b7
  • activityBarBadge.foreground#050810
  • badge.background#6ee7b733
  • badge.foreground#6ee7b7
  • button.background#6ee7b7
  • button.foreground#050810
  • button.hoverBackground#5fd9a8
  • button.secondaryBackground#50687833
  • button.secondaryForeground#bfbdb6
  • button.secondaryHoverBackground#50687880
  • debugConsoleInputIcon.foreground#6ee7b7
  • debugExceptionWidget.background#080c14
  • debugExceptionWidget.border#101828
  • debugIcon.breakpointDisabledForeground#d8a4ff80
  • debugIcon.breakpointForeground#d8a4ff
  • debugToolBar.background#080c14
  • descriptionForeground#506878
  • diffEditor.diagonalFill#101828
  • diffEditor.insertedTextBackground#6ee7b71f
  • diffEditor.removedTextBackground#f26d781f
  • dropdown.background#0a1018
  • dropdown.border#50687845
  • dropdown.foreground#506878
  • editor.background#050810
  • editor.findMatchBackground#405080
  • editor.findMatchBorder#405080
  • editor.findMatchHighlightBackground#40508066
  • editor.findMatchHighlightBorder#30406066
  • editor.findRangeHighlightBackground#40508040
  • editor.foreground#bfbdb6
  • editor.inactiveSelectionBackground#6ee7b721
  • editor.lineHighlightBackground#0c1018
  • editor.rangeHighlightBackground#40508033
  • editor.selectionBackground#6ee7b74d
  • editor.selectionHighlightBackground#6ee7b726
  • editor.selectionHighlightBorder#6ee7b700
  • editor.snippetTabstopHighlightBackground#6ee7b733
  • editor.wordHighlightBackground#7dd3fc14
  • editor.wordHighlightBorder#7dd3fc80
  • editor.wordHighlightStrongBackground#6ee7b714
  • editor.wordHighlightStrongBorder#6ee7b780
  • editorBracketMatch.background#6080a04d
  • editorBracketMatch.border#6080a04d
  • editorCodeLens.foreground#6080a08c
  • editorCursor.foreground#6ee7b7
  • editorError.foreground#d95757
  • editorGroup.background#080c14
  • editorGroup.border#101828
  • editorGroupHeader.noTabsBackground#050810
  • editorGroupHeader.tabsBackground#050810
  • editorGroupHeader.tabsBorder#050810
  • editorGutter.addedBackground#6ee7b7cc
  • editorGutter.deletedBackground#f26d78cc
  • editorGutter.modifiedBackground#7dd3fccc
  • editorHoverWidget.background#080c14
  • editorHoverWidget.border#101828
  • editorIndentGuide.activeBackground1#6080a080
  • editorIndentGuide.background1#6080a033
  • editorLineNumber.activeForeground#6080a0e6
  • editorLineNumber.foreground#6080a099
  • editorLink.activeForeground#6ee7b7
  • editorMarkerNavigation.background#080c14
  • editorOverviewRuler.addedForeground#6ee7b7
  • editorOverviewRuler.border#101828
  • editorOverviewRuler.bracketMatchForeground#6080a0b3
  • editorOverviewRuler.deletedForeground#f26d78
  • editorOverviewRuler.errorForeground#d95757
  • editorOverviewRuler.findMatchForeground#405080
  • editorOverviewRuler.modifiedForeground#7dd3fc
  • editorOverviewRuler.warningForeground#6ee7b7
  • editorOverviewRuler.wordHighlightForeground#7dd3fc66
  • editorOverviewRuler.wordHighlightStrongForeground#6ee7b766
  • editorRuler.foreground#6080a033
  • editorSuggestWidget.background#080c14
  • editorSuggestWidget.border#101828
  • editorSuggestWidget.highlightForeground#6ee7b7
  • editorSuggestWidget.selectedBackground#20304040
  • editorWarning.foreground#6ee7b7
  • editorWhitespace.foreground#6080a099
  • editorWidget.background#080c14
  • editorWidget.border#101828
  • errorForeground#d95757
  • extensionButton.prominentBackground#6ee7b7
  • extensionButton.prominentForeground#0a1018
  • extensionButton.prominentHoverBackground#5fd9a8
  • focusBorder#0a1018
  • foreground#506878
  • gitDecoration.conflictingResourceForeground
  • gitDecoration.deletedResourceForeground#f26d78b3
  • gitDecoration.ignoredResourceForeground#50687880
  • gitDecoration.modifiedResourceForeground#7dd3fcb3
  • gitDecoration.submoduleResourceForeground#d8a4ffb3
  • gitDecoration.untrackedResourceForeground#6ee7b7b3
  • icon.foreground#506878
  • input.background#0a1018
  • input.border#50687845
  • input.foreground#bfbdb6
  • input.placeholderForeground#50687880
  • inputOption.activeBackground#6ee7b733
  • inputOption.activeBorder#6ee7b74d
  • inputOption.activeForeground#6ee7b7
  • inputValidation.errorBackground#0a1018
  • inputValidation.errorBorder#d95757
  • inputValidation.infoBackground#050810
  • inputValidation.infoBorder#7dd3fc
  • inputValidation.warningBackground#050810
  • inputValidation.warningBorder#7dd3fc
  • keybindingLabel.background#5068781a
  • keybindingLabel.border#bfbdb61a
  • keybindingLabel.bottomBorder#bfbdb61a
  • keybindingLabel.foreground#bfbdb6
  • list.activeSelectionBackground#20304040
  • list.activeSelectionForeground#bfbdb6
  • list.deemphasizedForeground#d95757
  • list.errorForeground#d95757
  • list.filterMatchBackground#30406066
  • list.filterMatchBorder#40508066
  • list.focusBackground#20304040
  • list.focusForeground#bfbdb6
  • list.focusOutline#20304040
  • list.highlightForeground#6ee7b7
  • list.hoverBackground#20304040
  • list.inactiveSelectionBackground#20304033
  • list.inactiveSelectionForeground#506878
  • list.invalidItemForeground#5068784d
  • listFilterWidget.background#080c14
  • listFilterWidget.noMatchesOutline#d95757
  • listFilterWidget.outline#6ee7b7
  • minimap.background#050810
  • minimap.errorHighlight#d95757
  • minimap.findMatchHighlight#405080
  • minimap.selectionHighlight#6ee7b74d
  • minimapGutter.addedBackground#6ee7b7
  • minimapGutter.deletedBackground#f26d78
  • minimapGutter.modifiedBackground#7dd3fc
  • panel.background#050810
  • panel.border#101828
  • panelTitle.activeBorder#6ee7b7
  • panelTitle.activeForeground#bfbdb6
  • panelTitle.inactiveForeground#506878
  • peekView.border#20304040
  • peekViewEditor.background#080c14
  • peekViewEditor.matchHighlightBackground#40508066
  • peekViewEditor.matchHighlightBorder#30406066
  • peekViewResult.background#080c14
  • peekViewResult.fileForeground#bfbdb6
  • peekViewResult.lineForeground#506878
  • peekViewResult.matchHighlightBackground#40508066
  • peekViewResult.selectionBackground#20304040
  • peekViewTitle.background#20304040
  • peekViewTitleDescription.foreground#506878
  • peekViewTitleLabel.foreground#bfbdb6
  • pickerGroup.border#101828
  • pickerGroup.foreground#50687880
  • progressBar.background#6ee7b7
  • scrollbar.shadow#10182800
  • scrollbarSlider.activeBackground#506878b3
  • scrollbarSlider.background#50687866
  • scrollbarSlider.hoverBackground#50687899
  • selection.background#6ee7b74d
  • settings.headerForeground#bfbdb6
  • settings.modifiedItemIndicator#7dd3fc
  • sideBar.background#050810
  • sideBar.border#050810
  • sideBarSectionHeader.background#050810
  • sideBarSectionHeader.border#050810
  • sideBarSectionHeader.foreground#506878
  • sideBarTitle.foreground#506878
  • statusBar.background#050810
  • statusBar.border#050810
  • statusBar.debuggingBackground#d8a4ff
  • statusBar.debuggingForeground#0a1018
  • statusBar.foreground#506878
  • statusBar.noFolderBackground#080c14
  • statusBarItem.activeBackground#50687833
  • statusBarItem.hoverBackground#50687833
  • statusBarItem.prominentBackground#101828
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#6ee7b7
  • statusBarItem.remoteForeground#0a1018
  • tab.activeBackground#050810
  • tab.activeBorder#6ee7b7
  • tab.activeForeground#bfbdb6
  • tab.border#050810
  • tab.inactiveBackground#050810
  • tab.inactiveForeground#506878
  • tab.unfocusedActiveBorder#506878
  • tab.unfocusedActiveForeground#506878
  • tab.unfocusedInactiveForeground#506878
  • terminal.ansiBlack#101828
  • terminal.ansiBlue#6ee7b7
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#6ee7b7
  • terminal.ansiBrightCyan#9af0c3
  • terminal.ansiBrightGreen#9af0c3
  • terminal.ansiBrightMagenta#d8a4ff
  • terminal.ansiBrightRed#d8a4ff
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#7dd3fc
  • terminal.ansiCyan#9af0c3
  • terminal.ansiGreen#6ee7b7
  • terminal.ansiMagenta#d8a4ff
  • terminal.ansiRed#ea6c73
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#7dd3fc
  • terminal.background#050810
  • terminal.foreground#bfbdb6
  • textBlockQuote.background#080c14
  • textLink.activeForeground#6ee7b7
  • textLink.foreground#6ee7b7
  • textPreformat.foreground#bfbdb6
  • titleBar.activeBackground#050810
  • titleBar.activeForeground#bfbdb6
  • titleBar.border#050810
  • titleBar.inactiveBackground#050810
  • titleBar.inactiveForeground#506878
  • tree.indentGuidesStroke#6080a080
  • walkThrough.embeddedEditorBackground#080c14
  • welcomePage.progress.background#0c1018
  • welcomePage.tileBackground#050810
  • welcomePage.tileShadow#00000080
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#bfbdb6
comment#6080a08citalic
string, constant.other.symbol#9af0c3
string.regexp, constant.character, constant.other#9af0c3
constant.numeric#d8a4ff
constant.language#d8a4ff
variable, variable.parameter.function-call#bfbdb6
variable.member#d8a4ff
variable.language#7dd3fcitalic
storage#c084fc
keyword#c084fc
keyword.operator#d8a4ff
punctuation.separator, punctuation.terminator#bfbdb6b3
punctuation.section#bfbdb6
punctuation.accessor#d8a4ff
punctuation.definition.template-expression#c084fc
punctuation.section.embedded#c084fc
meta.embedded#bfbdb6
source.java storage.type, source.haskell storage.type, source.c storage.type#6ee7b7
entity.other.inherited-class#7dd3fc
storage.type.function#c084fc
source.java storage.type.primitive#7dd3fc
entity.name.function#7dd3fc
variable.parameter, meta.parameter#d8a4ff
variable.function, variable.annotation, meta.function-call.generic, support.function.go#7dd3fc
support.function, support.macro#d8a4ff
entity.name.import, entity.name.package#9af0c3
entity.name#6ee7b7
entity.name.tag, meta.tag.sgml#7dd3fc
support.class.component#6ee7b7
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#7dd3fc80
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#d8a4ff
entity.other.attribute-name#c084fcitalic
punctuation.decorator#7dd3fcitalic
support.constant#d8a4ffitalic
support.type, support.class, source.go storage.type#7dd3fc
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#c084fc
invalid#d95757
meta.diff, meta.diff.header#9af0c3
source.ruby variable.other.readwrite#7dd3fc
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#6ee7b7
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#6080a08c
support.type.property-name#7dd3fcnormal
constant.numeric.line-number.find-in-files - match#6080a08c
constant.numeric.line-number.match#c084fc
entity.name.filename.find-in-files#9af0c3
message.error#d95757
markup.heading, markup.heading entity.name#9af0c3bold
markup.underline.link, string.other.link#7dd3fc
markup.italic#d8a4ffitalic
markup.bold#d8a4ffbold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#6080a08cbold
markup.quote#9af0c3italic
markup.list punctuation.definition.list.begin#7dd3fc
markup.inserted#6ee7b7
markup.changed#7dd3fc
markup.deleted#f26d78
markup.strike#c084fc
markup.table#7dd3fc
text.html.markdown markup.inline.raw#d8a4ff
text.html.markdown meta.dummy.line-break#6080a08c
punctuation.definition.markdown#6080a08c