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#C5A900
  • activityBar.background#11131F
  • activityBar.foreground#E0E0E0
  • activityBarBadge.background#C5A900
  • activityBarBadge.foreground#0B0C1D
  • badge.background#C5A900
  • badge.foreground#0B0C1D
  • button.background#333333
  • button.foreground#E0E0E0
  • button.hoverBackground#444444
  • dropdown.background#151724
  • dropdown.border#555555
  • dropdown.foreground#E0E0E0
  • editor.background#0B0C1D
  • editor.findMatchBackground#FF8C0044
  • editor.findMatchHighlightBackground#FF8C0033
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#FFFFFF0A
  • editor.lineHighlightBorder#C5A90033
  • editor.selectionBackground#C5A90033
  • editor.selectionHighlightBackground#C5A90022
  • editorBracketMatch.background#C5A90033
  • editorBracketMatch.border#C5A900
  • editorCursor.foreground#E0E0E0
  • editorGroupHeader.tabsBackground#0B0C1D
  • editorIndentGuide.activeBackground#C5A90044
  • editorIndentGuide.background#55555544
  • editorLineNumber.activeForeground#C5A900
  • editorLineNumber.foreground#888889
  • editorWhitespace.foreground#555555
  • focusBorder#C5A900
  • gitDecoration.conflictingResourceForeground#FF8C00
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#C5A900
  • gitDecoration.untrackedResourceForeground#00D1C1
  • input.background#151724
  • input.border#555555
  • input.foreground#E0E0E0
  • input.placeholderForeground#888889
  • inputOption.activeBorder#C5A900
  • list.activeSelectionBackground#C5A90033
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#C5A90044
  • list.highlightForeground#C5A900
  • list.hoverBackground#C5A90022
  • minimap.background#0B0C1D
  • minimapSlider.activeBackground#C5A90066
  • minimapSlider.background#C5A90022
  • minimapSlider.hoverBackground#C5A90044
  • panel.background#0B0C1D
  • panel.border#151724
  • panelTitle.activeBorder#C5A900
  • panelTitle.activeForeground#E0E0E0
  • panelTitle.inactiveForeground#888889
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#C5A90066
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#11131F
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#11131F
  • sideBarSectionHeader.foreground#C5A900
  • sideBarTitle.foreground#C5A900
  • statusBar.background#151724
  • statusBar.debuggingBackground#FF8C00
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#151724
  • statusBarItem.hoverBackground#C5A90044
  • tab.activeBackground#0B0C1D
  • tab.activeBorder#C5A900
  • tab.activeForeground#FFFFFF
  • tab.border#0B0C1D
  • tab.inactiveBackground#151724
  • tab.inactiveForeground#888889
  • terminal.ansiBlue#4B8BF5
  • terminal.ansiBrightBlue#7A9FFF
  • terminal.ansiBrightCyan#33E5D1
  • terminal.ansiBrightGreen#A9E64D
  • terminal.ansiBrightMagenta#E59FFF
  • terminal.ansiBrightRed#FF9999
  • terminal.ansiBrightYellow#E5C47A
  • terminal.ansiCyan#00D1C1
  • terminal.ansiGreen#7ED321
  • terminal.ansiMagenta#D36CFF
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#C5A900
  • terminal.background#0B0C1D
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#0B0C1D
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#151724
  • titleBar.inactiveForeground#888889

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#888889italic
string, string.quoted, string.template#00D1C1
keyword, storage.type, storage.modifier#C5A900bold
keyword.operator, punctuation.accessor#555555
variable, variable.other#E0E0E0
variable.parameter#C5A900italic
entity.name.function, support.function#4B8BF5
meta.function-call#4B8BF5
entity.name.class, entity.name.type.class, support.class#D36CFFbold
entity.name.type, support.type#D36CFF
entity.name.type.interface#D36CFFitalic
constant.numeric#FF6B6B
constant, constant.language, constant.character#C5A900
constant.language.boolean#C5A900bold
variable.other.property, support.variable.property#4B8BF5
meta.object-literal.key#4B8BF5
entity.name.tag, punctuation.definition.tag#C5A900
entity.other.attribute-name#FF6B6Bitalic
punctuation, meta.brace#CCCCCC
string.regexp#FF6B6B
constant.character.escape#FF6B6B
meta.decorator, punctuation.decorator#C5A900
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#C5A900bold
markup.bold#D36CFFbold
markup.italic#FF6B6Bitalic
markup.underline.link#4B8BF5
markup.inline.raw, markup.fenced_code#00D1C1
support.type.property-name.json#D36CFF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C5A900
support.type.property-name.css#4B8BF5
support.constant.property-value.css#00D1C1
themesmith by CyberBoost - VS Code Theme