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#131810
  • activityBar.border#67796B33
  • activityBar.foreground#B9C6AE
  • activityBar.inactiveForeground#8A95A5
  • activityBarBadge.background#BE9E5F
  • activityBarBadge.foreground#121810
  • badge.background#75C2AA
  • badge.foreground#121810
  • breadcrumb.activeSelectionForeground#B9C6AE
  • breadcrumb.background#121810
  • breadcrumb.focusForeground#B9C6AE
  • breadcrumb.foreground#8A95A5
  • button.background#5E5572
  • button.foreground#B9C6AE
  • button.hoverBackground#71668A
  • button.secondaryBackground#1A2116
  • button.secondaryForeground#B9C6AE
  • button.secondaryHoverBackground#293423
  • dropdown.background#0E120C
  • dropdown.border#757083
  • dropdown.foreground#B9C6AE
  • editor.background#121810
  • editor.findMatchBackground#CBD5A466
  • editor.findMatchHighlightBackground#CBD5A433
  • editor.foreground#B9C6AE
  • editor.inactiveSelectionBackground#47405659
  • editor.lineHighlightBackground#47405640
  • editor.selectionBackground#47405699
  • editor.selectionHighlightBackground#47405659
  • editor.wordHighlightBackground#47405666
  • editor.wordHighlightStrongBackground#47405699
  • editorBracketMatch.background#47405680
  • editorBracketMatch.border#BE9E5F
  • editorCursor.foreground#BE9E5F
  • editorError.foreground#D9707A
  • editorGroup.border#67796B33
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#1A2116
  • editorGroupHeader.tabsBorder#00000000
  • editorIndentGuide.activeBackground1#8A95A599
  • editorIndentGuide.background1#75708340
  • editorInfo.foreground#8AB4D8
  • editorLineNumber.activeForeground#B9C6AE
  • editorLineNumber.foreground#8A95A5
  • editorRuler.foreground#75708366
  • editorWarning.foreground#E0B168
  • editorWhitespace.foreground#8A95A54D
  • focusBorder#BE9E5F
  • foreground#B9C6AE
  • gitDecoration.addedResourceForeground#8FC98A
  • gitDecoration.deletedResourceForeground#D9707A
  • gitDecoration.ignoredResourceForeground#8A95A5
  • gitDecoration.modifiedResourceForeground#E0B168
  • gitDecoration.untrackedResourceForeground#85AECC
  • input.background#0E120C
  • input.border#757083
  • input.foreground#B9C6AE
  • input.placeholderForeground#8A95A5
  • inputOption.activeBorder#75C2AA
  • list.activeSelectionBackground#474056B3
  • list.activeSelectionForeground#B9C6AE
  • list.focusBackground#474056B3
  • list.focusForeground#B9C6AE
  • list.highlightForeground#75C2AA
  • list.hoverBackground#4740564D
  • list.hoverForeground#B9C6AE
  • list.inactiveSelectionBackground#4740564D
  • list.inactiveSelectionForeground#B9C6AE
  • minimapSlider.activeBackground#BE9E5F
  • notificationLink.foreground#75C2AA
  • notifications.background#1A2116
  • notifications.border#757083
  • notifications.foreground#B9C6AE
  • panel.background#121810
  • panel.border#67796B33
  • panelSection.border#67796B33
  • panelSectionHeader.background#121810
  • panelSectionHeader.border#67796B33
  • panelSectionHeader.foreground#8A95A5
  • panelTitle.activeBorder#BE9E5F
  • panelTitle.activeForeground#B9C6AE
  • panelTitle.inactiveForeground#8A95A5
  • sash.hoverBorder#BE9E5F
  • scrollbarSlider.activeBackground#BE9E5F
  • scrollbarSlider.background#4740564D
  • scrollbarSlider.hoverBackground#47405680
  • selection.background#47405699
  • sideBar.background#1A2116
  • sideBar.border#67796B33
  • sideBar.foreground#B9C6AE
  • sideBarSectionHeader.background#1A2116
  • sideBarSectionHeader.border#67796B33
  • sideBarSectionHeader.foreground#8A95A5
  • sideBarTitle.border#00000000
  • sideBarTitle.foreground#B9C6AE
  • statusBar.background#0E120C
  • statusBar.border#67796B33
  • statusBar.debuggingBackground#CBD5A4
  • statusBar.debuggingForeground#121810
  • statusBar.foreground#B9C6AE
  • statusBar.noFolderBackground#0E120C
  • statusBarItem.hoverBackground#B9C6AE26
  • statusBarItem.remoteBackground#95D5C2
  • statusBarItem.remoteForeground#121810
  • tab.activeBackground#121810
  • tab.activeBorderTop#BE9E5F
  • tab.activeForeground#B9C6AE
  • tab.border#00000000
  • tab.hoverBackground#242E1F
  • tab.inactiveBackground#1A2116
  • tab.inactiveForeground#8A95A5
  • tab.unfocusedActiveBackground#121810
  • tab.unfocusedActiveBorderTop#BE9E5F80
  • tab.unfocusedActiveForeground#8A95A5
  • terminal.ansiBlack#121810
  • terminal.ansiBlue#75C2AA
  • terminal.ansiBrightBlack#8A95A5
  • terminal.ansiBrightBlue#91CFBB
  • terminal.ansiBrightCyan#B2E0D3
  • terminal.ansiBrightGreen#A8D5A4
  • terminal.ansiBrightMagenta#EEC2A0
  • terminal.ansiBrightRed#E2929A
  • terminal.ansiBrightWhite#D3DBCC
  • terminal.ansiBrightYellow#E7C188
  • terminal.ansiCyan#95D5C2
  • terminal.ansiGreen#8FC98A
  • terminal.ansiMagenta#E8AB7D
  • terminal.ansiRed#D9707A
  • terminal.ansiWhite#B9C6AE
  • terminal.ansiYellow#E0B168
  • terminal.background#121810
  • terminal.foreground#B9C6AE
  • titleBar.activeBackground#1A2116
  • titleBar.activeForeground#B9C6AE
  • titleBar.border#67796B33
  • titleBar.inactiveBackground#1A2116
  • titleBar.inactiveForeground#8A95A5
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#67796Bitalic
keyword, keyword.control, keyword.other, storage, storage.type, storage.modifier#E8AB7D
string, string.quoted, string.quoted.single, string.quoted.double, string.template, punctuation.definition.string#85AECC
constant, constant.numeric, constant.language, constant.character, constant.other#CBD5A4
entity.name.function, support.function, meta.function-call, variable.function#75C2AA
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, entity.other.inherited-class, support.type, support.class#95D5C2
variable, variable.other, variable.parameter, meta.parameter#A8A699
keyword.operator, punctuation, punctuation.separator, punctuation.terminator, meta.brace#738277
entity.name.tag, meta.tag#D18752
entity.other.attribute-name, meta.attribute, support.type.property-name#E1C499
heading.1.markdown, heading.2.markdown, heading.3.markdown, entity.name.section.markdown#E8AB7D
markup.underline.link, string.other.link#75C2AA
markup.bold#CBD5A4bold
markup.italic#95D5C2italic
support.type.property-name.json, source.json meta.structure.dictionary.json > string.quoted.json#E1C499
invalid, invalid.illegal#D9707A
invalid.deprecated#E0B168
DuskGrove by Ayan Banerjee - VS Code Theme