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#4ade80
  • activityBar.background#0d110d
  • activityBar.border#1a241a
  • activityBar.foreground#86efac
  • activityBar.inactiveForeground#527a52
  • activityBarBadge.background#4ade80
  • activityBarBadge.foreground#0d110d
  • badge.background#4ade80
  • badge.foreground#0d110d
  • breadcrumb.activeSelectionForeground#4ade80
  • breadcrumb.background#141c14
  • breadcrumb.focusForeground#86efac
  • breadcrumb.foreground#527a52
  • breadcrumbPicker.background#141c14
  • breadcrumbPicker.foreground#c6f0d8
  • button.background#166534
  • button.foreground#f0fff4
  • button.hoverBackground#15803d
  • checkbox.background#1a241a
  • checkbox.border#3a5a3a
  • debugToolBar.background#1a241a
  • descriptionForeground#86efac
  • diffEditor.insertedTextBackground#16653430
  • diffEditor.removedTextBackground#7f1d1d40
  • dropdown.background#1a241a
  • dropdown.border#3a5a3a
  • dropdown.foreground#c6f0d8
  • dropdown.listBackground#141c14
  • editor.background#141c14
  • editor.findMatchBackground#365314aa
  • editor.findMatchHighlightBackground#36531466
  • editor.focusedStackFrameHighlightBackground#36531460
  • editor.foldBackground#4ade8008
  • editor.foreground#c6f0d8
  • editor.inactiveSelectionBackground#16653420
  • editor.lineHighlightBackground#1a2e1a
  • editor.selectionBackground#16653450
  • editor.selectionHighlightBackground#16653430
  • editor.stackFrameHighlightBackground#36531440
  • editor.wordHighlightBackground#16653430
  • editor.wordHighlightStrongBackground#16653450
  • editorBracketHighlight.foreground1#4ade80
  • editorBracketHighlight.foreground2#22c55e
  • editorBracketHighlight.foreground3#6ee7b7
  • editorBracketHighlight.foreground4#2dd4bf
  • editorBracketHighlight.foreground5#bef264
  • editorBracketHighlight.foreground6#34d399
  • editorBracketMatch.background#4ade8030
  • editorError.foreground#f87171
  • editorGroup.border#1a241a
  • editorGroupHeader.tabsBackground#111811
  • editorGroupHeader.tabsBorder#1a241a
  • editorGutter.addedBackground#4ade8040
  • editorGutter.commentRangeForeground#3a5a3a
  • editorGutter.deletedBackground#f8717140
  • editorGutter.foldingControlForeground#527a52
  • editorGutter.modifiedBackground#34d39940
  • editorHint.foreground#4ade80
  • editorIndentGuide.activeBackground#3a5a3a80
  • editorIndentGuide.background#2d3b2d40
  • editorInfo.foreground#6ee7b7
  • editorInlayHint.background#1a241a80
  • editorInlayHint.foreground#527a52
  • editorLineNumber.activeForeground#4ade80
  • editorLineNumber.foreground#3a5a3a
  • editorOverviewRuler.border#1a241a
  • editorStickyScroll.background#111811
  • editorStickyScrollHover.background#1a241a
  • editorWarning.foreground#fbbf24
  • editorWhitespace.foreground#2d3b2d40
  • editorWidget.background#1a241a
  • errorForeground#f87171
  • focusBorder#4ade80
  • foreground#c6f0d8
  • gitDecoration.addedResourceForeground#4ade80
  • gitDecoration.conflictingResourceForeground#fbbf24
  • gitDecoration.deletedResourceForeground#f87171
  • gitDecoration.ignoredResourceForeground#3a5a3a
  • gitDecoration.modifiedResourceForeground#6ee7b7
  • gitDecoration.submoduleResourceForeground#527a52
  • gitDecoration.untrackedResourceForeground#22c55e
  • icon.foreground#4ade80
  • input.background#111811
  • input.border#2d3b2d
  • input.foreground#c6f0d8
  • input.placeholderForeground#527a52
  • inputOption.activeBackground#16653480
  • list.activeSelectionBackground#232f23
  • list.activeSelectionForeground#c6f0d8
  • list.focusBackground#232f23
  • list.highlightForeground#4ade80
  • list.hoverBackground#1a241a
  • list.hoverForeground#c6f0d8
  • list.inactiveFocusBackground#1a241a
  • list.inactiveSelectionBackground#1a241a
  • list.inactiveSelectionForeground#c6f0d8
  • menu.separatorBackground#2d3b2d
  • notificationCenterHeader.background#111811
  • notificationCenterHeader.foreground#86efac
  • notifications.background#1a241a
  • notifications.border#2d3b2d
  • notifications.foreground#c6f0d8
  • notificationsErrorIcon.foreground#f87171
  • notificationsInfoIcon.foreground#6ee7b7
  • notificationsWarningIcon.foreground#fbbf24
  • panel.background#111811
  • panel.border#1a241a
  • panelInput.border#2d3b2d
  • panelTitle.activeBorder#4ade80
  • panelTitle.activeForeground#86efac
  • panelTitle.inactiveForeground#527a52
  • peekViewEditor.background#1a241a
  • peekViewResult.background#111811
  • pickerGroup.border#2d3b2d
  • pickerGroup.foreground#86efac
  • problemsErrorIcon.foreground#f87171
  • problemsInfoIcon.foreground#6ee7b7
  • problemsWarningIcon.foreground#fbbf24
  • progressBar.background#4ade80
  • quickInput.background#141c14
  • quickInput.foreground#c6f0d8
  • quickInputList.focusBackground#232f23
  • quickInputList.focusForeground#f0fff4
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#4ade8040
  • scrollbarSlider.background#2d3b2d40
  • scrollbarSlider.hoverBackground#3a5a3a60
  • settings.headerForeground#86efac
  • settings.modifiedItemIndicator#4ade80
  • sideBar.background#111811
  • sideBar.border#1a241a
  • sideBar.foreground#a7f3d0
  • sideBarSectionHeader.background#111811
  • sideBarSectionHeader.border#1a241a
  • sideBarSectionHeader.foreground#86efac
  • sideBarTitle.foreground#86efac
  • statusBar.background#0d110d
  • statusBar.border#1a241a
  • statusBar.debuggingBackground#166534
  • statusBar.debuggingForeground#f0fff4
  • statusBar.foreground#86efac
  • statusBar.noFolderBackground#0d110d
  • statusBarItem.prominentBackground#166534
  • tab.activeBackground#141c14
  • tab.activeBorder#4ade80
  • tab.activeBorderTop#4ade80
  • tab.activeForeground#f0fff4
  • tab.border#1a241a
  • tab.hoverBackground#1a241a
  • tab.inactiveBackground#111811
  • tab.inactiveForeground#527a52
  • tab.unfocusedActiveBorder#3a5a3a
  • tab.unfocusedActiveBorderTop#2d3b2d
  • tab.unfocusedHoverBackground#1a241a80
  • terminal.ansiBlack#1a241a
  • terminal.ansiBlue#34d399
  • terminal.ansiBrightBlack#527a52
  • terminal.ansiBrightBlue#6ee7b7
  • terminal.ansiBrightCyan#2dd4bf
  • terminal.ansiBrightGreen#4ade80
  • terminal.ansiBrightMagenta#a78bfa
  • terminal.ansiBrightRed#f87171
  • terminal.ansiBrightWhite#f0fff4
  • terminal.ansiBrightYellow#fde047
  • terminal.ansiCyan#14b8a6
  • terminal.ansiGreen#22c55e
  • terminal.ansiMagenta#8b5cf6
  • terminal.ansiRed#ef4444
  • terminal.ansiWhite#a7f3d0
  • terminal.ansiYellow#eab308
  • terminal.background#111811
  • terminal.foreground#c6f0d8
  • terminal.selectionBackground#16653450
  • textBlockQuote.background#1a241a
  • textBlockQuote.border#3a5a3a
  • textCodeBlock.background#111811
  • textLink.activeForeground#4ade80
  • textLink.foreground#6ee7b7
  • textPreformat.foreground#86efac
  • textSeparator.foreground#2d3b2d
  • titleBar.activeBackground#0d110d
  • titleBar.activeForeground#86efac
  • titleBar.border#1a241a
  • titleBar.inactiveBackground#0d110d
  • titleBar.inactiveForeground#527a52
  • tree.indentGuidesStroke#2d3b2d
  • welcomePage.buttonBackground#166534
  • welcomePage.buttonHoverBackground#15803d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#4a634a
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, keyword.operator.type, 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, meta.objectliteral.ts, punctuation#527a52
constant, entity.name.constant, variable.language, meta.definition.variable#fde047
entity, entity.name#86efac
variable.parameter.function#a7f3d0
entity.name.tag, tag.html#34d399
entity.name.function#86efac
keyword, storage.type.class.jsdoc#34d399
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null#6ee7b7
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#fde047
string, string punctuation.section.embedded source, attribute.value#a3e635
punctuation.definition.string, punctuation.support.type.property-name#a3e63599
support#bef264
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#bef264
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#c6f0d8
variable, identifier#c6f0d8
support.type.primitive, entity.name.type#2dd4bf
namespace#a78bfa
keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts#6ee7b7
invalid.broken#f87171italic
invalid.deprecated#f87171italic
invalid.illegal#f87171italic
invalid.unimplemented#f87171italic
carriage-return#141c14italic underline
message.error#f87171
string variable#a3e635
source.regexp, string.regexp#fbbf24
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#a3e635
string.regexp constant.character.escape#fde047
support.constant#fde047
keyword.operator.quantifier.regexp, constant.numeric, number#6ee7b7
keyword.other.unit#6ee7b7
constant.language.boolean, constant.language#34d399
meta.module-reference#34d399
punctuation.definition.list.begin.markdown#fde047
markup.heading, markup.heading entity.name#4ade80bold
markup.quote#2dd4bf
markup.italic#a7f3d0italic
markup.bold#a7f3d0bold
markup.raw#34d399
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#fca5a5
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#4ade80
markup.changed, punctuation.definition.changed#fbbf24
markup.ignored, markup.untracked#527a52
meta.diff.range#a78bfabold
meta.diff.header#6ee7b7
meta.separator#6ee7b7bold
meta.output#6ee7b7
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#527a52
brackethighlighter.unmatched#f87171
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#a3e635
markup.underline.link.markdown, markup.underline.link.image.markdown#a7f3d090underline
type.identifier, constant.other.character-class.regexp#2dd4bf
entity.other.attribute-name.html.vue#86efac
invalid.illegal.unrecognized-tag.htmlnormal