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#C89F5D
  • activityBar.background#E0D9C5
  • activityBar.foreground#5A4638
  • activityBarBadge.background#8B2E2E
  • activityBarBadge.foreground#FAF8F5
  • badge.background#C89F5D
  • badge.foreground#332E2B
  • button.background#8B2E2E
  • button.foreground#FAF8F5
  • button.hoverBackground#8B2E2EB0
  • dropdown.background#FAF8F5
  • dropdown.border#D4CFC9
  • dropdown.foreground#332E2B
  • editor.background#FAF8F5
  • editor.findMatchBackground#8B2E2E80
  • editor.findMatchHighlightBackground#8B2E2E40
  • editor.foreground#332E2B
  • editor.lineHighlightBackground#F5EFE6
  • editor.lineHighlightBorder#C89F5D
  • editor.selectionBackground#C89F5D80
  • editor.selectionHighlightBackground#E0D9C580
  • editorBracketMatch.background#E0D9C580
  • editorBracketMatch.border#C89F5D
  • editorCursor.foreground#2C5F2D
  • editorGroupHeader.tabsBackground#E0D9C5
  • editorIndentGuide.activeBackground#C89F5D
  • editorIndentGuide.background#D4CFC9
  • editorLineNumber.activeForeground#332E2B
  • editorLineNumber.foreground#7A6E63
  • editorWhitespace.foreground#D4CFC9
  • focusBorder#C89F5D
  • gitDecoration.conflictingResourceForeground#C89F5D
  • gitDecoration.deletedResourceForeground#8B2E2E
  • gitDecoration.modifiedResourceForeground#2C5F2D
  • gitDecoration.untrackedResourceForeground#6B8E9A
  • input.background#FAF8F5
  • input.border#D4CFC9
  • input.foreground#332E2B
  • input.placeholderForeground#7A6E63
  • inputOption.activeBorder#C89F5D
  • list.activeSelectionBackground#C89F5D80
  • list.activeSelectionForeground#FAF8F5
  • list.focusBackground#E0D9C5
  • list.highlightForeground#8B2E2E
  • list.hoverBackground#E0D9C5
  • minimap.background#FAF8F5
  • minimapSlider.activeBackground#C89F5DB0
  • minimapSlider.background#D4CFC980
  • minimapSlider.hoverBackground#C89F5D80
  • panel.background#F5EFE6
  • panel.border#D4CFC9
  • panelTitle.activeBorder#C89F5D
  • panelTitle.activeForeground#332E2B
  • panelTitle.inactiveForeground#7A6E63
  • scrollbar.shadow#D4CFC9
  • scrollbarSlider.activeBackground#C89F5DB0
  • scrollbarSlider.background#D4CFC980
  • scrollbarSlider.hoverBackground#C89F5D80
  • sideBar.background#F0EDE9
  • sideBar.foreground#5A4638
  • sideBarSectionHeader.background#E0D9C5
  • sideBarSectionHeader.foreground#332E2B
  • sideBarTitle.foreground#2C5F2D
  • statusBar.background#8B2E2E
  • statusBar.debuggingBackground#C89F5D
  • statusBar.foreground#FAF8F5
  • statusBar.noFolderBackground#6B8E9A
  • statusBarItem.hoverBackground#C89F5D80
  • tab.activeBackground#FAF8F5
  • tab.activeBorder#C89F5D
  • tab.activeForeground#332E2B
  • tab.border#D4CFC9
  • tab.inactiveBackground#E0D9C5
  • tab.inactiveForeground#7A6E63
  • terminal.ansiBlue#2C5F2D
  • terminal.ansiBrightBlue#2C5F2D
  • terminal.ansiBrightCyan#6B8E9A
  • terminal.ansiBrightGreen#8B2E2E
  • terminal.ansiBrightMagenta#C89F5D
  • terminal.ansiBrightRed#8B2E2E
  • terminal.ansiBrightYellow#E6C07B
  • terminal.ansiCyan#6B8E9A
  • terminal.ansiGreen#8B2E2E
  • terminal.ansiMagenta#C89F5D
  • terminal.ansiRed#8B2E2E
  • terminal.ansiYellow#E6C07B
  • terminal.background#FAF8F5
  • terminal.foreground#332E2B
  • titleBar.activeBackground#E0D9C5
  • titleBar.activeForeground#332E2B
  • titleBar.inactiveBackground#F5EFE6
  • titleBar.inactiveForeground#7A6E63

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A6E63italic
string, string.quoted, string.template#8B2E2E
keyword, storage.type, storage.modifier#2C5F2Dbold
keyword.operator, punctuation.accessor#C89F5D
variable, variable.other#332E2B
variable.parameter#6B8E9Aitalic
entity.name.function, support.function#8B2E2E
meta.function-call#8B2E2E
entity.name.class, entity.name.type.class, support.class#C89F5Dbold
entity.name.type, support.type#2C5F2D
entity.name.type.interface#6B8E9Aitalic
constant.numeric#E6C07B
constant, constant.language, constant.character#8B2E2E
constant.language.boolean#8B2E2Ebold
variable.other.property, support.variable.property#2C5F2D
meta.object-literal.key#6B8E9A
entity.name.tag, punctuation.definition.tag#8B2E2E
entity.other.attribute-name#6B8E9Aitalic
punctuation, meta.brace#7A6E63
string.regexp#C89F5D
constant.character.escape#8B2E2E
meta.decorator, punctuation.decorator#6B8E9A
invalid, invalid.illegal#B00000strikethrough
markup.heading, entity.name.section#C89F5Dbold
markup.bold#8B2E2Ebold
markup.italic#6B8E9Aitalic
markup.underline.link#2C5F2D
markup.inline.raw, markup.fenced_code#332E2B
support.type.property-name.json#6B8E9A
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8B2E2E
support.type.property-name.css#2C5F2D
support.constant.property-value.css#C89F5D
themesmith by CyberBoost - VS Code Theme