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#5DB0D8
  • activityBar.background#070E12
  • activityBar.border#212A2F
  • activityBar.foreground#D8D2C4
  • activityBar.inactiveForeground#8A867C
  • activityBarBadge.background#59B7E4
  • activityBarBadge.foreground#1F211D
  • badge.background#243036
  • badge.foreground#D8D2C4
  • button.background#5DB0D8
  • button.border#1F211D1A
  • button.foreground#1F211D
  • button.hoverBackground#77C9F3
  • button.secondaryBackground#243036
  • button.secondaryForeground#D8D2C4
  • button.secondaryHoverBackground#182228
  • chat.editedFileForeground#9AB7F2
  • chat.slashCommandBackground#13425899
  • chat.slashCommandForeground#77C9F3
  • checkbox.background#0F191E
  • checkbox.border#333F46
  • debugToolBar.background#070E12
  • descriptionForeground#8A867C
  • dropdown.background#0F191E
  • dropdown.border#333F46
  • dropdown.foreground#D8D2C4
  • dropdown.listBackground#0F191E
  • editor.background#0F191E
  • editor.findMatchBackground#9AB7F288
  • editor.findMatchHighlightBackground#9AB7F244
  • editor.foreground#D8D2C4
  • editor.inactiveSelectionBackground#243036
  • editor.lineHighlightBackground#182228
  • editor.selectionBackground#134258
  • editor.selectionHighlightBackground#13425888
  • editor.wordHighlightBackground#9AB7F233
  • editor.wordHighlightStrongBackground#B0A8E755
  • editorBracketMatch.background#9AB7F255
  • editorBracketMatch.border#9AB7F2
  • editorCursor.foreground#59B7E4
  • editorGroup.border#212A2F
  • editorGroupHeader.tabsBackground#070E12
  • editorGroupHeader.tabsBorder#212A2F
  • editorGutter.addedBackground#7EADBD
  • editorGutter.deletedBackground#ED8B88
  • editorGutter.modifiedBackground#61BFC8
  • editorIndentGuide.activeBackground1#8A867C
  • editorIndentGuide.background1#212A2F
  • editorLineNumber.activeForeground#5DB0D8
  • editorLineNumber.foreground#8A867C
  • editorOverviewRuler.border#212A2F
  • editorSuggestWidget.background#182228
  • editorSuggestWidget.border#333F46
  • editorSuggestWidget.foreground#D8D2C4
  • editorSuggestWidget.highlightForeground#61BFC8
  • editorSuggestWidget.selectedBackground#243036
  • editorWidget.background#182228
  • editorWidget.border#333F46
  • errorForeground#ED8B88
  • focusBorder#5DB0D8
  • foreground#D8D2C4
  • icon.foreground#D8D2C4
  • input.background#0F191E
  • input.border#333F46
  • input.foreground#D8D2C4
  • input.placeholderForeground#8A867C
  • inputOption.activeBackground#13425899
  • inputOption.activeBorder#5DB0D8
  • inputOption.activeForeground#FFFFFF
  • keybindingLabel.background#243036
  • keybindingLabel.border#333F46
  • keybindingLabel.foreground#D8D2C4
  • list.activeSelectionBackground#134258
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#FFFFFF
  • list.dropBackground#9AB7F255
  • list.focusAndSelectionOutline#5DB0D8
  • list.focusBackground#13425888
  • list.highlightForeground#61BFC8
  • list.hoverBackground#182228
  • list.inactiveSelectionBackground#243036
  • menu.background#0F191E
  • menu.border#333F46
  • menu.foreground#D8D2C4
  • menu.selectionBackground#5DB0D8
  • menu.selectionForeground#1F211D
  • notebook.cellBorderColor#212A2F
  • notebook.selectedCellBackground#13425866
  • notificationCenterHeader.background#070E12
  • notificationCenterHeader.foreground#D8D2C4
  • notifications.background#0F191E
  • notifications.border#212A2F
  • notifications.foreground#D8D2C4
  • panel.background#182228
  • panel.border#212A2F
  • panelInput.border#333F46
  • panelTitle.activeBorder#5DB0D8
  • panelTitle.activeForeground#D8D2C4
  • panelTitle.inactiveForeground#8A867C
  • peekViewEditor.background#0F191E
  • peekViewEditor.matchHighlightBackground#9AB7F266
  • peekViewResult.background#182228
  • peekViewResult.matchHighlightBackground#9AB7F266
  • pickerGroup.border#333F46
  • pickerGroup.foreground#7EADBD
  • ports.iconRunningProcessForeground#5DB0D8
  • progressBar.background#5DB0D8
  • quickInput.background#182228
  • quickInput.foreground#D8D2C4
  • searchEditor.textInputBorder#333F46
  • settings.dropdownBackground#0F191E
  • settings.dropdownBorder#333F46
  • settings.headerForeground#F0E8D8
  • settings.modifiedItemIndicator#9AB7F2
  • settings.numberInputBorder#333F46
  • settings.textInputBorder#333F46
  • sideBar.background#070E12
  • sideBar.border#212A2F
  • sideBar.foreground#D8D2C4
  • sideBarSectionHeader.background#182228
  • sideBarSectionHeader.border#212A2F
  • sideBarSectionHeader.foreground#D8D2C4
  • sideBarTitle.foreground#F0E8D8
  • statusBar.background#070E12
  • statusBar.border#212A2F
  • statusBar.debuggingBackground#9AB7F2
  • statusBar.debuggingForeground#1F211D
  • statusBar.focusBorder#5DB0D8
  • statusBar.foreground#D8D2C4
  • statusBar.noFolderBackground#0F191E
  • statusBarItem.errorBackground#ED8B88
  • statusBarItem.focusBorder#5DB0D8
  • statusBarItem.hoverBackground#FFFFFF1A
  • statusBarItem.hoverForeground#F0E8D8
  • statusBarItem.prominentBackground#243036
  • statusBarItem.remoteBackground#5DB0D8
  • statusBarItem.remoteForeground#1F211D
  • tab.activeBackground#0F191E
  • tab.activeBorder#0F191E
  • tab.activeBorderTop#5DB0D8
  • tab.activeForeground#F0E8D8
  • tab.border#212A2F
  • tab.hoverBackground#0F191E
  • tab.inactiveBackground#070E12
  • tab.inactiveForeground#8A867C
  • tab.lastPinnedBorder#333F46
  • tab.selectedBorderTop#59B7E4
  • tab.unfocusedActiveBorder#0F191E
  • tab.unfocusedActiveBorderTop#212A2F
  • tab.unfocusedHoverBackground#070E12
  • terminal.ansiBlack#1A1B18
  • terminal.ansiBlue#61BFC8
  • terminal.ansiBrightBlack#8A867C
  • terminal.ansiBrightBlue#61BFC8
  • terminal.ansiBrightCyan#77C8C3
  • terminal.ansiBrightGreen#5DB0D8
  • terminal.ansiBrightMagenta#B0A8E7
  • terminal.ansiBrightRed#59B7E4
  • terminal.ansiBrightWhite#F0E8D8
  • terminal.ansiBrightYellow#9AB7F2
  • terminal.ansiCyan#77C8C3
  • terminal.ansiGreen#8CB9E5
  • terminal.ansiMagenta#B0A8E7
  • terminal.ansiRed#ED8B88
  • terminal.ansiWhite#D8D2C4
  • terminal.ansiYellow#9AB7F2
  • terminal.background#0F191E
  • terminal.foreground#D8D2C4
  • terminal.inactiveSelectionBackground#243036
  • terminal.tab.activeBorder#5DB0D8
  • terminalCursor.foreground#59B7E4
  • textBlockQuote.background#182228
  • textBlockQuote.border#7EADBD
  • textCodeBlock.background#182228
  • textLink.activeForeground#59B7E4
  • textLink.foreground#61BFC8
  • textPreformat.background#243036
  • textPreformat.foreground#D8D2C4
  • textSeparator.foreground#333F46
  • titleBar.activeBackground#070E12
  • titleBar.activeForeground#D8D2C4
  • titleBar.border#212A2F
  • titleBar.inactiveBackground#0F191E
  • titleBar.inactiveForeground#8A867C
  • welcomePage.progress.foreground#5DB0D8
  • welcomePage.tileBackground#182228
  • widget.border#333F46

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#7EADBD
constant.language#61BFC8
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#8CB9E5
constant.regexp#B0A8E7
entity.name.tag, entity.name.selector#59B7E4
entity.other.attribute-name#61BFC8
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#9AB7F2
invalid#ED8B88
markup.underlineunderline
markup.bold#61BFC8bold
markup.heading#59B7E4bold
markup.italic#B0A8E7italic
markup.strikethroughstrikethrough
markup.deleted#ED8B88
markup.inserted#7EADBD
markup.changed#9AB7F2
markup.quote#7EADBD
markup.inline.raw#8CB9E5
meta.diff.header#61BFC8
storage#59B7E4
storage.type#59B7E4
keyword, keyword.control, keyword.operator.expression#59B7E4
keyword.operator#D8D2C4
string, constant.other.symbol#8CB9E5
punctuation.definition.string, punctuation.definition.comment#8A867C
support.function, entity.name.function#9AB7F2
support.class, support.type, entity.name.type, entity.name.class, entity.name.namespace#61BFC8
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#C6D6DE
variable.language, constant.character.escape#59B7E4
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#9AB7F2
constant.character.character-class.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#59B7E4
keyword.operator.quantifier.regexp#D8D2C4
constant.character, constant.other.option#61BFC8
Yuan by Muqiu Han - VS Code Theme