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#56c2c2b3
  • activityBar.background#101418
  • activityBar.border#101418
  • activityBar.foreground#8899aacc
  • activityBar.inactiveForeground#8899aa99
  • activityBarBadge.background#56c2c2
  • activityBarBadge.foreground#101418
  • badge.background#56c2c233
  • badge.foreground#56c2c2
  • button.background#56c2c2
  • button.foreground#101418
  • button.hoverBackground#4db8b8
  • button.secondaryBackground#8899aa33
  • button.secondaryForeground#b0bec5
  • button.secondaryHoverBackground#8899aa80
  • debugConsoleInputIcon.foreground#56c2c2
  • debugExceptionWidget.background#12161c
  • debugExceptionWidget.border#1a2028
  • debugIcon.breakpointDisabledForeground#8fd4c880
  • debugIcon.breakpointForeground#8fd4c8
  • debugToolBar.background#12161c
  • descriptionForeground#8899aa
  • diffEditor.diagonalFill#1a2028
  • diffEditor.insertedTextBackground#7fd9621f
  • diffEditor.removedTextBackground#e070701f
  • dropdown.background#141920
  • dropdown.border#8899aa45
  • dropdown.foreground#8899aa
  • editor.background#101418
  • editor.findMatchBackground#4a6060
  • editor.findMatchBorder#4a6060
  • editor.findMatchHighlightBackground#4a606066
  • editor.findMatchHighlightBorder#3a505066
  • editor.findRangeHighlightBackground#4a606040
  • editor.foreground#b0bec5
  • editor.inactiveSelectionBackground#56c2c221
  • editor.lineHighlightBackground#161b22
  • editor.rangeHighlightBackground#4a606033
  • editor.selectionBackground#56c2c24d
  • editor.selectionHighlightBackground#7fd96226
  • editor.selectionHighlightBorder#7fd96200
  • editor.snippetTabstopHighlightBackground#7fd96233
  • editor.wordHighlightBackground#56c2c214
  • editor.wordHighlightBorder#56c2c280
  • editor.wordHighlightStrongBackground#7fd96214
  • editor.wordHighlightStrongBorder#7fd96280
  • editorBracketMatch.background#7080904d
  • editorBracketMatch.border#7080904d
  • editorCodeLens.foreground#7080908c
  • editorCursor.foreground#56c2c2
  • editorError.foreground#d95757
  • editorGroup.background#12161c
  • editorGroup.border#1a2028
  • editorGroupHeader.noTabsBackground#101418
  • editorGroupHeader.tabsBackground#101418
  • editorGroupHeader.tabsBorder#101418
  • editorGutter.addedBackground#7fd962cc
  • editorGutter.deletedBackground#e07070cc
  • editorGutter.modifiedBackground#56c2c2cc
  • editorHoverWidget.background#12161c
  • editorHoverWidget.border#1a2028
  • editorIndentGuide.activeBackground1#70809080
  • editorIndentGuide.background1#70809033
  • editorLineNumber.activeForeground#708090e6
  • editorLineNumber.foreground#70809099
  • editorLink.activeForeground#56c2c2
  • editorMarkerNavigation.background#12161c
  • editorOverviewRuler.addedForeground#7fd962
  • editorOverviewRuler.border#1a2028
  • editorOverviewRuler.bracketMatchForeground#708090b3
  • editorOverviewRuler.deletedForeground#e07070
  • editorOverviewRuler.errorForeground#d95757
  • editorOverviewRuler.findMatchForeground#4a6060
  • editorOverviewRuler.modifiedForeground#56c2c2
  • editorOverviewRuler.warningForeground#56c2c2
  • editorOverviewRuler.wordHighlightForeground#56c2c266
  • editorOverviewRuler.wordHighlightStrongForeground#7fd96266
  • editorRuler.foreground#70809033
  • editorSuggestWidget.background#12161c
  • editorSuggestWidget.border#1a2028
  • editorSuggestWidget.highlightForeground#56c2c2
  • editorSuggestWidget.selectedBackground#3a455040
  • editorWarning.foreground#56c2c2
  • editorWhitespace.foreground#70809099
  • editorWidget.background#12161c
  • editorWidget.border#1a2028
  • errorForeground#d95757
  • extensionButton.prominentBackground#56c2c2
  • extensionButton.prominentForeground#141920
  • extensionButton.prominentHoverBackground#4db8b8
  • focusBorder#141920
  • foreground#8899aa
  • gitDecoration.conflictingResourceForeground
  • gitDecoration.deletedResourceForeground#e07070b3
  • gitDecoration.ignoredResourceForeground#8899aa80
  • gitDecoration.modifiedResourceForeground#56c2c2b3
  • gitDecoration.submoduleResourceForeground#d4a843b3
  • gitDecoration.untrackedResourceForeground#7fd962b3
  • icon.foreground#8899aa
  • input.background#141920
  • input.border#8899aa45
  • input.foreground#b0bec5
  • input.placeholderForeground#8899aa80
  • inputOption.activeBackground#56c2c233
  • inputOption.activeBorder#56c2c24d
  • inputOption.activeForeground#56c2c2
  • inputValidation.errorBackground#141920
  • inputValidation.errorBorder#d95757
  • inputValidation.infoBackground#101418
  • inputValidation.infoBorder#8fd4c8
  • inputValidation.warningBackground#101418
  • inputValidation.warningBorder#d4a843
  • keybindingLabel.background#8899aa1a
  • keybindingLabel.border#b0bec51a
  • keybindingLabel.bottomBorder#b0bec51a
  • keybindingLabel.foreground#b0bec5
  • list.activeSelectionBackground#3a455040
  • list.activeSelectionForeground#b0bec5
  • list.deemphasizedForeground#d95757
  • list.errorForeground#d95757
  • list.filterMatchBackground#3a505066
  • list.filterMatchBorder#4a606066
  • list.focusBackground#3a455040
  • list.focusForeground#b0bec5
  • list.focusOutline#3a455040
  • list.highlightForeground#56c2c2
  • list.hoverBackground#3a455040
  • list.inactiveSelectionBackground#3a455033
  • list.inactiveSelectionForeground#8899aa
  • list.invalidItemForeground#8899aa4d
  • listFilterWidget.background#12161c
  • listFilterWidget.noMatchesOutline#d95757
  • listFilterWidget.outline#56c2c2
  • minimap.background#101418
  • minimap.errorHighlight#d95757
  • minimap.findMatchHighlight#4a6060
  • minimap.selectionHighlight#56c2c24d
  • minimapGutter.addedBackground#7fd962
  • minimapGutter.deletedBackground#e07070
  • minimapGutter.modifiedBackground#56c2c2
  • panel.background#101418
  • panel.border#1a2028
  • panelTitle.activeBorder#56c2c2
  • panelTitle.activeForeground#b0bec5
  • panelTitle.inactiveForeground#8899aa
  • peekView.border#3a455040
  • peekViewEditor.background#12161c
  • peekViewEditor.matchHighlightBackground#4a606066
  • peekViewEditor.matchHighlightBorder#3a505066
  • peekViewResult.background#12161c
  • peekViewResult.fileForeground#b0bec5
  • peekViewResult.lineForeground#8899aa
  • peekViewResult.matchHighlightBackground#4a606066
  • peekViewResult.selectionBackground#3a455040
  • peekViewTitle.background#3a455040
  • peekViewTitleDescription.foreground#8899aa
  • peekViewTitleLabel.foreground#b0bec5
  • pickerGroup.border#1a2028
  • pickerGroup.foreground#8899aa80
  • progressBar.background#56c2c2
  • scrollbar.shadow#1a202800
  • scrollbarSlider.activeBackground#8899aab3
  • scrollbarSlider.background#8899aa66
  • scrollbarSlider.hoverBackground#8899aa99
  • selection.background#56c2c24d
  • settings.headerForeground#b0bec5
  • settings.modifiedItemIndicator#56c2c2
  • sideBar.background#101418
  • sideBar.border#101418
  • sideBarSectionHeader.background#101418
  • sideBarSectionHeader.border#101418
  • sideBarSectionHeader.foreground#8899aa
  • sideBarTitle.foreground#8899aa
  • statusBar.background#101418
  • statusBar.border#101418
  • statusBar.debuggingBackground#8fd4c8
  • statusBar.debuggingForeground#141920
  • statusBar.foreground#8899aa
  • statusBar.noFolderBackground#12161c
  • statusBarItem.activeBackground#8899aa33
  • statusBarItem.hoverBackground#8899aa33
  • statusBarItem.prominentBackground#1a2028
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#56c2c2
  • statusBarItem.remoteForeground#141920
  • tab.activeBackground#101418
  • tab.activeBorder#56c2c2
  • tab.activeForeground#b0bec5
  • tab.border#101418
  • tab.inactiveBackground#101418
  • tab.inactiveForeground#8899aa
  • tab.unfocusedActiveBorder#8899aa
  • tab.unfocusedActiveForeground#8899aa
  • tab.unfocusedInactiveForeground#8899aa
  • terminal.ansiBlack#1a2028
  • terminal.ansiBlue#56c2c2
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#56c2c2
  • terminal.ansiBrightCyan#8fd4c8
  • terminal.ansiBrightGreen#8fd4c8
  • terminal.ansiBrightMagenta#d4a843
  • terminal.ansiBrightRed#a0c8c0
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#d4a843
  • terminal.ansiCyan#8fd4c8
  • terminal.ansiGreen#7fd962
  • terminal.ansiMagenta#a0c8c0
  • terminal.ansiRed#ea6c73
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#d4a843
  • terminal.background#101418
  • terminal.foreground#b0bec5
  • textBlockQuote.background#12161c
  • textLink.activeForeground#56c2c2
  • textLink.foreground#56c2c2
  • textPreformat.foreground#b0bec5
  • titleBar.activeBackground#101418
  • titleBar.activeForeground#b0bec5
  • titleBar.border#101418
  • titleBar.inactiveBackground#101418
  • titleBar.inactiveForeground#8899aa
  • tree.indentGuidesStroke#70809080
  • walkThrough.embeddedEditorBackground#12161c
  • welcomePage.progress.background#161b22
  • welcomePage.tileBackground#101418
  • welcomePage.tileShadow#00000080
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#b0bec5
comment#7080908citalic
string, constant.other.symbol#8fd4c8
string.regexp, constant.character, constant.other#8fd4c8
constant.numeric#d4a843
constant.language#d4a843
variable, variable.parameter.function-call#b0bec5
variable.member#a0c8c0
variable.language#8fd4c8italic
storage#6ec9c9
keyword#6ec9c9
keyword.operator#8fd4c8
punctuation.separator, punctuation.terminator#b0bec5b3
punctuation.section#b0bec5
punctuation.accessor#8fd4c8
punctuation.definition.template-expression#6ec9c9
punctuation.section.embedded#6ec9c9
meta.embedded#b0bec5
source.java storage.type, source.haskell storage.type, source.c storage.type#56c2c2
entity.other.inherited-class#8fd4c8
storage.type.function#6ec9c9
source.java storage.type.primitive#8fd4c8
entity.name.function#d4a843
variable.parameter, meta.parameter#d4a843
variable.function, variable.annotation, meta.function-call.generic, support.function.go#d4a843
support.function, support.macro#a0c8c0
entity.name.import, entity.name.package#8fd4c8
entity.name#56c2c2
entity.name.tag, meta.tag.sgml#8fd4c8
support.class.component#56c2c2
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#8fd4c880
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#8fd4c8
entity.other.attribute-name#a0b8c0italic
punctuation.decorator#d4a843italic
support.constant#8fd4c8italic
support.type, support.class, source.go storage.type#8fd4c8
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#d4a843
invalid#d95757
meta.diff, meta.diff.header#8fd4c8
source.ruby variable.other.readwrite#d4a843
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#56c2c2
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#7080908c
support.type.property-name#8fd4c8normal
constant.numeric.line-number.find-in-files - match#7080908c
constant.numeric.line-number.match#6ec9c9
entity.name.filename.find-in-files#8fd4c8
message.error#d95757
markup.heading, markup.heading entity.name#8fd4c8bold
markup.underline.link, string.other.link#8fd4c8
markup.italic#a0c8c0italic
markup.bold#a0c8c0bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#7080908cbold
markup.quote#8fd4c8italic
markup.list punctuation.definition.list.begin#d4a843
markup.inserted#7fd962
markup.changed#56c2c2
markup.deleted#e07070
markup.strike#d4a843
markup.table#8fd4c8
text.html.markdown markup.inline.raw#8fd4c8
text.html.markdown meta.dummy.line-break#7080908c
punctuation.definition.markdown#7080908c