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#B22222
  • activityBar.background#2B2728
  • activityBar.foreground#E0D4C9
  • activityBarBadge.background#CFA15D
  • activityBarBadge.foreground#1A1819
  • badge.background#B22222
  • badge.foreground#EAE0D5
  • button.background#4B1E2F
  • button.foreground#EAE0D5
  • button.hoverBackground#5C2B3D
  • dropdown.background#2E2A2A
  • dropdown.border#4B1E2F
  • dropdown.foreground#E0D4C9
  • editor.background#1A1819
  • editor.findMatchBackground#B22222
  • editor.findMatchHighlightBackground#CFA15D80
  • editor.foreground#EAE0D5
  • editor.lineHighlightBackground#2C5F2D33
  • editor.lineHighlightBorder#B22222
  • editor.selectionBackground#CFA15D80
  • editor.selectionHighlightBackground#B2222280
  • editorBracketMatch.background#2C5F2D33
  • editorBracketMatch.border#B22222
  • editorCursor.foreground#E0D4C9
  • editorGroupHeader.tabsBackground#2B2728
  • editorIndentGuide.activeBackground#B22222
  • editorIndentGuide.background#444444
  • editorLineNumber.activeForeground#E0D4C9
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#CFA15D
  • gitDecoration.conflictingResourceForeground#D96CBE
  • gitDecoration.deletedResourceForeground#B22222
  • gitDecoration.modifiedResourceForeground#5BC0EB
  • gitDecoration.untrackedResourceForeground#88C057
  • input.background#2E2A2A
  • input.border#4B1E2F
  • input.foreground#E0D4C9
  • input.placeholderForeground#777777
  • inputOption.activeBorder#B22222
  • list.activeSelectionBackground#4B1E2F
  • list.activeSelectionForeground#EAE0D5
  • list.focusBackground#2C5F2D
  • list.highlightForeground#CFA15D
  • list.hoverBackground#2C5F2D
  • minimap.background#1A1819
  • minimapSlider.activeBackground#999999
  • minimapSlider.background#55555580
  • minimapSlider.hoverBackground#777777
  • panel.background#2B2728
  • panel.border#4B1E2F
  • panelTitle.activeBorder#B22222
  • panelTitle.activeForeground#EAE0D5
  • panelTitle.inactiveForeground#A8A8A8
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#777777
  • scrollbarSlider.background#44444480
  • scrollbarSlider.hoverBackground#555555
  • sideBar.background#2B2728
  • sideBar.foreground#E0D4C9
  • sideBarSectionHeader.background#1E1B1C
  • sideBarSectionHeader.foreground#CFA15D
  • sideBarTitle.foreground#EAE0D5
  • statusBar.background#4B1E2F
  • statusBar.debuggingBackground#B22222
  • statusBar.foreground#EAE0D5
  • statusBar.noFolderBackground#2C5F2D
  • statusBarItem.hoverBackground#5C2B3D
  • tab.activeBackground#1A1819
  • tab.activeBorder#B22222
  • tab.activeForeground#EAE0D5
  • tab.border#4B1E2F
  • tab.inactiveBackground#2B2728
  • tab.inactiveForeground#A8A8A8
  • terminal.ansiBlue#4A90E2
  • terminal.ansiBrightBlue#6EB0FF
  • terminal.ansiBrightCyan#7FD9FF
  • terminal.ansiBrightGreen#A2E68D
  • terminal.ansiBrightMagenta#E284E2
  • terminal.ansiBrightRed#E06666
  • terminal.ansiBrightYellow#F4C951
  • terminal.ansiCyan#5BC0EB
  • terminal.ansiGreen#88C057
  • terminal.ansiMagenta#D96CBE
  • terminal.ansiRed#B22222
  • terminal.ansiYellow#CFA15D
  • terminal.background#1A1819
  • terminal.foreground#EAE0D5
  • titleBar.activeBackground#2C5F2D
  • titleBar.activeForeground#EAE0D5
  • titleBar.inactiveBackground#1E1B1C
  • titleBar.inactiveForeground#A8A8A8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#88C057
keyword, storage.type, storage.modifier#B22222bold
keyword.operator, punctuation.accessor#4A90E2
variable, variable.other#E0D4C9
variable.parameter#CFA15Ditalic
entity.name.function, support.function#5BC0EB
meta.function-call#5BC0EB
entity.name.class, entity.name.type.class, support.class#D96CBEbold
entity.name.type, support.type#4A90E2
entity.name.type.interface#4A90E2italic
constant.numeric#CFA15D
constant, constant.language, constant.character#CFA15D
constant.language.boolean#B22222bold
variable.other.property, support.variable.property#88C057
meta.object-literal.key#5BC0EB
entity.name.tag, punctuation.definition.tag#B22222
entity.other.attribute-name#88C057italic
punctuation, meta.brace#E0D4C9
string.regexp#5BC0EB
constant.character.escape#CFA15D
meta.decorator, punctuation.decorator#D96CBE
invalid, invalid.illegal#E06666strikethrough
markup.heading, entity.name.section#CFA15Dbold
markup.bold#EAE0D5bold
markup.italic#EAE0D5italic
markup.underline.link#5BC0EB
markup.inline.raw, markup.fenced_code#88C057
support.type.property-name.json#5BC0EB
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4A90E2
support.type.property-name.css#88C057
support.constant.property-value.css#CFA15D
themesmith by CyberBoost - VS Code Theme