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.background#150F09
  • activityBar.border#E8945A1F
  • activityBar.foreground#F2DFC0
  • activityBar.inactiveForeground#E8945A80
  • activityBarBadge.background#D95B5B
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D95B5B
  • badge.foreground#FFFFFF
  • button.background#E8945A
  • button.foreground#FFFFFF
  • button.hoverBackground#F5C06A
  • editor.background#150F09
  • editor.findMatchBackground#F5C06A73
  • editor.findMatchHighlightBackground#F5C06A33
  • editor.foreground#F2DFC0
  • editor.inactiveSelectionBackground#F5C06A1F
  • editor.lineHighlightBackground#1E1610B3
  • editor.selectionBackground#E8945A40
  • editor.selectionHighlightBackground#E8945A26
  • editor.wordHighlightBackground#63C5EA26
  • editor.wordHighlightStrongBackground#63C5EA47
  • editorBracketMatch.background#F5C06A33
  • editorBracketMatch.border#F5C06A
  • editorCursor.foreground#F5C06A
  • editorError.foreground#D95B5B
  • editorGroupHeader.tabsBackground#150F09
  • editorGutter.addedBackground#63C5EA99
  • editorGutter.background#150F09
  • editorGutter.deletedBackground#D95B5B99
  • editorGutter.modifiedBackground#F5C06A99
  • editorIndentGuide.activeBackground1#F5C06A66
  • editorIndentGuide.background1#E8945A26
  • editorInfo.foreground#63C5EA
  • editorLineNumber.activeForeground#F5C06A
  • editorLineNumber.foreground#E8945A73
  • editorWarning.foreground#F5C06A
  • editorWhitespace.foreground#E8945A33
  • focusBorder#F5C06A99
  • foreground#F2DFC0
  • gitDecoration.addedResourceForeground#63C5EA
  • gitDecoration.deletedResourceForeground#D95B5B
  • gitDecoration.ignoredResourceForeground#E8945A66
  • gitDecoration.modifiedResourceForeground#F5C06A
  • gitDecoration.untrackedResourceForeground#B7C3F3
  • icon.foreground#F2DFC0
  • input.background#1E1610CC
  • input.border#E8945A4D
  • input.foreground#F2DFC0
  • input.placeholderForeground#E8945A66
  • list.activeSelectionBackground#E8945A26
  • list.activeSelectionForeground#F2DFC0
  • list.highlightForeground#F5C06A
  • list.hoverBackground#E8945A14
  • list.inactiveSelectionBackground#F5C06A14
  • panel.background#150F09
  • panel.border#E8945A26
  • panelTitle.activeBorder#F5C06A
  • panelTitle.activeForeground#F5C06A
  • panelTitle.inactiveForeground#E8945A80
  • scrollbarSlider.activeBackground#F5C06A66
  • scrollbarSlider.background#E8945A26
  • scrollbarSlider.hoverBackground#E8945A4D
  • selection.background#E8945A4D
  • sideBar.background#150F09
  • sideBar.border#E8945A26
  • sideBar.foreground#F2DFC0
  • sideBarSectionHeader.background#1E161099
  • sideBarSectionHeader.border#E8945A26
  • sideBarTitle.foreground#F5C06A
  • statusBar.background#1E1610
  • statusBar.border#E8945A26
  • statusBar.foreground#F2DFC0
  • statusBarItem.remoteBackground#E8945A
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#1E1610
  • tab.activeBorderTop#F5C06A
  • tab.activeForeground#F2DFC0
  • tab.border#E8945A1A
  • tab.hoverBackground#1E161080
  • tab.inactiveBackground#150F09
  • tab.inactiveForeground#E8945AB3
  • terminal.ansiBlack#1E1610
  • terminal.ansiBlue#B7C3F3
  • terminal.ansiBrightBlack#E8945A99
  • terminal.ansiBrightBlue#63C5EA
  • terminal.ansiBrightCyan#63C5EA
  • terminal.ansiBrightGreen#A8C89A
  • terminal.ansiBrightMagenta#B7C3F3
  • terminal.ansiBrightRed#D95B5B
  • terminal.ansiBrightWhite#F2DFC0
  • terminal.ansiBrightYellow#F5C06A
  • terminal.ansiCyan#63C5EA
  • terminal.ansiGreen#7DBF8E
  • terminal.ansiMagenta#DD7596
  • terminal.ansiRed#D95B5B
  • terminal.ansiWhite#F2DFC0
  • terminal.ansiYellow#F5C06A
  • terminal.background#150F09
  • terminal.foreground#F2DFC0
  • terminalCursor.foreground#F5C06A
  • titleBar.activeBackground#150F09
  • titleBar.activeForeground#F2DFC0
  • titleBar.border#E8945A1F
  • titleBar.inactiveBackground#150F09CC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#E8945A80italic
keyword, keyword.control, storage.modifier#DD7596
storage.type#DD7596italic
string, string.quoted, string.template#B7C3F3
constant.numeric#E8945A
constant.language#E8945Aitalic
variable.other.constant, constant.other#E8945A
entity.name.function, support.function#63C5EA
variable.parameter#B7C3F3
entity.name.class, entity.name.type.class#F5C06A
entity.name.type.interface, entity.name.type.alias, entity.name.type#F5C06Aitalic
support.type.property-name, meta.object-literal.key#ECDA90
punctuation, meta.brace, punctuation.separator#F5C06AB3
keyword.operator#F5C06ACC
entity.name.tag#DD7596
entity.other.attribute-name#F5C06A
support.type.property-name.css#63C5EA
variable.language.this, variable.language.self#DD7596italic
meta.decorator, entity.name.function.decorator#F5C06Aitalic
markup.heading#F5C06Abold