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.background#eaeaea
  • activityBar.foreground#313131
  • activityBarBadge.background#E1239A
  • activityBarBadge.foreground#f4f4f4
  • badge.background#E1239A
  • badge.foreground#f4f4f4
  • button.background#0488DB
  • button.foreground#313131
  • dropdown.background#eaeaea
  • dropdown.border#eaeaea
  • dropdown.foreground#313131
  • editor.background#ffffff
  • editor.foreground#313131
  • editor.hoverHighlightBackground#E1239A22
  • editor.lineHighlightBackground#ffffff22
  • editor.selectionBackground#0488DB55
  • editor.wordHighlightBackground#0488DB22
  • editor.wordHighlightStrongBackground#0488DB22
  • editorBracketMatch.background#E1239A44
  • editorBracketMatch.border#0488DB
  • editorCursor.foreground#313131
  • editorGroupHeader.tabsBackground#ffffff
  • editorGutter.addedBackground#0BA463
  • editorGutter.background#ffffff
  • editorGutter.deletedBackground#E61F44
  • editorGutter.modifiedBackground#FF7E00
  • editorIndentGuide.background#ffffff88
  • editorInlayHint.background#F4F4F4
  • editorInlayHint.foreground#313131
  • editorLineNumber.foreground#ADADAD
  • editorLink.activeForeground#E1239A
  • editorOverviewRuler.addedForeground#0BA463
  • editorOverviewRuler.deletedForeground#E61F44
  • editorOverviewRuler.errorForeground#E61F44
  • editorOverviewRuler.findMatchForeground#0488DB55
  • editorOverviewRuler.infoForeground#B267E6
  • editorOverviewRuler.modifiedForeground#FF7E00
  • editorOverviewRuler.warningForeground#FF7E00
  • editorRuler.foreground#F4F4F4
  • editorSuggestWidget.foreground#313131
  • editorSuggestWidget.highlightForeground#E1239A
  • editorSuggestWidget.selectedBackground#ADADAD
  • editorWhitespace.foreground#F4F4F4
  • editorWidget.background#F4F4F4
  • editorWidget.border#ADADAD
  • extensionButton.prominentBackground#E1239A
  • extensionButton.prominentForeground#313131
  • extensionButton.prominentHoverBackground#E1239A
  • focusBorder#E1239A
  • foreground#313131
  • gitDecoration.conflictingResourceForeground#B267E6
  • gitDecoration.deletedResourceForeground#E61F44
  • gitDecoration.ignoredResourceForeground#ADADAD
  • gitDecoration.modifiedResourceForeground#FF7E00
  • gitDecoration.untrackedResourceForeground#0BA463
  • input.background#eaeaea
  • input.border#ADADAD
  • input.foreground#313131
  • input.placeholderForeground#ADADAD
  • inputOption.activeBorder#0488DB
  • list.activeSelectionBackground#E1239A55
  • list.activeSelectionForeground#313131
  • list.focusBackground#B3B3B3
  • list.hoverBackground#ffffff
  • list.inactiveSelectionBackground#ffffff
  • panel.background#ffffff
  • panel.border#ADADAD
  • panelTitle.activeBorder#E1239A
  • panelTitle.inactiveForeground#ADADAD
  • peekView.border#E1239A
  • peekViewEditor.background#eaeaea
  • peekViewEditor.matchHighlightBackground#0488DB55
  • peekViewEditorGutter.background#eaeaea
  • peekViewResult.background#F4F4F4
  • peekViewResult.fileForeground#313131
  • peekViewResult.lineForeground#E6E6E6
  • peekViewResult.matchHighlightBackground#0488DB55
  • peekViewResult.selectionBackground#ffffff
  • peekViewResult.selectionForeground#313131
  • peekViewTitle.background#eaeaea
  • peekViewTitleDescription.foreground#313131
  • peekViewTitleLabel.foreground#E6E6E6
  • progressBar.background#0488DB
  • scrollbar.shadow#eaeaea
  • scrollbarSlider.activeBackground#E1239Aaa
  • scrollbarSlider.background#ADADADaa
  • scrollbarSlider.hoverBackground#E1239A55
  • sideBar.background#f8f8f8
  • sideBar.foreground#313131
  • sideBarSectionHeader.background#eaeaea
  • sideBarSectionHeader.foreground#313131
  • statusBar.background#eaeaea
  • statusBar.foreground#313131
  • statusBar.noFolderBackground#eaeaea
  • tab.activeModifiedBorder#FF7E00
  • tab.inactiveBackground#B3B3B344
  • tab.inactiveForeground#31313188
  • tab.inactiveModifiedBorder#0488DB
  • tab.unfocusedActiveModifiedBorder#FF7E0088
  • tab.unfocusedInactiveModifiedBorder#0488DB88
  • terminal.ansiBlack#F4F4F4
  • terminal.ansiBlue#0488DB
  • terminal.ansiBrightBlack#ADADAD
  • terminal.ansiBrightBlue#0488DB
  • terminal.ansiBrightCyan#D7C9F0
  • terminal.ansiBrightGreen#5BD1B9
  • terminal.ansiBrightMagenta#E1239A
  • terminal.ansiBrightRed#E61F44
  • terminal.ansiBrightWhite#313131
  • terminal.ansiBrightYellow#0488DB
  • terminal.ansiCyan#B267E6
  • terminal.ansiGreen#0BA463
  • terminal.ansiMagenta#E1239A
  • terminal.ansiRed#E61F44
  • terminal.ansiWhite#313131
  • terminal.ansiYellow#0488DB
  • terminal.background#ffffff
  • terminal.foreground#313131
  • titleBar.activeBackground#eaeaea

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#A8A8A8
comment.block.documentation, comment.block.documentation variable.other#A8A8A8
comment.block.documentation entity.name.type#0488DB
comment.block.documentation storage.type#313131
string, punctuation.definition.string.template#0BA463
constant.numeric#FF7E00
constant.language#0488DB
constant.character, constant.other#0488DB
variable.language.this#0488DB
keyword, keyword.operator.new, storage.modifier.async, keyword.operator.less#E1239Anormal
keyword.operator#5D5D5D
punctuation#5D5D5D
punctuation.definition.comment#A8A8A8
punctuation.definition.tag#313131
string.quoted punctuation.definition.string#0BA463
string.regexp, string.regexp punctuation.definition.string#0BA463
storage#0488DB
storage.type#E1239Anormal
entity.name.class#0488DB
entity.name.function, meta.require, support.function.any-method, variable.function, support.function.builtin.python, meta.function-call.generic.python#0488DBnormal
keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.relational, keyword.operator.increment, keyword.operator.decrement, keyword.operator.logical, keyword.operator.comparison, keyword.operator.ternary, keyword.operator.expression#0488DB
variable.parameter#313131
source.css.scss, source.css#0BA463
entity.other.attribute-name#FF7E00
support.function, support.variable.dom#FF7E00
support.constant#0488DB
support.type#313131
support.class#0BA463
invalid#E34234
invalid.deprecated#E34234
invalid.illegal#313131
meta.diff, meta.diff.header#d1d1d1
markup.deleted#E61F44
markup.inserted#A6E22E
markup.changed#FF7E00
constant.numeric.line-number.find-in-files - match
entity.name.filename.find-in-files#E6DB74
keyword.other#d1d1d1
meta.property-value, support.constant.property-value, constant.other.color#689FDE
meta.property-value punctuation.separator.key-value#313131
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#E1239A
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#E1239A
variable.other#313131
meta.object-literal.key#E1239A
variable.parameter.function.coffee#689FDE
markup.deleted.git_gutter#E61F44
markup.inserted.git_gutter
markup.changed.git_gutter#FF7E00
meta.template.expression#689FDE
variable.other.constant.property, keyword.operator.ternary, keyword.operator.expression.typeof#B267E6
entity.name.type, support.type.python#FF7E00
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
entity.name.tag.tsx, entity.name.tag.js.jsx, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.script.html.vue, entity.name.tag.template.html.vue, entity.name.tag.style.html.vue, entity.name.tag.style.html.vue, entity.name.tag.script.html, entity.name.tag.template.html, entity.name.tag.style.html, entity.name.tag.block.any.html#2372E1
support.class.component.tsx, support.class.component.jsx#E1239A
support.type.primitive.tsx, support.type.primitive.ts#0488DB
storage.modifier.tsx#E1239A
entity.other.inherited-class.tsx#FF7E00
meta.object.member variable.other.readwrite.tsx#313131
meta.structure.dictionary.json string.quoted.double.json#313131
meta.structure.dictionary.value.json string.quoted.double.json#0BA463
meta.structure.dictionary.json, punctuation.definition.string#0BA463
meta.structure.dictionary.json, support.type.property-name.json#E1239A
punctuation.definition.list.begin.markdown, punctuation.definition.list.begin.mdx, punctuation.definition.list.end.markdown, punctuation.definition.list.end.mdx, punctuation.definition.quote.begin.markdown, punctuation.definition.quote.begin.mdx, punctuation.definition.quote.end.markdown, punctuation.definition.quote.end.mdx, meta.separator.markdown, meta.separator.mdx, markup.inline.raw.string.markdown, markup.raw.code.text.mdx#FF7E00
entity.name.section.markdown, entity.name.section.mdx#0488DB
punctuation.definition.heading.markdown, punctuation.definition.heading.mdx#E1239A
markup.raw.inline.markdown, markup.raw.inline.mdx#689FDE
punctuation.definition.bold.markdown, punctuation.definition.bold.mdx, punctuation.definition.italic.markdown, punctuation.definition.italic.mdx, punctuation.definition.entity#E1239A
punctuation.definition.string.begin.markdown, punctuation.definition.string.begin.mdx, punctuation.definition.string.end.markdown, punctuation.definition.string.end.mdx#E1239A
punctuation.definition.metadata.markdown, punctuation.definition.metadata.mdx#E1239A
markup.underline.link.markdown, markup.underline.link.image.markdown, string.other.link.destination.mdx, meta.image.inline.markdown, meta.image.inline.mdx#E1239A
markup.bold.markdown, string.other.strong.asterisk.mdx, markup.italic.markdown, markup.italic.mdx#E1239A
markup.italic.markdown, markup.italic.mdx
markup.bold.markdown, markup.bold.mdx
markup.raw.block.markdown, markup.raw.block.mdx#689FDE
keyword.other.rust#B267E6
keyword.other.fn.rust#E1239A
punctuation.section.embedded.begin.php, keyword.other.class.php#E1239A
support.class.php#313131
meta.use.php#0BA463
keyword.other.definition.ini#0488DB
support.type.primitive.prisma#FF7E00
support.constant.constant.prisma#E1239A
variable.language.relations.prisma#0BA463
entity.name.tag.yaml#E1239A
storage.type.java#FF7E00normal
keyword.other.package.java, keyword.other.import.java#E1239Anormal
storage.modifier.package.java#FF7E00
storage.modifier.import.java#313131
punctuation.separator.java#5D5D5D
meta.tag.xml#0488DB
keyword.other.declaration-specifier.swift, keyword.other.declaration-specifier.accessibility.swift#E1239Anormal
support.type.swift, meta.function-result.swift, variable.language.swift, keyword.operator.custom.infix.swift#0488DB
variable.parameter.function.swift#313131
entity.name.function.swift#0488DBnormal
variable.parameter.function.swift, meta.parameter-clause.swift#f4f4f4
support.function.go#0488DBnormal
keyword.operator.address.go, keyword.operator.pointer.go#0488DB
keyword.channel.go#B267E6
storage.type.numeric.go, storage.type.string.go, storage.type.error.go, storage.type.boolean.go, storage.type.byte.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.complex.go#FF7E00
entity.name.tag.astro#E1239A
support.class.component.astro#E1239A

Shiki preview

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

Loading...