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.activeBackground#E5CDD9
  • activityBar.activeBorder#C43D87
  • activityBar.background#E8DCBA
  • activityBar.border#D7C9A4
  • activityBar.foreground#58646D
  • activityBar.inactiveForeground#8A877A
  • activityBarBadge.background#C43D87
  • activityBarBadge.foreground#FFFDF5
  • button.background#3F6DB8
  • button.foreground#FFFDF5
  • button.hoverBackground#385EAA
  • button.secondaryBackground#E8DCBA
  • button.secondaryForeground#58646D
  • button.secondaryHoverBackground#DCD0AF
  • descriptionForeground#8A877A
  • disabledForeground#8A877A99
  • dropdown.background#FBF6E7
  • dropdown.border#D7C9A4
  • dropdown.foreground#58646D
  • dropdown.listBackground#EFE4C7
  • editor.background#F6EFD8
  • editor.findMatchBackground#E1C98A
  • editor.findMatchHighlightBackground#E1C98A66
  • editor.foreground#58646D
  • editor.inactiveSelectionBackground#E3DCC4
  • editor.lineHighlightBackground#F0E7CA
  • editor.lineHighlightBorder#E7DDBF
  • editor.selectionBackground#E5CDD9
  • editor.selectionForeground#39464F
  • editor.selectionHighlightBackground#C43D8714
  • editorBracketHighlight.foreground1#008FA3
  • editorBracketHighlight.foreground2#C43D87
  • editorBracketHighlight.foreground3#C2543D
  • editorBracketHighlight.foreground4#B86B29
  • editorBracketHighlight.foreground5#7257A3
  • editorBracketMatch.background#C43D8714
  • editorBracketMatch.border#C43D8766
  • editorCursor.foreground#C43D87
  • editorError.foreground#C44F4F
  • editorGroup.border#D7C9A4
  • editorGroupHeader.noTabsBackground#EFE4C7
  • editorGroupHeader.tabsBackground#EFE4C7
  • editorGroupHeader.tabsBorder#D7C9A4
  • editorIndentGuide.activeBackground#008FA366
  • editorIndentGuide.background#D7C9A466
  • editorInfo.foreground#008FA3
  • editorLineNumber.activeForeground#68747C
  • editorLineNumber.foreground#B0A78F
  • editorLink.activeForeground#008FA3
  • editorOverviewRuler.border#D7C9A4
  • editorWarning.foreground#B56A36
  • editorWhitespace.foreground#D7C9A466
  • errorForeground#C44F4F
  • focusBorder#C43D8766
  • foreground#58646D
  • icon.foreground#68747C
  • input.background#FBF6E7
  • input.border#D7C9A4
  • input.foreground#58646D
  • input.placeholderForeground#8A877A99
  • list.activeSelectionBackground#D8D2B8
  • list.activeSelectionForeground#39464F
  • list.focusOutline#C43D8766
  • list.hoverBackground#E8DCBA
  • menu.background#EFE4C7
  • menu.foreground#58646D
  • menu.selectionBackground#D8D2B8
  • menu.selectionForeground#39464F
  • panel.background#EFE4C7
  • panel.border#D7C9A4
  • panelTitle.activeBorder#C43D87
  • sash.hoverBorder#C43D87
  • selection.background#D8D2B8
  • sideBar.background#EFE4C7
  • sideBar.border#D7C9A4
  • sideBar.foreground#58646D
  • sideBarSectionHeader.background#E8DCBA
  • sideBarSectionHeader.foreground#65727A
  • statusBar.background#E8DCBA
  • statusBar.border#D7C9A4
  • statusBar.foreground#58646D
  • tab.activeBackground#F6EFD8
  • tab.activeBorder#C43D87
  • tab.activeForeground#39464F
  • tab.border#D7C9A4
  • tab.hoverBackground#EFE4C7
  • tab.inactiveBackground#E8DCBA
  • tab.inactiveForeground#8A877A
  • terminal.ansiBlack#58646D
  • terminal.ansiBlue#3F6DB8
  • terminal.ansiCyan#008FA3
  • terminal.ansiGreen#6D8A5B
  • terminal.ansiMagenta#C43D87
  • terminal.ansiRed#C2543D
  • terminal.ansiWhite#FFFDF5
  • terminal.ansiYellow#B86B29
  • terminal.background#F6EFD8
  • terminal.foreground#58646D
  • textBlockQuote.background#EFE4C7
  • textBlockQuote.border#D7C9A4
  • textCodeBlock.background#EFE4C7
  • textLink.activeForeground#008FA3
  • textLink.foreground#008FA3
  • textPreformat.foreground#4D5E68
  • textSeparator.foreground#D7C9A4
  • titleBar.activeBackground#E8DCBA
  • titleBar.activeForeground#58646D
  • titleBar.inactiveBackground#EFE4C7
  • titleBar.inactiveForeground#8A877A
  • widget.border#D7C9A4
  • widget.shadow#554A321A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A877Aitalic
keyword, keyword.control, keyword.operator, storage.type, storage.modifier#008FA3
entity.name.function, entity.name.function.call, support.function, variable.function#3F6DB8
string, string.quoted, string.template, meta.string#C2543D
constant.numeric, constant.language, constant.character, variable.constant, variable.readonly#C2543D
entity.name.type, entity.name.class, entity.name.enum, entity.name.interface, entity.name.struct, support.type, support.class#7257A3
variable, variable.other, variable.parameter, variable.other.property, support.variable.property#4D5E68
entity.name.function.decorator, meta.decorator, constant.character.escape#C43D87
keyword.operator, punctuation, punctuation.accessor#65727A
ZeroG Theme by NetMx - VS Code Theme