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#00FFEF
  • activityBar.background#0D1117
  • activityBar.foreground#00FFEF
  • activityBarBadge.background#00FFEF
  • activityBarBadge.foreground#0B0F14
  • badge.background#00FFEF
  • badge.foreground#0B0F14
  • button.background#00FFEF
  • button.foreground#0B0F14
  • button.hoverBackground#A0FFB0
  • dropdown.background#0D1117
  • dropdown.border#1A2028
  • dropdown.foreground#E5E5E5
  • editor.background#0B0F14
  • editor.findMatchBackground#7B5EFF80
  • editor.findMatchHighlightBackground#7B5EFF40
  • editor.foreground#E5E5E5
  • editor.lineHighlightBackground#1A2028
  • editor.lineHighlightBorder#00FFEF40
  • editor.selectionBackground#00FFEF60
  • editor.selectionHighlightBackground#00FFEF30
  • editorBracketMatch.background#7B5EFF30
  • editorBracketMatch.border#7B5EFF80
  • editorCursor.foreground#00FFEF
  • editorGroupHeader.tabsBackground#0B0F14
  • editorIndentGuide.activeBackground#00FFEF80
  • editorIndentGuide.background#00FFEF40
  • editorLineNumber.activeForeground#E5E5E5
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#5A6A78
  • focusBorder#00FFEF
  • gitDecoration.conflictingResourceForeground#FFDE7D
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.modifiedResourceForeground#00FFEF
  • gitDecoration.untrackedResourceForeground#A0FFB0
  • input.background#0D1117
  • input.border#1A2028
  • input.foreground#E5E5E5
  • input.placeholderForeground#777777
  • inputOption.activeBorder#00FFEF
  • list.activeSelectionBackground#00FFEF40
  • list.activeSelectionForeground#E5E5E5
  • list.focusBackground#00FFEF50
  • list.highlightForeground#00FFEF
  • list.hoverBackground#00FFEF30
  • minimap.background#0B0F14
  • minimapSlider.activeBackground#00FFEF66
  • minimapSlider.background#00FFEF22
  • minimapSlider.hoverBackground#00FFEF44
  • panel.background#0B0F14
  • panel.border#1A2028
  • panelTitle.activeBorder#00FFEF
  • panelTitle.activeForeground#E5E5E5
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#777777CC
  • scrollbarSlider.background#77777744
  • scrollbarSlider.hoverBackground#77777788
  • sideBar.background#0B0F14
  • sideBar.foreground#E5E5E5
  • sideBarSectionHeader.background#0D1117
  • sideBarSectionHeader.foreground#00FFEF
  • sideBarTitle.foreground#00FFEF
  • statusBar.background#00FFEF
  • statusBar.debuggingBackground#00FF7F
  • statusBar.foreground#0B0F14
  • statusBar.noFolderBackground#0B0F14
  • statusBarItem.hoverBackground#00FFEF80
  • tab.activeBackground#0B0F14
  • tab.activeBorder#00FFEF
  • tab.activeForeground#E5E5E5
  • tab.border#0B0F14
  • tab.inactiveBackground#0D1117
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#7B5EFF
  • terminal.ansiBrightBlue#A280FF
  • terminal.ansiBrightCyan#50FFF5
  • terminal.ansiBrightGreen#C0FFB0
  • terminal.ansiBrightMagenta#FF9FD4
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFE699
  • terminal.ansiCyan#00FFEF
  • terminal.ansiGreen#A0FFB0
  • terminal.ansiMagenta#FF6EC7
  • terminal.ansiRed#FF5555
  • terminal.ansiYellow#FFDE7D
  • terminal.background#0B0F14
  • terminal.foreground#E5E5E5
  • titleBar.activeBackground#0B0F14
  • titleBar.activeForeground#E5E5E5
  • titleBar.inactiveBackground#0D1117
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6A78italic
string, string.quoted, string.template#A0FFB0
keyword, storage.type, storage.modifier#00FFEFbold
keyword.operator, punctuation.accessor#7B5EFF
variable, variable.other#E5E5E5
variable.parameter#7B5EFFitalic
entity.name.function, support.function#FFB86C
meta.function-call#FFEB9C
entity.name.class, entity.name.type.class, support.class#FF6EC7bold
entity.name.type, support.type#FF9FD4
entity.name.type.interface#FF6EC7italic
constant.numeric#FFDE7D
constant, constant.language, constant.character#FFC56D
constant.language.boolean#FFDE7Dbold
variable.other.property, support.variable.property#7B5EFF
meta.object-literal.key#FFB86C
entity.name.tag, punctuation.definition.tag#00FFEF
entity.other.attribute-name#FF6EC7italic
punctuation, meta.brace#777777
string.regexp#FFDE7D
constant.character.escape#FF6EC7
meta.decorator, punctuation.decorator#FFEB9C
invalid, invalid.illegal#FF5555strikethrough
markup.heading, entity.name.section#00FFEFbold
markup.bold#FFB86Cbold
markup.italic#FF6EC7italic
markup.underline.link#7B5EFF
markup.inline.raw, markup.fenced_code#A0FFB0
support.type.property-name.json#00FFEF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6EC7
support.type.property-name.css#FFB86C
support.constant.property-value.css#A0FFB0