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#BDE46F
  • activityBar.background#151515
  • activityBar.border#151515
  • activityBar.foreground#e5e5e5
  • activityBar.inactiveForeground#b3b1ad
  • activityBarBadge.background#5eaab5
  • activityBarBadge.foreground#151515
  • badge.background#b3b1ad
  • badge.foreground#151515
  • breadcrumb.activeSelectionForeground#52796f
  • breadcrumb.background#252b2a
  • breadcrumb.focusForeground#e5e5e5
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#151515
  • button.background#BDE46F
  • button.foreground#151515
  • button.hoverBackground#BDE46F
  • checkbox.background#252b2a
  • checkbox.border#2f363d
  • debugToolBar.background#151515
  • descriptionForeground#b3b1ad
  • diffEditor.insertedTextBackground#4d937522
  • diffEditor.removedTextBackground#ab595922
  • dropdown.background#151515
  • dropdown.border#151515
  • dropdown.foreground#e5e5e5
  • dropdown.listBackground#252b2a
  • editor.background#151515
  • editor.findMatchBackground#408494cc
  • editor.findMatchHighlightBackground#40849499
  • editor.focusedStackFrameHighlightBackground#b808
  • editor.foldBackground#eeeeee10
  • editor.foreground#e5e5e5
  • editor.inactiveSelectionBackground#2f3e46
  • editor.lineHighlightBackground#252b2a
  • editor.selectionBackground#252f34
  • editor.selectionHighlightBackground#2f3e46
  • editor.stackFrameHighlightBackground#a707
  • editor.wordHighlightBackground#1c6b4805
  • editor.wordHighlightStrongBackground#1c6b4810
  • editorBracketHighlight.foreground1#5eaab5
  • editorBracketHighlight.foreground2#BDE46F
  • editorBracketHighlight.foreground3#d4976c
  • editorBracketHighlight.foreground4#d9739f
  • editorBracketHighlight.foreground5#F8E330
  • editorBracketHighlight.foreground6#296aa3
  • editorBracketMatch.background#4d937520
  • editorCursor.foreground#BDE46F
  • editorError.foreground#F74F5B
  • editorGroup.border#151515
  • editorGroupHeader.tabsBackground#151515
  • editorGroupHeader.tabsBorder#151515
  • editorGutter.addedBackground#BDE46F
  • editorGutter.commentRangeForeground#dedcd530
  • editorGutter.deletedBackground#F74F5B
  • editorGutter.foldingControlForeground#b3b1ad
  • editorGutter.modifiedBackground#296aa3
  • editorHint.foreground#BDE46F
  • editorIndentGuide.activeBackground#ffffff30
  • editorIndentGuide.background#ffffff15
  • editorInfo.foreground#296aa3
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#666666
  • editorLineNumber.activeForeground#c9d1d9
  • editorLineNumber.foreground#dedcd530
  • editorOverviewRuler.border#111
  • editorStickyScroll.background#252b2a
  • editorStickyScrollHover.background#252b2a
  • editorWarning.foreground#d4976c
  • editorWhitespace.foreground#ffffff15
  • editorWidget.background#151515
  • errorForeground#F74F5B
  • focusBorder#FF57B3
  • foreground#e5e5e5
  • gitDecoration.addedResourceForeground#BDE46F
  • gitDecoration.conflictingResourceForeground#d4976c
  • gitDecoration.deletedResourceForeground#F74F5B
  • gitDecoration.ignoredResourceForeground#dedcd530
  • gitDecoration.modifiedResourceForeground#296aa3
  • gitDecoration.submoduleResourceForeground#b3b1ad
  • gitDecoration.untrackedResourceForeground#5eaab5
  • input.background#252b2a
  • input.border#151515
  • input.foreground#e5e5e5
  • input.placeholderForeground#b3b1ad
  • inputOption.activeBackground#dedcd530
  • list.activeSelectionBackground#00B4D840
  • list.activeSelectionForeground#e5e5e5
  • list.focusBackground#00B4D850
  • list.focusForeground#BDE46F
  • list.hoverBackground#252b2a
  • list.hoverForeground#e5e5e5
  • list.inactiveFocusBackground#151515
  • list.inactiveSelectionBackground#00B4D830
  • list.inactiveSelectionForeground#e5e5e5
  • notificationCenterHeader.background#151515
  • notificationCenterHeader.foreground#959da5
  • notifications.background#151515
  • notifications.border#151515
  • notifications.foreground#e5e5e5
  • notificationsErrorIcon.foreground#F74F5B
  • notificationsInfoIcon.foreground#296aa3
  • notificationsWarningIcon.foreground#d4976c
  • panel.background#151515
  • panel.border#151515
  • panelInput.border#2f363d
  • panelTitle.activeBorder#BDE46F
  • panelTitle.activeForeground#e5e5e5
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#151515
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#151515
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#444d56
  • pickerGroup.foreground#e5e5e5
  • problemsErrorIcon.foreground#F74F5B
  • problemsInfoIcon.foreground#296aa3
  • problemsWarningIcon.foreground#d4976c
  • progressBar.background#BDE46F
  • quickInput.background#151515
  • quickInput.foreground#e5e5e5
  • scrollbar.shadow#0000
  • scrollbarSlider.activeBackground#dedcd530
  • scrollbarSlider.background#dedcd510
  • scrollbarSlider.hoverBackground#dedcd530
  • settings.headerForeground#e5e5e5
  • settings.modifiedItemIndicator#BDE46F
  • sideBar.background#151515
  • sideBar.border#151515
  • sideBar.foreground#c9d1d9
  • sideBarSectionHeader.background#151515
  • sideBarSectionHeader.border#151515
  • sideBarSectionHeader.foreground#e5e5e5
  • sideBarTitle.foreground#e5e5e5
  • statusBar.background#151515
  • statusBar.border#151515
  • statusBar.debuggingBackground#252b2a
  • statusBar.debuggingForeground#c9d1d9
  • statusBar.foreground#c9d1d9
  • statusBar.noFolderBackground#151515
  • statusBarItem.prominentBackground#252b2a
  • tab.activeBackground#151515
  • tab.activeBorder#BDE46F
  • tab.activeBorderTop#151515
  • tab.activeForeground#e5e5e5
  • tab.border#151515
  • tab.hoverBackground#252b2a
  • tab.inactiveBackground#151515
  • tab.inactiveForeground#959da5
  • tab.unfocusedActiveBorder#151515
  • tab.unfocusedActiveBorderTop#151515
  • tab.unfocusedHoverBackground#151515
  • terminal.ansiBlack#393a34
  • terminal.ansiBlue#296aa3
  • terminal.ansiBrightBlack#777777
  • terminal.ansiBrightBlue#296aa3
  • terminal.ansiBrightCyan#5eaab5
  • terminal.ansiBrightGreen#BDE46F
  • terminal.ansiBrightMagenta#d9739f
  • terminal.ansiBrightRed#F74F5B
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#F8E330
  • terminal.ansiCyan#5eaab5
  • terminal.ansiGreen#BDE46F
  • terminal.ansiMagenta#d9739f
  • terminal.ansiRed#F74F5B
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#F8E330
  • terminal.foreground#e5e5e5
  • terminal.selectionBackground#252f34
  • textBlockQuote.background#151515
  • textBlockQuote.border#151515
  • textCodeBlock.background#151515
  • textLink.activeForeground#BDE46F
  • textLink.foreground#BDE46F
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#151515
  • titleBar.activeForeground#c9d1d9
  • titleBar.border#252b2a
  • titleBar.inactiveBackground#151515
  • 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.ts, meta.brace, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, 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#80a665
variable.parameter.function#e5e5e5
entity.name.tag, tag.html#00afb9
entity.name.function#80a665
keyword, storage.type.class.jsdoc#00afb9italic
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null#FE70BCitalic
storage.modifier.package, storage.modifier.import, storage.type.java#e5e5e5
string, string punctuation.section.embedded source, attribute.value#BDE46F
punctuation.definition.string, punctuation.support.type.property-name#BDE46Faa
support#79c0ff
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#79c0ff
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#FF9671
variable, identifier#FF9671
support.type.primitive, entity.name.type#5da9a7
namespace#db889a
keyword.operator, meta.var.expr.ts#FE70BC
invalid.broken#fdaeb7italic
invalid.deprecated#fdaeb7italic
invalid.illegal#fdaeb7italic
invalid.unimplemented#fdaeb7italic
carriage-return#24292eitalic underline
message.error#fdaeb7
string source#e5e5e5
string variable#BDE46F
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#BDE46F
string.regexp constant.character.escape#F8E330
support.constant#c99076
constant.numeric, number#4C9A91
keyword.other.unit#FE70BC
constant.language.boolean, constant.language#00afb9italic
meta.module-reference#BDE46F
punctuation.definition.list.begin.markdown#d4976c
markup.heading, markup.heading entity.name#BDE46Fbold
markup.quote#81b29a
markup.italic#e5e5e5italic
markup.bold#e5e5e5bold
markup.raw#BDE46F
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#BDE46F
markup.underline.link.markdown#b3b1adunderline
type.identifier#6893BF
entity.other.attribute-name.html.vue#80a665
invalid.illegal.unrecognized-tag.htmlnormal