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#52c9b0
  • activityBar.background#1c1c1c
  • activityBar.border#3a3a3a70
  • activityBar.foreground#d4d4d4
  • activityBar.inactiveForeground#73737370
  • activityBarBadge.background#8c8c8c
  • activityBarBadge.foreground#1c1c1c
  • badge.background#8c8c8c88
  • badge.foreground#1c1c1c
  • breadcrumb.activeSelectionForeground#333333
  • breadcrumb.background#262626
  • breadcrumb.focusForeground#d4d4d4
  • breadcrumb.foreground#8c8c8c88
  • breadcrumbPicker.background#1c1c1c
  • button.background#52c9b0
  • button.foreground#1c1c1c
  • button.hoverBackground#52c9b0
  • checkbox.background#262626
  • checkbox.border#2f363d
  • debugToolBar.background#1c1c1c
  • descriptionForeground#8c8c8c88
  • diffEditor.insertedTextBackground#52c9b038
  • diffEditor.removedTextBackground#d4777944
  • dropdown.background#1c1c1c
  • dropdown.border#3a3a3a70
  • dropdown.foreground#d4d4d4
  • dropdown.listBackground#262626
  • editor.background#1c1c1c
  • editor.findMatchBackground#d1b17144
  • editor.findMatchHighlightBackground#d1b1712e
  • editor.focusedStackFrameHighlightBackground#d1b17138
  • editor.foldBackground#2a2a2a
  • editor.foreground#d4d4d4
  • editor.inactiveSelectionBackground#2a2a2a
  • editor.lineHighlightBackground#262626
  • editor.selectionBackground#2a2a2a
  • editor.selectionHighlightBackground#2a2a2a
  • editor.stackFrameHighlightBackground#d1b17126
  • editor.wordHighlightBackground#52c9b014
  • editor.wordHighlightStrongBackground#52c9b022
  • editorBracketHighlight.foreground1#52c9b0
  • editorBracketHighlight.foreground2#52c9b0
  • editorBracketHighlight.foreground3#e28e5a
  • editorBracketHighlight.foreground4#b87bce
  • editorBracketHighlight.foreground5#d1b171
  • editorBracketHighlight.foreground6#6b92e3
  • editorBracketMatch.background#52c9b033
  • editorError.foreground#d47779
  • editorGroup.border#3a3a3a70
  • editorGroupHeader.tabsBackground#1c1c1c
  • editorGroupHeader.tabsBorder#3a3a3a70
  • editorGutter.addedBackground#52c9b0
  • editorGutter.commentRangeForeground#73737370
  • editorGutter.deletedBackground#d47779
  • editorGutter.foldingControlForeground#8c8c8c88
  • editorGutter.modifiedBackground#6b92e3
  • editorHint.foreground#52c9b0
  • editorIndentGuide.activeBackground#ffffff30
  • editorIndentGuide.background#ffffff15
  • editorInfo.foreground#6b92e3
  • editorInlayHint.background#262626
  • editorInlayHint.foreground#8c8c8c
  • editorLineNumber.activeForeground#8c8c8c
  • editorLineNumber.foreground#73737370
  • editorOverviewRuler.border#111
  • editorStickyScroll.background#262626
  • editorStickyScrollHover.background#262626
  • editorWarning.foreground#e28e5a
  • editorWhitespace.foreground#ffffff15
  • editorWidget.background#1c1c1c
  • errorForeground#d47779
  • focusBorder#00000000
  • foreground#d4d4d4
  • gitDecoration.addedResourceForeground#52c9b0
  • gitDecoration.conflictingResourceForeground#e28e5a
  • gitDecoration.deletedResourceForeground#d47779
  • gitDecoration.ignoredResourceForeground#73737370
  • gitDecoration.modifiedResourceForeground#6b92e3
  • gitDecoration.submoduleResourceForeground#8c8c8c88
  • gitDecoration.untrackedResourceForeground#52c9b0
  • input.background#262626
  • input.border#3a3a3a70
  • input.foreground#d4d4d4
  • input.placeholderForeground#8c8c8c88
  • inputOption.activeBackground#73737370
  • list.activeSelectionBackground#262626
  • list.activeSelectionForeground#d4d4d4
  • list.focusBackground#262626
  • list.highlightForeground#52c9b0
  • list.hoverBackground#262626
  • list.hoverForeground#d4d4d4
  • list.inactiveFocusBackground#1c1c1c
  • list.inactiveSelectionBackground#262626
  • list.inactiveSelectionForeground#d4d4d4
  • menu.separatorBackground#3a3a3a70
  • notificationCenterHeader.background#1c1c1c
  • notificationCenterHeader.foreground#8c8c8c88
  • notifications.background#1c1c1c
  • notifications.border#3a3a3a70
  • notifications.foreground#d4d4d4
  • notificationsErrorIcon.foreground#d47779
  • notificationsInfoIcon.foreground#6b92e3
  • notificationsWarningIcon.foreground#e28e5a
  • panel.background#1c1c1c
  • panel.border#3a3a3a70
  • panelInput.border#2f363d
  • panelTitle.activeBorder#52c9b0
  • panelTitle.activeForeground#d4d4d4
  • panelTitle.inactiveForeground#8c8c8c88
  • peekViewEditor.background#1c1c1c
  • peekViewEditor.matchHighlightBackground#d1b1713a
  • peekViewResult.background#1c1c1c
  • peekViewResult.matchHighlightBackground#d1b1713a
  • pickerGroup.border#3a3a3a70
  • pickerGroup.foreground#d4d4d4
  • problemsErrorIcon.foreground#d47779
  • problemsInfoIcon.foreground#6b92e3
  • problemsWarningIcon.foreground#e28e5a
  • progressBar.background#52c9b0
  • quickInput.background#1c1c1c
  • quickInput.foreground#d4d4d4
  • quickInputList.focusBackground#262626
  • scrollbar.shadow#0000
  • scrollbarSlider.activeBackground#73737370
  • scrollbarSlider.background#73737320
  • scrollbarSlider.hoverBackground#73737370
  • settings.headerForeground#d4d4d4
  • settings.modifiedItemIndicator#52c9b0
  • sideBar.background#1c1c1c
  • sideBar.border#3a3a3a70
  • sideBar.foreground#8c8c8c
  • sideBarSectionHeader.background#1c1c1c
  • sideBarSectionHeader.border#3a3a3a70
  • sideBarSectionHeader.foreground#d4d4d4
  • sideBarTitle.foreground#d4d4d4
  • statusBar.background#1c1c1c
  • statusBar.border#3a3a3a70
  • statusBar.debuggingBackground#262626
  • statusBar.debuggingForeground#8c8c8c
  • statusBar.foreground#8c8c8c
  • statusBar.noFolderBackground#1c1c1c
  • statusBarItem.prominentBackground#262626
  • tab.activeBackground#1c1c1c
  • tab.activeBorder#3a3a3a70
  • tab.activeBorderTop#8c8c8c88
  • tab.activeForeground#d4d4d4
  • tab.border#3a3a3a70
  • tab.hoverBackground#262626
  • tab.inactiveBackground#1c1c1c
  • tab.inactiveForeground#8c8c8c88
  • tab.unfocusedActiveBorder#3a3a3a70
  • tab.unfocusedActiveBorderTop#3a3a3a70
  • tab.unfocusedHoverBackground#1c1c1c
  • terminal.ansiBlack#1c1c1c
  • terminal.ansiBlue#6b92e3
  • terminal.ansiBrightBlack#777777
  • terminal.ansiBrightBlue#6b92e3
  • terminal.ansiBrightCyan#52c9b0
  • terminal.ansiBrightGreen#52c9b0
  • terminal.ansiBrightMagenta#b87bce
  • terminal.ansiBrightRed#d47779
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#d1b171
  • terminal.ansiCyan#52c9b0
  • terminal.ansiGreen#52c9b0
  • terminal.ansiMagenta#b87bce
  • terminal.ansiRed#d47779
  • terminal.ansiWhite#d4d4d4
  • terminal.ansiYellow#d1b171
  • terminal.foreground#d4d4d4
  • terminal.selectionBackground#2a2a2a
  • textBlockQuote.background#1c1c1c
  • textBlockQuote.border#3a3a3a70
  • textCodeBlock.background#1c1c1c
  • textLink.activeForeground#52c9b0
  • textLink.foreground#52c9b0
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#1c1c1c
  • titleBar.activeForeground#8c8c8c
  • titleBar.border#262626
  • titleBar.inactiveBackground#1c1c1c
  • titleBar.inactiveForeground#8c8c8c88
  • tree.indentGuidesStroke#73737320
  • welcomePage.buttonBackground#2f363d
  • welcomePage.buttonHoverBackground#444d56

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#737373
delimiter.bracket, delimiter, invalid.illegal.character-not-allowed-here.html, keyword.operator.rest, keyword.operator.spread, keyword.operator.type.annotation, keyword.operator.relational, keyword.operator.assignment, keyword.operator.type, meta.brace, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, meta.embedded.block.github-actions-expression, storage.type.function.arrow, meta.objectliteral.ts, punctuation, punctuation.definition.string.begin.html.vue, punctuation.definition.string.end.html.vue#8c8c8c
constant, entity.name.constant, variable.language, meta.definition.variable#e28e5a
entity, entity.name#52c9b0
variable.parameter.function#d4d4d4
entity.name.tag, tag.html#52c9b0
entity.name.function#52c9b0
keyword, storage.type.class.jsdoc, punctuation.definition.template-expression#52c9b0
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null, constant.language.import-export-all.ts#d47779
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#d4d4d4
string, string punctuation.section.embedded source, attribute.value#e28e5a
punctuation.definition.string#e28e5a77
punctuation.support.type.property-name#d1b17177
support#d1b171
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#d1b171
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#d1b171
variable, identifier#d1b171
support.type.primitive, entity.name.type#6b92e3
namespace#b87bce
keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts#d47779
invalid.broken#fdaeb7italic
invalid.deprecated#fdaeb7italic
invalid.illegal#fdaeb7italic
invalid.unimplemented#fdaeb7italic
carriage-return#24292eitalic underline
message.error#fdaeb7
string variable#e28e5a
source.regexp, string.regexp#e28e5a
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#e28e5a
string.regexp constant.character.escape#d1b171
support.constant#e28e5a
keyword.operator.quantifier.regexp, constant.numeric, number#6b92e3
keyword.other.unit#d47779
constant.language.boolean, constant.language#52c9b0
meta.module-reference#52c9b0
punctuation.definition.list.begin.markdown#e28e5a
markup.heading, markup.heading entity.name#52c9b0bold
markup.quote#6b92e3
markup.italic#d4d4d4italic
markup.bold#d4d4d4bold
markup.raw#52c9b0
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#fdaeb7
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#85e89d
markup.changed, punctuation.definition.changed#ffab70
markup.ignored, markup.untracked#2f363d
meta.diff.range#b392f0bold
meta.diff.header#79b8ff
meta.separator#79b8ffbold
meta.output#79b8ff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#d1d5da
brackethighlighter.unmatched#fdaeb7
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#e28e5a
markup.underline.link.markdown, markup.underline.link.image.markdown#8c8c8c88underline
type.identifier, constant.other.character-class.regexp#6b92e3
entity.other.attribute-name.html.vue#52c9b0
invalid.illegal.unrecognized-tag.htmlnormal