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#005308
  • activityBar.background#AAFFCB
  • activityBar.border#005308
  • activityBar.foreground#000000
  • activityBar.inactiveForeground#00000050
  • activityBarBadge.background#4e4f47
  • activityBarBadge.foreground#ffffff
  • badge.background#393a3490
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#22222218
  • breadcrumb.background#AAFFCB
  • breadcrumb.focusForeground#393a34
  • breadcrumb.foreground#6a737d
  • breadcrumbPicker.background#ffffff
  • button.background#1c6b48
  • button.foreground#ffffff
  • button.hoverBackground#00A40F
  • checkbox.background#EEFFEF
  • checkbox.border#d1d5da
  • debugToolBar.background#ffffff
  • descriptionForeground#393a3490
  • diffEditor.insertedTextBackground#1c6b4830
  • diffEditor.removedTextBackground#ab595940
  • dropdown.background#EEFFEF
  • dropdown.border#005308
  • dropdown.foreground#393a34
  • dropdown.listBackground#f7f7f7
  • editor.background#E3FFE5
  • editor.findMatchBackground#e6cc7744
  • editor.findMatchHighlightBackground#e6cc7766
  • editor.focusedStackFrameHighlightBackground#fff5b1
  • editor.foldBackground#22222210
  • editor.foreground#393a34
  • editor.inactiveSelectionBackground#22222210
  • editor.lineHighlightBackground#f7f7f7
  • editor.selectionBackground#22222218
  • editor.selectionHighlightBackground#22222210
  • editor.stackFrameHighlightBackground#fffbdd
  • editor.wordHighlightBackground#1c6b4805
  • editor.wordHighlightStrongBackground#1c6b4810
  • editorBracketHighlight.foreground1#2993a3
  • editorBracketHighlight.foreground2#1e754f
  • editorBracketHighlight.foreground3#a65e2b
  • editorBracketHighlight.foreground4#a13865
  • editorBracketHighlight.foreground5#bda437
  • editorBracketHighlight.foreground6#296aa3
  • editorBracketMatch.background#1c6b4820
  • editorError.foreground#ab5959
  • editorGroup.border#f0f0f0
  • editorGroupHeader.tabsBackground#AAFFCB
  • editorGroupHeader.tabsBorder#f0f0f0
  • editorGutter.addedBackground#1e754f
  • editorGutter.commentRangeForeground#393a3450
  • editorGutter.deletedBackground#ab5959
  • editorGutter.foldingControlForeground#393a3490
  • editorGutter.modifiedBackground#296aa3
  • editorHint.foreground#1e754f
  • editorIndentGuide.activeBackground#00000030
  • editorIndentGuide.background#00000015
  • editorInfo.foreground#296aa3
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#999999
  • editorLineNumber.activeForeground#4e4f47
  • editorLineNumber.foreground#393a3450
  • editorOverviewRuler.border#fff
  • editorStickyScroll.background#f7f7f7
  • editorStickyScrollHover.background#f7f7f7
  • editorWarning.foreground#a65e2b
  • editorWhitespace.foreground#00000015
  • editorWidget.background#ffffff
  • errorForeground#ab5959
  • focusBorder#00000000
  • foreground#393a34
  • gitDecoration.addedResourceForeground#1e754f
  • gitDecoration.conflictingResourceForeground#a65e2b
  • gitDecoration.deletedResourceForeground#ab5959
  • gitDecoration.ignoredResourceForeground#393a3450
  • gitDecoration.modifiedResourceForeground#296aa3
  • gitDecoration.submoduleResourceForeground#393a3490
  • gitDecoration.untrackedResourceForeground#2993a3
  • input.background#EEFFEF
  • input.border#005308
  • input.foreground#393a34
  • input.placeholderForeground#393a3490
  • inputOption.activeBackground#393a3450
  • list.activeSelectionBackground#59FD59
  • list.activeSelectionForeground#393a34
  • list.focusBackground#59FD59
  • list.highlightForeground#1c6b48
  • list.hoverBackground#59FD59
  • list.hoverForeground#393a34
  • list.inactiveFocusBackground#59FD59
  • list.inactiveSelectionBackground#59FD59
  • list.inactiveSelectionForeground#393a34
  • menu.separatorBackground#f0f0f0
  • notificationCenterHeader.background#AAFFCB
  • notificationCenterHeader.foreground#6a737d
  • notifications.background#AAFFCB
  • notifications.border#f0f0f0
  • notifications.foreground#393a34
  • notificationsErrorIcon.foreground#ab5959
  • notificationsInfoIcon.foreground#296aa3
  • notificationsWarningIcon.foreground#a65e2b
  • panel.background#AAFFCB
  • panel.border#f0f0f0
  • panelInput.border#e1e4e8
  • panelTitle.activeBorder#1c6b48
  • panelTitle.activeForeground#393a34
  • panelTitle.inactiveForeground#6a737d
  • peekViewEditor.background#ffffff
  • peekViewResult.background#ffffff
  • pickerGroup.border#f0f0f0
  • pickerGroup.foreground#393a34
  • problemsErrorIcon.foreground#ab5959
  • problemsInfoIcon.foreground#296aa3
  • problemsWarningIcon.foreground#a65e2b
  • progressBar.background#1c6b48
  • quickInput.background#AAFFCB
  • quickInput.foreground#393a34
  • quickInputList.focusBackground#f7f7f7
  • scrollbar.shadow#6a737d33
  • scrollbarSlider.activeBackground#393a3450
  • scrollbarSlider.background#393a3410
  • scrollbarSlider.hoverBackground#393a3450
  • settings.headerForeground#393a34
  • settings.modifiedItemIndicator#1c6b48
  • sideBar.background#AAFFCB
  • sideBar.border#AAFFCB
  • sideBar.foreground#4e4f47
  • sideBarSectionHeader.background#AAFFCB
  • sideBarSectionHeader.border#005308
  • sideBarSectionHeader.foreground#393a34
  • sideBarTitle.foreground#393a34
  • statusBar.background#AAFFCB
  • statusBar.border#AAFFCB
  • statusBar.debuggingBackground#f7f7f7
  • statusBar.debuggingForeground#4e4f47
  • statusBar.foreground#4e4f47
  • statusBar.noFolderBackground#AAFFCB
  • statusBarItem.prominentBackground#2a2139
  • tab.activeBackground#00B110
  • tab.activeBorder#f0f0f0
  • tab.activeBorderTop#393a3490
  • tab.activeForeground#000000
  • tab.border#AAFFCB
  • tab.hoverBackground#59FD59
  • tab.inactiveBackground#AAFFCB
  • tab.inactiveForeground#6a737d
  • tab.unfocusedActiveBorder#f0f0f0
  • tab.unfocusedActiveBorderTop#f0f0f0
  • tab.unfocusedHoverBackground#AAFFCB
  • terminal.ansiBlack#121212
  • terminal.ansiBlue#296aa3
  • terminal.ansiBrightBlack#aaaaaa
  • terminal.ansiBrightBlue#296aa3
  • terminal.ansiBrightCyan#2993a3
  • terminal.ansiBrightGreen#1e754f
  • terminal.ansiBrightMagenta#a13865
  • terminal.ansiBrightRed#ab5959
  • terminal.ansiBrightWhite#dddddd
  • terminal.ansiBrightYellow#bda437
  • terminal.ansiCyan#2993a3
  • terminal.ansiGreen#1e754f
  • terminal.ansiMagenta#a13865
  • terminal.ansiRed#ab5959
  • terminal.ansiWhite#dbd7ca
  • terminal.ansiYellow#bda437
  • terminal.background#AAFFCB
  • terminal.foreground#393a34
  • terminal.selectionBackground#22222218
  • textBlockQuote.background#ffffff
  • textBlockQuote.border#f0f0f0
  • textCodeBlock.background#ffffff
  • textLink.activeForeground#892CFF
  • textLink.foreground#2C96FF
  • textPreformat.foreground#586069
  • textSeparator.foreground#d1d5da
  • titleBar.activeBackground#AAFFCB
  • titleBar.activeForeground#4e4f47
  • titleBar.border#005308
  • titleBar.inactiveBackground#AAFFCB
  • titleBar.inactiveForeground#6a737d
  • tree.indentGuidesStroke#e1e4e8
  • welcomePage.buttonBackground#f6f8fa
  • welcomePage.buttonHoverBackground#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#c4b5d0
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#777777
constant, entity.name.constant, variable.language, meta.definition.variable#a65e2b
entity, entity.name#d946ef
variable.parameter.function#393a34
entity.name.tag, tag.html#6d28d9
entity.name.function#a78bfa
keyword, storage.type.class.jsdoc#6d28d9
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null#dc2626
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#393a34
string, string punctuation.section.embedded source, attribute.value#c2410c
punctuation.definition.string, punctuation.support.type.property-name#c2410c99
support#a16207
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#a16207
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#92400e
variable, identifier#92400e
support.type.primitive, entity.name.type#a21caf
namespace#7c3aed
keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts#dc2626
invalid.broken#dc2626italic
invalid.deprecated#dc2626italic
invalid.illegal#dc2626italic
invalid.unimplemented#dc2626italic
carriage-return#fafbfcitalic underline
message.error#dc2626
string variable#c2410c
source.regexp, string.regexp#ab5e3f
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#c2410c
string.regexp constant.character.escape#bda437
support.constant#a65e2b
keyword.operator.quantifier.regexp, constant.numeric, number#a21caf
keyword.other.unit#dc2626
constant.language.boolean, constant.language#6d28d9
meta.module-reference#a78bfa
punctuation.definition.list.begin.markdown#a65e2b
markup.heading, markup.heading entity.name#a78bfabold
markup.quote#a21caf
markup.italic#393a34italic
markup.bold#393a34bold
markup.raw#a78bfa
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#dc2626
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#fb7185
markup.changed, punctuation.definition.changed#e36209
markup.ignored, markup.untracked#f6f8fa
meta.diff.range#6f42c1bold
meta.diff.header#7c3aed
meta.separator#7c3aedbold
meta.output#7c3aed
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#586069
brackethighlighter.unmatched#dc2626
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#c2410c
markup.underline.link.markdown, markup.underline.link.image.markdown#393a3490underline
type.identifier, constant.other.character-class.regexp#7c3aed
entity.other.attribute-name.html.vue#d946ef
invalid.illegal.unrecognized-tag.htmlnormal