Skip to main content
CodingTheme

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#191324
  • activityBar.border#191324
  • activityBar.dropBackground#191324
  • activityBar.foreground#524763
  • activityBarBadge.background#82d8d8
  • activityBarBadge.foreground#191324
  • badge.background#82d8d8
  • badge.foreground#191324
  • button.background#82d8d8
  • button.foreground#191324
  • button.hoverBackground#9ce0e0
  • contrastBorder#ffffff00
  • debugExceptionWidget.background#191324
  • debugExceptionWidget.border#aaa
  • debugToolBar.background#191324
  • descriptionForeground#aaa
  • diffEditor.insertedTextBackground#3ad90011
  • diffEditor.insertedTextBorder#3ad90055
  • diffEditor.removedTextBackground#ee3a4311
  • diffEditor.removedTextBorder#ee3a4355
  • dropdown.background#191324
  • dropdown.border#191324
  • dropdown.foreground#fff
  • editor.background#191324
  • editor.findMatchBackground#E54B4B
  • editor.findMatchHighlightBackground#CAD40F66
  • editor.findRangeHighlightBackground#243E51
  • editor.foreground#fff
  • editor.hoverHighlightBackground#52476333
  • editor.inactiveSelectionBackground#191324
  • editor.lineHighlightBackground#52476366
  • editor.rangeHighlightBackground#52476366
  • editor.selectionBackground#52476366
  • editor.selectionHighlightBackground#524763
  • editor.wordHighlightBackground#FFFFFF0D
  • editor.wordHighlightStrongBackground#FFFFFF0D
  • editorBracketMatch.background#191324
  • editorBracketMatch.border#9887b3
  • editorCodeLens.foreground#aaa
  • editorCursor.foreground#fff
  • editorError.border#9887b3
  • editorError.foreground#E54B4B
  • editorGroup.background#E54B4B
  • editorGroup.border#191324
  • editorGroup.dropBackground#19132499
  • editorGroupHeader.noTabsBackground#191324
  • editorGroupHeader.tabsBackground#191324
  • editorGroupHeader.tabsBorder#191324
  • editorGutter.addedBackground#3C9F4A
  • editorGutter.background#19132466
  • editorGutter.deletedBackground#E54B4B
  • editorGutter.modifiedBackground#524763
  • editorHoverWidget.background#191324
  • editorHoverWidget.border#191324
  • editorIndentGuide.background#3B5364
  • editorLineNumber.foreground#373142
  • editorLink.activeForeground#524763
  • editorMarkerNavigation.background#3B536433
  • editorMarkerNavigationError.background#E54B4B
  • editorMarkerNavigationWarning.background#524763
  • editorOverviewRuler.border#191324
  • editorOverviewRuler.commonContentForeground#52476355
  • editorOverviewRuler.currentContentForeground#ee3a4355
  • editorOverviewRuler.incomingContentForeground#3ad90055
  • editorRuler.foreground#524763
  • editorSuggestWidget.background#191324
  • editorSuggestWidget.border#191324
  • editorSuggestWidget.foreground#FFF
  • editorSuggestWidget.highlightForeground#82d8d8
  • editorSuggestWidget.selectedBackground#524763
  • editorWarning.border#ffffff00
  • editorWarning.foreground#524763
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#191324
  • editorWidget.border#191324
  • errorForeground#E54B4B
  • extensionButton.prominentBackground#82d8d8
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#ff9d00
  • focusBorder#191324
  • foreground#aaa
  • gitDecoration.deletedResourceForeground#E54B4B
  • gitDecoration.ignoredResourceForeground#52476380
  • gitDecoration.modifiedResourceForeground#82d8d8
  • gitDecoration.untrackedResourceForeground#CBE56C
  • input.background#291f3a
  • input.border#191324
  • input.foreground#9d8bbb
  • input.placeholderForeground#aaa
  • inputOption.activeBorder#191324
  • inputValidation.errorBackground#191324
  • inputValidation.errorBorder#524763dd
  • inputValidation.infoBackground#191324
  • inputValidation.infoBorder#191324
  • inputValidation.warningBackground#191324
  • inputValidation.warningBorder#524763
  • list.activeSelectionBackground#191324
  • list.activeSelectionForeground#aaa
  • list.dropBackground#191324
  • list.focusBackground#191324
  • list.focusForeground#aaa
  • list.highlightForeground#524763
  • list.hoverBackground#191324
  • list.hoverForeground#aaa
  • list.inactiveSelectionBackground#191324
  • list.inactiveSelectionForeground#aaa
  • merge.border#ffffff00
  • merge.commonContentBackground#ffffff00
  • merge.commonHeaderBackground#ffffff00
  • merge.currentContentBackground#ffffff00
  • merge.currentHeaderBackground#ffffff00
  • merge.incomingContentBackground#ffffff00
  • merge.incomingHeaderBackground#ffffff00
  • notification.background#524763
  • notification.buttonBackground#82d8d8
  • notification.buttonForeground#fff
  • notification.buttonHoverBackground#5f9e9e
  • notification.errorBackground#E54B4B
  • notification.errorForeground#fff
  • notification.foreground#fff
  • notification.infoBackground#82d8d8
  • notification.infoForeground#fff
  • notification.warningBackground#E54B4B
  • notification.warningForeground#fff
  • panel.background#191324
  • panel.border#524763
  • panelTitle.activeBorder#524763
  • panelTitle.activeForeground#524763
  • panelTitle.inactiveForeground#aaa
  • peekView.border#191324
  • peekViewEditor.background#191324
  • peekViewEditor.matchHighlightBackground#191324
  • peekViewEditorGutter.background#191324
  • peekViewResult.background#191324
  • peekViewResult.fileForeground#aaa
  • peekViewResult.lineForeground#fff
  • peekViewResult.matchHighlightBackground#191324
  • peekViewResult.selectionBackground#191324
  • peekViewResult.selectionForeground#fff
  • peekViewTitle.background#191324
  • peekViewTitleDescription.foreground#aaa
  • peekViewTitleLabel.foreground#524763
  • pickerGroup.border#191324
  • pickerGroup.foreground#aaa
  • progressBar.background#524763
  • scrollbar.shadow#000
  • scrollbarSlider.activeBackground#524763cc
  • scrollbarSlider.background#52476380
  • scrollbarSlider.hoverBackground#524763cc
  • selection.background#82d8d8
  • sideBar.background#191324
  • sideBar.border#52476366
  • sideBar.foreground#524763
  • sideBarSectionHeader.background#191324
  • sideBarSectionHeader.foreground#aaaaaa
  • sideBarTitle.foreground#aaaaaa
  • statusBar.background#191324
  • statusBar.border#191324
  • statusBar.debuggingBackground#191324
  • statusBar.debuggingForeground#191324
  • statusBar.foreground#524763
  • statusBar.noFolderBackground#191324
  • statusBar.noFolderForeground#524763
  • statusBarItem.activeBackground#82d8d8
  • statusBarItem.hoverBackground#191324
  • statusBarItem.prominentBackground#191324
  • statusBarItem.prominentHoverBackground#191324
  • tab.activeBackground#191324
  • tab.activeBorder#82d8d8
  • tab.activeForeground#82d8d8
  • tab.border#191324
  • tab.inactiveBackground#191324
  • tab.inactiveForeground#aaa
  • tab.unfocusedActiveForeground#aaa
  • tab.unfocusedInactiveForeground#aaa
  • terminal.ansiBlack#191324191324
  • terminal.ansiBlue#82d8d8
  • terminal.ansiBrightBlack#0050A4
  • terminal.ansiBrightBlue#82d8d8
  • terminal.ansiBrightCyan#80fcff
  • terminal.ansiBrightGreen#3ad900
  • terminal.ansiBrightMagenta#CF256D
  • terminal.ansiBrightRed#ff628c
  • terminal.ansiBrightWhite#191324
  • terminal.ansiBrightYellow#524763
  • terminal.ansiCyan#80fcff
  • terminal.ansiGreen#3ad900
  • terminal.ansiMagenta#CF256D
  • terminal.ansiRed#ff628c
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#524763
  • terminal.background#191324
  • terminal.foreground#ffffff
  • terminalCursor.background#524763
  • terminalCursor.foreground#524763
  • textBlockQuote.background#191324
  • textBlockQuote.border#82d8d8
  • textCodeBlock.background#191324
  • textLink.activeForeground#82d8d8
  • textLink.foreground#82d8d8
  • textPreformat.foreground#524763
  • textSeparator.foreground#191324
  • titleBar.activeBackground#191324
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#191324
  • titleBar.inactiveForeground#ffffff33
  • walkThrough.embeddedEditorBackground#191324
  • welcomePage.buttonBackground#191324
  • welcomePage.buttonHoverBackground#191324

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#1d292bitalic
constant#ff628c
entity#82d8d8
invalid#800f00
keyword, storage.type.class.js#E54B4B
meta#9effff
meta.brace#9588aa
punctuation#9588aa
punctuation.definition.parameters#CBE56C
punctuation.definition.template-expression#CBE56C
storage#82d8d8
storage.type.function.arrow#82d8d8
string, punctuation.definition.string#CBE56C
string.template, punctuation.definition.string.template#CBE56C
support#CF256D
support.function#ff9d00
support.variable.property.dom#b8b0c6
variable#b8b0c6
source.css entity, source.stylus entity#b8b0c6
entity.other.attribute-name.id.css#82d8d8
entity.name.tag#CF256D
source.css support, source.stylus support#CBE56C
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#82d8d8
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#82d8d8
source.css variable, source.stylus variable#9588aa
text.html.basic entity.name#9588aa
meta.toc-list.id.html#CBE56C
text.html.basic entity.other#b8b0c6italic
meta.tag.metadata.script.html entity.name.tag.html#b8b0c6
punctuation.definition.string.begin, punctuation.definition.string.end#92fc79
source.ini entity#e1efff
source.ini keyword#524763
source.ini punctuation.definition#ffee80
source.ini punctuation.separator#ff9d00
source.js storage.type.function#CF256D
variable.language, entity.name.type.class.js#CF256D
entity.other.inherited-class.js#ccc
variable.parameter.function.language.special.self.python#CF256D
source.json support#b8b0c6
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#E54B4Bbold
meta.paragraph.markdown#e1efff
beginning.punctuation.definition.quote.markdown#524763
markup.quote.markdown meta.paragraph.markdown#9effffitalic
meta.separator.markdown#524763
markup.bold.markdown#9effffbold
markup.italic.markdown#9effffitalic
beginning.punctuation.definition.list.markdown#524763
string.other.link.title.markdown#CBE56C
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown#CBE56C
markup.underline.link.markdown, markup.underline.link.image.markdown#9effff
fenced_code.block.language, markup.inline.raw.markdown#9effff
fenced_code.block.language, markup.inline.raw.markdown#9effff
text.jade entity.name#9effff
text.jade entity.other.attribute-name.tagitalic
text.jade string.interpolated#ffee80
source.ts entity.name.type#80ffbb
source.ts keyword#524763
source.ts punctuation.definition.parameters#e1efff
meta.arrow.ts punctuation.definition.parameters#ffee80
source.ts storage#9effff
source.php entity#9effff
variable.other.php#524763
modifier, this, comment, storage.modifier.js, entity.other.attribute-name.jsitalic

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...