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#0e1718
  • activityBar.border#0e1718
  • activityBar.dropBackground#0e1718
  • activityBar.foreground#ddeff0
  • activityBarBadge.background#5faab1
  • activityBarBadge.foreground#0e1718
  • badge.background#5faab1
  • badge.foreground#0e1718
  • button.background#5faab1
  • button.foreground#0e1718
  • button.hoverBackground#5faab190
  • contrastBorder#ffffff00
  • debugExceptionWidget.background#0e1718
  • debugExceptionWidget.border#ddeff0
  • debugToolBar.background#0e1718
  • descriptionForeground#ddeff0
  • diffEditor.insertedTextBackground#4ad96233
  • diffEditor.insertedTextBorder#4ad96255
  • diffEditor.removedTextBackground#ec1e2b33
  • diffEditor.removedTextBorder#ec1e2b55
  • dropdown.background#0e1718
  • dropdown.border#0e1718
  • dropdown.foreground#ffffff
  • editor.background#0e1718
  • editor.findMatchBackground#5faab166
  • editor.findMatchHighlightBackground#4ad96266
  • editor.findRangeHighlightBackground#243E51
  • editor.foreground#ddeff0
  • editor.hoverHighlightBackground#5faab133
  • editor.inactiveSelectionBackground#00000025
  • editor.lineHighlightBackground#ffffff05
  • editor.lineHighlightBorder#ffffff05
  • editor.rangeHighlightBackground#ffffff05
  • editor.selectionBackground#5faab160
  • editor.selectionHighlightBackground#5faab160
  • editor.wordHighlightBackground#ffffff21
  • editor.wordHighlightStrongBackground#ffffff21
  • editorBracketMatch.background#0e1718
  • editorBracketMatch.border#5faab180
  • editorCodeLens.foreground#ddeff0
  • editorCursor.foreground#5faab1
  • editorError.border#0e1718
  • editorError.foreground#ec1e2b
  • editorGroup.background#ec1e2b
  • editorGroup.border#0e1718
  • editorGroup.dropBackground#0e171899
  • editorGroupHeader.noTabsBackground#0e1718
  • editorGroupHeader.tabsBackground#0e1718
  • editorGroupHeader.tabsBorder#0e1718
  • editorGutter.addedBackground#47b164
  • editorGutter.background#0e171866
  • editorGutter.deletedBackground#ec1e2b
  • editorGutter.modifiedBackground#26506D
  • editorHoverWidget.background#0e1718
  • editorHoverWidget.border#0e1718
  • editorIndentGuide.background#3B5364
  • editorLineNumber.foreground#ddeff0
  • editorLink.activeForeground#ddeff0
  • editorMarkerNavigation.background#3B536433
  • editorMarkerNavigationError.background#ec1e2b
  • editorMarkerNavigationWarning.background#5faab1
  • editorOverviewRuler.border#0e1718
  • editorOverviewRuler.commonContentForeground#5faab155
  • editorOverviewRuler.currentContentForeground#ec1e2b55
  • editorOverviewRuler.incomingContentForeground#47b16455
  • editorRuler.foreground#1F4662
  • editorSuggestWidget.background#0e1718
  • editorSuggestWidget.border#0e1718
  • editorSuggestWidget.foreground#ddeff0
  • editorSuggestWidget.highlightForeground#5faab1
  • editorSuggestWidget.selectedBackground#193549
  • editorWarning.border#ffffff00
  • editorWarning.foreground#5faab1
  • editorWhitespace.foreground#ffffff52
  • editorWidget.background#0e1718
  • editorWidget.border#0e1718
  • errorForeground#ec1e2b
  • extensionButton.prominentBackground#5faab1
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#3b757f
  • focusBorder#0e1718
  • foreground#ddeff0
  • gitDecoration.conflictingResourceForeground#fda700
  • gitDecoration.deletedResourceForeground#ec1e2b
  • gitDecoration.ignoredResourceForeground#808080
  • gitDecoration.modifiedResourceForeground#5faab1
  • gitDecoration.untrackedResourceForeground#47b164
  • input.background#ffffff10
  • input.border#0e1718
  • input.foreground#FFFfff
  • input.placeholderForeground#ddeff0
  • inputOption.activeBorder#8dffff
  • inputValidation.errorBackground#0e1718
  • inputValidation.errorBorder#5faab1
  • inputValidation.infoBackground#0e1718
  • inputValidation.infoBorder#0e1718
  • inputValidation.warningBackground#0e1718
  • inputValidation.warningBorder#5faab1
  • list.activeSelectionBackground#000
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#0e1718
  • list.focusBackground#0e1718
  • list.focusForeground#ffffff
  • list.highlightForeground#5faab1
  • list.hoverBackground#000
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#000
  • list.inactiveSelectionForeground#ffffff
  • menu.background#0e1718
  • menu.selectionForeground#ddeff0
  • menubar.selectionBackground#0e1718
  • merge.border#ffffff00
  • merge.commonContentBackground#cc8f00
  • merge.commonHeaderBackground#cc8f00
  • merge.currentContentBackground#53a33b
  • merge.currentHeaderBackground#53a33b
  • merge.incomingContentBackground#3480cc
  • merge.incomingHeaderBackground#3480cc
  • notificationCenter.border#5faab1
  • notificationCenterHeader.background#0e1718
  • notificationCenterHeader.foreground#ddeff0
  • notificationLink.foreground#5faab1
  • notifications.background#0e1718
  • notifications.border#5faab1
  • notifications.foreground#ddeff0
  • notificationToast.border#5faab1
  • panel.background#0e1718
  • panel.border#5faab1
  • panelTitle.activeBorder#5faab1
  • panelTitle.activeForeground#5faab1
  • panelTitle.inactiveForeground#ddeff0
  • peekView.border#5faab1
  • peekViewEditor.background#0e1718
  • peekViewEditor.matchHighlightBackground#5faab100
  • peekViewEditorGutter.background#0e1718
  • peekViewResult.background#0e1718
  • peekViewResult.fileForeground#ddeff0
  • peekViewResult.lineForeground#ffffff
  • peekViewResult.matchHighlightBackground#0e1718
  • peekViewResult.selectionBackground#0e1718
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#0e1718
  • peekViewTitleDescription.foreground#ddeff0
  • peekViewTitleLabel.foreground#5faab1
  • pickerGroup.border#0e1718
  • pickerGroup.foreground#ddeff0
  • progressBar.background#5faab1
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#5faab1
  • scrollbarSlider.background#5faab180
  • scrollbarSlider.hoverBackground#5faab1
  • selection.background#5faab1
  • sideBar.background#0e1718
  • sideBar.border#0e1718
  • sideBar.foreground#ddeff0
  • sideBarSectionHeader.background#0e1718
  • sideBarSectionHeader.foreground#ddeff0
  • sideBarTitle.foreground#ddeff0
  • statusBar.background#5faab1
  • statusBar.border#0e1718
  • statusBar.debuggingBackground#000
  • statusBar.debuggingBorder#5faab1
  • statusBar.debuggingForeground#5faab1
  • statusBar.foreground#0e1718
  • statusBar.noFolderBackground#000
  • statusBar.noFolderBorder#0e1718
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#5faab1
  • statusBarItem.hoverBackground#0e171820
  • statusBarItem.prominentBackground#0e1718
  • statusBarItem.prominentHoverBackground#0e171820
  • tab.activeBackground#5faab110
  • tab.activeBorder#5faab1
  • tab.activeForeground#ffffff
  • tab.border#0e1718
  • tab.inactiveBackground#0e1718
  • tab.inactiveForeground#ddeff0
  • tab.unfocusedActiveForeground#ddeff0
  • tab.unfocusedInactiveForeground#ddeff0
  • terminal.ansiBlack#0e1718
  • terminal.ansiBlue#0088ff
  • terminal.ansiBrightBlack#0050A4
  • terminal.ansiBrightBlue#0088ff
  • terminal.ansiBrightCyan#80fcff
  • terminal.ansiBrightGreen#4ad962
  • terminal.ansiBrightMagenta#fb94ff
  • terminal.ansiBrightRed#ec1e2b
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#5faab1
  • terminal.ansiCyan#80fcff
  • terminal.ansiGreen#4ad962
  • terminal.ansiMagenta#fb94ff
  • terminal.ansiRed#ec1e2b
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#5faab1
  • terminal.background#0e1718
  • terminal.foreground#ffffff
  • terminalCursor.background#5faab1
  • terminalCursor.foreground#5faab1
  • textBlockQuote.background#193549
  • textBlockQuote.border#448e96
  • textCodeBlock.background#193549
  • textLink.activeForeground#448e96
  • textLink.foreground#5faab1
  • textPreformat.foreground#5faab1
  • textSeparator.foreground#0e1718
  • titleBar.activeBackground#0e1718
  • titleBar.activeForeground#ddeff0
  • titleBar.inactiveBackground#0e1718
  • titleBar.inactiveForeground#ffffff33
  • walkThrough.embeddedEditorBackground#0e1718
  • welcomePage.buttonBackground#193549
  • welcomePage.buttonHoverBackground#0e1718
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#888italic
constant#92cace
entity#bfe0e2
invalid#ec1e2b
storage.type.function#bfe0e2
keyword, storage.type.class, keyword.control.default.ts#bfe0e2
meta#ddeff0
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#ffffff
meta.brace#e1efff
punctuation#ddeff0
storage#5faab1
storage.type.function.arrow#bfe0e2
string, punctuation.definition.string#f2f9f9
string.template, punctuation.definition.string.template#f2f9f9
support#f2f9f9
support.function#5faab1
support.variable.property.dom#e1efff
variable#e1efff
source.css entity, source.stylus entity#5faab1
entity.other.attribute-name.id.css#5faab1
entity.name.tag#92cace
source.css support, source.stylus support#f2f9f9
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#92caceitalic
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#92cace
source.css variable, source.stylus variable#92cace
text.html.basic entity.name#92cace
text.html.basic entity.other#5faab1italic
meta.tag.metadata.script.html entity.name.tag.html#5faab1
punctuation.definition.string.begin, punctuation.definition.string.end#ddeff0
source.ini entity#e1efff
source.ini keyword#5faab1
entity.other.inherited-class.js#ddeff0
source.json support#5faab1
source.json string, source.json punctuation.definition.string#e1efff
punctuation.definition.heading.markdown#e1efff
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#5faab1bold
meta.paragraph.markdown#e1efff
beginning.punctuation.definition.quote.markdown#5faab1
markup.quote.markdown meta.paragraph.markdown#ddeff0italic
meta.separator.markdown#5faab1
markup.bold.markdown#ddeff0bold
markup.italic.markdown#ddeff0italic
beginning.punctuation.definition.list.markdown#5faab1
string.other.link.title.markdown#92cace
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown#92cace
markup.underline.link.markdown, markup.underline.link.image.markdown#ddeff0
fenced_code.block.language, markup.inline.raw.markdown#ddeff0
fenced_code.block.language, markup.inline.raw.markdown#ddeff0
source.php entity#ddeff0
variable.other.php#5faab1
modifier, this, comment, storage.modifier, entity.other.attribute-name.js, entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.attribute-name.htmlitalic
keyword.control.export#92caceitalic
meta.return.type.ts#92caceitalic
Sto Theme by NSMNIA - VS Code Theme