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#151718
  • activityBar.border#9eced177
  • activityBar.foreground#9eced1
  • activityBar.inactiveForeground#9eced177
  • activityBarBadge.background#151718
  • activityBarBadge.foreground#b3d2dd
  • badge.background#151718
  • badge.foreground#9eced1
  • breadcrumb.foreground#9eced1
  • button.background#151718
  • button.foreground#dbdbdb
  • button.hoverBackground#151718
  • checkbox.border#9eced177
  • contrastActiveBorder#151718
  • contrastBorder#9eced177
  • debugExceptionWidget.background#151718
  • debugExceptionWidget.border#9eced1
  • debugToolBar.background#151718
  • debugToolBar.border#9eced1
  • diffEditor.insertedTextBackground#31899555
  • diffEditor.insertedTextBorder#31899555
  • diffEditor.removedTextBackground#3f2f8988
  • diffEditor.removedTextBorder#31899555
  • dropdown.background#151718
  • dropdown.border#9eced177
  • dropdown.foreground#dbdbdb
  • editor.background#151718
  • editor.findMatchBackground#079499
  • editor.findMatchBorder#9eced177
  • editor.findMatchHighlightBackground#eeeeee44
  • editor.foreground#dbdbdb
  • editor.inactiveSelectionBackground#079499
  • editor.lineHighlightBorder#9eced177
  • editor.selectionBackground#079499
  • editor.selectionForeground#000c18
  • editorError.foreground#d84a80
  • editorGroup.border#9eced177
  • editorGroupHeader.border#151718
  • editorGroupHeader.noTabsBackground#151718
  • editorGroupHeader.tabsBackground#151718
  • editorGroupHeader.tabsBorder#9eced177
  • editorHint.foreground#89d0ff
  • editorHoverWidget.background#151718
  • editorHoverWidget.border#9eced177
  • editorIndentGuide.activeBackground#9eced1
  • editorLineNumber.activeForeground#9eced1
  • editorLineNumber.foreground#9eced1
  • editorLink.activeForeground#89d0ff
  • editorMarkerNavigation.background#060621
  • editorMarkerNavigationError.background#d84a80
  • editorMarkerNavigationWarning.background#787c7b
  • editorSuggestWidget.background#151718
  • editorSuggestWidget.border#9eced1
  • editorSuggestWidget.foreground#dbdbdb
  • editorSuggestWidget.highlightForeground#89d0ff
  • editorSuggestWidget.selectedBackground#9eced177
  • editorWarning.foreground#3247ff
  • editorWidget.background#151718
  • editorWidget.border#151718
  • focusBorder#9eced177
  • foreground#dbdbdb
  • gitDecoration.addedResourceForeground#abb2f0
  • gitDecoration.conflictingResourceForeground#29cdeb
  • gitDecoration.deletedResourceForeground#ff94c6
  • gitDecoration.ignoredResourceForeground#9eced177
  • gitDecoration.modifiedResourceForeground#75cea9
  • gitDecoration.submoduleResourceForeground#ade2e4
  • gitDecoration.untrackedResourceForeground#7b84ff
  • icon.foreground#dbdbdb
  • input.background#151718
  • input.border#9eced177
  • input.foreground#dbdbdb
  • input.placeholderForeground#9eced177
  • list.activeSelectionBackground#b3b3b315
  • list.errorForeground#d84a80
  • list.focusBackground#9eced177
  • list.hoverBackground#b3b3b315
  • list.inactiveSelectionBackground#55555515
  • list.warningForeground#3247ff
  • menu.background#151718
  • menu.border#9eced177
  • merge.border#9eced177
  • notificationCenter.border#9eced1
  • notificationCenterHeader.background#151718
  • notificationCenterHeader.foreground#dbdbdb
  • notifications.background#151718
  • notifications.border#9eced177
  • notifications.foreground#dbdbdb
  • panel.background#151718
  • panel.border#9eced177
  • panel.dropBorder#9eced1
  • panelSection.border#9eced177
  • panelTitle.activeForeground#9eced1
  • panelTitle.inactiveForeground#9eced177
  • peekView.border#9eced177
  • peekViewTitle.background#151718
  • peekViewTitleLabel.foreground#dbdbdb
  • quickInput.background#151718
  • sideBar.background#151718
  • sideBar.border#9eced177
  • sideBar.dropBackground#9eced177
  • sideBar.foreground#dbdbdb
  • sideBarSectionHeader.background#151718
  • sideBarSectionHeader.border#9eced177
  • sideBarSectionHeader.foreground#9eced1
  • sideBarTitle.foreground#9eced1
  • statusBar.background#151718
  • statusBar.border#9eced177
  • statusBar.debuggingBackground#b3b3b315
  • statusBar.debuggingForeground#9eced1
  • statusBar.foreground#9eced1
  • statusBar.noFolderBackground#151718
  • statusBar.noFolderForeground#9eced1
  • tab.activeBackground#151718
  • tab.activeBorder#151718
  • tab.activeForeground#dbdbdb
  • tab.activeModifiedBorder#9eced177
  • tab.border#9eced177
  • tab.hoverBorder#9eced177
  • tab.inactiveBackground#151718
  • tab.inactiveForeground#dbdbdb
  • tab.inactiveModifiedBorder#9eced177
  • tab.unfocusedActiveBorder#151718
  • tab.unfocusedActiveForeground#dbdbdb
  • tab.unfocusedInactiveForeground#dbdbdb
  • terminal.ansiBlack#9eced1
  • terminal.ansiBlue#5ccaef
  • terminal.ansiBrightBlack#9eced1
  • terminal.ansiBrightBlue#5ccaef
  • terminal.ansiBrightCyan#29cdeb
  • terminal.ansiBrightGreen#abb2f0
  • terminal.ansiBrightMagenta#ff94c6
  • terminal.ansiBrightRed#d84a80
  • terminal.ansiBrightWhite#f1f1f1
  • terminal.ansiBrightYellow#75cea9
  • terminal.ansiCyan#29cdeb
  • terminal.ansiGreen#abb2f0
  • terminal.ansiMagenta#ff94c6
  • terminal.ansiRed#d84a80
  • terminal.ansiWhite#f1f1f1
  • terminal.ansiYellow#75cea9
  • terminal.border#9eced177
  • titleBar.activeBackground#151718
  • titleBar.activeForeground#9eced1
  • titleBar.border#9eced177
  • titleBar.inactiveBackground#151718
  • titleBar.inactiveForeground#9eced1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5e686e
string#ade2e4
constant.numeric#7b84ff
constant.language#7b84ff
constant.character, constant.other#7b84ff
variable
keyword#75cea9bold
storage#75cea9bold
storage.type#29cdebitalic
entity.name.class#abb2f0underline
entity.other.inherited-class#abb2f0italic underline
entity.name.function#abb2f0
variable.parameter#ff94c6italic
entity.name.tag#75cea9bold
entity.other.attribute-name#abb2f0
support.function#29cdeb
support.constant#29cdeb
support.type, support.class#29cdebitalic
support.other.variable#ff94c6
invalid#f0f3f8bold
invalid.deprecated#f0f3f8
meta.structure.dictionary.json, string.quoted.double.json#c2cfce
meta.diff, meta.diff.header#5e7075
markup.deleted#75cea9
markup.inserted#abb2f0
markup.changed#ade2e4
constant.numeric.line-number.find-in-files - match#7b84ffA0
entity.name.filename.find-in-files#ade2e4
variable.language#abb2f0
heading.1.markdown#abb2f0bold
punctuation.definition.heading.markdown#abb2f0
entity.name.section.markdown#abb2f0
punctuation.definition.list.begin.markdown#7b84ff
meta.image.inline.markdown#ade2e4
markup.bold.markdown#dbdbdbbold
markup.italic.markdown#dbdbdbitalic
markup.inline.raw.string.markdown#29cdeb
meta.separator.markdown#9eced1
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#7b84ff
variable.other.object, punctuation.accessor, meta.brace.round, variable.other.readwrite, punctuation.separator.comma#dbdbdb
token.info-token#6796E6
token.warn-token#3247ff
token.error-token#d84a80
token.debug-token#6967e6