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.activeBackground#181818
  • activityBar.activeBorder#4d9375
  • activityBar.background#121212
  • activityBar.border#1e1e1e
  • activityBar.foreground#bfbaaa
  • activityBar.inactiveForeground#dedcd550
  • activityBarBadge.background#dbd7caee
  • activityBarBadge.foreground#121212
  • badge.background#dedcd550
  • badge.foreground#121212
  • breadcrumb.activeSelectionForeground#bef5cb
  • breadcrumb.background#181818
  • breadcrumb.focusForeground#bfbaaa
  • breadcrumb.foreground#bfbaaacc
  • breadcrumbPicker.background#121212
  • button.background#4d9375
  • button.foreground#121212
  • button.hoverBackground#85e89d
  • checkbox.background#121212
  • checkbox.border#444d56
  • debugToolBar.background#121212
  • descriptionForeground#dedcd550
  • diffEditor.insertedTextBackground#4d937550
  • diffEditor.removedTextBackground#ab595950
  • dropdown.background#121212
  • dropdown.border#1e1e1e
  • dropdown.foreground#bfbaaa
  • dropdown.listBackground#181818
  • editor.background#121212
  • editor.findMatchBackground#e6cc7722
  • editor.findMatchHighlightBackground#e6cc7744
  • editor.focusedStackFrameHighlightBackground#b808
  • editor.foldBackground#eeeeee10
  • editor.foreground#bfbaaa
  • editor.inactiveSelectionBackground#6a737d33
  • editor.lineHighlightBackground#181818
  • editor.selectionBackground#2188ff40
  • editor.selectionHighlightBackground#6a737d33
  • editor.stackFrameHighlightBackground#a707
  • editor.wordHighlightBackground#1c6b4805
  • editor.wordHighlightStrongBackground#1c6b4810
  • editorBracketHighlight.foreground1#5eaab5
  • editorBracketHighlight.foreground2#4d9375
  • editorBracketHighlight.foreground3#d4976c
  • editorBracketHighlight.foreground4#d9739f
  • editorBracketHighlight.foreground5#e6cc77
  • editorBracketHighlight.foreground6#6394bf
  • editorBracketMatch.background#4d937520
  • editorError.foreground#cb7676
  • editorGroup.border#1e1e1e
  • editorGroupHeader.tabsBackground#121212
  • editorGroupHeader.tabsBorder#1e1e1e
  • editorGutter.addedBackground#4d9375
  • editorGutter.commentRangeForeground#dedcd550
  • editorGutter.deletedBackground#cb7676
  • editorGutter.foldingControlForeground#dedcd550
  • editorGutter.modifiedBackground#6394bf
  • editorHint.foreground#4d9375
  • editorIndentGuide.activeBackground#ffffff30
  • editorIndentGuide.background#ffffff15
  • editorInfo.foreground#6394bf
  • editorInlayHint.background#000
  • editorInlayHint.foreground#666666
  • editorLineNumber.activeForeground#dbd7caee
  • editorLineNumber.foreground#dedcd51a
  • editorOverviewRuler.border#1e1e1e
  • editorStickyScroll.background#181818
  • editorStickyScrollHover.background#181818
  • editorWarning.foreground#d4976c
  • editorWhitespace.foreground#ffffff15
  • editorWidget.background#121212
  • errorForeground#cb7676
  • focusBorder#4d9375
  • foreground#bfbaaa
  • gitDecoration.addedResourceForeground#4d9375
  • gitDecoration.conflictingResourceForeground#d4976c
  • gitDecoration.deletedResourceForeground#cb7676
  • gitDecoration.ignoredResourceForeground#dedcd550
  • gitDecoration.modifiedResourceForeground#6394bf
  • gitDecoration.submoduleResourceForeground#dedcd550
  • gitDecoration.untrackedResourceForeground#5eaab5
  • input.background#181818
  • input.border#1e1e1e
  • input.foreground#bfbaaa
  • input.placeholderForeground#dedcd550
  • inputOption.activeBackground#dedcd550
  • inputOption.activeBorder#4d9375
  • list.activeSelectionBackground#4d93754d
  • list.activeSelectionForeground#f5f5f5
  • list.focusBackground#181818
  • list.focusOutline#4d9375
  • list.highlightForeground#4d9375
  • list.hoverBackground#1e1e1d
  • list.hoverForeground#bfbaaa
  • list.inactiveFocusBackground#121212
  • list.inactiveSelectionBackground#4d937533
  • list.inactiveSelectionForeground#bfbaaa
  • menu.separatorBackground#1e1e1e
  • notificationCenterHeader.background#121212
  • notificationCenterHeader.foreground#bfbaaacc
  • notifications.background#121212
  • notifications.border#1e1e1e
  • notifications.foreground#bfbaaa
  • notificationsErrorIcon.foreground#cb7676
  • notificationsInfoIcon.foreground#6394bf
  • notificationsWarningIcon.foreground#d4976c
  • panel.background#121212
  • panel.border#1e1e1e
  • panelInput.border#1e1e1e
  • panelTitle.activeBorder#4d9375
  • panelTitle.activeForeground#dbd7caee
  • panelTitle.inactiveForeground#bfbaaacc
  • peekViewEditor.background#121212
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#121212
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#1e1e1e
  • pickerGroup.foreground#bfbaaa
  • problemsErrorIcon.foreground#cb7676
  • problemsInfoIcon.foreground#6394bf
  • problemsWarningIcon.foreground#d4976c
  • progressBar.background#4d9375
  • quickInput.background#121212
  • quickInput.foreground#bfbaaa
  • quickInputList.focusBackground#4d93754d
  • scrollbar.shadow#000
  • scrollbarSlider.activeBackground#dedcd550
  • scrollbarSlider.background#dedcd510
  • scrollbarSlider.hoverBackground#dedcd550
  • settings.headerForeground#bfbaaa
  • settings.modifiedItemIndicator#4d9375
  • sideBar.background#121212
  • sideBar.border#1e1e1e
  • sideBar.foreground#bfbaaa
  • sideBarSectionHeader.background#121212
  • sideBarSectionHeader.border#1e1e1e
  • sideBarSectionHeader.foreground#bfbaaa
  • sideBarTitle.foreground#bfbaaa
  • statusBar.background#121212
  • statusBar.border#1e1e1e
  • statusBar.debuggingBackground#181818
  • statusBar.debuggingForeground#bfbaaa
  • statusBar.foreground#bfbaaa
  • statusBar.noFolderBackground#121212
  • statusBarItem.prominentBackground#181818
  • statusBarItem.remoteBackground#4d9375
  • statusBarItem.remoteForeground#bfbaaa
  • statusBarItem.remoteHoverBackground#85e89d
  • statusBarItem.remoteHoverForeground#fff
  • tab.activeBackground#1e1e1d
  • tab.activeBorder#1e1e1e
  • tab.activeBorderTop#4d9375
  • tab.activeForeground#dbd7caee
  • tab.border#1e1e1e
  • tab.hoverBackground#181818
  • tab.inactiveBackground#121212
  • tab.inactiveForeground#bfbaaacc
  • tab.unfocusedActiveBorder#1e1e1e
  • tab.unfocusedActiveBorderTop#1e1e1e
  • tab.unfocusedHoverBackground#121212
  • terminal.ansiBlack#bfbaaa
  • terminal.ansiBlue#6394bf
  • terminal.ansiBrightBlack#777777
  • terminal.ansiBrightBlue#6394bf
  • terminal.ansiBrightCyan#5eaab5
  • terminal.ansiBrightGreen#4d9375
  • terminal.ansiBrightMagenta#d9739f
  • terminal.ansiBrightRed#cb7676
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e6cc77
  • terminal.ansiCyan#5eaab5
  • terminal.ansiGreen#4d9375
  • terminal.ansiMagenta#d9739f
  • terminal.ansiRed#cb7676
  • terminal.ansiWhite#bfbaaa
  • terminal.ansiYellow#e6cc77
  • terminal.foreground#bfbaaa
  • terminal.selectionBackground#2188ff40
  • terminalCursor.foreground#34d058
  • textBlockQuote.background#121212
  • textBlockQuote.border#1e1e1e
  • textCodeBlock.background#121212
  • textLink.activeForeground#4d9375
  • textLink.foreground#4d9375
  • textPreformat.foreground#bfbaaacc
  • textSeparator.foreground#586069
  • titleBar.activeBackground#121212
  • titleBar.activeForeground#dbd7caee
  • titleBar.border#181818
  • titleBar.inactiveBackground#121212
  • titleBar.inactiveForeground#bfbaaacc
  • tree.indentGuidesStroke#2f363d
  • welcomePage.buttonBackground#4d9375
  • welcomePage.buttonHoverBackground#bef5cb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#758575dd
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, 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, keyword.operator.type, meta.objectliteral.ts, punctuation#666666
constant, entity.name.constant, variable.language, meta.definition.variable#c99076
entity, entity.name#98C379
variable.parameter.function#bfbaaa
entity.name.tag, tag.html#4d9375
entity.name.function#98C379
keyword, storage.type.class.jsdoc#4d9375
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null#cb7676
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#bfbaaa
string, string punctuation.section.embedded source, attribute.value#80a665
punctuation.definition.string, punctuation.support.type.property-name#80a665
support#b8a965
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#b8a965
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#bd976a
variable, identifier#bd976a
support.type.primitive, entity.name.type#5DA994
namespace#db889a
keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts#cb7676
invalid.broken#e1e4e8italic
invalid.deprecated#e1e4e8italic
invalid.illegal#e1e4e8italic
invalid.unimplemented#e1e4e8italic
carriage-return#fafbfcitalic underline
message.error#e1e4e8
string variable#80a665
source.regexp, string.regexp#c4704f
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#80a665
string.regexp constant.character.escape#e6cc77
support.constant#c99076
keyword.operator.quantifier.regexp, constant.numeric, number#4C9A91
keyword.other.unit#cb7676
constant.language.boolean, constant.language#4d9375
meta.module-reference#4d9375
punctuation.definition.list.begin.markdown#d4976c
markup.heading, markup.heading entity.name#4d9375bold
markup.quote#5d99a9
markup.italic#bfbaaaitalic
markup.bold#bfbaaabold
markup.raw#4d9375
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#e1e4e8
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#e1e4e8
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#80a665
markup.underline.link.markdown, markup.underline.link.image.markdown#dedcd550underline
type.identifier, constant.other.character-class.regexp#7f8ac7
entity.other.attribute-name.html.vue#98C379
invalid.illegal.unrecognized-tag.htmlnormal
punctuation.separator.comma, punctuation.terminator.expression, punctuation.terminator.statement, punctuation.terminator.rule.scss, meta.property-list.scss, meta.property-list.scss, meta.property-list.scss, source.css.scss#6a737d
keyword, storage.type.function, storage.type.function.ts, storage.type.interface, storage.type.enum, variable.language.this, keyword.control.at-rule#c686c0
comment, entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameteritalic