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#5dbd73b3
  • activityBar.background#0a0f0c
  • activityBar.border#0a0f0c
  • activityBar.foreground#5a7560cc
  • activityBar.inactiveForeground#5a756099
  • activityBarBadge.background#5dbd73
  • activityBarBadge.foreground#0a0f0c
  • badge.background#5dbd7333
  • badge.foreground#5dbd73
  • button.background#5dbd73
  • button.foreground#0a0f0c
  • button.hoverBackground#52b068
  • button.secondaryBackground#5a756033
  • button.secondaryForeground#bfbdb6
  • button.secondaryHoverBackground#5a756080
  • debugConsoleInputIcon.foreground#5dbd73
  • debugExceptionWidget.background#0c1210
  • debugExceptionWidget.border#152018
  • debugIcon.breakpointDisabledForeground#7ec69980
  • debugIcon.breakpointForeground#7ec699
  • debugToolBar.background#0c1210
  • descriptionForeground#5a7560
  • diffEditor.diagonalFill#152018
  • diffEditor.insertedTextBackground#7fd9621f
  • diffEditor.removedTextBackground#e070701f
  • dropdown.background#0e1511
  • dropdown.border#5a756045
  • dropdown.foreground#5a7560
  • editor.background#0a0f0c
  • editor.findMatchBackground#4a6850
  • editor.findMatchBorder#4a6850
  • editor.findMatchHighlightBackground#4a685066
  • editor.findMatchHighlightBorder#3a554066
  • editor.findRangeHighlightBackground#4a685040
  • editor.foreground#bfbdb6
  • editor.inactiveSelectionBackground#5dbd7321
  • editor.lineHighlightBackground#101812
  • editor.rangeHighlightBackground#4a685033
  • editor.selectionBackground#5dbd734d
  • editor.selectionHighlightBackground#7fd96226
  • editor.selectionHighlightBorder#7fd96200
  • editor.snippetTabstopHighlightBackground#7fd96233
  • editor.wordHighlightBackground#5dbd7314
  • editor.wordHighlightBorder#5dbd7380
  • editor.wordHighlightStrongBackground#7fd96214
  • editor.wordHighlightStrongBorder#7fd96280
  • editorBracketMatch.background#6b8f714d
  • editorBracketMatch.border#6b8f714d
  • editorCodeLens.foreground#6b8f718c
  • editorCursor.foreground#5dbd73
  • editorError.foreground#d95757
  • editorGroup.background#0c1210
  • editorGroup.border#152018
  • editorGroupHeader.noTabsBackground#0a0f0c
  • editorGroupHeader.tabsBackground#0a0f0c
  • editorGroupHeader.tabsBorder#0a0f0c
  • editorGutter.addedBackground#7fd962cc
  • editorGutter.deletedBackground#e07070cc
  • editorGutter.modifiedBackground#5dbd73cc
  • editorHoverWidget.background#0c1210
  • editorHoverWidget.border#152018
  • editorIndentGuide.activeBackground1#6b8f7180
  • editorIndentGuide.background1#6b8f7133
  • editorLineNumber.activeForeground#6b8f71e6
  • editorLineNumber.foreground#6b8f7199
  • editorLink.activeForeground#5dbd73
  • editorMarkerNavigation.background#0c1210
  • editorOverviewRuler.addedForeground#7fd962
  • editorOverviewRuler.border#152018
  • editorOverviewRuler.bracketMatchForeground#6b8f71b3
  • editorOverviewRuler.deletedForeground#e07070
  • editorOverviewRuler.errorForeground#d95757
  • editorOverviewRuler.findMatchForeground#4a6850
  • editorOverviewRuler.modifiedForeground#5dbd73
  • editorOverviewRuler.warningForeground#5dbd73
  • editorOverviewRuler.wordHighlightForeground#5dbd7366
  • editorOverviewRuler.wordHighlightStrongForeground#7fd96266
  • editorRuler.foreground#6b8f7133
  • editorSuggestWidget.background#0c1210
  • editorSuggestWidget.border#152018
  • editorSuggestWidget.highlightForeground#5dbd73
  • editorSuggestWidget.selectedBackground#3a554040
  • editorWarning.foreground#5dbd73
  • editorWhitespace.foreground#6b8f7199
  • editorWidget.background#0c1210
  • editorWidget.border#152018
  • errorForeground#d95757
  • extensionButton.prominentBackground#5dbd73
  • extensionButton.prominentForeground#0e1511
  • extensionButton.prominentHoverBackground#52b068
  • focusBorder#0e1511
  • foreground#5a7560
  • gitDecoration.conflictingResourceForeground
  • gitDecoration.deletedResourceForeground#e07070b3
  • gitDecoration.ignoredResourceForeground#5a756080
  • gitDecoration.modifiedResourceForeground#5dbd73b3
  • gitDecoration.submoduleResourceForeground#c9e894b3
  • gitDecoration.untrackedResourceForeground#7fd962b3
  • icon.foreground#5a7560
  • input.background#0e1511
  • input.border#5a756045
  • input.foreground#bfbdb6
  • input.placeholderForeground#5a756080
  • inputOption.activeBackground#5dbd7333
  • inputOption.activeBorder#5dbd734d
  • inputOption.activeForeground#5dbd73
  • inputValidation.errorBackground#0e1511
  • inputValidation.errorBorder#d95757
  • inputValidation.infoBackground#0a0f0c
  • inputValidation.infoBorder#7ec699
  • inputValidation.warningBackground#0a0f0c
  • inputValidation.warningBorder#a8e6a1
  • keybindingLabel.background#5a75601a
  • keybindingLabel.border#bfbdb61a
  • keybindingLabel.bottomBorder#bfbdb61a
  • keybindingLabel.foreground#bfbdb6
  • list.activeSelectionBackground#3a554040
  • list.activeSelectionForeground#bfbdb6
  • list.deemphasizedForeground#d95757
  • list.errorForeground#d95757
  • list.filterMatchBackground#3a554066
  • list.filterMatchBorder#4a685066
  • list.focusBackground#3a554040
  • list.focusForeground#bfbdb6
  • list.focusOutline#3a554040
  • list.highlightForeground#5dbd73
  • list.hoverBackground#3a554040
  • list.inactiveSelectionBackground#3a554033
  • list.inactiveSelectionForeground#5a7560
  • list.invalidItemForeground#5a75604d
  • listFilterWidget.background#0c1210
  • listFilterWidget.noMatchesOutline#d95757
  • listFilterWidget.outline#5dbd73
  • minimap.background#0a0f0c
  • minimap.errorHighlight#d95757
  • minimap.findMatchHighlight#4a6850
  • minimap.selectionHighlight#5dbd734d
  • minimapGutter.addedBackground#7fd962
  • minimapGutter.deletedBackground#e07070
  • minimapGutter.modifiedBackground#5dbd73
  • panel.background#0a0f0c
  • panel.border#152018
  • panelTitle.activeBorder#5dbd73
  • panelTitle.activeForeground#bfbdb6
  • panelTitle.inactiveForeground#5a7560
  • peekView.border#3a554040
  • peekViewEditor.background#0c1210
  • peekViewEditor.matchHighlightBackground#4a685066
  • peekViewEditor.matchHighlightBorder#3a554066
  • peekViewResult.background#0c1210
  • peekViewResult.fileForeground#bfbdb6
  • peekViewResult.lineForeground#5a7560
  • peekViewResult.matchHighlightBackground#4a685066
  • peekViewResult.selectionBackground#3a554040
  • peekViewTitle.background#3a554040
  • peekViewTitleDescription.foreground#5a7560
  • peekViewTitleLabel.foreground#bfbdb6
  • pickerGroup.border#152018
  • pickerGroup.foreground#5a756080
  • progressBar.background#5dbd73
  • scrollbar.shadow#15201800
  • scrollbarSlider.activeBackground#5a7560b3
  • scrollbarSlider.background#5a756066
  • scrollbarSlider.hoverBackground#5a756099
  • selection.background#5dbd734d
  • settings.headerForeground#bfbdb6
  • settings.modifiedItemIndicator#5dbd73
  • sideBar.background#0a0f0c
  • sideBar.border#0a0f0c
  • sideBarSectionHeader.background#0a0f0c
  • sideBarSectionHeader.border#0a0f0c
  • sideBarSectionHeader.foreground#5a7560
  • sideBarTitle.foreground#5a7560
  • statusBar.background#0a0f0c
  • statusBar.border#0a0f0c
  • statusBar.debuggingBackground#7ec699
  • statusBar.debuggingForeground#0e1511
  • statusBar.foreground#5a7560
  • statusBar.noFolderBackground#0c1210
  • statusBarItem.activeBackground#5a756033
  • statusBarItem.hoverBackground#5a756033
  • statusBarItem.prominentBackground#152018
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#5dbd73
  • statusBarItem.remoteForeground#0e1511
  • tab.activeBackground#0a0f0c
  • tab.activeBorder#5dbd73
  • tab.activeForeground#bfbdb6
  • tab.border#0a0f0c
  • tab.inactiveBackground#0a0f0c
  • tab.inactiveForeground#5a7560
  • tab.unfocusedActiveBorder#5a7560
  • tab.unfocusedActiveForeground#5a7560
  • tab.unfocusedInactiveForeground#5a7560
  • terminal.ansiBlack#152018
  • terminal.ansiBlue#5dbd73
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#6dbf8a
  • terminal.ansiBrightCyan#9ad4a8
  • terminal.ansiBrightGreen#a8e6a1
  • terminal.ansiBrightMagenta#c9e894
  • terminal.ansiBrightRed#8fd4a0
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#a8e6a1
  • terminal.ansiCyan#9ad4a8
  • terminal.ansiGreen#7fd962
  • terminal.ansiMagenta#a8e6a1
  • terminal.ansiRed#ea6c73
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#c9e894
  • terminal.background#0a0f0c
  • terminal.foreground#bfbdb6
  • textBlockQuote.background#0c1210
  • textLink.activeForeground#5dbd73
  • textLink.foreground#5dbd73
  • textPreformat.foreground#bfbdb6
  • titleBar.activeBackground#0a0f0c
  • titleBar.activeForeground#bfbdb6
  • titleBar.border#0a0f0c
  • titleBar.inactiveBackground#0a0f0c
  • titleBar.inactiveForeground#5a7560
  • tree.indentGuidesStroke#6b8f7180
  • walkThrough.embeddedEditorBackground#0c1210
  • welcomePage.progress.background#101812
  • welcomePage.tileBackground#0a0f0c
  • welcomePage.tileShadow#00000080
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#bfbdb6
comment#6b8f718citalic
string, constant.other.symbol#a8e6a1
string.regexp, constant.character, constant.other#9ad4a8
constant.numeric#c9e894
constant.language#c9e894
variable, variable.parameter.function-call#bfbdb6
variable.member#8fd4a0
variable.language#7ec699italic
storage#6ec985
keyword#6ec985
keyword.operator#7ec699
punctuation.separator, punctuation.terminator#bfbdb6b3
punctuation.section#bfbdb6
punctuation.accessor#7ec699
punctuation.definition.template-expression#6ec985
punctuation.section.embedded#6ec985
meta.embedded#bfbdb6
source.java storage.type, source.haskell storage.type, source.c storage.type#6dbf8a
entity.other.inherited-class#7ec699
storage.type.function#6ec985
source.java storage.type.primitive#7ec699
entity.name.function#a8e6a1
variable.parameter, meta.parameter#c9e894
variable.function, variable.annotation, meta.function-call.generic, support.function.go#a8e6a1
support.function, support.macro#8fd4a0
entity.name.import, entity.name.package#a8e6a1
entity.name#6dbf8a
entity.name.tag, meta.tag.sgml#7ec699
support.class.component#6dbf8a
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#7ec69980
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#6ec985
entity.other.attribute-name#8ec9a0italic
punctuation.decorator#c9e894italic
support.constant#7ec699italic
support.type, support.class, source.go storage.type#7ec699
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#a8e6a1
invalid#d95757
meta.diff, meta.diff.header#7ec699
source.ruby variable.other.readwrite#a8e6a1
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#6dbf8a
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#6b8f718c
support.type.property-name#7ec699normal
constant.numeric.line-number.find-in-files - match#6b8f718c
constant.numeric.line-number.match#6ec985
entity.name.filename.find-in-files#a8e6a1
message.error#d95757
markup.heading, markup.heading entity.name#a8e6a1bold
markup.underline.link, string.other.link#7ec699
markup.italic#8fd4a0italic
markup.bold#8fd4a0bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#6b8f718cbold
markup.quote#9ad4a8italic
markup.list punctuation.definition.list.begin#a8e6a1
markup.inserted#7fd962
markup.changed#5dbd73
markup.deleted#e07070
markup.strike#a8e6a1
markup.table#7ec699
text.html.markdown markup.inline.raw#7ec699
text.html.markdown meta.dummy.line-break#6b8f718c
punctuation.definition.markdown#6b8f718c