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—