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.activeBackground#FCFCFC
  • activityBar.activeBorder#efb810
  • activityBar.background#FCFCFC
  • activityBar.border#d9dfe7
  • activityBar.foreground#333e4f
  • activityBar.inactiveForeground#8b98a9
  • activityBarBadge.background#00ffbb
  • activityBarBadge.foreground#494949
  • badge.background#00ffbb46
  • badge.foreground#08cd98
  • breadcrumb.activeSelectionForeground#5d6a7d
  • breadcrumb.background#f4f7fd
  • breadcrumb.focusForeground#333e4f
  • breadcrumb.foreground#738295
  • breadcrumbPicker.background#fafbfe
  • button.hoverBackground#603bce
  • button.secondaryBackground#d9dfe7
  • button.secondaryForeground#000000
  • button.secondaryHoverBackground#a4afbd
  • checkbox.background#ffffff
  • checkbox.border#bfc7d2
  • checkbox.foreground#333e4f
  • commandCenter.activeBackground#fafbfe
  • commandCenter.activeBorder#bfc7d2
  • commandCenter.activeForeground#333e4f
  • commandCenter.background#f4f7fd
  • commandCenter.border#d9dfe7
  • commandCenter.foreground#5d6a7d
  • commandCenter.inactiveBorder#d9dfe7
  • commandCenter.inactiveForeground#738295
  • debugToolBar.background#ffffff
  • descriptionForeground#5d6a7d
  • diffEditor.insertedTextBackground#daf8e4bd
  • diffEditor.removedTextBackground#ffe5e4b0
  • dropdown.background#ffffff
  • dropdown.border#bfc7d2
  • dropdown.foreground#333e4f
  • dropdown.listBackground#f4f7fd
  • editor.background#ffffff
  • editor.findMatchBackground#df812866
  • editor.findMatchBorder#df8128
  • editor.findMatchHighlightBackground#ffc26e66
  • editor.findMatchHighlightBorder#ffc26e
  • editor.focusedStackFrameHighlightBackground#28a74525
  • editor.foldBackground#f4f7fdb6
  • editor.foreground#1f2939
  • editor.inactiveSelectionBackground#c7d3ff66
  • editor.lineHighlightBackground#f4f7fd
  • editor.linkedEditingBackground#a87ffb99
  • editor.selectionBackground#c7d3ff99
  • editor.selectionHighlightBackground#98e4b999
  • editor.selectionHighlightBorder#98e4b999
  • editor.stackFrameHighlightBackground#ffd33d33
  • editor.wordHighlightBackground#ffc9aa66
  • editor.wordHighlightBorder#ffc9aa
  • editor.wordHighlightStrongBackground#ffc9aa66
  • editor.wordHighlightStrongBorder#ffc9aa
  • editorBracketHighlight.foreground1#0075a2
  • editorBracketHighlight.foreground2#d07826
  • editorBracketHighlight.foreground3#6f4cde
  • editorBracketHighlight.foreground4#0075a2
  • editorBracketHighlight.foreground5#d07826
  • editorBracketHighlight.foreground6#6f4cde
  • editorBracketMatch.background#abe1f899
  • editorBracketMatch.border#abe1f8
  • editorCodeLens.foreground#5d6a7d
  • editorCursor.foreground#5d6a7d
  • editorError.foreground#df4047
  • editorGhostText.foreground#a4afbd
  • editorGroup.border#d9dfe7
  • editorGroupHeader.tabsBackground#FCFCFC
  • editorGroupHeader.tabsBorder#d9dfe7
  • editorGutter.addedBackground#98e4b9
  • editorGutter.deletedBackground#fc8f8e
  • editorGutter.foldingControlForeground#5d6a7d
  • editorGutter.modifiedBackground#a2b6ff
  • editorHint.foreground#17975f
  • editorIndentGuide.activeBackground1#bfc7d2
  • editorIndentGuide.background1#e7ebf2
  • editorInfo.foreground#5173f1
  • editorInlayHint.background#ffffff
  • editorInlayHint.foreground#5fa8d8
  • editorInlayHint.parameterBackground#ffffff
  • editorInlayHint.typeBackground#ffffff
  • editorInlayHint.typeForeground#5fa8d8
  • editorLightBulb.foreground#df8128
  • editorLineNumber.activeForeground#78a0dd
  • editorLineNumber.foreground#d0d6df
  • editorLink.activeForeground#6f4cde
  • editorOverviewRuler.border#ffffff
  • editorWarning.foreground#df8128
  • editorWhitespace.foreground#bfc7d2
  • editorWidget.background#ffffff
  • editorWidget.border#a4afbd
  • errorForeground#c1313b
  • focusBorder#8964e8
  • foreground#1f2939
  • gitDecoration.addedResourceForeground#81a87d
  • gitDecoration.conflictingResourceForeground#b40202
  • gitDecoration.deletedResourceForeground#e07a3e
  • gitDecoration.ignoredResourceForeground#acbbcf
  • gitDecoration.modifiedResourceForeground#0745cc
  • gitDecoration.stageModifiedResourceForeground#cfa575
  • gitDecoration.submoduleResourceForeground#8b98a9
  • gitDecoration.untrackedResourceForeground#5c91bd
  • icon.foreground#1f2939
  • input.background#ffffff
  • input.border#bfc7d2
  • input.foreground#333e4f
  • input.placeholderForeground#8b98a9
  • inputOption.activeBackground#a87ffb4d
  • inputOption.activeBorder#a87ffb
  • inputOption.activeForeground#1f2939
  • inputValidation.errorBorder#c1313b
  • keybindingLabel.background#f4f7fd
  • keybindingLabel.border#d9dfe7
  • keybindingLabel.bottomBorder#d9dfe7
  • keybindingLabel.foreground#333e4f
  • list.activeSelectionBackground#85afe975
  • list.activeSelectionForeground#333e4f
  • list.errorForeground#c1313b
  • list.focusBackground#ffffff
  • list.focusOutline#333e4f
  • list.hoverBackground#adc7ec75
  • list.hoverForeground#000000
  • list.inactiveFocusBackground#e7ebf2
  • list.inactiveSelectionBackground#e4ecfd
  • list.inactiveSelectionForeground#333e4f
  • list.warningForeground#c16f23
  • menu.background#f4f7fd
  • menu.border#bfc7d2
  • menu.foreground#1f2939
  • menu.selectionBackground#d9dfe7
  • menu.separatorBackground#d9dfe7
  • menubar.selectionBackground#00ffbb5e
  • minimap.background#FCFCFC
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#5d6a7d
  • notifications.background#f4f7fd
  • notifications.border#bfc7d2
  • notifications.foreground#333e4f
  • notificationsErrorIcon.foreground#df4047
  • notificationsInfoIcon.foreground#738295
  • notificationsWarningIcon.foreground#df8128
  • notificationToast.border#bfc7d2
  • panel.background#f4f7fd
  • panel.border#d9dfe7
  • panelInput.border#d9dfe7
  • panelSection.border#d9dfe7
  • panelSectionHeader.background#00000000
  • panelSectionHeader.foreground#333e4f
  • panelTitle.activeBorder#8964e8
  • panelTitle.activeForeground#333e4f
  • panelTitle.inactiveForeground#5d6a7d
  • peekView.border#8964e8
  • peekViewEditor.background#f4f7fd
  • peekViewEditor.matchHighlightBackground#df812866
  • peekViewEditor.matchHighlightBorder#df8128
  • peekViewResult.background#e7ebf2
  • peekViewResult.matchHighlightBackground#df812866
  • peekViewResult.selectionBackground#d9dfe7
  • pickerGroup.border#d9dfe7
  • pickerGroup.foreground#333e4f
  • problemsErrorIcon.foreground#df4047
  • problemsInfoIcon.foreground#738295
  • problemsWarningIcon.foreground#df8128
  • progressBar.background#a87ffb
  • quickInput.background#ffffff
  • quickInput.foreground#333e4f
  • quickInputTitle.background#ffffff
  • sash.hoverBorder#8964e8
  • scrollbar.shadow#6a737d33
  • scrollbarSlider.activeBackground#959da588
  • scrollbarSlider.background#959da533
  • scrollbarSlider.hoverBackground#959da544
  • settings.headerForeground#333e4f
  • settings.modifiedItemIndicator#708fff
  • sideBar.background#FCFCFC
  • sideBar.border#d9dfe7
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#f4f7fd
  • sideBarSectionHeader.border#d9dfe7
  • sideBarSectionHeader.foreground#333e4f
  • sideBarTitle.foreground#333e4f
  • statusBar.background#f4f7fd
  • statusBar.border#ffffff
  • statusBar.debuggingBackground#4a5748d3
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.offlineForeground#00ffbb
  • statusBarItem.prominentBackground#e8eaed
  • statusBarItem.remoteBackground#3f4753
  • statusBarItem.remoteForeground#00ffbb
  • statusBarItem.remoteHoverForeground#ffffff
  • tab.activeBackground#f4f7fd
  • tab.activeBorder#ffffff
  • tab.activeBorderTop#8964e8
  • tab.activeForeground#333e4f
  • tab.border#d9dfe7
  • tab.hoverBackground#ffffff
  • tab.inactiveBackground#FCFCFC
  • tab.inactiveForeground#5d6a7d
  • tab.unfocusedActiveBorder#ffffff
  • tab.unfocusedActiveBorderTop#d9dfe7
  • tab.unfocusedActiveForeground#a4afbd
  • tab.unfocusedHoverBackground#ffffff
  • tab.unfocusedHoverForeground#5d6a7d
  • tab.unfocusedInactiveForeground#a4afbd
  • terminal.ansiBlack#333e4f
  • terminal.ansiBlue#15518a
  • terminal.ansiBrightBlack#315ea1
  • terminal.ansiBrightBlue#2870b3
  • terminal.ansiBrightCyan#00607e
  • terminal.ansiBrightGreen#00522f
  • terminal.ansiBrightMagenta#4d21bb
  • terminal.ansiBrightRed#a52430
  • terminal.ansiBrightWhite#29303b
  • terminal.ansiBrightYellow#ff5405
  • terminal.ansiCyan#0075a2
  • terminal.ansiGreen#1cb978
  • terminal.ansiMagenta#6f4cde
  • terminal.ansiRed#d03941
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#ffb005
  • terminal.background#ffffff
  • terminal.foreground#000000
  • terminal.tab.activeBorder#8964e8
  • terminalCursor.background#000000
  • terminalCursor.foreground#3d4249
  • textBlockQuote.background#fafbfe
  • textBlockQuote.border#d9dfe7
  • textCodeBlock.background#f4f7fd
  • textLink.activeForeground#4d21bb
  • textLink.foreground#6f4cde
  • textPreformat.foreground#5d6a7d
  • textSeparator.foreground#a4afbd
  • titleBar.activeBackground#FCFCFC
  • titleBar.activeForeground#1f2939
  • titleBar.border#ced4e2
  • titleBar.inactiveBackground#ced4e2
  • titleBar.inactiveForeground#f4f7fd
  • toolbar.activeBackground#1f293929
  • toolbar.hoverBackground#1f293914
  • tree.indentGuidesStroke#d9dfe7
  • widget.shadow#1f293940

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block#98B1F5italic
carriage-return#FAFBFEitalic underline
message.error#AD1C48
punctuation.definition.string, string punctuation.section.embedded source, constant.character.format.placeholder.other.python#1CB978
punctuation.definition.string.begin.python, punctuation.definition.string.end.python#1CB978
string source#1F2939
string variable#000000
constant, variable, entity.name.constant, variable.other.constant, variable.language, entity.name.function#000000
entity.name.type.class#264DCB
variable#000000
variable.other#000000
variable.parameter.function#0034E0
variable.parameter.function-call.python#0034E0
entity, entity.name#6F4CDE
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy, storage.type.mermaid, punctuation.definition, punctuation.separator#008CFF
entity.name.tag#F33C3C
keyword, storage, storage.type, annotation#F33C3C
support, meta.property-name, support.constant, support.variable, meta.module-reference#264DCB
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080
source.regexp, string.regexp#1ACD82
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#1CB978
string.regexp constant.character.escape#1CB978bold
markup.heading, markup.heading entity.name#264DCBbold
markup.quote#1CB978
markup.italic#1F2939italic
markup.bold#A426CBbold
markup.raw#158D5B
constant.other.reference.link, string.other.link#1CB978underline
punctuation.definition.list.begin.markdown#D07826
heading.1.markdown punctuation.definition.heading.markdown, heading.1.markdown entity.name.section.markdown#000000
heading.2.markdown punctuation.definition.heading.markdown, heading.2.markdown entity.name.section.markdown#F33C3C
heading.3.markdown punctuation.definition.heading.markdown, heading.3.markdown entity.name.section.markdown#E0943E
heading.4.markdown punctuation.definition.heading.markdown, heading.4.markdown entity.name.section.markdown#264DCB
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#AD1C48
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#1CB978
markup.changed, punctuation.definition.changed#D07826
markup.ignored, markup.untracked#F4F7FD
meta.diff.range#6F4CDEbold
meta.diff.header#264DCB
meta.separator#264DCBbold
meta.output#264DCB
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#5D6A7D
brackethighlighter.unmatched#AD1C48
storage.modifier.package, storage.modifier.import, storage.type.java#1F2939
support.variable.js#1F2939
punctuation.definition.comment, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python#C8D3F3
string.quoted.docstring.multi.python#98B1F5
entity.name.namespace#27391Fbold
keyword.operator#F33C3C
keyword.operator.logical.python, keyword.control.flow.python, punctuation.separator.colon.python, keyword.control.import.python#A426CB
entity.name.function.member#E0943E
punctuation.separator.slice.python, punctuation.separator.annotation.result.python, punctuation.separator.annotation.python, punctuation.definition.decorator.python, meta.fstring.python constant.character.format.placeholder.other.python#E99648
punctuation.definition.parameters.begin.python, punctuation.definition.parameters.end.python, punctuation.separator.arguments.python, punctuation.separator.dict.python, punctuation.separator.element.python, punctuation.separator.parameters.python, punctuation.separator.period.python, support.function.magic.python#0B4C7A
punctuation.section.function.begin.python#F33C3C
keyword.operator.comparison.python, keyword.operator.bitwise.python, keyword.operator.arithmetic.python#4B7C86
string, string.quoted.single.python#158D5B
entity.name.function.decorator.python, meta.function.decorator.python#405CB9
storage.type.string.python, source.python constant.character.escape#7697B1
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python
text.html.derivative, text.html.django#000000
entity.other.attribute-name.html#D07826
string.quoted.double.html, punctuation.separator.key-value.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#569CD6
entity.name.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#F33C3C
string.quoted.single.django, string.quoted.double.django#FF9292
string.quoted.double.begin.django, string.quoted.double.end.django#569CD6
variable.other.django, support.function.django, meta.variable.structure.django, keyword.operator.getter.django#1CB978
text.html.django meta.tag.block.any.html entity.other.attribute-name.html, text.html.django meta.tag.inline.any.html entity.other.attribute-name.html, text.html.django meta.tag.block.any.html string.quoted.double.html punctuation.definition.string.begin.html, text.html.django meta.tag.inline.any.html string.quoted.double.html punctuation.definition.string.begin.html, text.html.django meta.tag.block.any.html string.quoted.double.html punctuation.definition.string.end.html, text.html.django meta.tag.inline.any.html string.quoted.double.html punctuation.definition.string.end.html, text.html.django meta.tag.block.any.html, text.html.django meta.tag.inline.any.html#1CB978
keyword.control.django, keyword.control.tag-name.django, storage.type.templatetag.django entity.tag.tagbraces.django, storage.type.variable.django entity.tag.tagbraces.django, text.html.django meta.tag.inline.any.html string.quoted.double.html storage.type.variable.django entity.tag.tagbraces.django, support.type.tag.begin.django, support.type.tag.end.django, string.quoted.single.begin.django, string.quoted.single.end.django, meta.tag.structure.django, text.html.django storage.type.variable.django entity.tag.tagbraces.django, text.html.django storage.type.templatetag.django entity.tag.tagbraces.django, text.html.django storage.type.templatetag.django, support.type.variable.begin.django, support.type.variable.end.django#6F4CDE
source.css#6F4CDE
punctuation.definition.string.begin.html source.css, punctuation.definition.string.end.html source.css#569CD6
variable.mermaid#000000
keyword.control.transition.mermaid, delimiter.bracket.mermaid#264DCB
variable.mermaid#000000
keyword.control.transition.mermaid, delimiter.bracket.mermaid#264DCB
heading.1.markdown, heading.1.markdown punctuation.definition.heading.markdown#000000
heading.2.markdown, heading.2.markdown punctuation.definition.heading.markdown#FF8F8F
heading.3.markdown, heading.3.markdown punctuation.definition.heading.markdown#FFDA96
heading.4.markdown, heading.4.markdown punctuation.definition.heading.markdown#9CDCFE
punctuation.definition.tag#FCADA1
entity.name.tag.js.jsx#FF7765
ref.matchtext#000000
ref.matchtext#000000
storage.type.function.python, storage.type.function.async.python, storage.type.class.python#FF0303
entity.name.function.member#000000italic
meta.function-call.arguments.python variable.parameter.function-call.python#202020italic
entity.name.type.class#0064A7
constant.language.python#099CFF
comment.line#c0cdf1italic
string#1c9965
entity.name.type.package.go#000000bold
entity.name.function.support.go, entity.name.function.support.builtin.go#4795c3
constant.numeric.decimal.go, constant.language.boolean.go#1834a7
storage.type.numeric.go, storage.type.string.go, storage.type.boolean.go, storage.type.error.go, storage.type.byte.go, storage.type.rune.go, storage.type.uintptr.go, storage.type.struct.go, storage.type.interface.go, storage.type.map.go, storage.type.chan.go, storage.type.var.go, storage.type.func.go, storage.type.type.go, storage.type.const.go#0064A7
entity.name.type.go#008CFF
keyword.control.go#F33C3C
keyword.operator.arithmetic.go, keyword.operator.comparison.go, keyword.operator.increment.go#A426CB
keyword.operator.address.go#0adacc
punctuation.definition.begin.bracket.curly.go, punctuation.definition.end.bracket.curly.go, punctuation.other.comma.go, punctuation.other.period.go, punctuation.definition.begin.bracket.round.go, punctuation.definition.end.bracket.round.go#917960
entity.name.import.go#158D5B
constant.character.escape.go#c9ce8d
constant.other.placeholder.go#9b7eb1

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Esmerald - Coding Theme