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#050F08
  • activityBar.foreground#D4D4D8
  • activityBar.inactiveForeground#166534
  • activityBarBadge.background#10B981
  • activityBarBadge.foreground#000000
  • badge.background#10B981
  • badge.foreground#000000
  • button.background#166534
  • button.foreground#FFFFFF
  • button.hoverBackground#14532D
  • dropdown.background#0A1C12
  • dropdown.border#166534
  • dropdown.foreground#F0FDF4
  • dropdown.listBackground#0A1C12
  • editor.background#1C1917
  • editor.findMatchBackground#FBBF2460
  • editor.findMatchHighlightBackground#FBBF2440
  • editor.foreground#E2E8F0
  • editor.lineHighlightBackground#292524
  • editor.selectionBackground#16653440
  • editor.selectionHighlightBackground#16653430
  • editorBracketMatch.background#16653440
  • editorBracketMatch.border#166534
  • editorCursor.foreground#10B981
  • editorGroupHeader.tabsBackground#050F08
  • editorLineNumber.activeForeground#10B981
  • editorLineNumber.foreground#44403C
  • editorSuggestWidget.background#0A1C12
  • editorSuggestWidget.border#166534
  • editorSuggestWidget.foreground#F0FDF4
  • editorSuggestWidget.highlightForeground#FBBF24
  • editorSuggestWidget.selectedBackground#14532D
  • input.background#0A1C12
  • input.border#166534
  • input.foreground#F0FDF4
  • input.placeholderForeground#14532D
  • inputOption.activeBorder#FBBF24
  • list.activeSelectionBackground#14532D
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#14532D
  • list.focusForeground#FFFFFF
  • list.hoverBackground#0A1C12
  • list.hoverForeground#F0FDF4
  • list.inactiveSelectionBackground#0A1C12
  • list.inactiveSelectionForeground#F0FDF4
  • menu.background#0A1C12
  • menu.border#166534
  • menu.foreground#F0FDF4
  • menu.selectionBackground#166534
  • menu.selectionBorder#166534
  • menu.selectionForeground#FFFFFF
  • menubar.selectionBackground#14532D
  • menubar.selectionForeground#FFFFFF
  • notificationCenter.border#166534
  • notificationCenterHeader.background#050F08
  • notificationCenterHeader.foreground#F0FDF4
  • notificationLink.foreground#10B981
  • notifications.background#0A1C12
  • notifications.border#166534
  • notifications.foreground#F0FDF4
  • notificationToast.border#166534
  • panel.background#1C1917
  • panel.border#292524
  • panelTitle.activeBorder#10B981
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#44403C
  • peekView.border#166534
  • peekViewEditor.background#050F08
  • peekViewResult.background#1C1917
  • peekViewTitle.background#050F08
  • quickInput.background#0A1C12
  • quickInput.foreground#F0FDF4
  • quickInputList.focusBackground#14532D
  • quickInputTitle.background#050F08
  • scrollbarSlider.activeBackground#16653480
  • scrollbarSlider.background#29252480
  • scrollbarSlider.hoverBackground#44403C80
  • sideBar.background#050F08
  • sideBar.foreground#D4D4D8
  • sideBarSectionHeader.background#1C1917
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#050F08
  • statusBar.debuggingBackground#10B981
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#D4D4D8
  • statusBar.noFolderBackground#050F08
  • statusBarItem.hoverBackground#14532D
  • tab.activeBackground#1C1917
  • tab.activeBorderTop#10B981
  • tab.activeForeground#FFFFFF
  • tab.border#050F08
  • tab.inactiveBackground#050F08
  • tab.inactiveForeground#78716C
  • terminal.background#1C1917
  • terminal.foreground#E2E8F0
  • titleBar.activeBackground#050F08
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#050F08
  • titleBar.inactiveForeground#78716C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#78716Citalic
string, punctuation.definition.string#FBBF24
keyword, storage.type, storage.modifier#10B981
entity.name.function, meta.function-call, support.function#34D399bold
variable, meta.definition.variable.name, support.variable#E2E8F0
constant, variable.other.constant#F43F5E
constant.numeric#D4D4D8
keyword.operator#16A34A
entity.name.type, entity.name.class, support.type, support.class#A7F3D0
Anime Theme Collection by Shams - VS Code Theme