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#B0A75A
  • activityBar.background#0E0E07
  • activityBar.border#2A2920
  • activityBar.foreground#D8D2C4
  • activityBar.inactiveForeground#8A867C
  • activityBarBadge.background#B7AE56
  • activityBarBadge.foreground#1F211D
  • badge.background#2F2E23
  • badge.foreground#D8D2C4
  • button.background#B0A75A
  • button.border#1F211D1A
  • button.foreground#1F211D
  • button.hoverBackground#C9C173
  • button.secondaryBackground#2F2E23
  • button.secondaryForeground#D8D2C4
  • button.secondaryHoverBackground#222117
  • chat.editedFileForeground#9FC58A
  • chat.slashCommandBackground#433E1399
  • chat.slashCommandForeground#C9C173
  • checkbox.background#19180E
  • checkbox.border#3F3E32
  • debugToolBar.background#0E0E07
  • descriptionForeground#8A867C
  • dropdown.background#19180E
  • dropdown.border#3F3E32
  • dropdown.foreground#D8D2C4
  • dropdown.listBackground#19180E
  • editor.background#19180E
  • editor.findMatchBackground#9FC58A88
  • editor.findMatchHighlightBackground#9FC58A44
  • editor.foreground#D8D2C4
  • editor.inactiveSelectionBackground#2F2E23
  • editor.lineHighlightBackground#222117
  • editor.selectionBackground#433E13
  • editor.selectionHighlightBackground#433E1388
  • editor.wordHighlightBackground#9FC58A33
  • editor.wordHighlightStrongBackground#7BC39F55
  • editorBracketMatch.background#9FC58A55
  • editorBracketMatch.border#9FC58A
  • editorCursor.foreground#B7AE56
  • editorGroup.border#2A2920
  • editorGroupHeader.tabsBackground#0E0E07
  • editorGroupHeader.tabsBorder#2A2920
  • editorGutter.addedBackground#B1A47D
  • editorGutter.deletedBackground#ED8B88
  • editorGutter.modifiedBackground#D0A66C
  • editorIndentGuide.activeBackground1#8A867C
  • editorIndentGuide.background1#2A2920
  • editorLineNumber.activeForeground#B0A75A
  • editorLineNumber.foreground#8A867C
  • editorOverviewRuler.border#2A2920
  • editorSuggestWidget.background#222117
  • editorSuggestWidget.border#3F3E32
  • editorSuggestWidget.foreground#D8D2C4
  • editorSuggestWidget.highlightForeground#D0A66C
  • editorSuggestWidget.selectedBackground#2F2E23
  • editorWidget.background#222117
  • editorWidget.border#3F3E32
  • errorForeground#ED8B88
  • focusBorder#B0A75A
  • foreground#D8D2C4
  • icon.foreground#D8D2C4
  • input.background#19180E
  • input.border#3F3E32
  • input.foreground#D8D2C4
  • input.placeholderForeground#8A867C
  • inputOption.activeBackground#433E1399
  • inputOption.activeBorder#B0A75A
  • inputOption.activeForeground#FFFFFF
  • keybindingLabel.background#2F2E23
  • keybindingLabel.border#3F3E32
  • keybindingLabel.foreground#D8D2C4
  • list.activeSelectionBackground#433E13
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#FFFFFF
  • list.dropBackground#9FC58A55
  • list.focusAndSelectionOutline#B0A75A
  • list.focusBackground#433E1388
  • list.highlightForeground#D0A66C
  • list.hoverBackground#222117
  • list.inactiveSelectionBackground#2F2E23
  • menu.background#19180E
  • menu.border#3F3E32
  • menu.foreground#D8D2C4
  • menu.selectionBackground#B0A75A
  • menu.selectionForeground#1F211D
  • notebook.cellBorderColor#2A2920
  • notebook.selectedCellBackground#433E1366
  • notificationCenterHeader.background#0E0E07
  • notificationCenterHeader.foreground#D8D2C4
  • notifications.background#19180E
  • notifications.border#2A2920
  • notifications.foreground#D8D2C4
  • panel.background#222117
  • panel.border#2A2920
  • panelInput.border#3F3E32
  • panelTitle.activeBorder#B0A75A
  • panelTitle.activeForeground#D8D2C4
  • panelTitle.inactiveForeground#8A867C
  • peekViewEditor.background#19180E
  • peekViewEditor.matchHighlightBackground#9FC58A66
  • peekViewResult.background#222117
  • peekViewResult.matchHighlightBackground#9FC58A66
  • pickerGroup.border#3F3E32
  • pickerGroup.foreground#B1A47D
  • ports.iconRunningProcessForeground#B0A75A
  • progressBar.background#B0A75A
  • quickInput.background#222117
  • quickInput.foreground#D8D2C4
  • searchEditor.textInputBorder#3F3E32
  • settings.dropdownBackground#19180E
  • settings.dropdownBorder#3F3E32
  • settings.headerForeground#F0E8D8
  • settings.modifiedItemIndicator#9FC58A
  • settings.numberInputBorder#3F3E32
  • settings.textInputBorder#3F3E32
  • sideBar.background#0E0E07
  • sideBar.border#2A2920
  • sideBar.foreground#D8D2C4
  • sideBarSectionHeader.background#222117
  • sideBarSectionHeader.border#2A2920
  • sideBarSectionHeader.foreground#D8D2C4
  • sideBarTitle.foreground#F0E8D8
  • statusBar.background#0E0E07
  • statusBar.border#2A2920
  • statusBar.debuggingBackground#9FC58A
  • statusBar.debuggingForeground#1F211D
  • statusBar.focusBorder#B0A75A
  • statusBar.foreground#D8D2C4
  • statusBar.noFolderBackground#19180E
  • statusBarItem.errorBackground#ED8B88
  • statusBarItem.focusBorder#B0A75A
  • statusBarItem.hoverBackground#FFFFFF1A
  • statusBarItem.hoverForeground#F0E8D8
  • statusBarItem.prominentBackground#2F2E23
  • statusBarItem.remoteBackground#B0A75A
  • statusBarItem.remoteForeground#1F211D
  • tab.activeBackground#19180E
  • tab.activeBorder#19180E
  • tab.activeBorderTop#B0A75A
  • tab.activeForeground#F0E8D8
  • tab.border#2A2920
  • tab.hoverBackground#19180E
  • tab.inactiveBackground#0E0E07
  • tab.inactiveForeground#8A867C
  • tab.lastPinnedBorder#3F3E32
  • tab.selectedBorderTop#B7AE56
  • tab.unfocusedActiveBorder#19180E
  • tab.unfocusedActiveBorderTop#2A2920
  • tab.unfocusedHoverBackground#0E0E07
  • terminal.ansiBlack#1A1B18
  • terminal.ansiBlue#D0A66C
  • terminal.ansiBrightBlack#8A867C
  • terminal.ansiBrightBlue#D0A66C
  • terminal.ansiBrightCyan#DDAC83
  • terminal.ansiBrightGreen#B0A75A
  • terminal.ansiBrightMagenta#7BC39F
  • terminal.ansiBrightRed#B7AE56
  • terminal.ansiBrightWhite#F0E8D8
  • terminal.ansiBrightYellow#9FC58A
  • terminal.ansiCyan#DDAC83
  • terminal.ansiGreen#AEBC82
  • terminal.ansiMagenta#7BC39F
  • terminal.ansiRed#ED8B88
  • terminal.ansiWhite#D8D2C4
  • terminal.ansiYellow#9FC58A
  • terminal.background#19180E
  • terminal.foreground#D8D2C4
  • terminal.inactiveSelectionBackground#2F2E23
  • terminal.tab.activeBorder#B0A75A
  • terminalCursor.foreground#B7AE56
  • textBlockQuote.background#222117
  • textBlockQuote.border#B1A47D
  • textCodeBlock.background#222117
  • textLink.activeForeground#B7AE56
  • textLink.foreground#D0A66C
  • textPreformat.background#2F2E23
  • textPreformat.foreground#D8D2C4
  • textSeparator.foreground#3F3E32
  • titleBar.activeBackground#0E0E07
  • titleBar.activeForeground#D8D2C4
  • titleBar.border#2A2920
  • titleBar.inactiveBackground#19180E
  • titleBar.inactiveForeground#8A867C
  • welcomePage.progress.foreground#B0A75A
  • welcomePage.tileBackground#222117
  • widget.border#3F3E32

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D8D2C4
emphasisitalic
strongbold
comment#B1A47D
constant.language#D0A66C
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#AEBC82
constant.regexp#7BC39F
entity.name.tag, entity.name.selector#B7AE56
entity.other.attribute-name#D0A66C
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.scss#9FC58A
invalid#ED8B88
markup.underlineunderline
markup.bold#D0A66Cbold
markup.heading#B7AE56bold
markup.italic#7BC39Fitalic
markup.strikethroughstrikethrough
markup.deleted#ED8B88
markup.inserted#B1A47D
markup.changed#9FC58A
markup.quote#B1A47D
markup.inline.raw#AEBC82
meta.diff.header#D0A66C
storage#B7AE56
storage.type#B7AE56
keyword, keyword.control, keyword.operator.expression#B7AE56
keyword.operator#D8D2C4
string, constant.other.symbol#AEBC82
punctuation.definition.string, punctuation.definition.comment#8A867C
support.function, entity.name.function#9FC58A
support.class, support.type, entity.name.type, entity.name.class, entity.name.namespace#D0A66C
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#C6D6DE
variable.language, constant.character.escape#B7AE56
meta.object-literal.key, entity.name.label#C6D6DE
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#9FC58A
constant.character.character-class.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#B7AE56
keyword.operator.quantifier.regexp#D8D2C4
constant.character, constant.other.option#D0A66C
Yuan by Muqiu Han - VS Code Theme