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#011A13
  • activityBar.foreground#D1D5DB
  • activityBar.inactiveForeground#059669
  • activityBarBadge.background#10B981
  • activityBarBadge.foreground#000000
  • badge.background#10B981
  • badge.foreground#000000
  • button.background#059669
  • button.foreground#FFFFFF
  • button.hoverBackground#047857
  • dropdown.background#064E3B
  • dropdown.border#10B981
  • dropdown.foreground#F3F4F6
  • dropdown.listBackground#064E3B
  • editor.background#022C22
  • editor.findMatchBackground#4C1D9560
  • editor.findMatchHighlightBackground#4C1D9540
  • editor.foreground#E5E7EB
  • editor.lineHighlightBackground#064E3B
  • editor.selectionBackground#10B98130
  • editor.selectionHighlightBackground#34D39930
  • editorBracketMatch.background#10B98140
  • editorBracketMatch.border#34D399
  • editorCursor.foreground#34D399
  • editorGroupHeader.tabsBackground#011A13
  • editorLineNumber.activeForeground#34D399
  • editorLineNumber.foreground#047857
  • editorSuggestWidget.background#064E3B
  • editorSuggestWidget.border#10B981
  • editorSuggestWidget.foreground#F3F4F6
  • editorSuggestWidget.highlightForeground#34D399
  • editorSuggestWidget.selectedBackground#047857
  • input.background#064E3B
  • input.border#10B981
  • input.foreground#F3F4F6
  • input.placeholderForeground#34D399
  • inputOption.activeBorder#34D399
  • list.activeSelectionBackground#047857
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#047857
  • list.focusForeground#FFFFFF
  • list.hoverBackground#064E3B
  • list.hoverForeground#F3F4F6
  • list.inactiveSelectionBackground#064E3B
  • list.inactiveSelectionForeground#F3F4F6
  • menu.background#064E3B
  • menu.border#10B981
  • menu.foreground#F3F4F6
  • menu.selectionBackground#10B981
  • menu.selectionBorder#10B981
  • menu.selectionForeground#000000
  • menubar.selectionBackground#047857
  • menubar.selectionForeground#FFFFFF
  • notificationCenter.border#10B981
  • notificationCenterHeader.background#011A13
  • notificationCenterHeader.foreground#F3F4F6
  • notificationLink.foreground#34D399
  • notifications.background#064E3B
  • notifications.border#10B981
  • notifications.foreground#F3F4F6
  • notificationToast.border#34D399
  • panel.background#022C22
  • panel.border#047857
  • panelTitle.activeBorder#34D399
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#9CA3AF
  • peekView.border#34D399
  • peekViewEditor.background#011A13
  • peekViewResult.background#022C22
  • peekViewTitle.background#011A13
  • quickInput.background#064E3B
  • quickInput.foreground#F3F4F6
  • quickInputList.focusBackground#047857
  • quickInputTitle.background#011A13
  • scrollbarSlider.activeBackground#34D39980
  • scrollbarSlider.background#04785780
  • scrollbarSlider.hoverBackground#10B98180
  • sideBar.background#011A13
  • sideBar.foreground#D1D5DB
  • sideBarSectionHeader.background#022C22
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#011A13
  • statusBar.debuggingBackground#059669
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#D1D5DB
  • statusBar.noFolderBackground#011A13
  • statusBarItem.hoverBackground#047857
  • tab.activeBackground#022C22
  • tab.activeBorderTop#34D399
  • tab.activeForeground#FFFFFF
  • tab.border#011A13
  • tab.inactiveBackground#011A13
  • tab.inactiveForeground#9CA3AF
  • terminal.background#022C22
  • terminal.foreground#E5E7EB
  • titleBar.activeBackground#011A13
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#011A13
  • titleBar.inactiveForeground#9CA3AF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9CA3AFitalic
string, punctuation.definition.string#6EE7B7
keyword, storage.type, storage.modifier#94A3B8
entity.name.function, meta.function-call, support.function#34D399bold
variable, meta.definition.variable.name, support.variable#F3F4F6
constant, variable.other.constant#8B5CF6
constant.numeric#E2E8F0
keyword.operator#A7F3D0
entity.name.type, entity.name.class, support.type, support.class#F8FAFC
Anime Theme Collection by Shams - VS Code Theme