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