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#101315
  • activityBar.foreground#E0E0E0
  • activityBarBadge.background#F4457D
  • activityBarBadge.foreground#E0E0E0
  • badge.background#F4457D
  • badge.foreground#E0E0E0
  • button.background#53A1FA
  • button.foreground#E0E0E0
  • dropdown.background#101315
  • dropdown.border#101315
  • dropdown.foreground#E0E0E0
  • editor.background#191d21
  • editor.foreground#E0E0E0
  • editor.hoverHighlightBackground#F4457D22
  • editor.lineHighlightBackground#191d2122
  • editor.selectionBackground#53A1FA55
  • editor.wordHighlightBackground#53A1FA22
  • editor.wordHighlightStrongBackground#53A1FA22
  • editorBracketMatch.background#F4457D44
  • editorBracketMatch.border#53A1FA
  • editorCursor.foreground#E0E0E0
  • editorGroupHeader.tabsBackground#1d2226
  • editorGutter.addedBackground#5BD1B9
  • editorGutter.background#191d21
  • editorGutter.deletedBackground#E61F44
  • editorGutter.modifiedBackground#F9C35A
  • editorIndentGuide.background#191d2188
  • editorInlayHint.background#34393E
  • editorInlayHint.foreground#E0E0E0
  • editorLineNumber.foreground#45505b
  • editorLink.activeForeground#F4457D
  • editorOverviewRuler.addedForeground#5BD1B9
  • editorOverviewRuler.deletedForeground#E61F44
  • editorOverviewRuler.errorForeground#E61F44
  • editorOverviewRuler.findMatchForeground#53A1FA55
  • editorOverviewRuler.infoForeground#B267E6
  • editorOverviewRuler.modifiedForeground#F9C35A
  • editorOverviewRuler.warningForeground#F9C35A
  • editorRuler.foreground#34393E
  • editorSuggestWidget.foreground#E0E0E0
  • editorSuggestWidget.highlightForeground#F4457D
  • editorSuggestWidget.selectedBackground#45505b
  • editorWhitespace.foreground#34393E
  • editorWidget.background#34393E
  • editorWidget.border#45505b
  • extensionButton.prominentBackground#F4457D
  • extensionButton.prominentForeground#E0E0E0
  • extensionButton.prominentHoverBackground#EE808B
  • focusBorder#F4457D
  • foreground#E0E0E0
  • gitDecoration.conflictingResourceForeground#B267E6
  • gitDecoration.deletedResourceForeground#E61F44
  • gitDecoration.ignoredResourceForeground#45505b
  • gitDecoration.modifiedResourceForeground#F9C35A
  • gitDecoration.untrackedResourceForeground#5BD1B9
  • input.background#101315
  • input.border#45505b
  • input.foreground#E0E0E0
  • input.placeholderForeground#45505b
  • inputOption.activeBorder#53A1FA
  • list.activeSelectionBackground#F4457D55
  • list.activeSelectionForeground#E0E0E0
  • list.focusBackground#3A434D
  • list.hoverBackground#1d2226
  • list.inactiveSelectionBackground#191d21
  • panel.background#191d21
  • panel.border#45505b
  • panelTitle.activeBorder#F4457D
  • panelTitle.inactiveForeground#45505b
  • peekView.border#F4457D
  • peekViewEditor.background#101315
  • peekViewEditor.matchHighlightBackground#53A1FA55
  • peekViewEditorGutter.background#101315
  • peekViewResult.background#34393E
  • peekViewResult.fileForeground#E0E0E0
  • peekViewResult.lineForeground#E6E6E6
  • peekViewResult.matchHighlightBackground#53A1FA55
  • peekViewResult.selectionBackground#1d2226
  • peekViewResult.selectionForeground#E0E0E0
  • peekViewTitle.background#101315
  • peekViewTitleDescription.foreground#E0E0E0
  • peekViewTitleLabel.foreground#E6E6E6
  • progressBar.background#53A1FA
  • scrollbar.shadow#101315
  • scrollbarSlider.activeBackground#F4457Daa
  • scrollbarSlider.background#45505baa
  • scrollbarSlider.hoverBackground#F4457D55
  • sideBar.background#14181b
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#101315
  • sideBarSectionHeader.foreground#E0E0E0
  • statusBar.background#101315
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#101315
  • tab.activeModifiedBorder#F9C35A
  • tab.inactiveBackground#3A434D44
  • tab.inactiveForeground#E0E0E088
  • tab.inactiveModifiedBorder#53A1FA
  • tab.unfocusedActiveModifiedBorder#F9C35A88
  • tab.unfocusedInactiveModifiedBorder#53A1FA88
  • terminal.ansiBlack#34393E
  • terminal.ansiBlue#53A1FA
  • terminal.ansiBrightBlack#45505b
  • terminal.ansiBrightBlue#A7C7ED
  • terminal.ansiBrightCyan#D7C9F0
  • terminal.ansiBrightGreen#B7F0E5
  • terminal.ansiBrightMagenta#EE808B
  • terminal.ansiBrightRed#E61F44
  • terminal.ansiBrightWhite#E0E0E0
  • terminal.ansiBrightYellow#A7C7ED
  • terminal.ansiCyan#B267E6
  • terminal.ansiGreen#5BD1B9
  • terminal.ansiMagenta#F4457D
  • terminal.ansiRed#E61F44
  • terminal.ansiWhite#E0E0E0
  • terminal.ansiYellow#53A1FA
  • terminal.background#191d21
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#101315

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#888888
comment.block.documentation, comment.block.documentation variable.other#888888
comment.block.documentation entity.name.type#53A1FA
comment.block.documentation storage.type#E0E0E0
string, punctuation.definition.string.template#5BD1B9
constant.numeric#F9C35A
constant.language#43AAF9
constant.character, constant.other#53A1FA
variable.language.this#43AAF9
keyword, keyword.operator.new, storage.modifier.async, keyword.operator.less#F4457Dbold
keyword.operator#EFEFEF
punctuation#EFEFEF
punctuation.definition.comment#888888
punctuation.definition.tag#E0E0E0
string.quoted punctuation.definition.string#5BD1B9
string.regexp, string.regexp punctuation.definition.string#5BD1B9
storage#43AAF9
storage.type#F4457Dbold
entity.name.class#53A1FA
entity.name.function, meta.require, support.function.any-method, variable.function, support.function.builtin.python, meta.function-call.generic.python#43AAF9bold
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#53A1FA
variable.parameter#E0E0E0
source.css.scss, source.css#5BD1B9
entity.other.attribute-name#F9C35A
support.function, support.variable.dom#F9C35A
support.constant#43AAF9
support.type#E0E0E0
support.class#5BD1B9
invalid#E34234
invalid.deprecated#E34234
invalid.illegal#E0E0E0
meta.diff, meta.diff.header#718493
markup.deleted#E61F44
markup.inserted#A6E22E
markup.changed#F9C35A
constant.numeric.line-number.find-in-files - match
entity.name.filename.find-in-files#E6DB74
keyword.other#9CAAB4
meta.property-value, support.constant.property-value, constant.other.color#9FBDE0
meta.property-value punctuation.separator.key-value#E0E0E0
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#F4457D
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#F4457D
variable.other#E0E0E0
meta.object-literal.key#F4457D
variable.parameter.function.coffee#9FBDE0
markup.deleted.git_gutter#E61F44
markup.inserted.git_gutter
markup.changed.git_gutter#F9C35A
meta.template.expression#9FBDE0
variable.other.constant.property, keyword.operator.ternary, keyword.operator.expression.typeof#B267E6
entity.name.type, support.type.python#F9C35A
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#F4457D
support.class.component.tsx, support.class.component.jsx#53A1FA
support.type.primitive.tsx, support.type.primitive.ts#43AAF9
storage.modifier.tsx#F4457D
entity.other.inherited-class.tsx#F9C35A
meta.object.member variable.other.readwrite.tsx#E0E0E0
meta.structure.dictionary.json string.quoted.double.json#E0E0E0
meta.structure.dictionary.value.json string.quoted.double.json#5BD1B9
meta.structure.dictionary.json, punctuation.definition.string#5BD1B9
meta.structure.dictionary.json, support.type.property-name.json#F4457D
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#F9C35A
entity.name.section.markdown, entity.name.section.mdx#53A1FA
punctuation.definition.heading.markdown, punctuation.definition.heading.mdx#F4457D
markup.raw.inline.markdown, markup.raw.inline.mdx#9FBDE0
punctuation.definition.bold.markdown, punctuation.definition.bold.mdx, punctuation.definition.italic.markdown, punctuation.definition.italic.mdx, punctuation.definition.entity#F4457D
punctuation.definition.string.begin.markdown, punctuation.definition.string.begin.mdx, punctuation.definition.string.end.markdown, punctuation.definition.string.end.mdx#F4457D
punctuation.definition.metadata.markdown, punctuation.definition.metadata.mdx#F4457D
markup.underline.link.markdown, markup.underline.link.image.markdown, string.other.link.destination.mdx, meta.image.inline.markdown, meta.image.inline.mdx#F4457D
markup.bold.markdown, string.other.strong.asterisk.mdx, markup.italic.markdown, markup.italic.mdx#F4457D
markup.italic.markdown, markup.italic.mdx
markup.bold.markdown, markup.bold.mdx
markup.raw.block.markdown, markup.raw.block.mdx#9FBDE0
keyword.other.rust#B267E6
keyword.other.fn.rust#F4457D
punctuation.section.embedded.begin.php, keyword.other.class.php#F4457D
support.class.php#E0E0E0
meta.use.php#5BD1B9
keyword.other.definition.ini#53A1FA
support.type.primitive.prisma#F9C35A
support.constant.constant.prisma#F4457D
variable.language.relations.prisma#5BD1B9
entity.name.tag.yaml#F4457D
storage.type.java#F9C35Abold
keyword.other.package.java, keyword.other.import.java#F4457Dbold
storage.modifier.package.java#F9C35A
storage.modifier.import.java#E0E0E0
punctuation.separator.java#EFEFEF
meta.tag.xml#43AAF9
keyword.other.declaration-specifier.swift, keyword.other.declaration-specifier.accessibility.swift#F4457Dbold
support.type.swift, meta.function-result.swift, variable.language.swift, keyword.operator.custom.infix.swift#53A1FA
variable.parameter.function.swift#E0E0E0
entity.name.function.swift#53A1FAbold
variable.parameter.function.swift, meta.parameter-clause.swift#E0E0E0
support.function.go#43AAF9bold
keyword.operator.address.go, keyword.operator.pointer.go#53A1FA
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#F9C35A
entity.name.tag.astro#F4457D
support.class.component.astro#53A1FA

Shiki preview

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

Loading...