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#54B9A5
  • activityBar.background#070F0D
  • activityBar.border#212C29
  • activityBar.foreground#D8D2C4
  • activityBar.inactiveForeground#8A867C
  • activityBarBadge.background#4DC1AB
  • activityBarBadge.foreground#1F211D
  • badge.background#23312E
  • badge.foreground#D8D2C4
  • button.background#54B9A5
  • button.border#1F211D1A
  • button.foreground#1F211D
  • button.hoverBackground#6FD3BE
  • button.secondaryBackground#23312E
  • button.secondaryForeground#D8D2C4
  • button.secondaryHoverBackground#172320
  • chat.editedFileForeground#6CC7D7
  • chat.slashCommandBackground#09483D99
  • chat.slashCommandForeground#6FD3BE
  • checkbox.background#0E1A17
  • checkbox.border#32413D
  • debugToolBar.background#070F0D
  • descriptionForeground#8A867C
  • dropdown.background#0E1A17
  • dropdown.border#32413D
  • dropdown.foreground#D8D2C4
  • dropdown.listBackground#0E1A17
  • editor.background#0E1A17
  • editor.findMatchBackground#6CC7D788
  • editor.findMatchHighlightBackground#6CC7D744
  • editor.foreground#D8D2C4
  • editor.inactiveSelectionBackground#23312E
  • editor.lineHighlightBackground#172320
  • editor.selectionBackground#09483D
  • editor.selectionHighlightBackground#09483D88
  • editor.wordHighlightBackground#6CC7D733
  • editor.wordHighlightStrongBackground#77BAE355
  • editorBracketMatch.background#6CC7D755
  • editorBracketMatch.border#6CC7D7
  • editorCursor.foreground#4DC1AB
  • editorGroup.border#212C29
  • editorGroupHeader.tabsBackground#070F0D
  • editorGroupHeader.tabsBorder#212C29
  • editorGutter.addedBackground#84B09D
  • editorGutter.deletedBackground#ED8B88
  • editorGutter.modifiedBackground#84BE90
  • editorIndentGuide.activeBackground1#8A867C
  • editorIndentGuide.background1#212C29
  • editorLineNumber.activeForeground#54B9A5
  • editorLineNumber.foreground#8A867C
  • editorOverviewRuler.border#212C29
  • editorSuggestWidget.background#172320
  • editorSuggestWidget.border#32413D
  • editorSuggestWidget.foreground#D8D2C4
  • editorSuggestWidget.highlightForeground#84BE90
  • editorSuggestWidget.selectedBackground#23312E
  • editorWidget.background#172320
  • editorWidget.border#32413D
  • errorForeground#ED8B88
  • focusBorder#54B9A5
  • foreground#D8D2C4
  • icon.foreground#D8D2C4
  • input.background#0E1A17
  • input.border#32413D
  • input.foreground#D8D2C4
  • input.placeholderForeground#8A867C
  • inputOption.activeBackground#09483D99
  • inputOption.activeBorder#54B9A5
  • inputOption.activeForeground#FFFFFF
  • keybindingLabel.background#23312E
  • keybindingLabel.border#32413D
  • keybindingLabel.foreground#D8D2C4
  • list.activeSelectionBackground#09483D
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#FFFFFF
  • list.dropBackground#6CC7D755
  • list.focusAndSelectionOutline#54B9A5
  • list.focusBackground#09483D88
  • list.highlightForeground#84BE90
  • list.hoverBackground#172320
  • list.inactiveSelectionBackground#23312E
  • menu.background#0E1A17
  • menu.border#32413D
  • menu.foreground#D8D2C4
  • menu.selectionBackground#54B9A5
  • menu.selectionForeground#1F211D
  • notebook.cellBorderColor#212C29
  • notebook.selectedCellBackground#09483D66
  • notificationCenterHeader.background#070F0D
  • notificationCenterHeader.foreground#D8D2C4
  • notifications.background#0E1A17
  • notifications.border#212C29
  • notifications.foreground#D8D2C4
  • panel.background#172320
  • panel.border#212C29
  • panelInput.border#32413D
  • panelTitle.activeBorder#54B9A5
  • panelTitle.activeForeground#D8D2C4
  • panelTitle.inactiveForeground#8A867C
  • peekViewEditor.background#0E1A17
  • peekViewEditor.matchHighlightBackground#6CC7D766
  • peekViewResult.background#172320
  • peekViewResult.matchHighlightBackground#6CC7D766
  • pickerGroup.border#32413D
  • pickerGroup.foreground#84B09D
  • ports.iconRunningProcessForeground#54B9A5
  • progressBar.background#54B9A5
  • quickInput.background#172320
  • quickInput.foreground#D8D2C4
  • searchEditor.textInputBorder#32413D
  • settings.dropdownBackground#0E1A17
  • settings.dropdownBorder#32413D
  • settings.headerForeground#F0E8D8
  • settings.modifiedItemIndicator#6CC7D7
  • settings.numberInputBorder#32413D
  • settings.textInputBorder#32413D
  • sideBar.background#070F0D
  • sideBar.border#212C29
  • sideBar.foreground#D8D2C4
  • sideBarSectionHeader.background#172320
  • sideBarSectionHeader.border#212C29
  • sideBarSectionHeader.foreground#D8D2C4
  • sideBarTitle.foreground#F0E8D8
  • statusBar.background#070F0D
  • statusBar.border#212C29
  • statusBar.debuggingBackground#6CC7D7
  • statusBar.debuggingForeground#1F211D
  • statusBar.focusBorder#54B9A5
  • statusBar.foreground#D8D2C4
  • statusBar.noFolderBackground#0E1A17
  • statusBarItem.errorBackground#ED8B88
  • statusBarItem.focusBorder#54B9A5
  • statusBarItem.hoverBackground#FFFFFF1A
  • statusBarItem.hoverForeground#F0E8D8
  • statusBarItem.prominentBackground#23312E
  • statusBarItem.remoteBackground#54B9A5
  • statusBarItem.remoteForeground#1F211D
  • tab.activeBackground#0E1A17
  • tab.activeBorder#0E1A17
  • tab.activeBorderTop#54B9A5
  • tab.activeForeground#F0E8D8
  • tab.border#212C29
  • tab.hoverBackground#0E1A17
  • tab.inactiveBackground#070F0D
  • tab.inactiveForeground#8A867C
  • tab.lastPinnedBorder#32413D
  • tab.selectedBorderTop#4DC1AB
  • tab.unfocusedActiveBorder#0E1A17
  • tab.unfocusedActiveBorderTop#212C29
  • tab.unfocusedHoverBackground#070F0D
  • terminal.ansiBlack#1A1B18
  • terminal.ansiBlue#84BE90
  • terminal.ansiBrightBlack#8A867C
  • terminal.ansiBrightBlue#84BE90
  • terminal.ansiBrightCyan#A1C490
  • terminal.ansiBrightGreen#54B9A5
  • terminal.ansiBrightMagenta#77BAE3
  • terminal.ansiBrightRed#4DC1AB
  • terminal.ansiBrightWhite#F0E8D8
  • terminal.ansiBrightYellow#6CC7D7
  • terminal.ansiCyan#A1C490
  • terminal.ansiGreen#73C5C3
  • terminal.ansiMagenta#77BAE3
  • terminal.ansiRed#ED8B88
  • terminal.ansiWhite#D8D2C4
  • terminal.ansiYellow#6CC7D7
  • terminal.background#0E1A17
  • terminal.foreground#D8D2C4
  • terminal.inactiveSelectionBackground#23312E
  • terminal.tab.activeBorder#54B9A5
  • terminalCursor.foreground#4DC1AB
  • textBlockQuote.background#172320
  • textBlockQuote.border#84B09D
  • textCodeBlock.background#172320
  • textLink.activeForeground#4DC1AB
  • textLink.foreground#84BE90
  • textPreformat.background#23312E
  • textPreformat.foreground#D8D2C4
  • textSeparator.foreground#32413D
  • titleBar.activeBackground#070F0D
  • titleBar.activeForeground#D8D2C4
  • titleBar.border#212C29
  • titleBar.inactiveBackground#0E1A17
  • titleBar.inactiveForeground#8A867C
  • welcomePage.progress.foreground#54B9A5
  • welcomePage.tileBackground#172320
  • widget.border#32413D

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#84B09D
constant.language#84BE90
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#73C5C3
constant.regexp#77BAE3
entity.name.tag, entity.name.selector#4DC1AB
entity.other.attribute-name#84BE90
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#6CC7D7
invalid#ED8B88
markup.underlineunderline
markup.bold#84BE90bold
markup.heading#4DC1ABbold
markup.italic#77BAE3italic
markup.strikethroughstrikethrough
markup.deleted#ED8B88
markup.inserted#84B09D
markup.changed#6CC7D7
markup.quote#84B09D
markup.inline.raw#73C5C3
meta.diff.header#84BE90
storage#4DC1AB
storage.type#4DC1AB
keyword, keyword.control, keyword.operator.expression#4DC1AB
keyword.operator#D8D2C4
string, constant.other.symbol#73C5C3
punctuation.definition.string, punctuation.definition.comment#8A867C
support.function, entity.name.function#6CC7D7
support.class, support.type, entity.name.type, entity.name.class, entity.name.namespace#84BE90
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#C6D6DE
variable.language, constant.character.escape#4DC1AB
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#6CC7D7
constant.character.character-class.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#4DC1AB
keyword.operator.quantifier.regexp#D8D2C4
constant.character, constant.other.option#84BE90
Yuan by Muqiu Han - VS Code Theme