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#FF4B4B
  • activityBar.background#111111
  • activityBar.foreground#FF4B4B
  • activityBarBadge.background#FF4B4B
  • activityBarBadge.foreground#0A0A0A
  • badge.background#FF4B4B
  • badge.foreground#0A0A0A
  • button.background#FF4B4B
  • button.foreground#0A0A0A
  • button.hoverBackground#FF4B4B80
  • dropdown.background#111111
  • dropdown.border#333333
  • dropdown.foreground#D0D0D0
  • editor.background#0A0A0A
  • editor.findMatchBackground#FF4B4BAA
  • editor.findMatchHighlightBackground#FF4B4B78
  • editor.foreground#D0D0D0
  • editor.lineHighlightBackground#D0D0D014
  • editor.lineHighlightBorder#FF4B4B40
  • editor.selectionBackground#FF4B4B60
  • editor.selectionHighlightBackground#FF4B4B32
  • editorBracketMatch.background#FF4B4B22
  • editorBracketMatch.border#FF4B4B
  • editorCursor.foreground#FF4B4B
  • editorGroupHeader.tabsBackground#0A0A0A
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#FF4B4B
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#777777
  • focusBorder#FF4B4B
  • gitDecoration.conflictingResourceForeground#FFCC66
  • gitDecoration.deletedResourceForeground#FF4B4B80
  • gitDecoration.modifiedResourceForeground#FF4B4B
  • gitDecoration.untrackedResourceForeground#66FFB2
  • input.background#111111
  • input.border#333333
  • input.foreground#D0D0D0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#FF4B4B
  • list.activeSelectionBackground#FF4B4B40
  • list.activeSelectionForeground#D0D0D0
  • list.focusBackground#FF4B4B40
  • list.highlightForeground#FF4B4B
  • list.hoverBackground#FF4B4B20
  • minimap.background#0A0A0A
  • minimapSlider.activeBackground#FF4B4B66
  • minimapSlider.background#FF4B4B22
  • minimapSlider.hoverBackground#FF4B4B44
  • panel.background#0A0A0A
  • panel.border#111111
  • panelTitle.activeBorder#FF4B4B
  • panelTitle.activeForeground#FF4B4B
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF4B4B88
  • scrollbarSlider.background#33333344
  • scrollbarSlider.hoverBackground#33333388
  • sideBar.background#111111
  • sideBar.foreground#D0D0D0
  • sideBarSectionHeader.background#0A0A0A
  • sideBarSectionHeader.foreground#FF4B4B
  • sideBarTitle.foreground#FF4B4B
  • statusBar.background#111111
  • statusBar.debuggingBackground#FF4B4B
  • statusBar.foreground#D0D0D0
  • statusBar.noFolderBackground#111111
  • statusBarItem.hoverBackground#FF4B4B80
  • tab.activeBackground#111111
  • tab.activeBorder#FF4B4B
  • tab.activeForeground#D0D0D0
  • tab.border#0A0A0A
  • tab.inactiveBackground#0A0A0A
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#6699FF
  • terminal.ansiBrightBlue#99CCFF
  • terminal.ansiBrightCyan#33FFFF
  • terminal.ansiBrightGreen#99FFCC
  • terminal.ansiBrightMagenta#FF99E6
  • terminal.ansiBrightRed#FF8080
  • terminal.ansiBrightYellow#FFE766
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#66FFB2
  • terminal.ansiMagenta#FF66CC
  • terminal.ansiRed#FF4B4B
  • terminal.ansiYellow#FFCC66
  • terminal.background#0A0A0A
  • terminal.foreground#D0D0D0
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#D0D0D0
  • titleBar.inactiveBackground#0A0A0A
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#66FFB2
keyword, storage.type, storage.modifier#FF4B4Bbold
keyword.operator, punctuation.accessor#FFCC66
variable, variable.other#D0D0D0
variable.parameter#FFCC66italic
entity.name.function, support.function#66FFB2
meta.function-call#66FFB2
entity.name.class, entity.name.type.class, support.class#FF4B4Bbold
entity.name.type, support.type#FF4B4B
entity.name.type.interface#FF4B4Bitalic
constant.numeric#FFCC66
constant, constant.language, constant.character#FFCC66
constant.language.boolean#FF4B4Bbold
variable.other.property, support.variable.property#D0D0D0
meta.object-literal.key#D0D0D0
entity.name.tag, punctuation.definition.tag#FF4B4B
entity.other.attribute-name#FFCC66italic
punctuation, meta.brace#D0D0D0
string.regexp#FFCC66
constant.character.escape#FFCC66
meta.decorator, punctuation.decorator#FF4B4B
invalid, invalid.illegal#FF4B4Bstrikethrough
markup.heading, entity.name.section#FF4B4Bbold
markup.bold#FF4B4Bbold
markup.italic#FF4B4Bitalic
markup.underline.link#66FFB2
markup.inline.raw, markup.fenced_code#66FFB2
support.type.property-name.json#FF4B4B
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF4B4B
support.type.property-name.css#66FFB2
support.constant.property-value.css#FFCC66