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#E41B17
  • activityBar.background#1B2A49
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#E41B17
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E41B17
  • badge.foreground#FFFFFF
  • button.background#E41B17
  • button.foreground#FFFFFF
  • button.hoverBackground#C71A14
  • dropdown.background#1F2E4D
  • dropdown.border#28344E
  • dropdown.foreground#E0E0E0
  • editor.background#0A0A0F
  • editor.findMatchBackground#E41B17
  • editor.findMatchHighlightBackground#C71A14
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#2C3E50
  • editor.lineHighlightBorder#000000
  • editor.selectionBackground#3A5F91
  • editor.selectionHighlightBackground#2C4F85
  • editorBracketMatch.background#28344E
  • editorBracketMatch.border#E41B17
  • editorCursor.foreground#E41B17
  • editorGroupHeader.tabsBackground#0F141F
  • editorIndentGuide.activeBackground#5A6B8C
  • editorIndentGuide.background#3A3F4B
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#6A7B8C
  • editorWhitespace.foreground#4B5D71
  • focusBorder#E41B17
  • gitDecoration.conflictingResourceForeground#FF5722
  • gitDecoration.deletedResourceForeground#F44336
  • gitDecoration.modifiedResourceForeground#FFC107
  • gitDecoration.untrackedResourceForeground#81C784
  • input.background#1F2E4D
  • input.border#28344E
  • input.foreground#E0E0E0
  • input.placeholderForeground#6A7B8C
  • inputOption.activeBorder#E41B17
  • list.activeSelectionBackground#28344E
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#2C3E5A
  • list.highlightForeground#E41B17
  • list.hoverBackground#2C3E5A
  • minimap.background#0A0A0F
  • minimapSlider.activeBackground#E41B17
  • minimapSlider.background#28344E
  • minimapSlider.hoverBackground#3F51B5
  • panel.background#0F141F
  • panel.border#28344E
  • panelTitle.activeBorder#E41B17
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#E41B17
  • scrollbarSlider.background#4B5D71
  • scrollbarSlider.hoverBackground#6A7B8C
  • sideBar.background#0F141F
  • sideBar.foreground#D0D0D0
  • sideBarSectionHeader.background#1C2538
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#1B2A49
  • statusBar.debuggingBackground#D32F2F
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#28344E
  • statusBarItem.hoverBackground#263E6B
  • tab.activeBackground#1F2E4D
  • tab.activeBorder#E41B17
  • tab.activeForeground#FFFFFF
  • tab.border#28344E
  • tab.inactiveBackground#0F141F
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#1B2A49
  • terminal.ansiBrightBlue#3F51B5
  • terminal.ansiBrightCyan#26C6DA
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#BA68C8
  • terminal.ansiBrightRed#F44336
  • terminal.ansiBrightYellow#FFD54F
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#9C27B0
  • terminal.ansiRed#E41B17
  • terminal.ansiYellow#FFC107
  • terminal.background#0A0A0F
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#1F2E4D
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#151E2F
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A7B8Citalic
string, string.quoted, string.template#81C784
keyword, storage.type, storage.modifier#E41B17bold
keyword.operator, punctuation.accessor#00BCD4
variable, variable.other#E0E0E0
variable.parameter#FFC107italic
entity.name.function, support.function#FFEB3B
meta.function-call#FFEB3B
entity.name.class, entity.name.type.class, support.class#9C27B0bold
entity.name.type, support.type#00BCD4
entity.name.type.interface#9C27B0italic
constant.numeric#FF9800
constant, constant.language, constant.character#FF5722
constant.language.boolean#E41B17bold
variable.other.property, support.variable.property#81C784
meta.object-literal.key#00BCD4
entity.name.tag, punctuation.definition.tag#E41B17
entity.other.attribute-name#FFC107italic
punctuation, meta.brace#D0D0D0
string.regexp#FFEB3B
constant.character.escape#FF5722
meta.decorator, punctuation.decorator#9C27B0
invalid, invalid.illegal#F44336strikethrough
markup.heading, entity.name.section#E41B17bold
markup.bold#E41B17bold
markup.italic#FFC107italic
markup.underline.link#00BCD4
markup.inline.raw, markup.fenced_code#81C784
support.type.property-name.json#00BCD4
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9C27B0
support.type.property-name.css#FFEB3B
support.constant.property-value.css#81C784
themesmith by CyberBoost - VS Code Theme