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#3784a5
  • activityBar.background#ffffff
  • activityBar.border#ebebeb
  • activityBar.foreground#35393b
  • activityBar.inactiveForeground#35393b50
  • activityBarBadge.background#464c4f
  • activityBarBadge.foreground#ffffff
  • badge.background#35393b90
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#22222224
  • breadcrumb.background#f7f7f7
  • breadcrumb.focusForeground#35393b
  • breadcrumb.foreground#737373
  • breadcrumbPicker.background#ffffff
  • button.background#3784a5
  • button.foreground#ffffff
  • button.hoverBackground#3784a5
  • checkbox.background#f7f7f7
  • checkbox.border#d4d4d4
  • debugToolBar.background#ffffff
  • descriptionForeground#35393b90
  • diffEditor.insertedTextBackground#1c6b4830
  • diffEditor.removedTextBackground#ab595940
  • dropdown.background#ffffff
  • dropdown.border#ebebeb
  • dropdown.foreground#35393b
  • dropdown.listBackground#f7f7f7
  • editor.background#ffffff
  • editor.findMatchBackground#e6cc7744
  • editor.findMatchHighlightBackground#e6cc7766
  • editor.focusedStackFrameHighlightBackground#fef08a
  • editor.foldBackground#22222210
  • editor.foreground#35393b
  • editor.inactiveSelectionBackground#22222216
  • editor.lineHighlightBackground#f7f7f7
  • editor.selectionBackground#22222224
  • editor.selectionHighlightBackground#22222216
  • editor.stackFrameHighlightBackground#fef9c3
  • editor.wordHighlightBackground#1c6b4805
  • editor.wordHighlightStrongBackground#1c6b4810
  • editorBracketHighlight.foreground1#545657
  • editorBracketHighlight.foreground2#545657
  • editorBracketHighlight.foreground3#545657
  • editorBracketHighlight.foreground4#545657
  • editorBracketHighlight.foreground5#545657
  • editorBracketHighlight.foreground6#545657
  • editorBracketMatch.background#1c6b4820
  • editorError.foreground#a95c5c
  • editorGroup.border#ebebeb
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#ebebeb
  • editorGutter.addedBackground#47a76a
  • editorGutter.commentRangeForeground#35393b50
  • editorGutter.deletedBackground#a95c5c
  • editorGutter.foldingControlForeground#35393b90
  • editorGutter.modifiedBackground#3784a5
  • editorHint.foreground#47a76a
  • editorInfo.foreground#3784a5
  • editorInlayHint.background#f7f7f7
  • editorInlayHint.foreground#545657
  • editorLineNumber.activeForeground#464c4f
  • editorLineNumber.foreground#35393b50
  • editorOverviewRuler.border#fff
  • editorStickyScroll.background#f7f7f7
  • editorStickyScrollHover.background#f7f7f7
  • editorWarning.foreground#a56939
  • editorWhitespace.foreground#00000015
  • editorWidget.background#ffffff
  • errorForeground#a95c5c
  • focusBorder#00000000
  • foreground#35393b
  • gitDecoration.addedResourceForeground#47a76a
  • gitDecoration.conflictingResourceForeground#a56939
  • gitDecoration.deletedResourceForeground#a95c5c
  • gitDecoration.ignoredResourceForeground#35393b50
  • gitDecoration.modifiedResourceForeground#3784a5
  • gitDecoration.submoduleResourceForeground#35393b90
  • gitDecoration.untrackedResourceForeground#2893a4
  • input.background#f7f7f7
  • input.border#ebebeb
  • input.foreground#35393b
  • input.placeholderForeground#35393b90
  • inputOption.activeBackground#35393b50
  • list.activeSelectionBackground#f7f7f7
  • list.activeSelectionForeground#35393b
  • list.focusBackground#f7f7f7
  • list.highlightForeground#3784a5
  • list.hoverBackground#f7f7f7
  • list.hoverForeground#35393b
  • list.inactiveFocusBackground#ffffff
  • list.inactiveSelectionBackground#f7f7f7
  • list.inactiveSelectionForeground#35393b
  • menu.separatorBackground#ebebeb
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#737373
  • notifications.background#ffffff
  • notifications.border#ebebeb
  • notifications.foreground#35393b
  • notificationsErrorIcon.foreground#a95c5c
  • notificationsInfoIcon.foreground#3784a5
  • notificationsWarningIcon.foreground#a56939
  • panel.background#ffffff
  • panel.border#ebebeb
  • panelInput.border#e5e5e5
  • panelTitle.activeBorder#3784a5
  • panelTitle.activeForeground#35393b
  • panelTitle.inactiveForeground#737373
  • peekViewEditor.background#ffffff
  • peekViewResult.background#ffffff
  • pickerGroup.border#ebebeb
  • pickerGroup.foreground#35393b
  • problemsErrorIcon.foreground#a95c5c
  • problemsInfoIcon.foreground#3784a5
  • problemsWarningIcon.foreground#a56939
  • progressBar.background#3784a5
  • quickInput.background#ffffff
  • quickInput.foreground#35393b
  • quickInputList.focusBackground#f7f7f7
  • scrollbar.shadow#6a737d33
  • scrollbarSlider.activeBackground#35393b50
  • scrollbarSlider.background#35393b10
  • scrollbarSlider.hoverBackground#35393b50
  • settings.headerForeground#35393b
  • settings.modifiedItemIndicator#3784a5
  • sideBar.background#ffffff
  • sideBar.border#ebebeb
  • sideBar.foreground#464c4f
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#ebebeb
  • sideBarSectionHeader.foreground#35393b
  • sideBarTitle.foreground#35393b
  • statusBar.background#ffffff
  • statusBar.border#ebebeb
  • statusBar.debuggingBackground#f7f7f7
  • statusBar.debuggingForeground#464c4f
  • statusBar.foreground#464c4f
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.prominentBackground#f7f7f7
  • tab.activeBackground#ffffff
  • tab.activeBorder#ebebeb
  • tab.activeBorderTop#35393b90
  • tab.activeForeground#35393b
  • tab.border#ebebeb
  • tab.hoverBackground#f7f7f7
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#737373
  • tab.unfocusedActiveBorder#ebebeb
  • tab.unfocusedActiveBorderTop#ebebeb
  • tab.unfocusedHoverBackground#ffffff
  • terminal.ansiBlack#0f0f0f
  • terminal.ansiBlue#3784a5
  • terminal.ansiBrightBlack#aaaaaa
  • terminal.ansiBrightBlue#3784a5
  • terminal.ansiBrightCyan#2893a4
  • terminal.ansiBrightfuchsia#a060aa
  • terminal.ansiBrightGreen#47a76a
  • terminal.ansiBrightRed#a95c5c
  • terminal.ansiBrightWhite#dddddd
  • terminal.ansiBrightYellow#a3881f
  • terminal.ansiCyan#2893a4
  • terminal.ansifuchsia#a060aa
  • terminal.ansiGreen#47a76a
  • terminal.ansiRed#a95c5c
  • terminal.ansiWhite#dbd7ca
  • terminal.ansiYellow#a3881f
  • terminal.foreground#35393b
  • terminal.selectionBackground#22222224
  • textBlockQuote.background#ffffff
  • textBlockQuote.border#ebebeb
  • textCodeBlock.background#ffffff
  • textLink.activeForeground#3784a5
  • textLink.foreground#3784a5
  • textPreformat.foreground#525252
  • textSeparator.foreground#d4d4d4
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#464c4f
  • titleBar.border#f7f7f7
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#737373
  • tree.indentGuidesStroke#e5e5e5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#a1a9ad
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, punctuation.definition.string.begin.html.vue, punctuation.definition.string.end.html.vue#545657
constant, entity.name.constant, variable.language, meta.definition.variable#aa5d85
entity, entity.name#34a596
variable.parameter.function#35393b
entity.name.tag, tag.html#3784a5
entity.name.function#34a596
keyword, storage.type.class.jsdoc, punctuation.definition.template-expression#3784a5
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null, constant.language.import-export-all.ts#8866aa
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#35393b
string, string punctuation.section.embedded source, attribute.value#b07d48
punctuation.definition.string#b07d4877
punctuation.support.type.property-name#3784a577
support#3784a5
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#3784a5
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#aa5d85
variable, identifier#aa5d85
support.type.primitive, entity.name.type#47a76a
namespace#47a76a
keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts#8866aa
invalid.broken#b91c1citalic
invalid.deprecated#b91c1citalic
invalid.illegal#b91c1citalic
invalid.unimplemented#b91c1citalic
carriage-return#fafafaitalic underline
message.error#b91c1c
string variable#b07d48
source.regexp, string.regexp#a95c5c
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repetition#b07d48
string.regexp constant.character.escape#a3881f
support.constant#aa5d85
keyword.operator.quantifier.regexp, constant.numeric, number#4e77a8
keyword.other.unit#8866aa
constant.language.boolean, constant.language#4e77a8
meta.module-reference#3784a5
punctuation.definition.list.begin.markdown#a56939
markup.heading, markup.heading entity.name#3784a5bold
markup.quote#47a76a
markup.italic#35393bitalic
markup.bold#35393bbold
markup.raw#3784a5
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#b91c1c
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#16a34a
markup.changed, punctuation.definition.changed#ea580c
markup.ignored, markup.untracked#f5f5f5
meta.diff.range#a855f7bold
meta.diff.header#2563eb
meta.separator#2563ebbold
meta.output#2563eb
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#525252
brackethighlighter.unmatched#b91c1c
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#b07d48
markup.underline.link.markdown, markup.underline.link.image.markdown#35393b90underline
type.identifier, constant.other.character-class.regexp#47a76a
entity.other.attribute-name.html.vue#34a596
invalid.illegal.unrecognized-tag.html