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#FF6F61
  • activityBar.background#161B22
  • activityBar.foreground#FF6F61
  • activityBarBadge.background#FF6F61
  • activityBarBadge.foreground#0D1117
  • badge.background#FF6F61
  • badge.foreground#0D1117
  • button.background#21262D
  • button.foreground#FFFFFF
  • button.hoverBackground#30363D
  • dropdown.background#161B22
  • dropdown.border#21262D
  • dropdown.foreground#C9D1D9
  • editor.background#0D1117
  • editor.findMatchBackground#FF6F6140
  • editor.findMatchHighlightBackground#79C0FF20
  • editor.foreground#C9D1D9
  • editor.lineHighlightBackground#2C313A80
  • editor.lineHighlightBorder#FF6F6160
  • editor.selectionBackground#FF6F6130
  • editor.selectionHighlightBackground#79C0FF20
  • editorBracketMatch.background#79C0FF30
  • editorBracketMatch.border#FF6F61
  • editorCursor.foreground#FF6F61
  • editorGroupHeader.tabsBackground#161B22
  • editorIndentGuide.activeBackground#FF6F5E80
  • editorIndentGuide.background#4A4F58
  • editorLineNumber.activeForeground#FF6F61
  • editorLineNumber.foreground#4B5263
  • editorWhitespace.foreground#4A4F58
  • focusBorder#FF6F61
  • gitDecoration.conflictingResourceForeground#E3B341
  • gitDecoration.deletedResourceForeground#FF6F61
  • gitDecoration.modifiedResourceForeground#79C0FF
  • gitDecoration.untrackedResourceForeground#B392F0
  • input.background#161B22
  • input.border#21262D
  • input.foreground#C9D1D9
  • input.placeholderForeground#6E7681
  • inputOption.activeBorder#FF6F61
  • list.activeSelectionBackground#21262D
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#30363D
  • list.highlightForeground#FF6F61
  • list.hoverBackground#30363D80
  • minimap.background#0D1117
  • minimapSlider.activeBackground#FF6F6160
  • minimapSlider.background#FF6F6130
  • minimapSlider.hoverBackground#FF6F6140
  • panel.background#0D1117
  • panel.border#21262D
  • panelTitle.activeBorder#FF6F61
  • panelTitle.activeForeground#FF6F61
  • panelTitle.inactiveForeground#7C8599
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#FF6F5E80
  • scrollbarSlider.background#4A4F5880
  • scrollbarSlider.hoverBackground#4A4F58C0
  • sideBar.background#161B22
  • sideBar.foreground#8B949E
  • sideBarSectionHeader.background#21262D
  • sideBarSectionHeader.foreground#FF6F61
  • sideBarTitle.foreground#FF6F61
  • statusBar.background#21262D
  • statusBar.debuggingBackground#D29922
  • statusBar.foreground#C9D1D9
  • statusBar.noFolderBackground#0D1117
  • statusBarItem.hoverBackground#30363D
  • tab.activeBackground#21262D
  • tab.activeBorder#FF6F61
  • tab.activeForeground#FFFFFF
  • tab.border#0D1117
  • tab.inactiveBackground#0D1117
  • tab.inactiveForeground#7C8599
  • terminal.ansiBlue#79C0FF
  • terminal.ansiBrightBlue#A5D6FF
  • terminal.ansiBrightCyan#89D7D7
  • terminal.ansiBrightGreen#BAE67E
  • terminal.ansiBrightMagenta#D2A8FF
  • terminal.ansiBrightRed#FF9A90
  • terminal.ansiBrightYellow#FFDF5D
  • terminal.ansiCyan#56D4DD
  • terminal.ansiGreen#8BDB8F
  • terminal.ansiMagenta#B392F0
  • terminal.ansiRed#FF6F61
  • terminal.ansiYellow#E3B341
  • terminal.background#0D1117
  • terminal.foreground#C9D1D9
  • titleBar.activeBackground#161B22
  • titleBar.activeForeground#C9D1D9
  • titleBar.inactiveBackground#0D1117
  • titleBar.inactiveForeground#7C8599

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6E7681italic
string, string.quoted, string.template#79C0FF
keyword, storage.type, storage.modifier#FF6F61bold
keyword.operator, punctuation.accessor#C9D1D9
variable, variable.other#C9D1D9
variable.parameter#B392F0italic
entity.name.function, support.function#C9D1D9
meta.function-call#8BDB8F
entity.name.class, entity.name.type.class, support.class#B392F0bold
entity.name.type, support.type#B392F0
entity.name.type.interface#B392F0italic
constant.numeric#FF9A90
constant, constant.language, constant.character#FF9A90
constant.language.boolean#FF9A90bold
variable.other.property, support.variable.property#8BDB8F
meta.object-literal.key#C9D1D9
entity.name.tag, punctuation.definition.tag#FF6F61
entity.other.attribute-name#B392F0italic
punctuation, meta.brace#7C8599
string.regexp#FF9A90
constant.character.escape#B392F0
meta.decorator, punctuation.decorator#E3B341
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#FF6F61bold
markup.bold#FF9A90bold
markup.italic#B392F0italic
markup.underline.link#79C0FF
markup.inline.raw, markup.fenced_code#79C0FF
support.type.property-name.json#C9D1D9
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E3B341
support.type.property-name.css#C9D1D9
support.constant.property-value.css#79C0FF
themesmith by CyberBoost - VS Code Theme