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#000000
  • activityBar.foreground#DCE3EA
  • activityBarBadge.background#f75f8f
  • activityBarBadge.foreground#DCE3EA
  • badge.background#f75f8f
  • badge.foreground#DCE3EA
  • button.background#43AAF9
  • button.foreground#DCE3EA
  • dropdown.background#000000
  • dropdown.border#000000
  • dropdown.foreground#DCE3EA
  • editor.background#000000
  • editor.foreground#DCE3EA
  • editor.hoverHighlightBackground#f75f8f
  • editor.lineHighlightBackground#00000022
  • editor.selectionBackground#43AAF955
  • editor.wordHighlightBackground#43AAF922
  • editor.wordHighlightStrongBackground#43AAF922
  • editorBracketMatch.background#f75f8f
  • editorBracketMatch.border#43AAF9
  • editorCursor.foreground#DCE3EA
  • editorGroupHeader.tabsBackground#0A0A0A
  • editorGutter.addedBackground#62c073
  • editorGutter.background#000000
  • editorGutter.deletedBackground#E61F44
  • editorGutter.modifiedBackground#FFFFFF
  • editorIndentGuide.background#00000088
  • editorInlayHint.background#34393E
  • editorInlayHint.foreground#DCE3EA
  • editorLineNumber.foreground#454d54
  • editorLink.activeForeground#f75f8f
  • editorOverviewRuler.addedForeground#62c073
  • editorOverviewRuler.deletedForeground#E61F44
  • editorOverviewRuler.errorForeground#E61F44
  • editorOverviewRuler.findMatchForeground#43AAF955
  • editorOverviewRuler.infoForeground#B267E6
  • editorOverviewRuler.modifiedForeground#FFFFFF
  • editorOverviewRuler.warningForeground#FFFFFF
  • editorRuler.foreground#34393E
  • editorSuggestWidget.foreground#DCE3EA
  • editorSuggestWidget.highlightForeground#f75f8f
  • editorSuggestWidget.selectedBackground#454d54
  • editorWhitespace.foreground#34393E
  • editorWidget.background#34393E
  • editorWidget.border#454d54
  • extensionButton.prominentBackground#f75f8f
  • extensionButton.prominentForeground#DCE3EA
  • extensionButton.prominentHoverBackground#f75f8f
  • focusBorder#f75f8f
  • foreground#DCE3EA
  • gitDecoration.conflictingResourceForeground#B267E6
  • gitDecoration.deletedResourceForeground#E61F44
  • gitDecoration.ignoredResourceForeground#454d54
  • gitDecoration.modifiedResourceForeground#FFFFFF
  • gitDecoration.untrackedResourceForeground#62c073
  • input.background#000000
  • input.border#454d54
  • input.foreground#DCE3EA
  • input.placeholderForeground#454d54
  • inputOption.activeBorder#43AAF9
  • list.activeSelectionBackground#f75f8f55
  • list.activeSelectionForeground#DCE3EA
  • list.focusBackground#0A0A0A
  • list.hoverBackground#0A0A0A
  • list.inactiveSelectionBackground#000000
  • panel.background#000000
  • panel.border#454d54
  • panelTitle.activeBorder#f75f8f
  • panelTitle.inactiveForeground#454d54
  • peekView.border#f75f8f
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#43AAF955
  • peekViewEditorGutter.background#000000
  • peekViewResult.background#34393E
  • peekViewResult.fileForeground#DCE3EA
  • peekViewResult.lineForeground#E6E6E6
  • peekViewResult.matchHighlightBackground#43AAF955
  • peekViewResult.selectionBackground#0A0A0A
  • peekViewResult.selectionForeground#DCE3EA
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#DCE3EA
  • peekViewTitleLabel.foreground#E6E6E6
  • progressBar.background#43AAF9
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#f75f8f
  • scrollbarSlider.background#454d54aa
  • scrollbarSlider.hoverBackground#f75f8f
  • sideBar.background#010101
  • sideBar.foreground#DCE3EA
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.foreground#DCE3EA
  • statusBar.background#000000
  • statusBar.foreground#DCE3EA
  • statusBar.noFolderBackground#000000
  • tab.activeModifiedBorder#FFFFFF
  • tab.inactiveBackground#0A0A0A44
  • tab.inactiveForeground#DCE3EA88
  • tab.inactiveModifiedBorder#43AAF9
  • tab.unfocusedActiveModifiedBorder#FFFFFF88
  • tab.unfocusedInactiveModifiedBorder#43AAF988
  • terminal.ansiBlack#34393E
  • terminal.ansiBlue#43AAF9
  • terminal.ansiBrightBlack#454d54
  • terminal.ansiBrightBlue#A7D1F5
  • terminal.ansiBrightCyan#D7C9F0
  • terminal.ansiBrightGreen#B7F0E5
  • terminal.ansiBrightMagenta#f75f8f
  • terminal.ansiBrightRed#E61F44
  • terminal.ansiBrightWhite#DCE3EA
  • terminal.ansiBrightYellow#A7D1F5
  • terminal.ansiCyan#B267E6
  • terminal.ansiGreen#62c073
  • terminal.ansiMagenta#f75f8f
  • terminal.ansiRed#E61F44
  • terminal.ansiWhite#DCE3EA
  • terminal.ansiYellow#43AAF9
  • terminal.background#000000
  • terminal.foreground#DCE3EA
  • titleBar.activeBackground#000000

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