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#8C1A0A
  • activityBar.background#F0EFEB
  • activityBar.foreground#C44133
  • activityBarBadge.background#C44133
  • activityBarBadge.foreground#FAF8F5
  • badge.background#C44133
  • badge.foreground#FAF8F5
  • button.background#C44133
  • button.foreground#FAF8F5
  • button.hoverBackground#8C1A0A
  • dropdown.background#FFFFFF
  • dropdown.border#C0C0C0
  • dropdown.foreground#2B2B2B
  • editor.background#FAF8F5
  • editor.findMatchBackground#D8432D40
  • editor.findMatchHighlightBackground#D8432D20
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#C4413320
  • editor.lineHighlightBorder#C4413360
  • editor.selectionBackground#C4413340
  • editor.selectionHighlightBackground#C4413330
  • editorBracketMatch.background#C4413320
  • editorBracketMatch.border#C44133
  • editorCursor.foreground#C44133
  • editorGroupHeader.tabsBackground#FAF8F5
  • editorIndentGuide.activeBackground#8C1A0A
  • editorIndentGuide.background#C0C0C0
  • editorLineNumber.activeForeground#2B2B2B
  • editorLineNumber.foreground#A0A0A0
  • editorWhitespace.foreground#B0B0B0
  • focusBorder#C44133
  • gitDecoration.conflictingResourceForeground#E6A23C
  • gitDecoration.deletedResourceForeground#8C1A0A
  • gitDecoration.modifiedResourceForeground#C44133
  • gitDecoration.untrackedResourceForeground#2A9D44
  • input.background#FFFFFF
  • input.border#C0C0C0
  • input.foreground#2B2B2B
  • input.placeholderForeground#7A7A7A
  • inputOption.activeBorder#C44133
  • list.activeSelectionBackground#C4413330
  • list.activeSelectionForeground#FAF8F5
  • list.focusBackground#C4413340
  • list.highlightForeground#C44133
  • list.hoverBackground#C4413320
  • minimap.background#FAF8F5
  • minimapSlider.activeBackground#C4413370
  • minimapSlider.background#C4413330
  • minimapSlider.hoverBackground#C4413350
  • panel.background#F5F4F0
  • panel.border#D3D1CD
  • panelTitle.activeBorder#C44133
  • panelTitle.activeForeground#2B2B2B
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#C4413380
  • scrollbarSlider.background#C0C0C080
  • scrollbarSlider.hoverBackground#C0C0C0A0
  • sideBar.background#F5F4F0
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#E5E3DF
  • sideBarSectionHeader.foreground#8C1A0A
  • sideBarTitle.foreground#C44133
  • statusBar.background#8C1A0A
  • statusBar.debuggingBackground#C44133
  • statusBar.foreground#FAF8F5
  • statusBar.noFolderBackground#E5E3DF
  • statusBarItem.hoverBackground#C4413355
  • tab.activeBackground#FAF8F5
  • tab.activeBorder#C44133
  • tab.activeForeground#2B2B2B
  • tab.border#D3D1CD
  • tab.inactiveBackground#F2F1ED
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#285EA8
  • terminal.ansiBrightBlue#3A8DFF
  • terminal.ansiBrightCyan#12B5C4
  • terminal.ansiBrightGreen#4EE76E
  • terminal.ansiBrightMagenta#8E24AA
  • terminal.ansiBrightRed#E55E4D
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#0F7C9D
  • terminal.ansiGreen#2A9D44
  • terminal.ansiMagenta#6A1B9A
  • terminal.ansiRed#C44133
  • terminal.ansiYellow#E6A23C
  • terminal.background#FAF8F5
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#E5E3DF
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#F2F1ED
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
string, string.quoted, string.template#D8432D
keyword, storage.type, storage.modifier#C44133bold
keyword.operator, punctuation.accessor#8C1A0A
variable, variable.other#2B2B2B
variable.parameter#8C1A0Aitalic
entity.name.function, support.function#285EA8
meta.function-call#2A9D44
entity.name.class, entity.name.type.class, support.class#6A1B9Abold
entity.name.type, support.type#3A8DFF
entity.name.type.interface#8E24AAitalic
constant.numeric#E6A23C
constant, constant.language, constant.character#FFEB3B
constant.language.boolean#C44133bold
variable.other.property, support.variable.property#0F7C9D
meta.object-literal.key#8C1A0A
entity.name.tag, punctuation.definition.tag#C44133
entity.other.attribute-name#2A9D44italic
punctuation, meta.brace#8C1A0A
string.regexp#E6A23C
constant.character.escape#8C1A0A
meta.decorator, punctuation.decorator#6A1B9A
invalid, invalid.illegal#FF6F6Fstrikethrough
markup.heading, entity.name.section#C44133bold
markup.bold#C44133bold
markup.italic#8C1A0Aitalic
markup.underline.link#285EA8
markup.inline.raw, markup.fenced_code#2A9D44
support.type.property-name.json#285EA8
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8C1A0A
support.type.property-name.css#2A9D44
support.constant.property-value.css#285EA8
themesmith by CyberBoost - VS Code Theme