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#1b1e26
  • activityBar.border#191919
  • activityBar.foreground#dbd7caee
  • activityBar.inactiveForeground#dedcd550
  • activityBarBadge.background#bfbaaa
  • activityBarBadge.foreground#1b1e26
  • badge.background#dedcd590
  • badge.foreground#1b1e26
  • breadcrumb.activeSelectionForeground#eeeeee15
  • breadcrumb.background#21242c
  • breadcrumb.focusForeground#dbd7caee
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#1b1e26
  • button.background#4d9375
  • button.foreground#1b1e26
  • button.hoverBackground#4d9375
  • checkbox.background#21242c
  • checkbox.border#2f363d
  • debugToolBar.background#1b1e26
  • descriptionForeground#dedcd590
  • diffEditor.insertedTextBackground#4d937522
  • diffEditor.removedTextBackground#ab595922
  • dropdown.background#1b1e26
  • dropdown.border#191919
  • dropdown.foreground#dbd7caee
  • dropdown.listBackground#21242c
  • editor.background#1b1e26
  • editor.findMatchBackground#e6cc7722
  • editor.findMatchHighlightBackground#e6cc7744
  • editor.focusedStackFrameHighlightBackground#b808
  • editor.foldBackground#eeeeee10
  • editor.foreground#dbd7caee
  • editor.inactiveSelectionBackground#eeeeee08
  • editor.lineHighlightBackground#21242c
  • editor.selectionBackground#eeeeee15
  • editor.selectionHighlightBackground#eeeeee08
  • 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#191919
  • editorGroupHeader.tabsBackground#1b1e26
  • editorGroupHeader.tabsBorder#191919
  • editorGutter.addedBackground#4d9375
  • editorGutter.commentRangeForeground#dedcd550
  • editorGutter.deletedBackground#cb7676
  • editorGutter.foldingControlForeground#dedcd590
  • editorGutter.modifiedBackground#6394bf
  • editorHint.foreground#4d9375
  • editorIndentGuide.activeBackground#ffffff30
  • editorIndentGuide.background#ffffff15
  • editorInfo.foreground#6394bf
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#666666
  • editorLineNumber.activeForeground#bfbaaa
  • editorLineNumber.foreground#dedcd550
  • editorOverviewRuler.border#111
  • editorStickyScroll.background#21242c
  • editorStickyScrollHover.background#21242c
  • editorWarning.foreground#d4976c
  • editorWhitespace.foreground#ffffff15
  • editorWidget.background#1b1e26
  • errorForeground#cb7676
  • focusBorder#00000000
  • foreground#dbd7caee
  • gitDecoration.addedResourceForeground#4d9375
  • gitDecoration.conflictingResourceForeground#d4976c
  • gitDecoration.deletedResourceForeground#cb7676
  • gitDecoration.ignoredResourceForeground#dedcd550
  • gitDecoration.modifiedResourceForeground#6394bf
  • gitDecoration.submoduleResourceForeground#dedcd590
  • gitDecoration.untrackedResourceForeground#5eaab5
  • input.background#21242c
  • input.border#191919
  • input.foreground#dbd7caee
  • input.placeholderForeground#dedcd590
  • inputOption.activeBackground#dedcd550
  • list.activeSelectionBackground#21242c
  • list.activeSelectionForeground#dbd7caee
  • list.focusBackground#21242c
  • list.highlightForeground#4d9375
  • list.hoverBackground#21242c
  • list.hoverForeground#dbd7caee
  • list.inactiveFocusBackground#1b1e26
  • list.inactiveSelectionBackground#21242c
  • list.inactiveSelectionForeground#dbd7caee
  • menu.separatorBackground#191919
  • notificationCenterHeader.background#1b1e26
  • notificationCenterHeader.foreground#959da5
  • notifications.background#1b1e26
  • notifications.border#191919
  • notifications.foreground#dbd7caee
  • notificationsErrorIcon.foreground#cb7676
  • notificationsInfoIcon.foreground#6394bf
  • notificationsWarningIcon.foreground#d4976c
  • panel.background#1b1e26
  • panel.border#191919
  • panelInput.border#2f363d
  • panelTitle.activeBorder#4d9375
  • panelTitle.activeForeground#dbd7caee
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#1b1e26
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#1b1e26
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#191919
  • pickerGroup.foreground#dbd7caee
  • problemsErrorIcon.foreground#cb7676
  • problemsInfoIcon.foreground#6394bf
  • problemsWarningIcon.foreground#d4976c
  • progressBar.background#4d9375
  • quickInput.background#1b1e26
  • quickInput.foreground#dbd7caee
  • quickInputList.focusBackground#21242c
  • scrollbar.shadow#0000
  • scrollbarSlider.activeBackground#dedcd550
  • scrollbarSlider.background#dedcd510
  • scrollbarSlider.hoverBackground#dedcd550
  • settings.headerForeground#dbd7caee
  • settings.modifiedItemIndicator#4d9375
  • sideBar.background#1b1e26
  • sideBar.border#191919
  • sideBar.foreground#bfbaaa
  • sideBarSectionHeader.background#1b1e26
  • sideBarSectionHeader.border#191919
  • sideBarSectionHeader.foreground#dbd7caee
  • sideBarTitle.foreground#dbd7caee
  • statusBar.background#1b1e26
  • statusBar.border#191919
  • statusBar.debuggingBackground#21242c
  • statusBar.debuggingForeground#bfbaaa
  • statusBar.foreground#bfbaaa
  • statusBar.noFolderBackground#1b1e26
  • statusBarItem.prominentBackground#21242c
  • tab.activeBackground#1b1e26
  • tab.activeBorder#4d9375
  • tab.activeForeground#dbd7caee
  • tab.hoverBackground#21242c
  • tab.inactiveBackground#1b1e26
  • tab.inactiveForeground#959da5
  • tab.unfocusedActiveBorder#191919
  • tab.unfocusedHoverBackground#1b1e26
  • terminal.ansiBlack#393a34
  • 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#dbd7caee
  • terminal.ansiYellow#e6cc77
  • terminal.foreground#dbd7caee
  • terminal.selectionBackground#eeeeee15
  • textBlockQuote.background#1b1e26
  • textBlockQuote.border#191919
  • textCodeBlock.background#1b1e26
  • textLink.activeForeground#4d9375
  • textLink.foreground#4d9375
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#1b1e26
  • titleBar.activeForeground#bfbaaa
  • titleBar.border#21242c
  • titleBar.inactiveBackground#1b1e26
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#2f363d
  • welcomePage.buttonBackground#2f363d
  • welcomePage.buttonHoverBackground#444d56

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#dcdda5
variable.parameter.function#dbd7caee
entity.name.tag, tag.html#4d9375
entity.name.function#dcdda5
keyword, storage.type.class.jsdoc#4d9375
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null#e88675
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#dbd7caee
string, string punctuation.section.embedded source, attribute.value#c98a7d
punctuation.definition.string, punctuation.support.type.property-name#c98a7d99
support#82c7a7
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#82c7a7
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#bebaac
variable, identifier#bebaac
support.type.primitive, entity.name.type#5da994
namespace#db889a
keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts#cb7676
invalid.broken#fdaeb7italic
invalid.deprecated#fdaeb7italic
invalid.illegal#fdaeb7italic
invalid.unimplemented#fdaeb7italic
carriage-return#24292eitalic underline
message.error#fdaeb7
string variable#c98a7d
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#c98a7d
string.regexp constant.character.escape#e6cc77
support.constant#c99076
constant.numeric, number#b5cfa3
keyword.other.unit#e88675
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#dbd7caeeitalic
markup.bold#dbd7caeebold
markup.raw#4d9375
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#c98a7d
markup.underline.link.markdown, markup.underline.link.image.markdown#dedcd590underline
type.identifier#7f8ac7
entity.other.attribute-name.html.vue#dcdda5
invalid.illegal.unrecognized-tag.htmlnormal