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#FFB300
  • activityBar.background#0A0A0A
  • activityBar.foreground#FFB300
  • activityBarBadge.background#FFB300
  • activityBarBadge.foreground#0A0A0A
  • badge.background#FFB300
  • badge.foreground#0A0A0A
  • button.background#003333
  • button.foreground#E0E0E0
  • button.hoverBackground#004444
  • dropdown.background#111111
  • dropdown.border#003333
  • dropdown.foreground#E0E0E0
  • editor.background#0A0A0A
  • editor.findMatchBackground#005544
  • editor.findMatchHighlightBackground#004433
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#111111
  • editor.lineHighlightBorder#FFB300
  • editor.selectionBackground#003333
  • editor.selectionHighlightBackground#00333380
  • editorBracketMatch.background#002222
  • editorBracketMatch.border#00D9D9
  • editorCursor.foreground#FFB300
  • editorGroupHeader.tabsBackground#0A0A0A
  • editorIndentGuide.activeBackground#00D9D9
  • editorIndentGuide.background#003333
  • editorLineNumber.activeForeground#FFB300
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#555555
  • focusBorder#FFB300
  • gitDecoration.conflictingResourceForeground#FFEB3B
  • gitDecoration.deletedResourceForeground#FF6666
  • gitDecoration.modifiedResourceForeground#FFB300
  • gitDecoration.untrackedResourceForeground#66FFFF
  • input.background#111111
  • input.border#003333
  • input.foreground#E0E0E0
  • input.placeholderForeground#555555
  • inputOption.activeBorder#FFB300
  • list.activeSelectionBackground#003333
  • list.activeSelectionForeground#FFB300
  • list.focusBackground#003333
  • list.highlightForeground#00D9D9
  • list.hoverBackground#00333380
  • minimap.background#0A0A0A
  • minimapSlider.activeBackground#00D9D922
  • minimapSlider.background#00333322
  • minimapSlider.hoverBackground#00333344
  • panel.background#0A0A0A
  • panel.border#003333
  • panelTitle.activeBorder#FFB300
  • panelTitle.activeForeground#66FFFF
  • panelTitle.inactiveForeground#555555
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00D9D888
  • scrollbarSlider.background#00333344
  • scrollbarSlider.hoverBackground#00333388
  • sideBar.background#0A0A0A
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#0A0A0A
  • sideBarSectionHeader.foreground#FFB300
  • sideBarTitle.foreground#FFB300
  • statusBar.background#001111
  • statusBar.debuggingBackground#003311
  • statusBar.foreground#66FFFF
  • statusBar.noFolderBackground#0A0A0A
  • statusBarItem.hoverBackground#002222
  • tab.activeBackground#0A0A0A
  • tab.activeBorder#00D9D9
  • tab.activeForeground#FFB300
  • tab.border#FFB300
  • tab.inactiveBackground#0A0A0A
  • tab.inactiveForeground#555555
  • terminal.ansiBlue#3399FF
  • terminal.ansiBrightBlue#66CCFF
  • terminal.ansiBrightCyan#99FFFF
  • terminal.ansiBrightGreen#FFCC66
  • terminal.ansiBrightMagenta#FF99FF
  • terminal.ansiBrightRed#FF9999
  • terminal.ansiBrightYellow#FFFF66
  • terminal.ansiCyan#66FFFF
  • terminal.ansiGreen#FFB300
  • terminal.ansiMagenta#FF66FF
  • terminal.ansiRed#FF6666
  • terminal.ansiYellow#FFEB3B
  • terminal.background#0A0A0A
  • terminal.foreground#66FFFF
  • titleBar.activeBackground#0A0A0A
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#0A0A0A
  • titleBar.inactiveForeground#555555

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#66FFFF
keyword, storage.type, storage.modifier#FFB300bold
keyword.operator, punctuation.accessor#00D9D9
variable, variable.other#E0E0E0
variable.parameter#00D9D9italic
entity.name.function, support.function#FFB300
meta.function-call#99FFCC
entity.name.class, entity.name.type.class, support.class#00D9D9bold
entity.name.type, support.type#FFB300
entity.name.type.interface#99FFCCitalic
constant.numeric#FFEB3B
constant, constant.language, constant.character#FFEB3B
constant.language.boolean#FFEB3Bbold
variable.other.property, support.variable.property#66FFFF
meta.object-literal.key#FFB300
entity.name.tag, punctuation.definition.tag#FFB300
entity.other.attribute-name#FFEB3Bitalic
punctuation, meta.brace#00D9D9
string.regexp#FFEB3B
constant.character.escape#FFEB3B
meta.decorator, punctuation.decorator#FFEB3B
invalid, invalid.illegal#FF3333strikethrough
markup.heading, entity.name.section#FFB300bold
markup.bold#FFEB3Bbold
markup.italic#00D9D9italic
markup.underline.link#99FFCC
markup.inline.raw, markup.fenced_code#66FFFF
support.type.property-name.json#FFB300
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFEB3B
support.type.property-name.css#00D9D9
support.constant.property-value.css#99FFCC