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#15181b
  • activityBar.foreground#E3E1E1
  • activityBarBadge.background#F06292
  • activityBarBadge.foreground#E3E1E1
  • badge.background#F06292
  • badge.foreground#E3E1E1
  • button.background#64B5F6
  • button.foreground#E3E1E1
  • dropdown.background#15181b
  • dropdown.border#15181b
  • dropdown.foreground#E3E1E1
  • editor.background#1d2126
  • editor.foreground#E3E1E1
  • editor.hoverHighlightBackground#F0629222
  • editor.lineHighlightBackground#1d212622
  • editor.selectionBackground#64B5F655
  • editor.wordHighlightBackground#64B5F622
  • editor.wordHighlightStrongBackground#64B5F622
  • editorBracketMatch.background#F0629244
  • editorBracketMatch.border#64B5F6
  • editorCursor.foreground#E3E1E1
  • editorGroupHeader.tabsBackground#21252a
  • editorGutter.addedBackground#66dfc4
  • editorGutter.background#1d2126
  • editorGutter.deletedBackground#EF5350
  • editorGutter.modifiedBackground#F7BC62
  • editorIndentGuide.background#1d212688
  • editorInlayHint.background#3B4145
  • editorInlayHint.foreground#E3E1E1
  • editorLineNumber.foreground#454d54
  • editorLink.activeForeground#F06292
  • editorOverviewRuler.addedForeground#66dfc4
  • editorOverviewRuler.deletedForeground#EF5350
  • editorOverviewRuler.errorForeground#EF5350
  • editorOverviewRuler.findMatchForeground#64B5F655
  • editorOverviewRuler.infoForeground#C972D8
  • editorOverviewRuler.modifiedForeground#F7BC62
  • editorOverviewRuler.warningForeground#F7BC62
  • editorRuler.foreground#3B4145
  • editorSuggestWidget.foreground#E3E1E1
  • editorSuggestWidget.highlightForeground#F06292
  • editorSuggestWidget.selectedBackground#454d54
  • editorWhitespace.foreground#3B4145
  • editorWidget.background#3B4145
  • editorWidget.border#454d54
  • extensionButton.prominentBackground#F06292
  • extensionButton.prominentForeground#E3E1E1
  • extensionButton.prominentHoverBackground#EC407A
  • focusBorder#F06292
  • foreground#E3E1E1
  • gitDecoration.conflictingResourceForeground#C972D8
  • gitDecoration.deletedResourceForeground#EF5350
  • gitDecoration.ignoredResourceForeground#454d54
  • gitDecoration.modifiedResourceForeground#F7BC62
  • gitDecoration.untrackedResourceForeground#66dfc4
  • input.background#15181b
  • input.border#454d54
  • input.foreground#E3E1E1
  • input.placeholderForeground#454d54
  • inputOption.activeBorder#64B5F6
  • list.activeSelectionBackground#F0629255
  • list.activeSelectionForeground#E3E1E1
  • list.focusBackground#3a4147
  • list.hoverBackground#21252a
  • list.inactiveSelectionBackground#1d2126
  • panel.background#1d2126
  • panel.border#454d54
  • panelTitle.activeBorder#F06292
  • panelTitle.inactiveForeground#454d54
  • peekView.border#F06292
  • peekViewEditor.background#15181b
  • peekViewEditor.matchHighlightBackground#64B5F655
  • peekViewEditorGutter.background#15181b
  • peekViewResult.background#3B4145
  • peekViewResult.fileForeground#E3E1E1
  • peekViewResult.lineForeground#E0E0E0
  • peekViewResult.matchHighlightBackground#64B5F655
  • peekViewResult.selectionBackground#21252a
  • peekViewResult.selectionForeground#E3E1E1
  • peekViewTitle.background#15181b
  • peekViewTitleDescription.foreground#E3E1E1
  • peekViewTitleLabel.foreground#E0E0E0
  • progressBar.background#64B5F6
  • scrollbar.shadow#15181b
  • scrollbarSlider.activeBackground#F06292aa
  • scrollbarSlider.background#454d54aa
  • scrollbarSlider.hoverBackground#F0629255
  • sideBar.background#191d21
  • sideBar.foreground#E3E1E1
  • sideBarSectionHeader.background#15181b
  • sideBarSectionHeader.foreground#E3E1E1
  • statusBar.background#15181b
  • statusBar.foreground#E3E1E1
  • statusBar.noFolderBackground#15181b
  • tab.activeModifiedBorder#F7BC62
  • tab.inactiveBackground#3a414744
  • tab.inactiveForeground#E3E1E188
  • tab.inactiveModifiedBorder#64B5F6
  • tab.unfocusedActiveModifiedBorder#F7BC6288
  • tab.unfocusedInactiveModifiedBorder#64B5F688
  • terminal.ansiBlack#3B4145
  • terminal.ansiBlue#64B5F6
  • terminal.ansiBrightBlack#454d54
  • terminal.ansiBrightBlue#90CAF9
  • terminal.ansiBrightCyan#E1BEE7
  • terminal.ansiBrightGreen#B2EBF2
  • terminal.ansiBrightMagenta#EC407A
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightWhite#E3E1E1
  • terminal.ansiBrightYellow#90CAF9
  • terminal.ansiCyan#C972D8
  • terminal.ansiGreen#66dfc4
  • terminal.ansiMagenta#F06292
  • terminal.ansiRed#EF5350
  • terminal.ansiWhite#E3E1E1
  • terminal.ansiYellow#64B5F6
  • terminal.background#1d2126
  • terminal.foreground#E3E1E1
  • titleBar.activeBackground#15181b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9E9E9E
comment.block.documentation, comment.block.documentation variable.other#9E9E9E
comment.block.documentation entity.name.type#64B5F6
comment.block.documentation storage.type#E3E1E1
string, punctuation.definition.string.template#66dfc4
constant.numeric#F7BC62
constant.language#4FC3F7
constant.character, constant.other#64B5F6
variable.language.this#4FC3F7
keyword, keyword.operator.new, storage.modifier.async, keyword.operator.less#F06292bold
keyword.operator#F5F5F5
punctuation#F5F5F5
punctuation.definition.comment#9E9E9E
punctuation.definition.tag#E3E1E1
string.quoted punctuation.definition.string#66dfc4
string.regexp, string.regexp punctuation.definition.string#66dfc4
storage#4FC3F7
storage.type#F06292bold
entity.name.class#64B5F6
entity.name.function, meta.require, support.function.any-method, variable.function, support.function.builtin.python, meta.function-call.generic.python#4FC3F7bold
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#64B5F6
variable.parameter#E3E1E1
source.css.scss, source.css#66dfc4
entity.other.attribute-name#F7BC62
support.function, support.variable.dom#F7BC62
support.constant#4FC3F7
support.type#E3E1E1
support.class#66dfc4
invalid#EF5350
invalid.deprecated#EF5350
invalid.illegal#E3E1E1
meta.diff, meta.diff.header#90A4AE
markup.deleted#EF5350
markup.inserted#AED581
markup.changed#F7BC62
constant.numeric.line-number.find-in-files - match
entity.name.filename.find-in-files#FFD54F
keyword.other#B0BEC5
meta.property-value, support.constant.property-value, constant.other.color#4FC3F7
meta.property-value punctuation.separator.key-value#E3E1E1
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#F06292
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#F06292
variable.other#E3E1E1
meta.object-literal.key#F06292
variable.parameter.function.coffee#4FC3F7
markup.deleted.git_gutter#EF5350
markup.inserted.git_gutter
markup.changed.git_gutter#F7BC62
meta.template.expression#4FC3F7
variable.other.constant.property, keyword.operator.ternary, keyword.operator.expression.typeof#C972D8
entity.name.type, support.type.python#F7BC62
token.info-token#4FC3F7
token.warn-token#FFA726
token.error-token#EF5350
token.debug-token#BA68C8
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#F06292
support.class.component.tsx, support.class.component.jsx#64B5F6
support.type.primitive.tsx, support.type.primitive.ts#4FC3F7
storage.modifier.tsx#F06292
entity.other.inherited-class.tsx#F7BC62
meta.object.member variable.other.readwrite.tsx#E3E1E1
meta.structure.dictionary.json string.quoted.double.json#E3E1E1
meta.structure.dictionary.value.json string.quoted.double.json#66dfc4
meta.structure.dictionary.json, punctuation.definition.string#66dfc4
meta.structure.dictionary.json, support.type.property-name.json#F06292
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#F7BC62
entity.name.section.markdown, entity.name.section.mdx#64B5F6
punctuation.definition.heading.markdown, punctuation.definition.heading.mdx#F06292
markup.raw.inline.markdown, markup.raw.inline.mdx#4FC3F7
punctuation.definition.bold.markdown, punctuation.definition.bold.mdx, punctuation.definition.italic.markdown, punctuation.definition.italic.mdx, punctuation.definition.entity#F06292
punctuation.definition.string.begin.markdown, punctuation.definition.string.begin.mdx, punctuation.definition.string.end.markdown, punctuation.definition.string.end.mdx#F06292
punctuation.definition.metadata.markdown, punctuation.definition.metadata.mdx#F06292
markup.underline.link.markdown, markup.underline.link.image.markdown, string.other.link.destination.mdx, meta.image.inline.markdown, meta.image.inline.mdx#F06292
markup.bold.markdown, string.other.strong.asterisk.mdx, markup.italic.markdown, markup.italic.mdx#F06292
markup.italic.markdown, markup.italic.mdx
markup.bold.markdown, markup.bold.mdx
markup.raw.block.markdown, markup.raw.block.mdx#4FC3F7
keyword.other.rust#C972D8
keyword.other.fn.rust#F06292
punctuation.section.embedded.begin.php, keyword.other.class.php#F06292
support.class.php#E3E1E1
meta.use.php#66dfc4
keyword.other.definition.ini#64B5F6
support.type.primitive.prisma#F7BC62
support.constant.constant.prisma#F06292
variable.language.relations.prisma#66dfc4
entity.name.tag.yaml#F06292
storage.type.java#F7BC62bold
keyword.other.package.java, keyword.other.import.java#F06292bold
storage.modifier.package.java#F7BC62
storage.modifier.import.java#E3E1E1
punctuation.separator.java#F5F5F5
meta.tag.xml#4FC3F7
keyword.other.declaration-specifier.swift, keyword.other.declaration-specifier.accessibility.swift#F06292bold
support.type.swift, meta.function-result.swift, variable.language.swift, keyword.operator.custom.infix.swift#64B5F6
variable.parameter.function.swift#E3E1E1
entity.name.function.swift#64B5F6bold
variable.parameter.function.swift, meta.parameter-clause.swift#E3E1E1
support.function.go#4FC3F7bold
keyword.operator.address.go, keyword.operator.pointer.go#64B5F6
keyword.channel.go#C972D8
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#F7BC62
entity.name.tag.astro#F06292
support.class.component.astro#64B5F6