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#FF453A
  • activityBar.background#111111
  • activityBar.foreground#FF453A
  • activityBarBadge.background#FF453A
  • activityBarBadge.foreground#0B0B0B
  • badge.background#FF453A
  • badge.foreground#0B0B0B
  • button.background#151515
  • button.foreground#FFFFFF
  • button.hoverBackground#242424
  • dropdown.background#101010
  • dropdown.border#151515
  • dropdown.foreground#E4E4E4
  • editor.background#0B0B0B
  • editor.findMatchBackground#FFEB3B44
  • editor.findMatchHighlightBackground#FFEB3B22
  • editor.foreground#E4E4E4
  • editor.lineHighlightBackground#1A1A1A80
  • editor.lineHighlightBorder#FF453A80
  • editor.selectionBackground#FF453A55
  • editor.selectionHighlightBackground#FF453A33
  • editorBracketMatch.background#FF453A33
  • editorBracketMatch.border#FF453A
  • editorCursor.foreground#FF453A
  • editorGroupHeader.tabsBackground#0B0B0B
  • editorIndentGuide.activeBackground#33333388
  • editorIndentGuide.background#33333344
  • editorLineNumber.activeForeground#FF453A
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#333333
  • focusBorder#FF453A
  • gitDecoration.conflictingResourceForeground#FFEB3B
  • gitDecoration.deletedResourceForeground#FF453A
  • gitDecoration.modifiedResourceForeground#FF7043
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#101010
  • input.border#151515
  • input.foreground#E4E4E4
  • input.placeholderForeground#777777
  • inputOption.activeBorder#FF453A
  • list.activeSelectionBackground#151515
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#151515
  • list.highlightForeground#FF453A
  • list.hoverBackground#15151566
  • minimap.background#0B0B0B
  • minimapSlider.activeBackground#FF453A66
  • minimapSlider.background#FF453A22
  • minimapSlider.hoverBackground#FF453A44
  • panel.background#0B0B0B
  • panel.border#151515
  • panelTitle.activeBorder#FF453A
  • panelTitle.activeForeground#FF453A
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF453A88
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#101010
  • sideBar.foreground#C0C0C0
  • sideBarSectionHeader.background#111111
  • sideBarSectionHeader.foreground#FF453A
  • sideBarTitle.foreground#FF453A
  • statusBar.background#151515
  • statusBar.debuggingBackground#FF453A
  • statusBar.foreground#E4E4E4
  • statusBar.noFolderBackground#111111
  • statusBarItem.hoverBackground#242424
  • tab.activeBackground#151515
  • tab.activeBorder#FF453A
  • tab.activeForeground#FFFFFF
  • tab.border#0B0B0B
  • tab.inactiveBackground#101010
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#48A9F8
  • terminal.ansiBrightBlue#82B1FF
  • terminal.ansiBrightCyan#18FFFF
  • terminal.ansiBrightGreen#69F0AE
  • terminal.ansiBrightMagenta#FF80AB
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightYellow#FFFF8D
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#E040FB
  • terminal.ansiRed#FF453A
  • terminal.ansiYellow#FFEB3B
  • terminal.background#0B0B0B
  • terminal.foreground#E4E4E4
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#E4E4E4
  • titleBar.inactiveBackground#0B0B0B
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#00E5FF
keyword, storage.type, storage.modifier#FF453Abold
keyword.operator, punctuation.accessor#FF7043
variable, variable.other#E4E4E4
variable.parameter#FF7043italic
entity.name.function, support.function#48A9F8
meta.function-call#E4E4E4
entity.name.class, entity.name.type.class, support.class#E040FBbold
entity.name.type, support.type#4CAF50
entity.name.type.interface#FFEB3Bitalic
constant.numeric#FF7043
constant, constant.language, constant.character#FFEB3B
constant.language.boolean#FF453Abold
variable.other.property, support.variable.property#E4E4E4
meta.object-literal.key#48A9F8
entity.name.tag, punctuation.definition.tag#FF453A
entity.other.attribute-name#E040FBitalic
punctuation, meta.brace#FF7043
string.regexp#FF7043
constant.character.escape#E040FB
meta.decorator, punctuation.decorator#FFEB3B
invalid, invalid.illegal#FF6E6Estrikethrough
markup.heading, entity.name.section#FF453Abold
markup.bold#FFEB3Bbold
markup.italic#E040FBitalic
markup.underline.link#48A9F8
markup.inline.raw, markup.fenced_code#4CAF50
support.type.property-name.json#48A9F8
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFEB3B
support.type.property-name.css#48A9F8
support.constant.property-value.css#4CAF50