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#4d9375
  • activityBar.background#191a1d
  • activityBar.border#181818
  • activityBar.foreground#00FFFF
  • activityBarBadge.background#48dfcbf3
  • activityBarBadge.foreground#191a1d
  • badge.background#dedcd590
  • badge.foreground#191a1d
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.focusForeground#dbd7ca
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#191a1d
  • button.background#4d9375
  • button.foreground#191a1d
  • button.hoverBackground#4d9375
  • 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#cb7676
  • 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#4d9375
  • inputOption.activeForeground#4d9375
  • 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#4d9375
  • 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#4d9375
  • 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#405e55
  • 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#4d9375e1
  • 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#4d9375
  • textLink.foreground#4d9375
  • 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#f5c468ee
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
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#4ebcddfa
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#da883bf6
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#17b996e3
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#4d9375
markup.heading, markup.heading entity.name#4d9375bold
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
support.type.property-name.json#47a0bb
support.constant.json#c9903a
meta.structure.dictionary.value.json string.quoted.double#c9903a
string.quoted.double.json punctuation.definition.string.json#25504b
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#57b68e
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
Vitesse Theme QB by Zhengqbbb - VS Code Theme