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#C62828
  • activityBar.background#141414
  • activityBar.foreground#C62828
  • activityBarBadge.background#C62828
  • activityBarBadge.foreground#0D0D0D
  • badge.background#C62828
  • badge.foreground#0D0D0D
  • button.background#1A1A1A
  • button.foreground#E0E0E0
  • button.hoverBackground#262626
  • dropdown.background#1A1A1A
  • dropdown.border#424242
  • dropdown.foreground#E0E0E0
  • editor.background#0D0D0D
  • editor.findMatchBackground#C6282860
  • editor.findMatchHighlightBackground#C6282830
  • editor.foreground#D0D0D0
  • editor.lineHighlightBackground#26262680
  • editor.lineHighlightBorder#C6282860
  • editor.selectionBackground#C6282840
  • editor.selectionHighlightBackground#C6282830
  • editorBracketMatch.background#C6282830
  • editorBracketMatch.border#C62828
  • editorCursor.foreground#C62828
  • editorGroupHeader.tabsBackground#0D0D0D
  • editorIndentGuide.activeBackground#42424280
  • editorIndentGuide.background#42424240
  • editorLineNumber.activeForeground#C62828
  • editorLineNumber.foreground#424242
  • editorWhitespace.foreground#424242
  • focusBorder#C62828
  • gitDecoration.conflictingResourceForeground#FFCB57
  • gitDecoration.deletedResourceForeground#FF6F6F
  • gitDecoration.modifiedResourceForeground#C62828
  • gitDecoration.untrackedResourceForeground#7EDC84
  • input.background#1A1A1A
  • input.border#424242
  • input.foreground#E0E0E0
  • input.placeholderForeground#5F5F5F
  • inputOption.activeBorder#C62828
  • list.activeSelectionBackground#C62828
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#C6282840
  • list.highlightForeground#C62828
  • list.hoverBackground#C6282830
  • minimap.background#0D0D0D
  • minimapSlider.activeBackground#C6282860
  • minimapSlider.background#C6282830
  • minimapSlider.hoverBackground#C6282840
  • panel.background#0D0D0D
  • panel.border#1A1A1A
  • panelTitle.activeBorder#C62828
  • panelTitle.activeForeground#C62828
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#C6282860
  • scrollbarSlider.background#42424240
  • scrollbarSlider.hoverBackground#42424280
  • sideBar.background#151515
  • sideBar.foreground#B0B0B0
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.foreground#C62828
  • sideBarTitle.foreground#C62828
  • statusBar.background#1A1A1A
  • statusBar.debuggingBackground#C62828
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#141414
  • statusBarItem.hoverBackground#262626
  • tab.activeBackground#1A1A1A
  • tab.activeBorder#C62828
  • tab.activeForeground#FFFFFF
  • tab.border#0D0D0D
  • tab.inactiveBackground#141414
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#7A88FF
  • terminal.ansiBrightBlue#9FAAFF
  • terminal.ansiBrightCyan#81E5F5
  • terminal.ansiBrightGreen#96F7B0
  • terminal.ansiBrightMagenta#E5B3FF
  • terminal.ansiBrightRed#FF8A8A
  • terminal.ansiBrightYellow#FFEA8A
  • terminal.ansiCyan#63D1E1
  • terminal.ansiGreen#7EDC84
  • terminal.ansiMagenta#C28AFF
  • terminal.ansiRed#FF6F6F
  • terminal.ansiYellow#FFCB57
  • terminal.background#0D0D0D
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#141414
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#0D0D0D
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5F5F5Fitalic
string, string.quoted, string.template#FF7043
keyword, storage.type, storage.modifier#B71C1Cbold
keyword.operator, punctuation.accessor#E0E0E0
variable, variable.other#D0D0D0
variable.parameter#FF8A65italic
entity.name.function, support.function#FF9800
meta.function-call#FFA726
entity.name.class, entity.name.type.class, support.class#FFB74Dbold
entity.name.type, support.type#FFCC02
entity.name.type.interface#8BC34Aitalic
constant.numeric#FF7043
constant, constant.language, constant.character#FF8A65
constant.language.boolean#FF7043bold
variable.other.property, support.variable.property#D0D0D0
meta.object-literal.key#FFA726
entity.name.tag, punctuation.definition.tag#B71C1C
entity.other.attribute-name#8BC34Aitalic
punctuation, meta.brace#E0E0E0
string.regexp#FF7043
constant.character.escape#8BC34A
meta.decorator, punctuation.decorator#FFCC02
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#B71C1Cbold
markup.bold#FF8A65bold
markup.italic#8BC34Aitalic
markup.underline.link#FF7043
markup.inline.raw, markup.fenced_code#7EE8A3
support.type.property-name.json#FFA726
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFCC02
support.type.property-name.css#FFA726
support.constant.property-value.css#FF7043
themesmith by CyberBoost - VS Code Theme