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.background#090d12
  • activityBar.foreground#9aa7b5
  • activityBar.inactiveForeground#3d4654
  • activityBarBadge.background#00bcc8
  • activityBarBadge.foreground#0d1117
  • badge.background#d0ff00
  • badge.foreground#06181a
  • button.background#00bcc8
  • button.foreground#06181a
  • button.hoverBackground#23d1dc
  • dropdown.background#161c24
  • dropdown.border#2c3644
  • editor.background#0d1117
  • editor.findMatchBackground#d0ff0055
  • editor.findMatchHighlightBackground#d0ff0033
  • editor.foreground#dde3ea
  • editor.lineHighlightBackground#161c24
  • editor.selectionBackground#00bcc83a
  • editor.selectionHighlightBackground#00bcc822
  • editorCursor.foreground#d0ff00
  • editorGroup.border#1a212b
  • editorGroupHeader.tabsBackground#090d12
  • editorIndentGuide.activeBackground#2c3644
  • editorIndentGuide.background#1a212b
  • editorLineNumber.activeForeground#00bcc8
  • editorLineNumber.foreground#3d4654
  • editorSuggestWidget.background#11161d
  • editorSuggestWidget.highlightForeground#d0ff00
  • editorSuggestWidget.selectedBackground#1a212b
  • editorWhitespace.foreground#202833
  • editorWidget.background#11161d
  • focusBorder#00bcc8
  • gitDecoration.addedResourceForeground#d0ff00
  • gitDecoration.deletedResourceForeground#ff5d62
  • gitDecoration.modifiedResourceForeground#ffd866
  • gitDecoration.untrackedResourceForeground#00bcc8
  • input.background#161c24
  • input.border#2c3644
  • input.foreground#dde3ea
  • inputOption.activeBorder#00bcc8
  • list.activeSelectionBackground#1a212b
  • list.activeSelectionForeground#dde3ea
  • list.hoverBackground#11161d
  • list.inactiveSelectionBackground#11161d
  • panel.background#090d12
  • panel.border#1a212b
  • panelTitle.activeBorder#00bcc8
  • panelTitle.activeForeground#dde3ea
  • panelTitle.inactiveForeground#3d4654
  • peekViewEditor.background#0d1117
  • peekViewResult.background#090d12
  • scrollbarSlider.activeBackground#3d4654
  • scrollbarSlider.background#2c364466
  • scrollbarSlider.hoverBackground#2c3644aa
  • sideBar.background#090d12
  • sideBar.foreground#9aa7b5
  • sideBarSectionHeader.background#0d1117
  • sideBarTitle.foreground#dde3ea
  • statusBar.background#00bcc8
  • statusBar.debuggingBackground#d0ff00
  • statusBar.debuggingForeground#06181a
  • statusBar.foreground#06181a
  • statusBar.noFolderBackground#090d12
  • tab.activeBackground#0d1117
  • tab.activeBorderTop#00bcc8
  • tab.activeForeground#dde3ea
  • tab.border#090d12
  • tab.inactiveBackground#090d12
  • tab.inactiveForeground#3d4654
  • terminal.ansiBlue#00bcc8
  • terminal.ansiCyan#5fe3ec
  • terminal.ansiGreen#d0ff00
  • terminal.ansiMagenta#ff6ec7
  • terminal.ansiRed#ff5d62
  • terminal.ansiYellow#ffd866
  • terminal.background#0d1117
  • terminal.foreground#dde3ea
  • titleBar.activeBackground#090d12
  • titleBar.activeForeground#dde3ea
  • titleBar.inactiveBackground#090d12
  • titleBar.inactiveForeground#3d4654
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#566273italic
string, string.quoted#d0ff00
constant.numeric, constant.language, constant.character#ff9e64
keyword, storage.type, storage.modifier#00bcc8italic
entity.name.function, support.function#5fe3ec
entity.name.class, entity.name.type, support.class#d0ff00bold
variable, variable.parameter#dde3ea
variable.other.property, variable.other.object.property#9aa7b5
entity.other.attribute-name, entity.name.tag#ff6ec7
punctuation, meta.brace#6b7787
markup.bold#d0ff00bold
markup.italic#00bcc8italic
markup.heading#00bcc8bold
Galaxy Themes HD by hmdalvin - VS Code Theme