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#051336
  • badge.background#0063a5
  • button.background#2B3C5D
  • debugExceptionWidget.background#051336
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#051336
  • diffEditor.insertedTextBackground#31958A55
  • diffEditor.removedTextBackground#892F4688
  • dropdown.background#181f2f
  • editor.background#00001f
  • editor.findMatchHighlightBackground#def9665f
  • editor.foreground#fff
  • editor.lineHighlightBackground#000d27
  • editor.selectionBackground#08771a57
  • editorCursor.foreground#ddbb88
  • editorGroup.background#1c1c2a
  • editorGroup.border#2b2b4a
  • editorGroup.dropBackground#25375daa
  • editorGroupHeader.tabsBackground#1c1c2a
  • editorHoverWidget.background#000c38
  • editorHoverWidget.border#004c18
  • editorIndentGuide.background#001325
  • editorLineNumber.foreground#406385
  • editorLink.activeForeground#0063a5
  • editorMarkerNavigation.background#060621
  • editorMarkerNavigationError.background#AB395B
  • editorMarkerNavigationWarning.background#5B7E7A
  • editorWhitespace.foreground#103050
  • editorWidget.background#262641
  • extensionButton.prominentBackground#5f8b3b
  • extensionButton.prominentHoverBackground#5f8b3bbb
  • focusBorder#596F99
  • foreground#fff
  • input.background#181f2f
  • inputOption.activeBorder#1D4A87
  • inputValidation.errorBackground#A22D44
  • inputValidation.errorBorder#AB395B
  • inputValidation.infoBackground#051336
  • inputValidation.infoBorder#384078
  • inputValidation.warningBackground#5B7E7A
  • inputValidation.warningBorder#5B7E7A
  • list.activeSelectionBackground#08286b
  • list.dropBackground#041D52
  • list.focusBackground#08286b
  • list.highlightForeground#0063a5
  • list.hoverBackground#061940
  • list.inactiveSelectionBackground#152037
  • notification.background#182543
  • panel.border#2b2b4a
  • peekView.border#2b2b4a
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#eeeeee33
  • peekViewResult.background#060621
  • peekViewResult.matchHighlightBackground#eeeeee44
  • peekViewTitle.background#10192c
  • pickerGroup.border#596F99
  • pickerGroup.foreground#596F99
  • progressBar.background#0063a5
  • scrollbar.shadow#515E91AA
  • scrollbarSlider.activeBackground#3B3F5188
  • scrollbarSlider.background#1F2230AA
  • scrollbarSlider.hoverBackground#3B3F5188
  • sideBar.background#060621
  • sideBarSectionHeader.background#10192c
  • statusBar.background#10192c
  • statusBar.debuggingBackground#10192c
  • statusBar.noFolderBackground#10192c
  • statusBarItem.prominentBackground#0063a5
  • statusBarItem.prominentHoverBackground#0063a5dd
  • tab.border#2b2b4a
  • tab.inactiveBackground#10192c
  • terminal.ansiBlack#464646
  • terminal.ansiBlue#bbdaff
  • terminal.ansiBrightBlack#827a7a
  • terminal.ansiBrightBlue#80baff
  • terminal.ansiBrightCyan#78ffff
  • terminal.ansiBrightGreen#b8f171
  • terminal.ansiBrightMagenta#d778ff
  • terminal.ansiBrightRed#8c232a
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe580
  • terminal.ansiCyan#99ffff
  • terminal.ansiGreen#d1f1a9
  • terminal.ansiMagenta#ebbbff
  • terminal.ansiRed#a0222a
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#ffeead
  • titleBar.activeBackground#10192c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#fffnormal
meta.embedded, source.groovy.embedded#83acffnormal
comment#666normal
string#77FB00normal
constant.numeric#FF2E33normal
constant.language#f280d0normal
constant.character, constant.other#f280d0normal
variable#fffnormal
keyword#fa6bc3normal
storage#FFA54Dnormal
storage.type#ff9328normal
entity.name.class, entity.name.type#ff482fnormal
entity.other.inherited-class#ddbb88normal
entity.name.function#11FFFAnormal
variable.parameter#fffnormal
entity.name.tag#ff9271normal
entity.other.attribute-name#51ffc5normal
support.function#d9ff32normal
support.constant#eafd41normal
support.type, support.class#57a5ffnormal
support.other.variable#1ec3ffnormal
invalid#F8F8F0normal
invalid.deprecated#F8F8F0normal
meta.diff, meta.diff.header#E0EDDDnormal
markup.deleted#dc322fnormal
markup.changed#cb4b16normal
markup.inserted#219186normal
markup.quote#22aa44normal
markup.bold, markup.normal#22aa44normal
markup.inline.raw#9966b8normal
markup.heading.setext#ddbb88normal

Shiki preview

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

Loading...

Dark Blue Spring - Coding Theme