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#FFE0B2
  • activityBar.foreground#00695C
  • activityBarBadge.background#FF7043
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF7043
  • badge.foreground#FFFFFF
  • button.background#FF7043
  • button.foreground#FFFFFF
  • button.hoverBackground#FF8A65
  • dropdown.background#FFE0B2
  • dropdown.border#FFE082
  • dropdown.foreground#424242
  • editor.background#FFF8E1
  • editor.findMatchBackground#FF704344
  • editor.findMatchHighlightBackground#FF704322
  • editor.foreground#424242
  • editor.lineHighlightBackground#FFF59D40
  • editor.lineHighlightBorder#FF7043
  • editor.selectionBackground#80CBC44D
  • editor.selectionHighlightBackground#80CBC433
  • editorBracketMatch.background#80CBC033
  • editorBracketMatch.border#80CBC0
  • editorCursor.foreground#FF7043
  • editorGroupHeader.tabsBackground#FFF8E1
  • editorIndentGuide.activeBackground#9E9E9E66
  • editorIndentGuide.background#9E9E9E33
  • editorLineNumber.activeForeground#FF7043
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#9E9E9E66
  • focusBorder#FF7043
  • gitDecoration.conflictingResourceForeground#FDD835
  • gitDecoration.deletedResourceForeground#E53935
  • gitDecoration.modifiedResourceForeground#FF7043
  • gitDecoration.untrackedResourceForeground#7CB342
  • input.background#FFE0B2
  • input.border#FFE082
  • input.foreground#424242
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#FF7043
  • list.activeSelectionBackground#FF704366
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#FF704355
  • list.highlightForeground#FF7043
  • list.hoverBackground#FF704344
  • minimap.background#FFF8E1
  • minimapSlider.activeBackground#FF704388
  • minimapSlider.background#FF704344
  • minimapSlider.hoverBackground#FF704366
  • panel.background#FFF8E1
  • panel.border#FFE082
  • panelTitle.activeBorder#FF7043
  • panelTitle.activeForeground#424242
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#FF704088
  • scrollbarSlider.background#9E9E9E44
  • scrollbarSlider.hoverBackground#9E9E9E66
  • sideBar.background#FFECB3
  • sideBar.foreground#424242
  • sideBarSectionHeader.background#FFE082
  • sideBarSectionHeader.foreground#424242
  • sideBarTitle.foreground#FF7043
  • statusBar.background#FF7043
  • statusBar.debuggingBackground#00695C
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#FFE082
  • statusBarItem.hoverBackground#FF8A65
  • tab.activeBackground#FFF8E1
  • tab.activeBorder#FF7043
  • tab.activeForeground#424242
  • tab.border#FFE082
  • tab.inactiveBackground#FFECB3
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#4DB6AC
  • terminal.ansiBrightBlue#80CBC4
  • terminal.ansiBrightCyan#4DB6AC
  • terminal.ansiBrightGreen#AED581
  • terminal.ansiBrightMagenta#CE93D8
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#26A69A
  • terminal.ansiGreen#7CB342
  • terminal.ansiMagenta#AB47BC
  • terminal.ansiRed#E53935
  • terminal.ansiYellow#FDD835
  • terminal.background#FFF8E1
  • terminal.foreground#424242
  • titleBar.activeBackground#FFF8E1
  • titleBar.activeForeground#424242
  • titleBar.inactiveBackground#FFECB3
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#009688
keyword, storage.type, storage.modifier#FF7043bold
keyword.operator, punctuation.accessor#00695C
variable, variable.other#424242
variable.parameter#FF7043italic
entity.name.function, support.function#4DB6AC
meta.function-call#FF7043
entity.name.class, entity.name.type.class, support.class#00695Cbold
entity.name.type, support.type#4DB6AC
entity.name.type.interface#FF7043italic
constant.numeric#FF7043
constant, constant.language, constant.character#4DB6AC
constant.language.boolean#FF7043bold
variable.other.property, support.variable.property#7CB342
meta.object-literal.key#4DB6AC
entity.name.tag, punctuation.definition.tag#FF7043
entity.other.attribute-name#4DB6ACitalic
punctuation, meta.brace#424242
string.regexp#FF7043
constant.character.escape#4DB6AC
meta.decorator, punctuation.decorator#FF7043
invalid, invalid.illegal#E53935strikethrough
markup.heading, entity.name.section#FF7043bold
markup.bold#FF7043bold
markup.italic#00695Citalic
markup.underline.link#4DB6AC
markup.inline.raw, markup.fenced_code#009688
support.type.property-name.json#4DB6AC
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF7043
support.type.property-name.css#009688
support.constant.property-value.css#4DB6AC