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#FF4E42
  • activityBar.background#0a0a10
  • activityBar.foreground#FF4E42
  • activityBarBadge.background#FF4E42
  • activityBarBadge.foreground#0b0b0f
  • badge.background#FF4E42
  • badge.foreground#0b0b0f
  • button.background#FF4E42
  • button.foreground#0b0b0f
  • button.hoverBackground#FF4E42AA
  • dropdown.background#111117
  • dropdown.border#FF4E42
  • dropdown.foreground#E0E0E0
  • editor.background#0b0b0f
  • editor.findMatchBackground#FFB80066
  • editor.findMatchHighlightBackground#FFB80033
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#FFFFFF0A
  • editor.lineHighlightBorder#FF4E42
  • editor.selectionBackground#FF4E4250
  • editor.selectionHighlightBackground#FF4E4210
  • editorBracketMatch.background#FFB80033
  • editorBracketMatch.border#FFB800
  • editorCursor.foreground#FF4E42
  • editorGroupHeader.tabsBackground#05050A
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#FFB800
  • editorLineNumber.foreground#4A4A4A
  • editorWhitespace.foreground#4A4A4A
  • focusBorder#FF4E42
  • gitDecoration.conflictingResourceForeground#FFB800
  • gitDecoration.deletedResourceForeground#FF4E42
  • gitDecoration.modifiedResourceForeground#FFB800
  • gitDecoration.untrackedResourceForeground#00E5FF
  • input.background#111117
  • input.border#FF4E42
  • input.foreground#E0E0E0
  • input.placeholderForeground#4A4A4A
  • inputOption.activeBorder#FFB800
  • list.activeSelectionBackground#FF4E4260
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#FF4E4260
  • list.highlightForeground#FFB800
  • list.hoverBackground#FF4E4260
  • minimap.background#0b0b0f
  • minimapSlider.activeBackground#FF4E4288
  • minimapSlider.background#33333322
  • minimapSlider.hoverBackground#33333344
  • panel.background#0b0b0f
  • panel.border#111117
  • panelTitle.activeBorder#FF4E42
  • panelTitle.activeForeground#FF4E42
  • panelTitle.inactiveForeground#4A4A4A
  • scrollbar.shadow#0b0b0f44
  • scrollbarSlider.activeBackground#FF4E4288
  • scrollbarSlider.background#33333344
  • scrollbarSlider.hoverBackground#33333388
  • sideBar.background#05050A
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#0a0a10
  • sideBarSectionHeader.foreground#FFB800
  • sideBarTitle.foreground#FF4E42
  • statusBar.background#FF4E42
  • statusBar.debuggingBackground#FFB800
  • statusBar.foreground#0b0b0f
  • statusBar.noFolderBackground#111117
  • statusBarItem.hoverBackground#FF4E42AA
  • tab.activeBackground#111117
  • tab.activeBorder#FF4E42
  • tab.activeForeground#E0E0E0
  • tab.border#0b0b0f
  • tab.inactiveBackground#05050A
  • tab.inactiveForeground#4A4A4A
  • terminal.ansiBlue#4FA9FF
  • terminal.ansiBrightBlue#80C9FF
  • terminal.ansiBrightCyan#33F0FF
  • terminal.ansiBrightGreen#A0FFAA
  • terminal.ansiBrightMagenta#FF8AB4
  • terminal.ansiBrightRed#FF7A7A
  • terminal.ansiBrightYellow#FFC973
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#75FF75
  • terminal.ansiMagenta#FF6F9A
  • terminal.ansiRed#FF4E42
  • terminal.ansiYellow#FFB800
  • terminal.background#0b0b0f
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#111117
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#08080D
  • titleBar.inactiveForeground#4A4A4A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4A4A4Aitalic
string, string.quoted, string.template#00E5FF
keyword, storage.type, storage.modifier#FF4E42bold
keyword.operator, punctuation.accessor#FFB800
variable, variable.other#E0E0E0
variable.parameter#FFB800italic
entity.name.function, support.function#FFB800
meta.function-call#FF4E42
entity.name.class, entity.name.type.class, support.class#FFB800bold
entity.name.type, support.type#00E5FF
entity.name.type.interface#00E5FFitalic
constant.numeric#FFB800
constant, constant.language, constant.character#FF4E42
constant.language.boolean#FFB800bold
variable.other.property, support.variable.property#FFB800
meta.object-literal.key#FF4E42
entity.name.tag, punctuation.definition.tag#FF4E42
entity.other.attribute-name#FFB800italic
punctuation, meta.brace#E0E0E0
string.regexp#FFB800
constant.character.escape#FF4E42
meta.decorator, punctuation.decorator#FFB800
invalid, invalid.illegal#FF4E42strikethrough
markup.heading, entity.name.section#FF4E42bold
markup.bold#FFB800bold
markup.italic#FF4E42italic
markup.underline.link#00E5FF
markup.inline.raw, markup.fenced_code#00E5FF
support.type.property-name.json#FFB800
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF4E42
support.type.property-name.css#00E5FF
support.constant.property-value.css#FFB800
themesmith by CyberBoost - VS Code Theme