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#FFD700
  • activityBar.background#4B1111
  • activityBar.foreground#FFD700
  • activityBarBadge.background#D4AF37
  • activityBarBadge.foreground#0D0D0D
  • badge.background#D4AF37
  • badge.foreground#0D0D0D
  • button.background#8C5A7B
  • button.foreground#E0E0E0
  • button.hoverBackground#B87333
  • dropdown.background#2E1C0D
  • dropdown.border#8C5A7B
  • dropdown.foreground#FFD700
  • editor.background#0D0D0D
  • editor.findMatchBackground#8C5A7B
  • editor.findMatchHighlightBackground#B87333
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#2A2A2A
  • editor.lineHighlightBorder#444444
  • editor.selectionBackground#265F71
  • editor.selectionHighlightBackground#4C7C92
  • editorBracketMatch.background#4C7C92
  • editorBracketMatch.border#FFD700
  • editorCursor.foreground#FFD700
  • editorGroupHeader.tabsBackground#0D0D0D
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#FFD700
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#444444
  • focusBorder#FFD700
  • gitDecoration.conflictingResourceForeground#8C5A7B
  • gitDecoration.deletedResourceForeground#B87333
  • gitDecoration.modifiedResourceForeground#236B8E
  • gitDecoration.untrackedResourceForeground#2A7F62
  • input.background#2E1C0D
  • input.border#8C5A7B
  • input.foreground#FFD700
  • input.placeholderForeground#555555
  • inputOption.activeBorder#FFD700
  • list.activeSelectionBackground#264F5A
  • list.activeSelectionForeground#FFD700
  • list.focusBackground#4C7C92
  • list.highlightForeground#FFD700
  • list.hoverBackground#333333
  • minimap.background#0D0D0D
  • minimapSlider.activeBackground#555555
  • minimapSlider.background#333333
  • minimapSlider.hoverBackground#444444
  • panel.background#1E1E1E
  • panel.border#333333
  • panelTitle.activeBorder#FFD700
  • panelTitle.activeForeground#FFD700
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#555555
  • scrollbarSlider.background#333333
  • scrollbarSlider.hoverBackground#444444
  • sideBar.background#1E1E1E
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#2E1C0D
  • sideBarSectionHeader.foreground#FFD700
  • sideBarTitle.foreground#FFD700
  • statusBar.background#0A3B46
  • statusBar.debuggingBackground#8C5A7B
  • statusBar.foreground#FFD700
  • statusBar.noFolderBackground#2E1C0D
  • statusBarItem.hoverBackground#FFB800
  • tab.activeBackground#2E1C0D
  • tab.activeBorder#FFD700
  • tab.activeForeground#FFD700
  • tab.border#2A2A2A
  • tab.inactiveBackground#1E1E1E
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#236B8E
  • terminal.ansiBrightBlue#3A9AD9
  • terminal.ansiBrightCyan#3DE8EB
  • terminal.ansiBrightGreen#5BCF9C
  • terminal.ansiBrightMagenta#C785B5
  • terminal.ansiBrightRed#E89A5B
  • terminal.ansiBrightYellow#FFD700
  • terminal.ansiCyan#00C5C5
  • terminal.ansiGreen#2A7F62
  • terminal.ansiMagenta#8C5A7B
  • terminal.ansiRed#B87333
  • terminal.ansiYellow#D4AF37
  • terminal.background#0D0D0D
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#7B2D2D
  • titleBar.activeForeground#FFD700
  • titleBar.inactiveBackground#1E1E1E
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6A6Aitalic
string, string.quoted, string.template#FFD700
keyword, storage.type, storage.modifier#7B2D2Dbold
keyword.operator, punctuation.accessor#236B8E
variable, variable.other#E0E0E0
variable.parameter#236B8Eitalic
entity.name.function, support.function#FFB800
meta.function-call#FFD700
entity.name.class, entity.name.type.class, support.class#8C5A7Bbold
entity.name.type, support.type#B87333
entity.name.type.interface#236B8Eitalic
constant.numeric#5BCF9C
constant, constant.language, constant.character#D4AF37
constant.language.boolean#7B2D2Dbold
variable.other.property, support.variable.property#236B8E
meta.object-literal.key#FFD700
entity.name.tag, punctuation.definition.tag#B87333
entity.other.attribute-name#8C5A7Bitalic
punctuation, meta.brace#A0A0A0
string.regexp#5BCF9C
constant.character.escape#E89A5B
meta.decorator, punctuation.decorator#FFD700
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#FFD700bold
markup.bold#FFD700bold
markup.italic#FFD700italic
markup.underline.link#236B8E
markup.inline.raw, markup.fenced_code#B87333
support.type.property-name.json#FFD700
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8C5A7B
support.type.property-name.css#236B8E
support.constant.property-value.css#B87333
themesmith by CyberBoost - VS Code Theme