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#E63946
  • activityBar.background#0F1425
  • activityBar.foreground#B0B7C6
  • activityBarBadge.background#E63946
  • activityBarBadge.foreground#0A0F20
  • badge.background#E63946
  • badge.foreground#0A0F20
  • button.background#141B30
  • button.foreground#FFFFFF
  • button.hoverBackground#21293F
  • dropdown.background#0F1425
  • dropdown.border#141B30
  • dropdown.foreground#E5E9F0
  • editor.background#0A0F20
  • editor.findMatchBackground#E6394444
  • editor.findMatchHighlightBackground#E6394622
  • editor.foreground#E5E9F0
  • editor.lineHighlightBackground#1F2A4480
  • editor.lineHighlightBorder#1F2A44C0
  • editor.selectionBackground#E6394633
  • editor.selectionHighlightBackground#E6394622
  • editorBracketMatch.background#E6394633
  • editorBracketMatch.border#E63946
  • editorCursor.foreground#E63946
  • editorGroupHeader.tabsBackground#0A0F20
  • editorIndentGuide.activeBackground#21293F88
  • editorIndentGuide.background#21293F44
  • editorLineNumber.activeForeground#E63946
  • editorLineNumber.foreground#4A5A71
  • editorWhitespace.foreground#21293F
  • focusBorder#E63946
  • gitDecoration.conflictingResourceForeground#F5C06B
  • gitDecoration.deletedResourceForeground#FF7B78
  • gitDecoration.modifiedResourceForeground#E63946
  • gitDecoration.untrackedResourceForeground#8AE69E
  • input.background#0F1425
  • input.border#141B30
  • input.foreground#E5E9F0
  • input.placeholderForeground#4A5A71
  • inputOption.activeBorder#E63946
  • list.activeSelectionBackground#141B30
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#141B30
  • list.highlightForeground#E63946
  • list.hoverBackground#141B3066
  • minimap.background#0A0F20
  • minimapSlider.activeBackground#E6394666
  • minimapSlider.background#E6394622
  • minimapSlider.hoverBackground#E6394644
  • panel.background#0A0F20
  • panel.border#141B30
  • panelTitle.activeBorder#E63946
  • panelTitle.activeForeground#E63946
  • panelTitle.inactiveForeground#B0B7C6
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#E6394688
  • scrollbarSlider.background#4A5A7144
  • scrollbarSlider.hoverBackground#4A5A7188
  • sideBar.background#0F1425
  • sideBar.foreground#B0B7C6
  • sideBarSectionHeader.background#0F1425
  • sideBarSectionHeader.foreground#E63946
  • sideBarTitle.foreground#E63946
  • statusBar.background#141B30
  • statusBar.debuggingBackground#E63946
  • statusBar.foreground#E5E9F0
  • statusBar.noFolderBackground#0F1425
  • statusBarItem.hoverBackground#21293F
  • tab.activeBackground#141B30
  • tab.activeBorder#E63946
  • tab.activeForeground#FFFFFF
  • tab.border#0A0F20
  • tab.inactiveBackground#0F1425
  • tab.inactiveForeground#B0B7C6
  • terminal.ansiBlue#5DAEDB
  • terminal.ansiBrightBlue#84C4FF
  • terminal.ansiBrightCyan#9CEAFF
  • terminal.ansiBrightGreen#A8F7C8
  • terminal.ansiBrightMagenta#E2AFFF
  • terminal.ansiBrightRed#FF7B78
  • terminal.ansiBrightYellow#FFEB8A
  • terminal.ansiCyan#66D9EF
  • terminal.ansiGreen#8AE69E
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#E63946
  • terminal.ansiYellow#F5C06B
  • terminal.background#0A0F20
  • terminal.foreground#E5E9F0
  • titleBar.activeBackground#0F1425
  • titleBar.activeForeground#E5E9F0
  • titleBar.inactiveBackground#0A0F20
  • titleBar.inactiveForeground#B0B7C6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4A5A71italic
string, string.quoted, string.template#8AE69E
keyword, storage.type, storage.modifier#E63946bold
keyword.operator, punctuation.accessor#FF7B78
variable, variable.other#E5E9F0
variable.parameter#FF7B78italic
entity.name.function, support.function#5DAEDB
meta.function-call#B0B7C6
entity.name.class, entity.name.type.class, support.class#84C4FFbold
entity.name.type, support.type#84C4FF
entity.name.type.interface#A8F7C8italic
constant.numeric#FF7B78
constant, constant.language, constant.character#F5C06B
constant.language.boolean#E63946bold
variable.other.property, support.variable.property#B0B7C6
meta.object-literal.key#84C4FF
entity.name.tag, punctuation.definition.tag#E63946
entity.other.attribute-name#C792EAitalic
punctuation, meta.brace#FF7B78
string.regexp#FF7B78
constant.character.escape#C792EA
meta.decorator, punctuation.decorator#F5C06B
invalid, invalid.illegal#FF7B78strikethrough
markup.heading, entity.name.section#E63946bold
markup.bold#F5C06Bbold
markup.italic#C792EAitalic
markup.underline.link#84C4FF
markup.inline.raw, markup.fenced_code#8AE69E
support.type.property-name.json#84C4FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F5C06B
support.type.property-name.css#84C4FF
support.constant.property-value.css#8AE69E
themesmith by CyberBoost - VS Code Theme