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#00274C
  • activityBar.border#001B33
  • activityBar.foreground#FFCB05
  • activityBar.inactiveForeground#7A9CBF
  • activityBarBadge.background#FFCB05
  • activityBarBadge.foreground#00274C
  • badge.background#FFCB05
  • badge.foreground#00274C
  • button.background#FFCB05
  • button.foreground#00274C
  • button.hoverBackground#E6B800
  • editor.background#1A3350
  • editor.foreground#F0F4F8
  • editor.inactiveSelectionBackground#FFCB0535
  • editor.lineHighlightBackground#24466580
  • editor.selectionBackground#FFCB0560
  • editorCursor.foreground#FFCB05
  • editorGroupHeader.tabsBackground#001428
  • editorIndentGuide.activeBackground#FFCB05
  • editorIndentGuide.background#2E5271
  • editorLineNumber.activeForeground#FFCB05
  • editorLineNumber.foreground#6E8CA8
  • editorSuggestWidget.background#001B33
  • editorSuggestWidget.highlightForeground#FFCB05
  • editorSuggestWidget.selectedBackground#00396B
  • editorWhitespace.foreground#3D5F80
  • editorWidget.background#001B33
  • focusBorder#FFCB05
  • gitDecoration.addedResourceForeground#6FCF97
  • gitDecoration.deletedResourceForeground#EB5757
  • gitDecoration.modifiedResourceForeground#FFCB05
  • input.background#001B33
  • input.border#00396B
  • input.foreground#E8EEF5
  • inputOption.activeBorder#FFCB05
  • list.activeSelectionBackground#00396B
  • list.activeSelectionForeground#FFCB05
  • list.highlightForeground#FFCB05
  • list.hoverBackground#00274C
  • list.inactiveSelectionBackground#001B33
  • minimap.background#1A3350
  • minimapSlider.background#FFCB0530
  • panel.background#0A1D33
  • panel.border#001B33
  • panelTitle.activeBorder#FFCB05
  • panelTitle.activeForeground#FFCB05
  • panelTitle.inactiveForeground#7A9CBF
  • scrollbarSlider.activeBackground#FFCB05A0
  • scrollbarSlider.background#00396B80
  • scrollbarSlider.hoverBackground#00396BB0
  • sideBar.background#0A1D33
  • sideBar.border#001B33
  • sideBar.foreground#D6E4F0
  • sideBarSectionHeader.background#00274C
  • sideBarSectionHeader.foreground#FFCB05
  • sideBarTitle.foreground#FFCB05
  • statusBar.background#00274C
  • statusBar.border#001B33
  • statusBar.debuggingBackground#FFCB05
  • statusBar.debuggingForeground#00274C
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#00274C
  • statusBarItem.hoverBackground#00396B
  • statusBarItem.remoteBackground#FFCB05
  • statusBarItem.remoteForeground#00274C
  • tab.activeBackground#00396B
  • tab.activeBorderTop#FFCB05
  • tab.activeForeground#FFCB05
  • tab.border#001428
  • tab.inactiveBackground#001B33
  • tab.inactiveForeground#7A9CBF
  • terminal.ansiBlue#4C8CBF
  • terminal.ansiYellow#FFCB05
  • terminal.background#0A1D33
  • terminal.foreground#E8EEF5
  • titleBar.activeBackground#00274C
  • titleBar.activeForeground#FFCB05
  • titleBar.inactiveBackground#001B33
  • titleBar.inactiveForeground#7A9CBF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6E89A3italic
keyword, storage.type, storage.modifier#FFCB05
keyword.control#FF9166bold
string, string.quoted#9FD8A0
constant.numeric#7EC8E3
constant.language, constant.character#C792EA
entity.name.function, support.function#6FB3FF
entity.name.class, entity.name.type, support.class#4FD6C4bold
entity.name.tag#6FB3FF
entity.other.attribute-name#82D9D9
variable, variable.parameter#F0F4F8
variable.other.constant#FFCB05
punctuation, meta.brace#8AA6C1
support.type.property-name, meta.object-literal.key#FFAB91
invalid#EB5757
markup.bold#FFCB05bold
markup.italicitalic
markup.heading#FFCB05bold