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#A7FF7C
  • activityBar.background#12001F
  • activityBar.foreground#A7FF7C
  • activityBarBadge.background#A7FF7C
  • activityBarBadge.foreground#0A0018
  • badge.background#A7FF7C
  • badge.foreground#0A0018
  • button.background#300032
  • button.foreground#FFFFFF
  • button.hoverBackground#40103F
  • dropdown.background#150024
  • dropdown.border#300032
  • dropdown.foreground#E0E0E0
  • editor.background#0A0018
  • editor.findMatchBackground#A7FF7C44
  • editor.findMatchHighlightBackground#A7FF7C22
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#1A001F80
  • editor.lineHighlightBorder#A7FF77AA
  • editor.selectionBackground#4B004F88
  • editor.selectionHighlightBackground#4B004F55
  • editorBracketMatch.background#A7FF7C33
  • editorBracketMatch.border#A7FF7C
  • editorCursor.foreground#A7FF7C
  • editorGroupHeader.tabsBackground#0A0018
  • editorIndentGuide.activeBackground#3A0035
  • editorIndentGuide.background#2A0025
  • editorLineNumber.activeForeground#A7FF7C
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#2A0025
  • focusBorder#A7FF7C
  • gitDecoration.conflictingResourceForeground#FFE66B
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#A7FF7C
  • gitDecoration.untrackedResourceForeground#00E5C5
  • input.background#150024
  • input.border#300032
  • input.foreground#E0E0E0
  • input.placeholderForeground#555555
  • inputOption.activeBorder#A7FF7C
  • list.activeSelectionBackground#300032
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#300032
  • list.highlightForeground#A7FF7C
  • list.hoverBackground#30003266
  • minimap.background#0A0018
  • minimapSlider.activeBackground#A7FF7666
  • minimapSlider.background#A7FF7222
  • minimapSlider.hoverBackground#A7FF7444
  • panel.background#0A0018
  • panel.border#300032
  • panelTitle.activeBorder#A7FF7C
  • panelTitle.activeForeground#A7FF7C
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#A7FF7C88
  • scrollbarSlider.background#2A002544
  • scrollbarSlider.hoverBackground#2A002588
  • sideBar.background#150024
  • sideBar.foreground#C8C8C8
  • sideBarSectionHeader.background#12001F
  • sideBarSectionHeader.foreground#A7FF7C
  • sideBarTitle.foreground#A7FF7C
  • statusBar.background#300032
  • statusBar.debuggingBackground#5B003A
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#12001F
  • statusBarItem.hoverBackground#40103F
  • tab.activeBackground#300032
  • tab.activeBorder#A7FF7C
  • tab.activeForeground#FFFFFF
  • tab.border#0A0018
  • tab.inactiveBackground#150024
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#00E5C5
  • terminal.ansiBrightBlue#00FFD1
  • terminal.ansiBrightCyan#00FFD1
  • terminal.ansiBrightGreen#B5FF8C
  • terminal.ansiBrightMagenta#FF9AD1
  • terminal.ansiBrightRed#FF8B8B
  • terminal.ansiBrightYellow#FFF68B
  • terminal.ansiCyan#00E5C5
  • terminal.ansiGreen#A7FF7C
  • terminal.ansiMagenta#FF7AB8
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#FFE66B
  • terminal.background#0A0018
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#12001F
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#0A0018
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#00E5C5
keyword, storage.type, storage.modifier#A7FF7Cbold
keyword.operator, punctuation.accessor#E0E0E0
variable, variable.other#E0E0E0
variable.parameter#FFE66Bitalic
entity.name.function, support.function#00E5C5
meta.function-call#C0C0C0
entity.name.class, entity.name.type.class, support.class#A7FF7Cbold
entity.name.type, support.type#00E5C5
entity.name.type.interface#FF7AB8italic
constant.numeric#FFE66B
constant, constant.language, constant.character#FFE66B
constant.language.boolean#FFE66Bbold
variable.other.property, support.variable.property#E0E0E0
meta.object-literal.key#A7FF7C
entity.name.tag, punctuation.definition.tag#A7FF7C
entity.other.attribute-name#FF7AB8italic
punctuation, meta.brace#777777
string.regexp#FF6B6B
constant.character.escape#FF7AB8
meta.decorator, punctuation.decorator#FFE66B
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#A7FF7Cbold
markup.bold#FFE66Bbold
markup.italic#FF7AB8italic
markup.underline.link#00E5C5
markup.inline.raw, markup.fenced_code#00E5C5
support.type.property-name.json#A7FF7C
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFE66B
support.type.property-name.css#00E5C5
support.constant.property-value.css#E0E0E0
themesmith by CyberBoost - VS Code Theme