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#E49C8E
  • activityBar.background#191a1d
  • activityBar.border#181818
  • activityBar.foreground#fd9c89
  • activityBarBadge.background#E49C8E
  • activityBarBadge.foreground#191a1d
  • badge.background#dedcd590
  • badge.foreground#191a1d
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.focusForeground#dbd7ca
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#191a1d
  • button.background#c27e71
  • button.foreground#191a1d
  • button.hoverBackground#ca8b7f
  • checkbox.background#181818
  • checkbox.border#111
  • debugToolBar.background#191a1d
  • descriptionForeground#dedcd590
  • diffEditor.insertedTextBackground#4d937522
  • diffEditor.removedTextBackground#ab595922
  • dropdown.background#191a1d
  • dropdown.border#181818
  • dropdown.foreground#dbd7ca
  • dropdown.listBackground#181818
  • editor.background#212124
  • editor.findMatchBackground#e6cc7722
  • editor.findMatchHighlightBackground#76abf044
  • editor.focusedStackFrameHighlightBackground#b808
  • editor.foldBackground#191a1d
  • editor.foreground#dbd7ca
  • editor.inactiveSelectionBackground#eeeeee10
  • editor.lineHighlightBackground#2a2b2a
  • editor.selectionBackground#76abf044
  • editor.selectionHighlightBackground#76abf044
  • editor.stackFrameHighlightBackground#a707
  • editor.wordHighlightBackground#1c6b4805
  • editor.wordHighlightStrongBackground#1c6b4810
  • editorBracketHighlight.foreground1#5eaab5
  • editorBracketHighlight.foreground2#4d9375
  • editorBracketHighlight.foreground3#d4976c
  • editorBracketHighlight.foreground4#db889a
  • editorBracketHighlight.foreground5#e6cc77
  • editorBracketHighlight.foreground6#429988
  • editorBracketMatch.background#4d937520
  • editorError.foreground#cb7676
  • editorGroup.border#181818
  • editorGroupHeader.tabsBackground#191a1d
  • editorGroupHeader.tabsBorder#181818
  • editorGutter.addedBackground#4d9375
  • editorGutter.commentRangeForeground#dedcd530
  • editorGutter.deletedBackground#cb7676
  • editorGutter.foldingControlForeground#dedcd590
  • editorGutter.modifiedBackground#6394bf
  • editorHint.foreground#4d9375
  • editorIndentGuide.activeBackground#ffffff73
  • editorIndentGuide.background#ffffff15
  • editorInfo.foreground#6394bf
  • editorLineNumber.activeForeground#bfbaaa
  • editorLineNumber.foreground#dedcd530
  • editorOverviewRuler.border#111
  • editorSuggestWidget.selectedBackground#313131fa
  • editorWarning.foreground#d4976c
  • editorWhitespace.foreground#ffffff15
  • editorWidget.background#191a1d
  • errorForeground#c96868
  • focusBorder#00000000
  • foreground#dbd7ca
  • gitDecoration.addedResourceForeground#2fa578
  • gitDecoration.conflictingResourceForeground#d4976c
  • gitDecoration.deletedResourceForeground#cb7676
  • gitDecoration.ignoredResourceForeground#515c5b
  • gitDecoration.modifiedResourceForeground#d4bc6c
  • gitDecoration.submoduleResourceForeground#dedcd590
  • gitDecoration.untrackedResourceForeground#2fa578
  • input.background#1d1f25
  • input.border#181818
  • input.foreground#dbd7ca
  • input.placeholderForeground#dedcd590
  • inputOption.activeBorder#E49C8E
  • inputOption.activeForeground#E49C8E
  • list.activeSelectionBackground#181818
  • list.activeSelectionForeground#dbd7ca
  • list.focusBackground#313131
  • list.hoverBackground#313131
  • list.hoverForeground#dbd7ca
  • list.inactiveFocusBackground#191a1d
  • list.inactiveSelectionBackground#181818
  • list.inactiveSelectionForeground#fffcef
  • notificationCenterHeader.background#191a1d
  • notificationCenterHeader.foreground#959da5
  • notifications.background#191a1d
  • notifications.border#181818
  • notifications.foreground#dbd7ca
  • notificationsErrorIcon.foreground#cb7676
  • notificationsInfoIcon.foreground#6394bf
  • notificationsWarningIcon.foreground#d4976c
  • panel.background#212227
  • panel.border#181818
  • panelInput.border#2f363d
  • panelTitle.activeBorder#E49C8E
  • panelTitle.activeForeground#dbd7ca
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#191a1d
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#191a1d
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#444d56
  • pickerGroup.foreground#dbd7ca
  • problemsErrorIcon.foreground#cb7676
  • problemsInfoIcon.foreground#6394bf
  • problemsWarningIcon.foreground#d4976c
  • progressBar.background#E49C8E
  • quickInput.background#222327
  • quickInput.foreground#dbd7ca
  • quickInputList.focusBackground#38383b
  • scrollbar.shadow#0008
  • scrollbarSlider.activeBackground#dedcd530
  • scrollbarSlider.background#dedcd510
  • scrollbarSlider.hoverBackground#dedcd530
  • settings.headerForeground#dbd7ca
  • settings.modifiedItemIndicator#4d9375
  • sideBar.background#1e1f24
  • sideBar.border#3d312e
  • sideBar.foreground#bfbaaa
  • sideBarSectionHeader.background#191a1d27
  • sideBarSectionHeader.border#181818
  • sideBarSectionHeader.foreground#dbd7ca
  • sideBarTitle.foreground#dbd7ca
  • statusBar.background#191a1d
  • statusBar.border#181818
  • statusBar.debuggingBackground#181818
  • statusBar.debuggingForeground#bfbaaa
  • statusBar.foreground#bfbaaa
  • statusBar.noFolderBackground#191a1d
  • statusBarItem.prominentBackground#181818
  • tab.activeBackground#191a1d
  • tab.activeBorder#E49C8E
  • tab.activeBorderTop#181818
  • tab.activeForeground#f0ebdb
  • tab.border#181818
  • tab.hoverBackground#181818
  • tab.inactiveBackground#191a1d
  • tab.inactiveForeground#838a91
  • tab.unfocusedActiveBorder#181818
  • tab.unfocusedActiveBorderTop#181818
  • tab.unfocusedHoverBackground#191a1d
  • terminal.ansiBlack#393a34
  • terminal.ansiBlue#74addf
  • terminal.ansiBrightBlack#777777
  • terminal.ansiBrightBlue#449ff0
  • terminal.ansiBrightCyan#5eaab5
  • terminal.ansiBrightGreen#44b685
  • terminal.ansiBrightMagenta#e671c8
  • terminal.ansiBrightRed#c95f5f
  • terminal.ansiBrightYellow#e9e646
  • terminal.ansiCyan#5eaab5
  • terminal.ansiGreen#72b396
  • terminal.ansiMagenta#d17fd8
  • terminal.ansiRed#db6f6f
  • terminal.ansiYellow#e6cc77
  • terminal.foreground#dbd7ca
  • textBlockQuote.background#191a1d
  • textBlockQuote.border#181818
  • textCodeBlock.background#191a1d
  • textLink.activeForeground#E49C8E
  • textLink.foreground#E49C8E
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#191a1d
  • titleBar.activeForeground#bfbaaa
  • titleBar.border#181818
  • titleBar.inactiveBackground#191a1d
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#2f363d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#637777
delimiter, delimiter.bracket, meta.tag.inline.any.html, meta.tag.block.any.html, meta.tag.other.html, punctuation.terminator.statement.js, punctuation.terminator.statement.ts#858585
number, constant.numeric, constant.language.boolean, constant.language.undefined.js, constant.language.null.js, constant.language.undefined.ts, constant.language.null.ts, support.type.primitive.ts, support.type.builtin.ts, keyword.operator.glob.shell#f5c468f6
meta.template.expression.js, string.template.js, meta.template.expression.ts, string.template.ts, string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition, constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, string.quoted, string, punctuation.definition.string, string punctuation.section.embedded source#98c379f8
constant, meta.brace, entity.name.constant, variable.language, meta.definition.variable, support.constant, punctuation.definition.list.begin.markdown#d4976c
punctuation.definition.variable.shell, meta.expression.assignment.shell, variable.parameter.positional.all.shell, variable.parameter.positional.shell, variable.other.normal.shell, variable.other.special.shell, variable.other.bracket.shell, variable.other.positional.shell, variable.other.loop.shell, support.function.builtin.shell, variable.other.constant, variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.object.js, variable.other.object.ts, variable.parameter.js, variable.parameter.ts#e49c8e
attribute.value#d89487
constant, meta.brace, entity.name.constant, variable.language, meta.definition.variable, support.constant, punctuation.definition.list.begin.markdown#d4976c
entity.name.type#4ebcddec
entity.name.tag, tag.html#429988
entity.name.function#82AAFF
support#7aa0f3
keyword, storage, storage.type, keyword.operator, string.unquoted.herestring.shell, punctuation.definition.string.heredoc.shell, punctuation.definition.string.heredoc.delimiter.shell#c48affea
storage.modifier.package, storage.modifier.import, storage.type.java, string source, markup.italic, markup.bold, entity, entity.name, string.unquoted.argument.shell, variable.other.assignment.shell, keyword.operator.assignment.shell, keyword.operator.assignment.tsx, constant.numeric.decimal.shell, constant.other.option, constant.language.false.shell, constant.language.true.shell, string.regexp.unquoted.shell#dbd7ca
support.type.vendored.property-name.css#ee9622
support.type.property-name.css, entity.name.tag.css, support.function.builtin.shell#20d4bc
keyword.control.shell, keyword.control.awk, keyword.other.command.awk, keyword.operator.list.shell, keyword.control.then.shell, keyword.control.else.shell, keyword.control.while.shell, keyword.control.do.shell, keyword.control.done.shell, keyword.control.if.shell, keyword.control.elif.shell, keyword.control.else.shell, keyword.control.fi.shell, keyword.control.return.shell, keyword.control.continue.shell, keyword.control.break.shell, keyword.control.case.shell, keyword.control.in.shell, keyword.control.esac.shell#e06c76f3
meta.property-name, entity.other.attribute-name, meta.object-literal.key.js, meta.object-literal.key.ts, variable.other.property.js, variable.other.property.ts, variable.other.property.vue, support.variable.property, attribute.name#da883bf8
variable, support.variable, variable.other.readwrite.js, variable.other.readwrite.ts, string variable, identifier, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, meta.template.expression.ts, meta.template.expression.js#E49C8E
namespace#db889a
punctuation.separator.statement.and.shell, keyword.operator.expansion.shell, keyword.operator.logical.shell, keyword.operator.redirect.shell, keyword.operator.pipe.shell, keyword.operator.arithmetic.awk, keyword.operator.boolean.awk, keyword.operator.trinary.awk, keyword.operator.comparison.awk, keyword.operator.assignment.awk#39bed6
carriage-return#24292eitalic underline
invalid.broken, invalid.deprecated, invalid.illegal, invalid.unimplemented, message.error, brackethighlighter.unmatched#f08a96
source.regexp, string.regexp#c4704f
string.regexp constant.character.escape#e6cc77
string.regexp, string.regexp keyword.other#5ca7e4
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, variable.other.readwrite.ts, storage.type, source.css, string.interpolated.dollar.shell
keyword.other.unit#7ec7e4
meta.module-reference, markup.quote, markup.raw#efd6d1
markup.heading, markup.heading entity.name#429988bold
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#429988
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#85e89d
markup.changed, punctuation.definition.changed#f4c3c4
markup.ignored, markup.untracked#2f363d
support.type.property-name.json#47a0bb
support.constant.json#cf8e7e
meta.structure.dictionary.value.json string.quoted.double#cf8e7e
string.quoted.double.json punctuation.definition.string.json#25504b
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#71c07c
meta.diff.range#b392f0bold
meta.diff.header, meta.output#79b8ff
meta.separator#79b8ffbold
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote, string.interpolated.dollar.shell#d1d5da
markup.underline.link.markdown#dedcd590underline
type.identifier#5eaab5