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#010717
  • activityBar.foreground#1984ca
  • activityBar.inactiveForeground#3a5380
  • activityBarBadge.background#0050cd
  • activityBarBadge.foreground#ffffff
  • badge.background#0050cd
  • badge.foreground#ffffff
  • button.background#0050cd
  • button.foreground#ffffff
  • button.hoverBackground#1984ca
  • descriptionForeground#8fa3c9
  • dropdown.background#0a142b
  • dropdown.border#1d2c4f
  • editor.background#020818
  • editor.foreground#d6e2f5
  • editor.inactiveSelectionBackground#0050cd26
  • editor.lineHighlightBackground#0a142b
  • editor.lineHighlightBorder#0a142b
  • editor.selectionBackground#0050cd4d
  • editorBracketMatch.background#0050cd33
  • editorBracketMatch.border#1984ca
  • editorCursor.foreground#1984ca
  • editorGroupHeader.tabsBackground#010717
  • editorGutter.addedBackground#3fb950
  • editorGutter.deletedBackground#ff6b6b
  • editorGutter.modifiedBackground#0050cd
  • editorIndentGuide.activeBackground1#1984ca66
  • editorIndentGuide.background1#13203d
  • editorLineNumber.activeForeground#1984ca
  • editorLineNumber.foreground#2b4068
  • editorWhitespace.foreground#1d2c4f
  • errorForeground#ff6b6b
  • extensionButton.prominentBackground#0050cd
  • extensionButton.prominentHoverBackground#1984ca
  • focusBorder#0050cd
  • foreground#c7d6f0
  • input.background#0a142b
  • input.border#1d2c4f
  • input.foreground#d6e2f5
  • list.activeSelectionBackground#0050cd33
  • list.activeSelectionForeground#ffffff
  • list.highlightForeground#1984ca
  • list.hoverBackground#0a142b
  • list.inactiveSelectionBackground#0a142b
  • minimap.background#020818
  • panel.background#03091a
  • panel.border#0d1730
  • panelTitle.activeBorder#1984ca
  • panelTitle.activeForeground#c7d6f0
  • peekView.border#1984ca
  • peekViewEditor.background#03091a
  • peekViewResult.background#020818
  • scrollbarSlider.activeBackground#1984ca99
  • scrollbarSlider.background#1d2c4f80
  • scrollbarSlider.hoverBackground#0050cd80
  • selection.background#0050cd66
  • sideBar.background#03091a
  • sideBar.border#0d1730
  • sideBar.foreground#9fb3d9
  • sideBarSectionHeader.background#03091a
  • sideBarTitle.foreground#c7d6f0
  • statusBar.background#0050cd
  • statusBar.debuggingBackground#1984ca
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#002367
  • statusBarItem.hoverBackground#1984ca
  • tab.activeBackground#0a142b
  • tab.activeBorderTop#1984ca
  • tab.activeForeground#ffffff
  • tab.border#03091a
  • tab.inactiveBackground#03091a
  • tab.inactiveForeground#5a72a0
  • terminal.ansiBlue#1984ca
  • terminal.ansiCyan#3fc6e0
  • terminal.ansiGreen#3fb950
  • terminal.ansiMagenta#c77dff
  • terminal.ansiRed#ff6b6b
  • terminal.ansiYellow#e3c567
  • terminal.background#020818
  • terminal.foreground#d6e2f5
  • titleBar.activeBackground#010717
  • titleBar.activeForeground#c7d6f0
  • titleBar.inactiveBackground#010717
  • titleBar.inactiveForeground#5a72a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d6e2f5
comment, punctuation.definition.comment#4d6691italic
string, string.quoted#7fd9c4
constant.numeric, constant.language, constant.character#e3c567
keyword, storage.type, storage.modifier, keyword.control#1984cabold
entity.name.function, support.function#6db3ff
entity.name.class, entity.name.type, support.class, support.type#3fc6e0bold
variable, variable.parameter#c7d6f0
variable.other.property, variable.other.object.property#9fc9ff
entity.name.tag#1984ca
entity.other.attribute-name#6db3ff
punctuation, meta.brace#8fa3c9
markup.heading#1984cabold
markup.bold#ffffffbold
350 Dragon — Theme & Flutter Snippets by Rafa danzo - VS Code Theme