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.activeBackground#110c0c
  • activityBar.background#453b3b
  • activityBar.foreground#cfa9a9
  • activityBar.inactiveForeground#907575
  • activityBarBadge.background#cfa9a9
  • activityBarBadge.foreground#110c0c
  • activityBarTop.activeBackground#110c0c
  • activityBarTop.activeBorder#0000
  • activityBarTop.background#453b3b
  • activityBarTop.foreground#cfa9a9
  • activityBarTop.inactiveForeground#907575
  • badge.background#585162
  • badge.foreground#d0c7dc
  • button.background#453b3b
  • button.foreground#cfa9a9
  • button.secondaryBackground#2b292f
  • descriptionForeground#cfa9a9
  • disabledForeground#907575
  • dropdown.background#453b3b
  • dropdown.border#0000
  • dropdown.foreground#cfa9a9
  • dropdown.listBackground#110c0c
  • editor.background#110c0c
  • editor.findMatchBackground#585162a0
  • editor.findMatchHighlightBackground#58516280
  • editor.findRangeHighlightBackground#0a090ca0
  • editor.foldBackground#453b3b40
  • editor.foreground#cfa9a9
  • editor.hoverHighlightBackground#cfa9a940
  • editor.lineHighlightBackground#90757520
  • editor.selectionBackground#90757550
  • editor.selectionHighlightBackground#90757530
  • editor.wordHighlightBackground#ffe5e520
  • editor.wordHighlightStrongBackground#ffe5e520
  • editorBracketHighlight.foreground1#ffe5e5
  • editorBracketHighlight.foreground2#7f758d
  • editorBracketHighlight.foreground3#d1e9d1
  • editorBracketHighlight.foreground4#907575
  • editorBracketHighlight.foreground5#d0c7dc
  • editorBracketHighlight.foreground6#87a687
  • editorBracketMatch.background#90757540
  • editorBracketMatch.border#0000
  • editorCodeLens.foreground#908975
  • editorGroup.dropBackground#453b3ba0
  • editorGroup.dropIntoPromptBackground#453b3b
  • editorGroup.dropIntoPromptForeground#cfa9a9
  • editorGroupHeader.tabsBackground#110c0c
  • editorGutter.background#90757510
  • editorIndentGuide.activeBackground#907575
  • editorIndentGuide.activeBackground1#907575
  • editorInfo.foreground#907575
  • editorInlayHint.background#90757520
  • editorInlayHint.foreground#907575
  • editorLightBulb.foreground#cfa9a9
  • editorLineNumber.activeForeground#ffe5e5
  • editorLineNumber.foreground#907575
  • editorLink.activeForeground#fff8e5
  • editorMarkerNavigation.background#453b3b
  • editorOverviewRuler.findMatchForeground#585162
  • editorOverviewRuler.selectionHighlightForeground#907575
  • editorPane.background#453b3b
  • editorRuler.foreground#907575a0
  • editorWhitespace.foreground#907575a0
  • editorWidget.background#110c0c
  • editorWidget.resizeBorder#cfa9a9
  • extensionIcon.preReleaseForeground#ffe5e5
  • extensionIcon.sponsorForeground#cfa9a9
  • extensionIcon.starForeground#cfa9a9
  • extensionIcon.verifiedForeground#cfa9a9
  • focusBorder#907575
  • foreground#cfa9a9
  • icon.foreground#cfa9a9
  • input.background#453b3b
  • inputOption.activeBackground#907575
  • inputOption.activeBorder#0000
  • inputOption.activeForeground#ffe5e5
  • inputOption.hoverBackground#90757580
  • keybindingLabel.background#453b3b
  • keybindingLabel.border#0000
  • keybindingLabel.foreground#cfa9a9
  • list.activeSelectionBackground#453b3b
  • list.activeSelectionForeground#cfa9a9
  • list.dropBackground#453b3b80
  • list.focusAndSelectionOutline#0000
  • list.focusBackground#453b3b80
  • list.focusForeground#ffe5e5
  • list.hoverBackground#cfa9a940
  • list.inactiveFocusBackground#453b3b80
  • list.inactiveSelectionBackground#453b3b80
  • menu.background#110c0c
  • menubar.selectionBackground#90757560
  • minimap.background#0a090c
  • minimap.findMatchHighlight#2b292f
  • minimap.selectionHighlight#90757560
  • notificationCenterHeader.background#453b3b
  • panelTitle.activeBorder#0000
  • panelTitle.activeForeground#ffe5e5
  • panelTitle.inactiveForeground#907575
  • peekView.border#907575
  • peekViewEditor.background#110c0c
  • peekViewEditor.matchHighlightBackground#90757550
  • peekViewResult.background#453b3b
  • peekViewResult.fileForeground#ffe5e5
  • peekViewResult.lineForeground#ffe5e5
  • peekViewResult.matchHighlightBackground#cfa9a950
  • peekViewResult.selectionBackground#90757530
  • peekViewTitle.background#453b3b
  • peekViewTitleDescription.foreground#cfa9a9
  • peekViewTitleLabel.foreground#ffe5e5
  • selection.background#90757560
  • settings.headerBorder#453b3b
  • settings.headerForeground#cfa9a9
  • settings.modifiedItemIndicator#cfa9a9
  • settings.sashBorder#cfa9a9
  • sideBar.background#110c0c
  • sideBarSectionHeader.background#453b3b
  • sideBarSectionHeader.foreground#cfa9a9
  • sideBarTitle.foreground#ffe5e5
  • statusBar.background#0a090c
  • statusBar.debuggingBackground#87a687
  • statusBar.debuggingForeground#0a0e0a
  • statusBar.foreground#d0c7dc
  • tab.activeForeground#ffe5e5
  • tab.border#0000
  • tab.hoverBackground#110c0c
  • tab.hoverForeground#cfa9a9
  • tab.inactiveBackground#453b3b
  • tab.inactiveForeground#907575
  • tab.lastPinnedBorder#cfa9a9
  • tab.unfocusedActiveForeground#907575
  • tab.unfocusedInactiveBackground#453b3ba0
  • tab.unfocusedInactiveForeground#907575
  • terminal.ansiBlack#000
  • terminal.ansiBlue#00a
  • terminal.ansiBrightBlack#555
  • terminal.ansiBrightBlue#55f
  • terminal.ansiBrightCyan#5ff
  • terminal.ansiBrightGreen#5f5
  • terminal.ansiBrightMagenta#f5f
  • terminal.ansiBrightRed#f55
  • terminal.ansiBrightWhite#fff
  • terminal.ansiBrightYellow#ff5
  • terminal.ansiCyan#0aa
  • terminal.ansiGreen#0a0
  • terminal.ansiMagenta#a0a
  • terminal.ansiRed#a00
  • terminal.ansiWhite#aaa
  • terminal.ansiYellow#aa0
  • terminal.foreground#cfa9a9
  • textBlockQuote.background#cfa9a910
  • textBlockQuote.border#907575
  • textCodeBlock.background#110c0c
  • textLink.activeForeground#fff8e5
  • textLink.foreground#908975
  • textPreformat.foreground#ffe5e5
  • titleBar.activeBackground#453b3b
  • titleBar.activeForeground#ffe5e5
  • titleBar.inactiveBackground#110c0c
  • titleBar.inactiveForeground#907575

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#907575—
keyword, storage.type, storage.modifier#ffe5e5—
keyword.control, constant.other.color, meta.tag, punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#ffe5e5—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ffe5e5—
meta.attribute#cfa9a9—
string.other.link#908975—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#d0c7dc—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#d0c7dc—
constant.character.escape, constant.other.character-class.regexp#ffe5e5—
*url*, *link*, *uri*—underline
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section#ffe5e5—
markup.italic—italic
markup.bold, markup.bold string—bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string—italic bold
markup.underline—underline
markup.raw.block#d0c7dc—
markup.raw.block.fenced.markdown, markup.fenced_code.block#d0c7dc—
variable.language.fenced.markdown, fenced_code.block.language#d0c7dc—
markup.inline.raw#d0c7dc—
meta.separator#ffe5e5bold
Silver Rainbow by zephyrtronium - VS Code Theme