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#9C5C33
  • activityBar.background#FBEDE5
  • activityBar.border#E4D4CB
  • activityBar.foreground#2F2B26
  • activityBar.inactiveForeground#7B766A
  • activityBarBadge.background#904C1B
  • activityBarBadge.foreground#FFFFFF
  • badge.background#EFDDD3
  • badge.foreground#2F2B26
  • button.background#9C5C33
  • button.border#FFFFFF1A
  • button.foreground#FFFFFF
  • button.hoverBackground#804318
  • button.secondaryBackground#EFDDD3
  • button.secondaryForeground#2F2B26
  • button.secondaryHoverBackground#FDF3ED
  • chat.editedFileForeground#846726
  • chat.slashCommandBackground#FFD3B999
  • chat.slashCommandForeground#804318
  • checkbox.background#FFF8F3
  • checkbox.border#D7C3B7
  • debugToolBar.background#FBEDE5
  • descriptionForeground#7B766A
  • dropdown.background#FFF8F3
  • dropdown.border#D7C3B7
  • dropdown.foreground#2F2B26
  • dropdown.listBackground#FFF8F3
  • editor.background#FFF8F3
  • editor.findMatchBackground#84672666
  • editor.findMatchHighlightBackground#84672655
  • editor.foreground#2F2B26
  • editor.inactiveSelectionBackground#EFDDD3
  • editor.lineHighlightBackground#FDF3ED
  • editor.selectionBackground#FFD3B9
  • editor.selectionHighlightBackground#FFD3B988
  • editor.wordHighlightBackground#84672640
  • editor.wordHighlightStrongBackground#66672366
  • editorBracketMatch.background#84672655
  • editorBracketMatch.border#846726
  • editorCursor.foreground#904C1B
  • editorGroup.border#E4D4CB
  • editorGroupHeader.tabsBackground#FBEDE5
  • editorGroupHeader.tabsBorder#E4D4CB
  • editorGutter.addedBackground#765043
  • editorGutter.deletedBackground#9C4343
  • editorGutter.modifiedBackground#8C4A47
  • editorIndentGuide.activeBackground1#7B766A
  • editorIndentGuide.background1#E4D4CB
  • editorLineNumber.activeForeground#9C5C33
  • editorLineNumber.foreground#7B766A
  • editorOverviewRuler.border#E4D4CB
  • editorSuggestWidget.background#FDF3ED
  • editorSuggestWidget.border#D7C3B7
  • editorSuggestWidget.foreground#2F2B26
  • editorSuggestWidget.highlightForeground#8C4A47
  • editorSuggestWidget.selectedBackground#EFDDD3
  • editorWidget.background#FDF3ED
  • editorWidget.border#D7C3B7
  • errorForeground#9C4343
  • focusBorder#9C5C33
  • foreground#2F2B26
  • icon.foreground#2F2B26
  • input.background#FFF8F3
  • input.border#D7C3B7
  • input.foreground#2F2B26
  • input.placeholderForeground#7B766A
  • inputOption.activeBackground#FFD3B999
  • inputOption.activeBorder#9C5C33
  • inputOption.activeForeground#1F211D
  • keybindingLabel.background#EFDDD3
  • keybindingLabel.border#D7C3B7
  • keybindingLabel.foreground#2F2B26
  • list.activeSelectionBackground#FFD3B9
  • list.activeSelectionForeground#1F211D
  • list.activeSelectionIconForeground#1F211D
  • list.dropBackground#84672655
  • list.focusAndSelectionOutline#9C5C33
  • list.focusBackground#FFD3B988
  • list.highlightForeground#8C4A47
  • list.hoverBackground#FDF3ED
  • list.inactiveSelectionBackground#EFDDD3
  • menu.background#FFF8F3
  • menu.border#D7C3B7
  • menu.foreground#2F2B26
  • menu.selectionBackground#9C5C33
  • menu.selectionForeground#FFFFFF
  • notebook.cellBorderColor#E4D4CB
  • notebook.selectedCellBackground#FFD3B966
  • notificationCenterHeader.background#FBEDE5
  • notificationCenterHeader.foreground#2F2B26
  • notifications.background#FFF8F3
  • notifications.border#E4D4CB
  • notifications.foreground#2F2B26
  • panel.background#FDF3ED
  • panel.border#E4D4CB
  • panelInput.border#D7C3B7
  • panelTitle.activeBorder#9C5C33
  • panelTitle.activeForeground#2F2B26
  • panelTitle.inactiveForeground#7B766A
  • peekViewEditor.background#FFF8F3
  • peekViewEditor.matchHighlightBackground#84672666
  • peekViewResult.background#FDF3ED
  • peekViewResult.matchHighlightBackground#84672666
  • pickerGroup.border#D7C3B7
  • pickerGroup.foreground#765043
  • ports.iconRunningProcessForeground#9C5C33
  • progressBar.background#9C5C33
  • quickInput.background#FDF3ED
  • quickInput.foreground#2F2B26
  • searchEditor.textInputBorder#D7C3B7
  • settings.dropdownBackground#FFF8F3
  • settings.dropdownBorder#D7C3B7
  • settings.headerForeground#1F1B16
  • settings.modifiedItemIndicator#846726
  • settings.numberInputBorder#D7C3B7
  • settings.textInputBorder#D7C3B7
  • sideBar.background#FBEDE5
  • sideBar.border#E4D4CB
  • sideBar.foreground#2F2B26
  • sideBarSectionHeader.background#FDF3ED
  • sideBarSectionHeader.border#E4D4CB
  • sideBarSectionHeader.foreground#2F2B26
  • sideBarTitle.foreground#1F1B16
  • statusBar.background#FBEDE5
  • statusBar.border#E4D4CB
  • statusBar.debuggingBackground#846726
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.focusBorder#9C5C33
  • statusBar.foreground#2F2B26
  • statusBar.noFolderBackground#FFF8F3
  • statusBarItem.errorBackground#9C4343
  • statusBarItem.focusBorder#9C5C33
  • statusBarItem.hoverBackground#1F211D1A
  • statusBarItem.hoverForeground#1F1B16
  • statusBarItem.prominentBackground#EFDDD3
  • statusBarItem.remoteBackground#9C5C33
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#FFF8F3
  • tab.activeBorder#FFF8F3
  • tab.activeBorderTop#9C5C33
  • tab.activeForeground#1F1B16
  • tab.border#E4D4CB
  • tab.hoverBackground#FFF8F3
  • tab.inactiveBackground#FBEDE5
  • tab.inactiveForeground#7B766A
  • tab.lastPinnedBorder#D7C3B7
  • tab.selectedBorderTop#904C1B
  • tab.unfocusedActiveBorder#FFF8F3
  • tab.unfocusedActiveBorderTop#E4D4CB
  • tab.unfocusedHoverBackground#FBEDE5
  • terminal.ansiBlack#2F2B26
  • terminal.ansiBlue#8C4A47
  • terminal.ansiBrightBlack#7B766A
  • terminal.ansiBrightBlue#8C4A47
  • terminal.ansiBrightCyan#91555E
  • terminal.ansiBrightGreen#9C5C33
  • terminal.ansiBrightMagenta#666723
  • terminal.ansiBrightRed#904C1B
  • terminal.ansiBrightWhite#1F1B16
  • terminal.ansiBrightYellow#846726
  • terminal.ansiCyan#91555E
  • terminal.ansiGreen#815A2D
  • terminal.ansiMagenta#666723
  • terminal.ansiRed#9C4343
  • terminal.ansiWhite#E8E1D3
  • terminal.ansiYellow#846726
  • terminal.background#FFF8F3
  • terminal.foreground#2F2B26
  • terminal.inactiveSelectionBackground#EFDDD3
  • terminal.tab.activeBorder#9C5C33
  • terminalCursor.foreground#904C1B
  • textBlockQuote.background#FDF3ED
  • textBlockQuote.border#765043
  • textCodeBlock.background#FDF3ED
  • textLink.activeForeground#904C1B
  • textLink.foreground#8C4A47
  • textPreformat.background#EFDDD3
  • textPreformat.foreground#2F2B26
  • textSeparator.foreground#D7C3B7
  • titleBar.activeBackground#FBEDE5
  • titleBar.activeForeground#2F2B26
  • titleBar.border#E4D4CB
  • titleBar.inactiveBackground#FFF8F3
  • titleBar.inactiveForeground#7B766A
  • welcomePage.progress.foreground#9C5C33
  • welcomePage.tileBackground#FDF3ED
  • widget.border#D7C3B7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#2F2B26
emphasisitalic
strongbold
comment#765043
constant.language#8C4A47
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#815A2D
constant.regexp#666723
entity.name.tag, entity.name.selector#904C1B
entity.other.attribute-name#8C4A47
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#846726
invalid#9C4343
markup.underlineunderline
markup.bold#8C4A47bold
markup.heading#904C1Bbold
markup.italic#666723italic
markup.strikethroughstrikethrough
markup.deleted#9C4343
markup.inserted#765043
markup.changed#846726
markup.quote#765043
markup.inline.raw#815A2D
meta.diff.header#8C4A47
storage#904C1B
storage.type#904C1B
keyword, keyword.control, keyword.operator.expression#904C1B
keyword.operator#2F2B26
string, constant.other.symbol#815A2D
punctuation.definition.string, punctuation.definition.comment#7B766A
support.function, entity.name.function#846726
support.class, support.type, entity.name.type, entity.name.class, entity.name.namespace#8C4A47
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#42516A
variable.language, constant.character.escape#904C1B
meta.object-literal.key, entity.name.label#42516A
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#846726
constant.character.character-class.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#904C1B
keyword.operator.quantifier.regexp#2F2B26
constant.character, constant.other.option#8C4A47
Yuan by Muqiu Han - VS Code Theme