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#e6e6e6
  • activityBar.background#161616
  • activityBar.border#27292b
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#343434
  • badge.background#161616
  • button.background#27292b
  • button.foreground#e6e6e6
  • checkbox.border#404754
  • dropdown.background#111111
  • dropdown.border#111111
  • dropdown.foreground#e6e6e6
  • editor.background#1A1D23
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#42557b
  • editor.findMatchHighlightBackground#6bb7ff2f
  • editor.foreground#c0c5ce
  • editor.hoverHighlightBackground#202020
  • editor.inactiveSelectionBackground#2C333B
  • editor.lineHighlightBackground#2C333B
  • editor.lineHighlightBorder#2C333B
  • editor.rangeHighlightBackground#27292b
  • editor.selectionBackground#2C333B
  • editor.selectionHighlightBackground#27292b
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#d7dae0
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#d7dae0
  • editorBracketMatch.background#2f2f2f
  • editorBracketMatch.border#303030
  • editorCodeLens.foreground#27292b
  • editorCursor.background#161616
  • editorCursor.foreground#c0c5ce
  • editorError.border#27292b
  • editorError.foreground#FF7A84
  • editorGroup.border#27292b
  • editorGroup.dropBackground#3793e01a
  • editorGroup.emptyBackground#161616
  • editorGroupHeader.tabsBackground#111111
  • editorGroupHeader.tabsBorder#27292b
  • editorGutter.background#1A1D23
  • editorHoverWidget.background#111111
  • editorHoverWidget.border#27292b
  • editorIndentGuide.background1#2f2f2f
  • editorLineNumber.activeForeground#e6e6e6
  • editorLineNumber.foreground#606b76
  • editorLink.activeForeground#999999
  • editorMarkerNavigation.background#111111
  • editorMarkerNavigationError.background#161616
  • editorMarkerNavigationWarning.background#27292b
  • editorOverviewRuler.border#27292b
  • editorOverviewRuler.commonContentForeground#27292b
  • editorOverviewRuler.currentContentForeground#FF7A84
  • editorOverviewRuler.incomingContentForeground#73c936
  • editorRuler.foreground#343434
  • editorSuggestWidget.background#111111
  • editorSuggestWidget.border#27292b
  • editorSuggestWidget.foreground#999999
  • editorSuggestWidget.selectedBackground#27292b
  • editorWarning.border#27292b
  • editorWarning.foreground#FF7A84
  • editorWhitespace.foreground#65737e
  • editorWidget.background#111111
  • editorWidget.border#27292b
  • errorForeground#FF7A84
  • focusBorder#666666
  • foreground#e6e6e6
  • input.background#27292bd3
  • input.foreground#e6e6e6
  • input.placeholderForeground#999999
  • inputOption.activeBorder#343434
  • inputValidation.errorBorder#FF7A84
  • inputValidation.infoBorder#b392f0
  • inputValidation.warningBorder#FF9800
  • list.activeSelectionBackground#27292b
  • list.activeSelectionForeground#e6e6e6
  • list.dropBackground#111111
  • list.errorForeground#FF7A84
  • list.focusBackground#27292b
  • list.highlightForeground#96a6c8
  • list.hoverBackground#27292b
  • list.inactiveSelectionBackground#27292b
  • list.inactiveSelectionForeground#e6e6e6
  • list.warningForeground#FF9800
  • menu.background#111111
  • menu.border#343434
  • menu.selectionBackground#27292b
  • menu.separatorBackground#303030
  • notificationCenter.border#343434
  • notifications.background#111111
  • notifications.border#343434
  • notifications.foreground#ffffff
  • notificationToast.border#343434
  • panelSectionHeader.background#111111
  • panelTitle.activeBorder#e6e6e6
  • peekView.border#343434
  • peekViewEditor.background#111111
  • peekViewEditor.matchHighlightBackground#3793e033
  • peekViewResult.background#111111
  • peekViewResult.fileForeground#e6e6e6
  • peekViewResult.lineForeground#e6e6e6
  • peekViewResult.matchHighlightBackground#3793e033
  • peekViewResult.selectionBackground#23252c
  • peekViewResult.selectionForeground#e6e6e6
  • peekViewTitle.background#23252c
  • peekViewTitleDescription.foreground#79b8ff
  • peekViewTitleLabel.foreground#e6e6e6
  • scrollbar.shadow#161616
  • scrollbarSlider.activeBackground#3c3f42cc
  • scrollbarSlider.background#d2e0ff2f
  • scrollbarSlider.hoverBackground#5b646c
  • selection.background#61afef40
  • sideBar.background#111111
  • sideBar.border#27292b
  • sideBar.foreground#e6e6e6
  • sideBarSectionHeader.background#161616
  • sideBarSectionHeader.border#27292b
  • sideBarSectionHeader.foreground#e6e6e6
  • sideBarTitle.foreground#e6e6e6
  • statusBar.background#111111
  • statusBar.border#27292b
  • statusBar.foreground#e6e6e6
  • statusBar.noFolderBackground#111111
  • statusBar.noFolderForeground#e6e6e6
  • statusBarItem.prominentBackground#FF7A84
  • statusBarItem.prominentHoverBackground#FF9800
  • statusBarItem.remoteBackground#BB80B0
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#161616
  • tab.activeForeground#e6e6e6
  • tab.border#27292b
  • tab.inactiveBackground#111111
  • tab.inactiveForeground#757575
  • tab.unfocusedActiveForeground#e6e6e6
  • tab.unfocusedInactiveForeground#757575
  • tab.unfocusedInactiveModifiedBorder#FF7A84
  • terminal.background#1A1D23
  • terminal.border#2f2f2f
  • terminal.foreground#bdbdbd
  • terminal.selectionBackground#303030
  • textLink.foreground#79b8ff
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#e6e6e6
  • titleBar.border#27292b
  • titleBar.inactiveBackground#161616
  • titleBar.inactiveForeground#999999
  • walkThrough.embeddedEditorBackground#2e3440

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#c0c5ce
variable.parameter.function#c0c5ce
comment, punctuation.definition.comment, string.quoted.docstring.multi.python, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python, string.quoted.docstring.multi.python constant.character.escape.python#65737e
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#c0c5ce
none#c0c5ce
keyword.operator#c0c5ce
keyword#BB80B0
variable#d0d5ce
variable.language.this.js#C15863
variable.other.readwrite.instance.ruby#C15863
entity.name.function, meta.require, support.function.any-method#7194B8
support.class, entity.name.class, entity.name.type.class#ebcb8b
meta.class#eff1f5
keyword.other.special-method#7194B8
storage#BB80B0
support.function#96b5b4
string, constant.other.symbol, entity.other.inherited-class#a3be8c
constant.numeric#d08770
none#d08770
none#d08770
constant#d08770
entity.name.tag#C15863
entity.other.attribute-name#d08770
entity.other.attribute-name.id, punctuation.definition.entity#7194B8
meta.selector#BB80B0
none#d08770
markup.heading punctuation.definition.heading, entity.name.section#7194B8
keyword.other.unit#d08770
markup.bold, punctuation.definition.bold#ebcb8bbold
markup.italic, punctuation.definition.italic#BB80B0italic
markup.raw.inline#a3be8c
string.other.link, punctuation.definition.string.end.markdown#C15863
meta.link#d08770
markup.list#C15863
markup.quote#d08770
meta.separator#c0c5ce
markup.inserted, markup.inserted.git_gutter#a3be8c
markup.deleted, markup.deleted.git_gutter#C15863
markup.changed, markup.changed.git_gutter#BB80B0
markup.ignored, markup.ignored.git_gutter#4f5b66
markup.untracked, markup.untracked.git_gutter#4f5b66
constant.other.color#96b5b4
string.regexp#96b5b4
constant.character.escape#96b5b4
punctuation.section.embedded, variable.interpolation#ab7967
invalid.illegal#647187
sublimelinter.mark.warning#DDB700
sublimelinter.gutter-mark#FFFFFF
sublimelinter.mark.error#D02000
SpaceBlack by Noufal PP - VS Code Theme