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#D97706
  • activityBar.background#181818
  • activityBar.foreground#D97706
  • activityBarBadge.background#B91C1C
  • activityBarBadge.foreground#101010
  • badge.background#B91C1C
  • badge.foreground#101010
  • button.background#242424
  • button.foreground#FFFFFF
  • button.hoverBackground#2D2D2D
  • dropdown.background#151515
  • dropdown.border#242424
  • dropdown.foreground#E2E2E2
  • editor.background#101010
  • editor.findMatchBackground#D9770444
  • editor.findMatchHighlightBackground#B91C1C22
  • editor.foreground#E2E2E2
  • editor.lineHighlightBackground#24242480
  • editor.lineHighlightBorder#D9770680
  • editor.selectionBackground#B91C1C55
  • editor.selectionHighlightBackground#D9770533
  • editorBracketMatch.background#D9770533
  • editorBracketMatch.border#D97706
  • editorCursor.foreground#D97706
  • editorGroupHeader.tabsBackground#101010
  • editorIndentGuide.activeBackground#D9770888
  • editorIndentGuide.background#2D2D2D44
  • editorLineNumber.activeForeground#D97706
  • editorLineNumber.foreground#4F4F4F
  • editorWhitespace.foreground#2D2D2D
  • focusBorder#D97706
  • gitDecoration.conflictingResourceForeground#F59E0B
  • gitDecoration.deletedResourceForeground#B91C1C
  • gitDecoration.modifiedResourceForeground#D97706
  • gitDecoration.untrackedResourceForeground#10B981
  • input.background#151515
  • input.border#242424
  • input.foreground#E2E2E2
  • input.placeholderForeground#4F4F4F
  • inputOption.activeBorder#D97706
  • list.activeSelectionBackground#242424
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#242424
  • list.highlightForeground#D97706
  • list.hoverBackground#24242466
  • minimap.background#101010
  • minimapSlider.activeBackground#D9770666
  • minimapSlider.background#D9770622
  • minimapSlider.hoverBackground#D9770644
  • panel.background#101010
  • panel.border#242424
  • panelTitle.activeBorder#D97706
  • panelTitle.activeForeground#D97706
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#D9770888
  • scrollbarSlider.background#4F4F4F44
  • scrollbarSlider.hoverBackground#4F4F4F88
  • sideBar.background#151515
  • sideBar.foreground#A0A0A0
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.foreground#D97706
  • sideBarTitle.foreground#D97706
  • statusBar.background#242424
  • statusBar.debuggingBackground#B91C1C
  • statusBar.foreground#E2E2E2
  • statusBar.noFolderBackground#181818
  • statusBarItem.hoverBackground#2D2D2D
  • tab.activeBackground#242424
  • tab.activeBorder#D97706
  • tab.activeForeground#FFFFFF
  • tab.border#101010
  • tab.inactiveBackground#151515
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#3B82F6
  • terminal.ansiBrightBlue#60A5FA
  • terminal.ansiBrightCyan#22D3EE
  • terminal.ansiBrightGreen#34D399
  • terminal.ansiBrightMagenta#A78BFA
  • terminal.ansiBrightRed#F87171
  • terminal.ansiBrightYellow#FBBF24
  • terminal.ansiCyan#06B6D4
  • terminal.ansiGreen#10B981
  • terminal.ansiMagenta#8B5CF6
  • terminal.ansiRed#EF4444
  • terminal.ansiYellow#F59E0B
  • terminal.background#101010
  • terminal.foreground#E2E2E2
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#E2E2E2
  • titleBar.inactiveBackground#101010
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4F4F4Fitalic
string, string.quoted, string.template#FF6F00
keyword, storage.type, storage.modifier#D97706bold
keyword.operator, punctuation.accessor#E2E2E2
variable, variable.other#E2E2E2
variable.parameter#FF6F00italic
entity.name.function, support.function#D97706
meta.function-call#E2E2E2
entity.name.class, entity.name.type.class, support.class#F59E0Bbold
entity.name.type, support.type#F59E0B
entity.name.type.interface#06B6D4italic
constant.numeric#FF6F00
constant, constant.language, constant.character#F59E0B
constant.language.boolean#FF6F00bold
variable.other.property, support.variable.property#E2E2E2
meta.object-literal.key#D97706
entity.name.tag, punctuation.definition.tag#B91C1C
entity.other.attribute-name#06B6D4italic
punctuation, meta.brace#E2E2E2
string.regexp#FF6F00
constant.character.escape#06B6D4
meta.decorator, punctuation.decorator#F59E0B
invalid, invalid.illegal#B91C1Cstrikethrough
markup.heading, entity.name.section#D97706bold
markup.bold#F59E0Bbold
markup.italic#06B6D4italic
markup.underline.link#06B6D4
markup.inline.raw, markup.fenced_code#FF6F00
support.type.property-name.json#D97706
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F59E0B
support.type.property-name.css#D97706
support.constant.property-value.css#FF6F00