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#FF7043
  • activityBar.background#F5E1B5
  • activityBar.foreground#FF7043
  • activityBarBadge.background#4DB6AC
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF7043
  • badge.foreground#FFFFFF
  • button.background#FF7043
  • button.foreground#FFFFFF
  • button.hoverBackground#FF8A65
  • dropdown.background#F5E1B5
  • dropdown.border#4DB6AC
  • dropdown.foreground#4E342E
  • editor.background#FFF8E1
  • editor.findMatchBackground#FF9E80
  • editor.findMatchHighlightBackground#FF9E80
  • editor.foreground#4E342E
  • editor.lineHighlightBackground#FFECB3
  • editor.lineHighlightBorder#FF7043
  • editor.selectionBackground#FFC1A0
  • editor.selectionHighlightBackground#FFE0B2
  • editorBracketMatch.background#FFCC80
  • editorBracketMatch.border#FF7043
  • editorCursor.foreground#FF7043
  • editorGroupHeader.tabsBackground#FAF3E0
  • editorIndentGuide.activeBackground#FF7043
  • editorIndentGuide.background#D7CCC8
  • editorLineNumber.activeForeground#FF7043
  • editorLineNumber.foreground#A1887F
  • editorWhitespace.foreground#A1887F
  • focusBorder#FF7043
  • gitDecoration.conflictingResourceForeground#FFB300
  • gitDecoration.deletedResourceForeground#FF7043
  • gitDecoration.modifiedResourceForeground#4DB6AC
  • gitDecoration.untrackedResourceForeground#00897B
  • input.background#F5E1B5
  • input.border#4DB6AC
  • input.foreground#4E342E
  • input.placeholderForeground#A1887F
  • inputOption.activeBorder#FF7043
  • list.activeSelectionBackground#FFE0B2
  • list.activeSelectionForeground#4E342E
  • list.focusBackground#FFE0B2
  • list.highlightForeground#FF7043
  • list.hoverBackground#FFECB3
  • minimap.background#FFF8E1
  • minimapSlider.activeBackground#FF7043
  • minimapSlider.background#D7CCC8
  • minimapSlider.hoverBackground#BCAAA4
  • panel.background#FFF8E1
  • panel.border#E0CFA9
  • panelTitle.activeBorder#FF7043
  • panelTitle.activeForeground#4E342E
  • panelTitle.inactiveForeground#A1887F
  • scrollbar.shadow#CCCCCC
  • scrollbarSlider.activeBackground#FF7043
  • scrollbarSlider.background#D7CCC8
  • scrollbarSlider.hoverBackground#BCAAA4
  • sideBar.background#FAF3E0
  • sideBar.foreground#4E342E
  • sideBarSectionHeader.background#F5E1B5
  • sideBarSectionHeader.foreground#FF7043
  • sideBarTitle.foreground#FF7043
  • statusBar.background#FFE0B2
  • statusBar.debuggingBackground#FF7043
  • statusBar.foreground#4E342E
  • statusBar.noFolderBackground#F5E1B5
  • statusBarItem.hoverBackground#4DB6AC
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF7043
  • tab.activeForeground#4E342E
  • tab.border#E0CFA9
  • tab.inactiveBackground#FAF3E0
  • tab.inactiveForeground#A1887F
  • terminal.ansiBlue#4DB6AC
  • terminal.ansiBrightBlue#80CBC4
  • terminal.ansiBrightCyan#80CBC4
  • terminal.ansiBrightGreen#26A69A
  • terminal.ansiBrightMagenta#FF8A65
  • terminal.ansiBrightRed#FF8A65
  • terminal.ansiBrightYellow#FFD54F
  • terminal.ansiCyan#4DB6AC
  • terminal.ansiGreen#00897B
  • terminal.ansiMagenta#FF7043
  • terminal.ansiRed#FF7043
  • terminal.ansiYellow#FFB300
  • terminal.background#FFF8E1
  • terminal.foreground#4E342E
  • titleBar.activeBackground#F5E1B5
  • titleBar.activeForeground#4E342E
  • titleBar.inactiveBackground#EDE0C8
  • titleBar.inactiveForeground#A1887F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#BCAAA4italic
string, string.quoted, string.template#00897B—
keyword, storage.type, storage.modifier#FF7043bold
keyword.operator, punctuation.accessor#4DB6AC—
variable, variable.other#4E342E—
variable.parameter#4DB6ACitalic
entity.name.function, support.function#FF7043—
meta.function-call#FF7043—
entity.name.class, entity.name.type.class, support.class#FF7043bold
entity.name.type, support.type#4DB6AC—
entity.name.type.interface#4DB6ACitalic
constant.numeric#FFB300—
constant, constant.language, constant.character#FFB300—
constant.language.boolean#FFB300bold
variable.other.property, support.variable.property#00897B—
meta.object-literal.key#00897B—
entity.name.tag, punctuation.definition.tag#FF7043—
entity.other.attribute-name#4DB6ACitalic
punctuation, meta.brace#4E342E—
string.regexp#00897B—
constant.character.escape#FF7043—
meta.decorator, punctuation.decorator#FFB300—
invalid, invalid.illegal#FF7043strikethrough
markup.heading, entity.name.section#FF7043bold
markup.bold#FF7043bold
markup.italic#FF7043italic
markup.underline.link#4DB6AC—
markup.inline.raw, markup.fenced_code#00897B—
support.type.property-name.json#4DB6AC—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF7043—
support.type.property-name.css#00897B—
support.constant.property-value.css#4DB6AC—