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.activeBorder#FFB400
  • activityBar.background#1B1F3B
  • activityBar.foreground#FFB400
  • activityBarBadge.background#FFB400
  • activityBarBadge.foreground#1B1F3B
  • badge.background#FFB400
  • badge.foreground#1B1F3B
  • button.background#3A5FCD
  • button.foreground#E2E2E2
  • button.hoverBackground#3A5FCD99
  • dropdown.background#1B1F3B
  • dropdown.border#3A5FCD
  • dropdown.foreground#E2E2E2
  • editor.background#1B1F3B
  • editor.findMatchBackground#FFB40044
  • editor.findMatchHighlightBackground#FFB40022
  • editor.foreground#E2E2E2
  • editor.lineHighlightBackground#3A5FCD40
  • editor.lineHighlightBorder#3A5FCD80
  • editor.selectionBackground#FFB40040
  • editor.selectionHighlightBackground#FFB40033
  • editorBracketMatch.background#FFB40033
  • editorBracketMatch.border#FFB400
  • editorCursor.foreground#FFB400
  • editorGroupHeader.tabsBackground#1B1F3B
  • editorIndentGuide.activeBackground#77777788
  • editorIndentGuide.background#77777744
  • editorLineNumber.activeForeground#FFB400
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#777777
  • focusBorder#FFB400
  • gitDecoration.conflictingResourceForeground#FFB400
  • gitDecoration.deletedResourceForeground#FF6F6F
  • gitDecoration.modifiedResourceForeground#FFB400
  • gitDecoration.untrackedResourceForeground#6FD3F7
  • input.background#1B1F3B
  • input.border#3A5FCD
  • input.foreground#E2E2E2
  • input.placeholderForeground#777777
  • inputOption.activeBorder#FFB400
  • list.activeSelectionBackground#3A5FCD
  • list.activeSelectionForeground#E2E2E2
  • list.focusBackground#3A5FCD
  • list.highlightForeground#FFB400
  • list.hoverBackground#3A5FCD66
  • minimap.background#1B1F3B
  • minimapSlider.activeBackground#FFB40066
  • minimapSlider.background#FFB40022
  • minimapSlider.hoverBackground#FFB40044
  • panel.background#1B1F3B
  • panel.border#3A5FCD
  • panelTitle.activeBorder#FFB400
  • panelTitle.activeForeground#FFB400
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FFB40088
  • scrollbarSlider.background#77777744
  • scrollbarSlider.hoverBackground#77777788
  • sideBar.background#1B1F3B
  • sideBar.foreground#E2E2E2
  • sideBarSectionHeader.background#1B1F3B
  • sideBarSectionHeader.foreground#FFB400
  • sideBarTitle.foreground#FFB400
  • statusBar.background#3A5FCD
  • statusBar.debuggingBackground#FFB400
  • statusBar.foreground#E2E2E2
  • statusBar.noFolderBackground#3A5FCD
  • statusBarItem.hoverBackground#FFB40088
  • tab.activeBackground#3A5FCD
  • tab.activeBorder#FFB400
  • tab.activeForeground#E2E2E2
  • tab.border#1B1F3B
  • tab.inactiveBackground#1B1F3B
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#3A5FCD
  • terminal.ansiBrightBlue#5A78F0
  • terminal.ansiBrightCyan#84E1FF
  • terminal.ansiBrightGreen#C9FF9E
  • terminal.ansiBrightMagenta#E6A6FF
  • terminal.ansiBrightRed#FF9A9A
  • terminal.ansiBrightYellow#FFE080
  • terminal.ansiCyan#6FD3F7
  • terminal.ansiGreen#A8E68C
  • terminal.ansiMagenta#D982FF
  • terminal.ansiRed#FF6F6F
  • terminal.ansiYellow#FFB400
  • terminal.background#1B1F3B
  • terminal.foreground#E2E2E2
  • titleBar.activeBackground#1B1F3B
  • titleBar.activeForeground#E2E2E2
  • titleBar.inactiveBackground#1B1F3B
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#6FD3F7
keyword, storage.type, storage.modifier#FFB400bold
keyword.operator, punctuation.accessor#3A5FCD
variable, variable.other#E2E2E2
variable.parameter#FFB400italic
entity.name.function, support.function#FFB400
meta.function-call#6FD3F7
entity.name.class, entity.name.type.class, support.class#3A5FCDbold
entity.name.type, support.type#3A5FCD
entity.name.type.interface#6FD3F7italic
constant.numeric#FFB400
constant, constant.language, constant.character#FFB400
constant.language.boolean#FFB400bold
variable.other.property, support.variable.property#6FD3F7
meta.object-literal.key#FFB400
entity.name.tag, punctuation.definition.tag#FFB400
entity.other.attribute-name#3A5FCDitalic
punctuation, meta.brace#E2E2E2
string.regexp#6FD3F7
constant.character.escape#FFB400
meta.decorator, punctuation.decorator#3A5FCD
invalid, invalid.illegal#FF6F6Fstrikethrough
markup.heading, entity.name.section#FFB400bold
markup.bold#FFB400bold
markup.italic#6FD3F7italic
markup.underline.link#3A5FCD
markup.inline.raw, markup.fenced_code#6FD3F7
support.type.property-name.json#FFB400
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#3A5FCD
support.type.property-name.css#FFB400
support.constant.property-value.css#6FD3F7