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#C56A34
  • activityBar.background#7A5C3B
  • activityBar.foreground#FAF5E6
  • activityBarBadge.background#C56A34
  • activityBarBadge.foreground#FAF5E6
  • badge.background#C56A34
  • badge.foreground#FAF5E6
  • button.background#C56A34
  • button.foreground#FAF5E6
  • button.hoverBackground#D18C5A
  • dropdown.background#FFF8EF
  • dropdown.border#7A5C3B
  • dropdown.foreground#4A4037
  • editor.background#FAF5E6
  • editor.findMatchBackground#C56A3440
  • editor.findMatchHighlightBackground#C56A3420
  • editor.foreground#4A4037
  • editor.lineHighlightBackground#C56A3420
  • editor.lineHighlightBorder#C56A3480
  • editor.selectionBackground#C56A3440
  • editor.selectionHighlightBackground#C56A3430
  • editorBracketMatch.background#2B8E8A20
  • editorBracketMatch.border#2B8E8A80
  • editorCursor.foreground#C56A34
  • editorGroupHeader.tabsBackground#E8DDC8
  • editorIndentGuide.activeBackground#9A8B80
  • editorIndentGuide.background#9A8B8080
  • editorLineNumber.activeForeground#C56A34
  • editorLineNumber.foreground#7A5C3B
  • editorWhitespace.foreground#9A8B80
  • focusBorder#C56A34
  • gitDecoration.conflictingResourceForeground#C56A34
  • gitDecoration.deletedResourceForeground#9A8B80
  • gitDecoration.modifiedResourceForeground#C56A34
  • gitDecoration.untrackedResourceForeground#2B8E8A
  • input.background#FFF8EF
  • input.border#7A5C3B
  • input.foreground#4A4037
  • input.placeholderForeground#9A8B80
  • inputOption.activeBorder#C56A34
  • list.activeSelectionBackground#C56A34
  • list.activeSelectionForeground#FAF5E6
  • list.focusBackground#C56A34
  • list.highlightForeground#C56A34
  • list.hoverBackground#C56A3333
  • minimap.background#FAF5E6
  • minimapSlider.activeBackground#C56A3370
  • minimapSlider.background#C56A3330
  • minimapSlider.hoverBackground#C56A3350
  • panel.background#FAF5E6
  • panel.border#7A5C3B
  • panelTitle.activeBorder#C56A34
  • panelTitle.activeForeground#C56A34
  • panelTitle.inactiveForeground#9A8B80
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#9A8B80A0
  • scrollbarSlider.background#9A8B8080
  • scrollbarSlider.hoverBackground#9A8B8090
  • sideBar.background#F2E9D9
  • sideBar.foreground#4A4037
  • sideBarSectionHeader.background#E8DDC8
  • sideBarSectionHeader.foreground#C56A34
  • sideBarTitle.foreground#C56A34
  • statusBar.background#C56A34
  • statusBar.debuggingBackground#2B8E8A
  • statusBar.foreground#FAF5E6
  • statusBar.noFolderBackground#7A5C3B
  • statusBarItem.hoverBackground#D18C5A
  • tab.activeBackground#C56A34
  • tab.activeBorder#FAF5E6
  • tab.activeForeground#FAF5E6
  • tab.border#7A5C3B
  • tab.inactiveBackground#E8DDC8
  • tab.inactiveForeground#4A4037
  • terminal.ansiBlue#2B8E8A
  • terminal.ansiBrightBlue#54B2AE
  • terminal.ansiBrightCyan#54B2AE
  • terminal.ansiBrightGreen#E0A060
  • terminal.ansiBrightMagenta#C98F7A
  • terminal.ansiBrightRed#B68A79
  • terminal.ansiBrightYellow#E8C090
  • terminal.ansiCyan#2B8E8A
  • terminal.ansiGreen#C56A34
  • terminal.ansiMagenta#7A5C3B
  • terminal.ansiRed#9A8B80
  • terminal.ansiYellow#C56A34
  • terminal.background#FAF5E6
  • terminal.foreground#4A4037
  • titleBar.activeBackground#7A5C3B
  • titleBar.activeForeground#FAF5E6
  • titleBar.inactiveBackground#9A7C64
  • titleBar.inactiveForeground#FAF5E6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9A8B80italic
string, string.quoted, string.template#2B8E8A
keyword, storage.type, storage.modifier#C56A34bold
keyword.operator, punctuation.accessor#7A5C3B
variable, variable.other#4A4037
variable.parameter#2B8E8Aitalic
entity.name.function, support.function#7A5C3B
meta.function-call#C56A34
entity.name.class, entity.name.type.class, support.class#C56A34bold
entity.name.type, support.type#7A5C3B
entity.name.type.interface#2B8E8Aitalic
constant.numeric#C56A34
constant, constant.language, constant.character#C56A34
constant.language.boolean#C56A34bold
variable.other.property, support.variable.property#7A5C3B
meta.object-literal.key#C56A34
entity.name.tag, punctuation.definition.tag#C56A34
entity.other.attribute-name#7A5C3Bitalic
punctuation, meta.brace#4A4037
string.regexp#2B8E8A
constant.character.escape#C56A34
meta.decorator, punctuation.decorator#7A5C3B
invalid, invalid.illegal#D9534Fstrikethrough
markup.heading, entity.name.section#C56A34bold
markup.bold#C56A34bold
markup.italic#7A5C3Bitalic
markup.underline.link#2B8E8A
markup.inline.raw, markup.fenced_code#C56A34
support.type.property-name.json#C56A34
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7A5C3B
support.type.property-name.css#C56A34
support.constant.property-value.css#2B8E8A
themesmith by CyberBoost - VS Code Theme