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#10171E
  • activityBar.border#55607233
  • activityBar.foreground#556072
  • activityBarBadge.background#CD222F
  • activityBarBadge.foreground#10171E
  • badge.background#CD222F
  • badge.foreground#10171E
  • button.background#CD222F
  • button.foreground#10171E
  • debugExceptionWidget.background#131C24
  • debugExceptionWidget.border#55607233
  • debugToolBar.background#10171E
  • diffEditor.insertedTextBackground#0BDE9633
  • diffEditor.removedTextBackground#EE810933
  • dropdown.background#131C24
  • dropdown.border#55607277
  • dropdown.foreground#CFDCEB99
  • editor.background#131C24
  • editor.findMatchBackground#CD222F0e
  • editor.findMatchBorder#CD222F
  • editor.findMatchHighlightBackground#CD222F0e
  • editor.findMatchHighlightBorder#CD222F66
  • editor.findRangeHighlightBackground#55607244
  • editor.findRangeHighlightBorder#10171E00
  • editor.foreground#CFDCEB
  • editor.inactiveSelectionBackground#55607244
  • editor.lineHighlightBackground#CFDCEB22
  • editor.rangeHighlightBackground#55607233
  • editor.selectionBackground#55607277
  • editor.selectionHighlightBackground#55607244
  • editor.selectionHighlightBorder#556072
  • editor.wordHighlightBackground#55607244
  • editor.wordHighlightStrongBackground#0BDE9677
  • editorBracketMatch.background#55607233
  • editorBracketMatch.border#55607255
  • editorCodeLens.foreground#556072b0
  • editorCursor.foreground#CD222F
  • editorError.foreground#61afef
  • editorGroup.border#55607233
  • editorGroupHeader.noTabsBackground#10171E
  • editorGroupHeader.tabsBackground#10171E
  • editorGroupHeader.tabsBorder#55607233
  • editorGutter.addedBackground#0BDE96bb
  • editorGutter.deletedBackground#61afefbb
  • editorGutter.modifiedBackground#EE8109bb
  • editorHoverWidget.background#131C24
  • editorHoverWidget.border#55607222
  • editorLineNumber.activeForeground#556072
  • editorLineNumber.foreground#55607292
  • editorLink.activeForeground#CD222F
  • editorMarkerNavigation.background#131C24
  • editorOverviewRuler.addedForeground#0BDE96bb
  • editorOverviewRuler.border#55607233
  • editorOverviewRuler.deletedForeground#61afefbb
  • editorOverviewRuler.errorForeground#61afef
  • editorOverviewRuler.modifiedForeground#EE8109bb
  • editorOverviewRuler.warningForeground#CD222F
  • editorRuler.foreground#55607244
  • editorSuggestWidget.background#131C24
  • editorSuggestWidget.border#55607222
  • editorSuggestWidget.highlightForeground#CD222F
  • editorSuggestWidget.selectedBackground#55607233
  • editorWarning.foreground#CD222F
  • editorWhitespace.foreground#55607266
  • editorWidget.background#131C24
  • extensionButton.prominentBackground#CD222F
  • extensionButton.prominentForeground#10171E
  • extensionButton.prominentHoverBackground#CD222Fb3
  • focusBorder#55607277
  • foreground#CFDCEB99
  • gitDecoration.deletedResourceForeground#61afefcc
  • gitDecoration.ignoredResourceForeground#CFDCEB66
  • gitDecoration.modifiedResourceForeground#EE8109cc
  • gitDecoration.submoduleResourceForeground#C91B8Eb0
  • gitDecoration.untrackedResourceForeground#0BDE96cc
  • input.background#131C24
  • input.border#55607255
  • input.foreground#CFDCEB
  • input.placeholderForeground#55607277
  • inputOption.activeBorder#CD222F
  • inputValidation.errorBackground#10171E
  • inputValidation.errorBorder#61afef
  • inputValidation.infoBackground#10171E
  • inputValidation.infoBorder#0BDE96
  • inputValidation.warningBackground#10171E
  • inputValidation.warningBorder#EE8109
  • list.activeSelectionBackground#55607233
  • list.activeSelectionForeground#CFDCEB
  • list.focusBackground#55607233
  • list.focusForeground#CFDCEB99
  • list.highlightForeground#CD222F
  • list.hoverBackground#55607233
  • list.hoverForeground#CFDCEB99
  • list.inactiveSelectionBackground#55607233
  • list.inactiveSelectionForeground#CFDCEB99
  • list.invalidItemForeground#CFDCEB77
  • panel.background#10171E
  • panel.border#55607233
  • panelTitle.activeBorder#CD222F
  • panelTitle.activeForeground#CFDCEB
  • panelTitle.inactiveForeground#CFDCEB99
  • peekView.border#55607233
  • peekViewEditor.background#131C24
  • peekViewEditor.matchHighlightBackground#CD222F44
  • peekViewResult.background#131C24
  • peekViewResult.fileForeground#CFDCEB99
  • peekViewResult.matchHighlightBackground#CD222F44
  • peekViewTitle.background#131C24
  • peekViewTitleDescription.foreground#CFDCEB99
  • peekViewTitleLabel.foreground#CFDCEB99
  • pickerGroup.border#55607233
  • pickerGroup.foreground#CFDCEBb3
  • progressBar.background#CD222F
  • scrollbar.shadow#55607233
  • scrollbarSlider.activeBackground#CFDCEB92
  • scrollbarSlider.background#CFDCEB44
  • scrollbarSlider.hoverBackground#CFDCEB77
  • selection.background#CFDCEB77
  • settings.headerForeground#CFDCEB
  • settings.modifiedItemIndicator#0BDE96
  • sideBar.background#10171E
  • sideBar.border#55607233
  • sideBarSectionHeader.background#10171E
  • sideBarSectionHeader.foreground#CFDCEB99
  • sideBarTitle.foreground#CFDCEB99
  • statusBar.background#10171E
  • statusBar.border#55607233
  • statusBar.debuggingBackground#EE8109
  • statusBar.debuggingForeground#10171Edd
  • statusBar.foreground#CFDCEB
  • statusBar.noFolderBackground#131C24
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#55607233
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#131C24
  • tab.activeBorderTop#CD222F
  • tab.activeForeground#CFDCEB
  • tab.border#55607233
  • tab.inactiveBackground#10171E
  • tab.inactiveForeground#CFDCEB99
  • tab.unfocusedActiveBorderTop#CFDCEB99
  • tab.unfocusedActiveForeground#CFDCEB99
  • tab.unfocusedInactiveForeground#CFDCEB99
  • terminal.ansiBlack#10171E
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#556072
  • terminal.ansiBrightBlue#61afef
  • terminal.ansiBrightCyan#0BA3A4
  • terminal.ansiBrightGreen#0BDE96
  • terminal.ansiBrightMagenta#C91B8E
  • terminal.ansiBrightRed#F3170D
  • terminal.ansiBrightWhite#CFDCEB
  • terminal.ansiBrightYellow#EE8109
  • terminal.ansiCyan#0BA3A4
  • terminal.ansiGreen#0BDE96
  • terminal.ansiMagenta#556072
  • terminal.ansiRed#CD222F
  • terminal.ansiWhite#CFDCEB
  • terminal.ansiYellow#EE8109
  • terminal.background#10171E
  • terminal.foreground#CFDCEB
  • textBlockQuote.background#131C24
  • textLink.activeForeground#CD222F
  • textLink.foreground#CD222F
  • textPreformat.foreground#CFDCEB
  • titleBar.activeBackground#10171E
  • titleBar.activeForeground#CFDCEB
  • titleBar.border#55607233
  • titleBar.inactiveBackground#10171E
  • titleBar.inactiveForeground#CFDCEB
  • walkThrough.embeddedEditorBackground#131C24
  • widget.shadow#0C1116

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#CFDCEB
comment#556072b0
string, constant.other.symbol#c91b8e
string.regexp, constant.character, constant.other#0BA3A4
constant.numeric#CD222F
constant.language#CD222F
variable#CFDCEB
variable.member#CD222F
variable.language#0BDE96
storage#0bde96
keyword#0bde96
keyword.operator#cfdceb
punctuation.separator, punctuation.terminator#CFDCEB
punctuation.section#CFDCEB
punctuation.accessor#EE8109
source.java storage.type, source.haskell storage.type, source.c storage.type#61afef
entity.other.inherited-class#0BDE96
storage.type.function#EE8109
source.java storage.type.primitive#0BDE96
entity.name.function#61AFEF
variable.parameter, meta.parameter#CFDCEB
variable.function, variable.annotation, meta.function-call.generic, support.function.go#61afef
support.function, support.macro#61afef
entity.name.import, entity.name.package#0BDE96
entity.name#61afef
entity.name.tag, meta.tag.sgml#0BDE96
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#0BDE9677
entity.other.attribute-name#EE8109
support.constant#EE8109
support.type, support.class, source.go storage.type#0BDE96
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#61afef
invalid#61afef
meta.diff, meta.diff.header#C91B8E
source.ruby variable.other.readwrite#EE8109
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#61afef
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#556072b0
support.type.property-name#0BDE96
constant.numeric.line-number.find-in-files - match#556072b0
constant.numeric.line-number.match#EE8109
entity.name.filename.find-in-files#0BDE96
message.error#61afef
markup.heading, markup.heading entity.name#0BDE96bold
markup.underline.link, string.other.link#0BDE96
markup.italic#CD222F
markup.bold#CD222Fbold
markup.italic markup.bold, markup.bold markup.italicbold italic
meta.separator#556072b0bold
markup.quote#0BA3A4italic
markup.list punctuation.definition.list.begin#EE8109
markup.inserted#0BDE96
markup.changed#EE8109
markup.deleted#61afef
markup.strike#C91B8E
markup.table#0BDE96
text.html.markdown markup.inline.raw#EE8109
text.html.markdown meta.dummy.line-break#556072b0
punctuation.definition.markdown#556072b0
storage.modifier.import.java, meta.import.java, source.java#cfdceb
log.debug#0BA3A3
log.info#0BDE83
log.trace#ED7F09
log.fatal#732128
log.error#732128
log.warn#732128
log.constant#61AEED