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.background#06101e
  • activityBar.foreground#d4a73a
  • activityBar.inactiveForeground#3a5070
  • activityBarBadge.background#d4a73a
  • activityBarBadge.foreground#0a1628
  • badge.background#d4a73a
  • badge.foreground#0a1628
  • button.background#d4a73a
  • button.foreground#0a1628
  • button.hoverBackground#e0b844
  • dropdown.background#0f1f3a
  • dropdown.border#1e3a5f
  • dropdown.foreground#c8d6e5
  • editor.background#0a1628
  • editor.findMatchBackground#d4a73a44
  • editor.findMatchHighlightBackground#d4a73a22
  • editor.foreground#c8d6e5
  • editor.inactiveSelectionBackground#1e3a5f44
  • editor.lineHighlightBackground#0f1f3a
  • editor.selectionBackground#1e3a5f88
  • editor.wordHighlightBackground#1e3a5f55
  • editor.wordHighlightStrongBackground#1e3a5f88
  • editorBracketMatch.background#d4a73a22
  • editorBracketMatch.border#d4a73a88
  • editorCursor.foreground#d4a73a
  • editorGroupHeader.tabsBackground#081020
  • editorGutter.addedBackground#00c853
  • editorGutter.deletedBackground#e83e8c
  • editorGutter.modifiedBackground#007bff
  • editorIndentGuide.activeBackground#1e3a5f88
  • editorIndentGuide.background#1e3a5f33
  • editorLineNumber.activeForeground#d4a73a
  • editorLineNumber.foreground#3a5070
  • editorWhitespace.foreground#1e3a5f44
  • focusBorder#d4a73a88
  • gitDecoration.addedResourceForeground#00c853
  • gitDecoration.deletedResourceForeground#e83e8c
  • gitDecoration.ignoredResourceForeground#3a5070
  • gitDecoration.modifiedResourceForeground#007bff
  • gitDecoration.untrackedResourceForeground#069494
  • input.background#0f1f3a
  • input.border#1e3a5f
  • input.foreground#c8d6e5
  • input.placeholderForeground#3a5070
  • inputOption.activeBorder#d4a73a
  • list.activeSelectionBackground#1e3a5f
  • list.activeSelectionForeground#d4a73a
  • list.focusBackground#1e3a5f
  • list.highlightForeground#d4a73a
  • list.hoverBackground#0f1f3a
  • minimap.findMatchHighlight#d4a73a88
  • minimap.selectionHighlight#1e3a5f88
  • notification.background#0f1f3a
  • notification.foreground#c8d6e5
  • panel.background#081020
  • panel.border#1e3a5f44
  • panelTitle.activeBorder#d4a73a
  • panelTitle.activeForeground#c8d6e5
  • panelTitle.inactiveForeground#5a7a9a
  • peekView.border#d4a73a
  • peekViewEditor.background#0f1f3a
  • peekViewResult.background#081020
  • peekViewTitle.background#0a1628
  • progressBar.background#d4a73a
  • scrollbarSlider.activeBackground#1e3a5fcc
  • scrollbarSlider.background#1e3a5f44
  • scrollbarSlider.hoverBackground#1e3a5f88
  • sideBar.background#081020
  • sideBar.foreground#8a9ab0
  • sideBarSectionHeader.background#0a1628
  • sideBarSectionHeader.foreground#c8d6e5
  • sideBarTitle.foreground#d4a73a
  • statusBar.background#06101e
  • statusBar.debuggingBackground#d4a73a
  • statusBar.debuggingForeground#0a1628
  • statusBar.foreground#5a7a9a
  • statusBar.noFolderBackground#0a1628
  • tab.activeBackground#0a1628
  • tab.activeBorderTop#d4a73a
  • tab.activeForeground#d4a73a
  • tab.border#06101e
  • tab.inactiveBackground#081020
  • tab.inactiveForeground#5a7a9a
  • terminal.ansiBlack#0a1628
  • terminal.ansiBlue#007bff
  • terminal.ansiBrightBlack#3a5070
  • terminal.ansiBrightBlue#64b5f6
  • terminal.ansiBrightCyan#80cbc4
  • terminal.ansiBrightGreen#69f0ae
  • terminal.ansiBrightMagenta#b388ff
  • terminal.ansiBrightRed#f06292
  • terminal.ansiBrightWhite#ecf0f1
  • terminal.ansiBrightYellow#ffe082
  • terminal.ansiCyan#069494
  • terminal.ansiGreen#00c853
  • terminal.ansiMagenta#9146ff
  • terminal.ansiRed#e83e8c
  • terminal.ansiWhite#c8d6e5
  • terminal.ansiYellow#d4a73a
  • terminal.background#081020
  • terminal.foreground#c8d6e5
  • titleBar.activeBackground#06101e
  • titleBar.activeForeground#c8d6e5
  • titleBar.inactiveBackground#06101e
  • titleBar.inactiveForeground#5a7a9a
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3a5070italic
string, string.quoted#069494
constant.numeric#f7931a
constant.language#e83e8c
constant.character, constant.other#f7931a
keyword, storage.type, storage.modifier#e83e8c
keyword.operator#d4a73a
entity.name.function, meta.function-call, support.function#007bff
entity.name.type, entity.name.class, support.class#d4a73a
variable, variable.other#c8d6e5
variable.parameter#f7931aitalic
variable.other.property, support.type.property-name#64b5f6
entity.name.tag#e83e8c
entity.other.attribute-name#d4a73aitalic
punctuation.definition.tag#5a7a9a
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#d4a73a
support.type.property-name.css#64b5f6
support.constant.property-value.css#069494
string.regexp#00c853
constant.character.escape#f7931a
meta.embedded#c8d6e5
markup.heading, entity.name.section#d4a73abold
markup.bold#f7931abold
markup.italic#9146ffitalic
markup.underline.link#007bff
markup.inline.raw, markup.fenced_code.block#069494
support.type.property-name.json#d4a73a
meta.decorator#9146ff
meta.type.annotation, support.type#069494
invalid#ff6b6bunderline
DropThe Dark by PackDataAnalyst - VS Code Theme