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#10141d
  • activityBar.foreground#ccd8e6
  • activityBar.inactiveForeground#6c7b91
  • activityBarBadge.background#4ba08d
  • activityBarBadge.foreground#ffffff
  • dropdown.background#1b2330
  • dropdown.border#2c3b55
  • dropdown.foreground#d3dae2
  • editor.background#0f1117
  • editor.foreground#d9dee6
  • editor.inactiveSelectionBackground#1b2433
  • editor.lineHighlightBackground#263c5c
  • editor.selectionBackground#243142
  • editorCursor.foreground#d65b6f
  • editorGroupHeader.tabsBackground#10141c
  • editorLineNumber.activeForeground#5fb4a2
  • editorLineNumber.foreground#3f4651
  • input.background#1b2330
  • input.border#2a3b4d
  • input.foreground#d3dae2
  • input.placeholderForeground#7a8597
  • inputOption.activeBackground#325464
  • inputOption.activeBorder#4ba08d
  • list.activeSelectionBackground#28414d
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#d65b6f
  • list.focusBackground#325464
  • list.hoverBackground#223540
  • list.hoverForeground#d3dae2
  • list.inactiveSelectionBackground#1a2c34
  • list.warningForeground#d4a96c
  • notificationCenter.border#2c3b55
  • notificationCenterHeader.background#1e283c
  • notifications.background#182030
  • notifications.foreground#d3dae2
  • notificationToast.border#2c3b55
  • panel.background#0c1417
  • panel.border#213235
  • panelTitle.activeBorder#4ba08d
  • panelTitle.activeForeground#dde3ea
  • panelTitle.inactiveForeground#7a8290
  • scrollbarSlider.activeBackground#4ba08daa
  • scrollbarSlider.background#304252aa
  • scrollbarSlider.hoverBackground#40607baa
  • sideBar.background#141821
  • sideBar.border#1e2533
  • sideBar.foreground#c2c7d0
  • sideBarSectionHeader.background#1b1f29
  • sideBarSectionHeader.foreground#9aa2ad
  • sideBarTitle.foreground#d6dce4
  • statusBar.background#162032
  • statusBar.border#24334f
  • statusBar.debuggingBackground#d07c60
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#d3dae2
  • statusBar.noFolderBackground#2a3450
  • tab.activeBackground#1b2736
  • tab.activeForeground#e6eaf0
  • tab.border#242c3a
  • tab.hoverBackground#223043
  • tab.inactiveBackground#151a23
  • tab.inactiveForeground#7a8290
  • terminal.ansiBlack#10141d
  • terminal.ansiBlue#6a8dbf
  • terminal.ansiBrightBlack#2a323d
  • terminal.ansiBrightBlue#7b9fd0
  • terminal.ansiBrightCyan#66c1b2
  • terminal.ansiBrightGreen#5fbf98
  • terminal.ansiBrightMagenta#b58ae0
  • terminal.ansiBrightRed#e06c75
  • terminal.ansiBrightWhite#e6eaf0
  • terminal.ansiBrightYellow#dfb56c
  • terminal.ansiCyan#5fb4a2
  • terminal.ansiGreen#4ba08d
  • terminal.ansiMagenta#a77dd4
  • terminal.ansiRed#d65b6f
  • terminal.ansiWhite#d9dee6
  • terminal.ansiYellow#d4a96c
  • terminal.background#0c1417
  • terminal.foreground#d3dae2
  • terminalCursor.foreground#4ba08d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5c7a99italic
variable.language.this#e28f3fbold
variable.language.super#d07c60italic
variable.language, support.variable#6a8dbf
variable.other.property#5fb4a2
variable.other.readwrite, variable#9ab468
entity.name.function, meta.function-call#6a8dbf
entity.name.type, support.type, storage.type.class#a77dd4
entity.name.namespace, entity.name.module#6a8dbf
entity.name.tag#6a8dbf
entity.name.attribute#a77dd4
entity.other.inherited-class#d07c60
string, constant.other.symbol, constant.character#d4a96c
string.regexp#8fbf7f
constant.numeric, constant.language.boolean#d65b6f
constant.language.null, constant.language.undefined#e28f3f
constant.other#d07c60
keyword, storage.type, storage.modifier#a77dd4bold
keyword.control#d07c60
keyword.operator#66c1b2
keyword.other.using, keyword.other.package#d4a96c
meta.import, keyword.control.import#d07c60
punctuation.definition.string, punctuation.definition.parameters#cdd6df
punctuation.separator, punctuation.terminator#d9dee6
punctuation.section.embedded#d07c60
support.function, support.constant#6a8dbf
support.class, support.type#a77dd4
support.variable.property#5fb4a2
meta.template.expression#a77dd4
markup.heading, markup.heading entity.name#6a8dbfbold
markup.bold#d07c60bold
markup.italic#a77dd4italic
markup.inserted#8fbf7f
markup.deleted#d65b6f
markup.changed#6a8dbf
invalid, invalid.deprecated#ffffff
Aurora Nightfall by Subin Abraham - VS Code Theme