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#b0b6bd
  • activityBarBadge.foreground#b0b6bd
  • badge.foreground#b0b6bd
  • button.foreground#b0b6bd
  • dropdown.background#000000
  • dropdown.border#000000
  • dropdown.foreground#b0b6bd
  • editor.background#000000
  • editor.foreground#b0b6bd
  • editor.lineHighlightBackground#2a2a2a66
  • editor.selectionBackground#2a2a2a77
  • editor.wordHighlightBackground#2a2a2a77
  • editor.wordHighlightStrongBackground#2a2a2a88
  • editorBracketMatch.border#43AAF9
  • editorCursor.foreground#b0b6bd
  • editorGroupHeader.tabsBackground#0A0A0A
  • editorGutter.addedBackground#62c073
  • editorGutter.background#000000
  • editorGutter.modifiedBackground#FFFFFF
  • editorIndentGuide.background1#2a2a2a66
  • editorInlayHint.background#34393E
  • editorInlayHint.foreground#b0b6bd
  • editorLineNumber.foreground#454d54
  • editorOverviewRuler.addedForeground#62c073
  • editorOverviewRuler.errorForeground#E61F44
  • editorOverviewRuler.findMatchForeground#43AAF955
  • editorOverviewRuler.infoForeground#B267E6
  • editorOverviewRuler.modifiedForeground#FFFFFF
  • editorOverviewRuler.warningForeground#b0b6bd
  • editorRuler.foreground#34393E
  • editorSuggestWidget.foreground#b0b6bd
  • editorSuggestWidget.selectedBackground#454d54
  • editorWhitespace.foreground#34393E
  • editorWidget.background#34393E
  • editorWidget.border#454d54
  • extensionButton.prominentForeground#b0b6bd
  • foreground#b0b6bd
  • gitDecoration.conflictingResourceForeground#B267E6
  • gitDecoration.deletedResourceForeground#E61F44
  • gitDecoration.ignoredResourceForeground#454d54
  • gitDecoration.modifiedResourceForeground#FFFFFF
  • gitDecoration.untrackedResourceForeground#62c073
  • input.background#000000
  • input.border#454d54
  • input.foreground#b0b6bd
  • input.placeholderForeground#454d54
  • inputOption.activeBorder#5d6872
  • list.activeSelectionBackground#0101015b
  • list.activeSelectionForeground#b0b6bd
  • list.focusBackground#0A0A0A
  • list.hoverBackground#0A0A0A
  • list.inactiveSelectionBackground#000000
  • panel.background#000000
  • panel.border#454d54
  • panelTitle.inactiveForeground#454d54
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#43AAF955
  • peekViewEditorGutter.background#000000
  • peekViewResult.background#34393E
  • peekViewResult.fileForeground#b0b6bd
  • peekViewResult.lineForeground#E6E6E6
  • peekViewResult.matchHighlightBackground#43AAF955
  • peekViewResult.selectionBackground#0A0A0A
  • peekViewResult.selectionForeground#b0b6bd
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#b0b6bd
  • peekViewTitleLabel.foreground#E6E6E6
  • progressBar.background#43AAF9
  • quickInput.background#000000
  • quickInput.foreground#a5a5a5
  • quickInputTitle.background#444444
  • scrollbar.shadow#000000
  • scrollbarSlider.background#454d5482
  • scrollbarSlider.hoverBackground#454d546a
  • sideBar.background#010101
  • sideBar.foreground#b0b6bd
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.foreground#b0b6bd
  • statusBar.background#000000
  • statusBar.foreground#b0b6bd
  • statusBar.noFolderBackground#000000
  • tab.activeModifiedBorder#b0b6bd
  • tab.inactiveBackground#0A0A0A44
  • tab.inactiveForeground#b0b6bd88
  • 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#b0b6bd
  • terminal.ansiBrightYellow#A7D1F5
  • terminal.ansiCyan#B267E6
  • terminal.ansiGreen#62c073
  • terminal.ansiMagenta#f75f8f
  • terminal.ansiRed#E61F44
  • terminal.ansiWhite#b0b6bd
  • terminal.ansiYellow#43AAF9
  • terminal.background#000000
  • terminal.foreground#b0b6bd
  • 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#b0b6bd
string, punctuation.definition.string.template#62c073
constant.numeric#b0b6bd
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#b0b6bd
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#b0b6bd
source.css.scss, source.css#62c073
entity.other.attribute-name#bf7af0
support.function, support.variable.dom#b0b6bd
support.constant#43AAF9
support.type#b0b6bd
support.class#62c073
invalid#E34234
invalid.deprecated#E34234
invalid.illegal#b0b6bd
meta.diff, meta.diff.header#718493
markup.deleted#E61F44
markup.inserted#A6E22E
markup.changed#b0b6bd
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#b0b6bd
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#b0b6bd
meta.object-literal.key#f75f8f
variable.parameter.function.coffee#9FBDE0
markup.deleted.git_gutter#E61F44
markup.inserted.git_gutter
markup.changed.git_gutter#b0b6bd
meta.template.expression#9FBDE0
variable.other.constant.property, keyword.operator.ternary, keyword.operator.expression.typeof#B267E6
entity.name.type, support.type.python#b0b6bd
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#b0b6bd
meta.object.member variable.other.readwrite.tsx#b0b6bd
meta.structure.dictionary.json string.quoted.double.json#b0b6bd
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#b0b6bd
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#b0b6bd
meta.use.php#62c073
keyword.other.definition.ini#43AAF9
support.type.primitive.prisma#b0b6bd
support.constant.constant.prisma#f75f8f
variable.language.relations.prisma#62c073
entity.name.tag.yaml#f75f8f
storage.type.java#b0b6bd
keyword.other.package.java, keyword.other.import.java#f75f8f
storage.modifier.package.java#b0b6bd
storage.modifier.import.java#b0b6bd
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#b0b6bd
entity.name.function.swift#43AAF9
variable.parameter.function.swift, meta.parameter-clause.swift#b0b6bd
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#b0b6bd
entity.name.tag.astro#f75f8f
support.class.component.astro#f75f8f

Shiki preview

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

Loading...