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—