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#1A1A1A
  • activityBar.foreground#D40000
  • activityBarBadge.background#D40000
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FFB300
  • badge.foreground#000000
  • button.background#D40000
  • button.foreground#FFFFFF
  • button.hoverBackground#FF3C3C
  • dropdown.background#1A1A1A
  • dropdown.border#333333
  • dropdown.foreground#E0E0E0
  • editor.background#0F0F0F
  • editor.findMatchBackgroundrgba(212,0,0,0.5)
  • editor.findMatchHighlightBackgroundrgba(255,179,0,0.5)
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#2A2A2A
  • editor.lineHighlightBorder#D40000
  • editor.selectionBackgroundrgba(212,0,0,0.3)
  • editor.selectionHighlightBackgroundrgba(255,179,0,0.2)
  • editorBracketMatch.backgroundrgba(255,179,0,0.15)
  • editorBracketMatch.border#FFB300
  • editorCursor.foreground#FFB300
  • editorGroupHeader.tabsBackground#151515
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#FFB300
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#FFB300
  • gitDecoration.conflictingResourceForeground#C71585
  • gitDecoration.deletedResourceForeground#D40000
  • gitDecoration.modifiedResourceForeground#FFB300
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#1A1A1A
  • input.border#333333
  • input.foreground#E0E0E0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#D40000
  • list.activeSelectionBackground#2A2A2A
  • list.activeSelectionForeground#FFB300
  • list.focusBackground#333333
  • list.highlightForeground#D40000
  • list.hoverBackground#2A2A2A
  • minimap.background#0F0F0F
  • minimapSlider.activeBackgroundrgba(255,179,0,0.8)
  • minimapSlider.backgroundrgba(255,179,0,0.4)
  • minimapSlider.hoverBackgroundrgba(255,179,0,0.6)
  • panel.background#151515
  • panel.border#1A1A1A
  • panelTitle.activeBorder#D40000
  • panelTitle.activeForeground#FFB300
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackgroundrgba(255,179,0,0.7)
  • scrollbarSlider.backgroundrgba(255,179,0,0.3)
  • scrollbarSlider.hoverBackgroundrgba(255,179,0,0.5)
  • sideBar.background#151515
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.foreground#FFB300
  • sideBarTitle.foreground#D40000
  • statusBar.background#1A1A1A
  • statusBar.debuggingBackground#D40000
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#1A1A1A
  • statusBarItem.hoverBackground#2A2A2A
  • tab.activeBackground#0F0F0F
  • tab.activeBorder#D40000
  • tab.activeForeground#FFB300
  • tab.border#1A1A1A
  • tab.inactiveBackground#151515
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#1E90FF
  • terminal.ansiBrightBlue#63B8FF
  • terminal.ansiBrightCyan#70F0FF
  • terminal.ansiBrightGreen#6BFF6B
  • terminal.ansiBrightMagenta#FF5F9E
  • terminal.ansiBrightRed#FF5F5F
  • terminal.ansiBrightYellow#FFD75F
  • terminal.ansiCyan#00CED1
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#C71585
  • terminal.ansiRed#D40000
  • terminal.ansiYellow#FFB300
  • terminal.background#0F0F0F
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#0F0F0F
  • titleBar.activeForeground#FFB300
  • titleBar.inactiveBackground#151515
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#4CAF50
keyword, storage.type, storage.modifier#D40000bold
keyword.operator, punctuation.accessor#FFB300
variable, variable.other#E0E0E0
variable.parameter#FFB300italic
entity.name.function, support.function#63B8FF
meta.function-call#63B8FF
entity.name.class, entity.name.type.class, support.class#C71585bold
entity.name.type, support.type#C71585
entity.name.type.interface#C71585italic
constant.numeric#FFB300
constant, constant.language, constant.character#FFB300
constant.language.boolean#D40000bold
variable.other.property, support.variable.property#E0E0E0
meta.object-literal.key#E0E0E0
entity.name.tag, punctuation.definition.tag#D40000
entity.other.attribute-name#FFB300italic
punctuation, meta.brace#E0E0E0
string.regexp#4CAF50
constant.character.escape#FFB300
meta.decorator, punctuation.decorator#C71585
invalid, invalid.illegal#FF5F5Fstrikethrough
markup.heading, entity.name.section#FFB300bold
markup.bold#FFB300bold
markup.italic#E0E0E0italic
markup.underline.link#1E90FF
markup.inline.raw, markup.fenced_code#4CAF50
support.type.property-name.json#63B8FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C71585
support.type.property-name.css#4CAF50
support.constant.property-value.css#FFB300