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#05080D
  • activityBar.foreground#00F5D4
  • activityBar.inactiveForeground#6E7A8A
  • activityBarBadge.background#FF3D81
  • activityBarBadge.foreground#090D12
  • badge.background#283246
  • badge.foreground#F4F7FB
  • button.background#00C7B7CC
  • button.foreground#041111
  • button.hoverBackground#00F5D4
  • button.secondaryBackground#151E2A
  • button.secondaryForeground#F4F7FB
  • button.secondaryHoverBackground#1D2938
  • diffEditor.insertedTextBackground#00F5A033
  • diffEditor.removedTextBackground#FF3D8133
  • dropdown.background#101720
  • dropdown.border#1D2A37
  • dropdown.foreground#F4F7FB
  • editor.background#090D12
  • editor.findMatchBackground#FF3D8166
  • editor.findMatchHighlightBackground#F6E05E33
  • editor.foreground#F4F7FB
  • editor.lineHighlightBackground#111A25
  • editor.selectionBackground#1D5B6D88
  • editor.selectionHighlightBackground#FF3D8133
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightStrongBackground#00000000
  • editor.wordHighlightTextBackground#00000000
  • editorBracketHighlight.foreground1#00F5D4
  • editorBracketHighlight.foreground2#F6E05E
  • editorBracketHighlight.foreground3#FF4FD8
  • editorBracketHighlight.foreground4#3B82FF
  • editorBracketHighlight.foreground5#39FF88
  • editorBracketHighlight.foreground6#FF7A59
  • editorBracketHighlight.unexpectedBracket.foreground#FF4D6D
  • editorCursor.foreground#F6E05E
  • editorError.foreground#FF4D6D
  • editorGroup.border#1D2A37
  • editorGroupHeader.tabsBackground#101720
  • editorGroupHeader.tabsBorder#1D2A37
  • editorHoverWidget.background#101720
  • editorHoverWidget.border#00F5D466
  • editorIndentGuide.activeBackground1#00F5D4AA
  • editorIndentGuide.background1#1C2936
  • editorInfo.foreground#00D8FF
  • editorLineNumber.activeForeground#00F5D4
  • editorLineNumber.foreground#465668
  • editorRuler.foreground#233142
  • editorSuggestWidget.background#101720
  • editorSuggestWidget.border#1D2A37
  • editorSuggestWidget.foreground#F4F7FB
  • editorSuggestWidget.selectedBackground#1D2938
  • editorWarning.foreground#F6E05E
  • editorWhitespace.foreground#253445
  • editorWidget.background#101720
  • editorWidget.border#1D2A37
  • focusBorder#00F5D4
  • foreground#F4F7FB
  • gitDecoration.addedResourceForeground#39FF88
  • gitDecoration.conflictingResourceForeground#FF7A59
  • gitDecoration.deletedResourceForeground#FF3D81
  • gitDecoration.ignoredResourceForeground#4E5B6B
  • gitDecoration.modifiedResourceForeground#A78BFA
  • gitDecoration.stageDeletedResourceForeground#FF3D81BF
  • gitDecoration.stageModifiedResourceForeground#A78BFABF
  • gitDecoration.submoduleResourceForeground#F6E05E
  • gitDecoration.untrackedResourceForeground#00F5D4
  • input.background#151E2A
  • input.border#1D2A37
  • input.foreground#F4F7FB
  • list.activeSelectionBackground#1B3446
  • list.activeSelectionForeground#F4F7FB
  • list.focusBackground#1C3B4D
  • list.focusForeground#F4F7FB
  • list.highlightForeground#00F5D4
  • list.hoverBackground#132130
  • list.inactiveSelectionBackground#142435
  • list.inactiveSelectionForeground#F4F7FB
  • menu.background#101720
  • menu.foreground#F4F7FB
  • menu.selectionBackground#1D2938
  • menu.selectionForeground#F4F7FB
  • panel.background#101720
  • panel.border#1D2A37
  • panelTitle.activeForeground#00F5D4
  • panelTitle.inactiveForeground#6E7A8A
  • peekView.border#FF3D81
  • peekViewEditor.background#0D1219
  • peekViewResult.background#101720
  • scrollbarSlider.activeBackground#5E789488
  • scrollbarSlider.background#2A384C80
  • scrollbarSlider.hoverBackground#40536B88
  • sideBar.background#0B1017
  • sideBar.border#1D2A37
  • sideBar.foreground#F4F7FB
  • sideBarSectionHeader.background#151E2A
  • sideBarSectionHeader.foreground#00F5D4
  • sideBarTitle.foreground#F4F7FB
  • statusBar.background#00D8C8
  • statusBar.debuggingBackground#FF3D81
  • statusBar.debuggingForeground#041111
  • statusBar.foreground#041111
  • statusBar.noFolderBackground#101720
  • statusBar.noFolderForeground#F4F7FB
  • statusBarItem.hoverBackground#1D2938
  • statusBarItem.hoverForeground#F4F7FB
  • tab.activeBackground#090D12
  • tab.activeBorderTop#00F5D4
  • tab.activeForeground#F4F7FB
  • tab.border#1D2A37
  • tab.hoverBackground#151E2A
  • tab.inactiveBackground#101720
  • tab.inactiveForeground#6E7A8A
  • terminal.ansiBlack#05080D
  • terminal.ansiBlue#3B82FF
  • terminal.ansiBrightBlack#526174
  • terminal.ansiBrightBlue#69A0FF
  • terminal.ansiBrightCyan#66FFE9
  • terminal.ansiBrightGreen#72FFA8
  • terminal.ansiBrightMagenta#FF7CE5
  • terminal.ansiBrightRed#FF6D9B
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFF27A
  • terminal.ansiCyan#00F5D4
  • terminal.ansiGreen#39FF88
  • terminal.ansiMagenta#FF4FD8
  • terminal.ansiRed#FF3D81
  • terminal.ansiWhite#DDE7F3
  • terminal.ansiYellow#F6E05E
  • terminalCursor.foreground#F6E05E
  • titleBar.activeBackground#0E141D
  • titleBar.activeForeground#F4F7FB
  • titleBar.inactiveBackground#05080D
  • titleBar.inactiveForeground#6E7A8A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment markup.link, comment, punctuation.definition.comment, unused.comment, wildcard.comment, comment.line.number-sign.python, punctuation.definition.comment.python#738091italic
text, source#F4F7FB—
emphasis—italic
strong—bold
invalid#FF4D6Ditalic
invalid.deprecated—underline italic
invalid.illegal#E6457Bunderline italic
variable.language.self, entity.type.enum, variable.other.object.property, entity.name.type.enum#FF9243—
entity.name.type#8BFF54bold
keyword.operator.accessor, entity.name.tag.class.jsx, JSXNested#00D8FFitalic
keyword.other.unit#FF315F—
keyword.other.special-method, entity.name.other.preprocessor.macro, variable.other.event#FFF45E—
constant.character#56FFF0—
constant.character.escape#FF4FD8—
entity.name.label, entity.name.namespace#B8C7FF—
keyword.control.export.js, keyword.control.import.js, keyword.control.export.jsx, keyword.control.import.jsx, keyword.control.export.ts, keyword.control.import.ts, keyword.control.export.tsx, keyword.control.import.tsx, keyword.control.from.python, keyword.control.import.python#62FFD6—
variable, entity.name.variable, variable.other.readwrite.js, variable.other.readwrite.jsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.readwrite.python#BDA8FFitalic
variable.parameter, variable.parameter.function.js, variable.parameter.function.jsx, variable.parameter.function.ts, variable.parameter.function.tsx, variable.parameter.function.python, variable.parameter.function.language.python, meta.function.parameters.python variable.parameter#FF6FB5italic
entity.name.type.type-parameter#56FFF0
variable.other.object, string.quoted.template variable.other.readwrite, variable.language.arguments#FFFFFFitalic
support.type, support.type.builtin.python, support.type.python, support.type.primitive.ts, support.type.primitive.tsx#00F5D4italic
entity.name.section, entity.name.type.module, support.type.primitive, variable.other.enummember#FF6FD8
keyword.control.default, keyword.control.export, keyword.control.from, keyword.control.import, keyword.control.module, support.type.object.module#FF9EE7—
meta.protocol-list.objc, meta.return-type.objc, meta.return-type, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name#38B3FF—
entity.name.type.class, support.class, variable.other.class, entity.name.class#53A7FF—
storage.class.std.rust, storage.type.annotation.groovy, storage.type.annotation.java, storage.type.attribute.swift, storage.type.boolean.go, storage.type.byte.go, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.cs, storage.type.error.go, storage.type.generic.cs, storage.type.generic.groovy, storage.type.generic.java, storage.type.groovy, storage.type.groovy, storage.type.haskell, storage.type.java, storage.type.modifier.cs, storage.type.numeric.go, storage.type.objc, storage.type.object.array.groovy, storage.type.object.array.java, storage.type.ocaml, storage.type.parameters.groovy, storage.type.php, storage.type.primitive.array.groovy, storage.type.primitive.array.java, storage.type.primitive.groovy, storage.type.primitive.java, storage.type.rune.go, storage.type.string.go, storage.type.struct, storage.type.token.java, storage.type.uintptr.go, storage.type.variable.cs, variable.css, variable.scss, entity.other.inherited-class, entity.name.scope-resolution, entity.other.attribute, keyword.primitive-datatypes.swift, keyword.type.cs, storage.type.function.python, storage.type.class.python, storage.type.primitive.ts, storage.type.primitive.tsx, storage.type.interface.ts, storage.type.type.ts#00E7FFitalic
entity.name.function.accessor, entity.name.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, meta.method-call.java meta.method, meta.method.groovy, keyword.operator.function.infix, keyword.control.require, meta.function-call.python, support.function.builtin.python, support.function.magic.python, entity.name.function.decorator.python#39FF88—
entity.name.function.member, support.function, entity.name.function.method, entity.name.function.method.ts, entity.name.function.method.tsx#00F5A8
keyword.operator#FF315F
support.type.vendored.property-name, variable.other.less, source.coffee.embedded, variable.other.constant.property, keyword.constant.numeric, variable.other.constant.property.js, variable.other.constant.property.jsx, variable.other.constant.property.ts, variable.other.constant.property.tsx#FF4FD8
support.type.property-name, variable.other.property, support.type.property-name.svelte, support.type.property-name.postcss, variable.other.property.js, variable.other.property.jsx, variable.other.property.ts, variable.other.property.tsx#00D8FF
string, meta.embedded.assembly, string.tag, string.value#FFF06A—
meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def, storage.type.accessor, storage.type.class.jsdoc, storage.type.property, storage#56FFF0italic
storage.modifier, storage.type.modifier, entity.name.operator, keyword.control.module.reference, keyword.operator.alignas, keyword.operator.alignof, keyword.operator.cast, keyword.operator.delete, keyword.operator.expression, keyword.operator.in, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.noexcept, keyword.operator.of, keyword.operator.sizeof, keyword.operator.typeid, keyword.operator.typeof, keyword.operator.void, keyword.operator.readonly, keyword.operator.wordlike, keyword.other.operator, source.cpp keyword.operator.new, storage.type.extends, storage.control, keyword.storage, keyword.constant.storage, punctuation.flowtype, meta.object.flowtype, keyword.operator.new, keyword.control.new, storage, keyword.operator.member, keyword.control.directive, keyword.control, punctuation.definition.keyword, keyword.other.important, keyword.other.new, keyword.other, entity.name.type.keyword, entity.name.type.namespace, keyword.other.using, keyword.other.namespace, keyword.control.conditional.python, keyword.control.flow.python, keyword.control.repeat.python, keyword.control.exception.python, keyword.control.svelte, keyword.control.if.svelte, keyword.control.each.svelte, keyword.control.await.svelte, keyword.control.key.svelte, keyword.operator.expression.in.python, keyword.operator.expression.is.python, keyword.operator.expression.not.python#56FFF0italic
storage.type, storage.type.js, storage.type.function.arrow.ts, storage.type.function.ts, storage.type.interface.ts, storage.type.type.ts#4FE0E0italic bold
variable.other.constant, support.function.magic, variable.other.predefined, constant, constant.variable, constant.language, support.constant, constant.language.boolean.python, constant.language.none.python, constant.language.ellipsis.python#A78BFAbold
constant.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent#FF37F2
keyword.expressions-and-types.swift, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special, variable.language.special.self.python, variable.language.special.cls.python#4FE0E0—
punctuation.section.embedded, meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#FF6FD8—
keyword.operator.decorator, punctuation.decorator, entity.name.class.decorator, variable.other.readwrite.decorator, punctuation.definition.decorator.python, meta.function.decorator.python#FFF45E—
constant.other.color, constant.other.symbol, punctuation.definition.block.tag, punctuation.accessor, punctuation.definition.typeparameters, punctuation.separator, support.class.component#1eff78bold italic
meta.attribute.href.html, punctuation.definition.tag.jsx, punctuation.definition.tag.tsx#fff9fa—
support.type.object.console#2FDE73—
support.type.object.dom#4FE0E0—
variable.interpolation#E6457B—
meta.definition.variable.name#FF9EE7—
meta.object-literal.key, variable.language.this#FFBEFE—
JSXAttrs, JSXNested, support.type.property-name.css, support.type.property-name.scss#15e2e6—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom#2FDE73—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#4FE0E0—
comment.block.documentation entity.name.type punctuation.definition.bracket, comment.block.documentation entity.name.type#2FDE73italic
comment.block.documentation variable#D3D1EBitalic
punctuation.separator.parameter, punctuation.terminator.statement, meta.array-binding-pattern-variable, keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.curly, meta.brace.round, meta.brace.square, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor, punctuation.definition.tag.svelte, punctuation.section.embedded.begin.svelte, punctuation.section.embedded.end.svelte#F4F7FB—
punctuation.definition.entity, string.unquoted.heredoc punctuation.definition.string, punctuation.separator.annotation, punctuation.colon.graphql, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, meta.object-binding-pattern-variable punctuation.destructuring, entity.other.attribute-name.placeholder punctuation, constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.pseudo-class punctuation, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice#56FFF0—
meta.embedded, source.groovy.embedded#D3D1EB—
entity.name.tag#FF315F—
entity.other.attribute-name#ff3b58—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.class, entity.other.attribute-name.class.mixin, entity.other.attribute-name.parent-selector, entity.other.attribute-name.attribute, meta.group.double.toml, meta.group.toml, support.other.chomping-indicator.yaml, entity.other.attribute-name.id#53A7FF—
support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#50B6FF—
support.constant.property-value#D3D1EB—
punctuation.separator.key-value#4FE0E0—
punctuation.definition.constant#FF9EE7—
meta.property-list punctuation.separator.key-value#D3D1EB—
meta.selector#4FE0E0—
header#BA95B3—
constant.other.object.key string.unquoted, punctuation.quasi.element, keyword.other.definition, variable.language.prototype, variable.other.jsdoc#F84364—
punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml#AB80FF—
meta.preprocessor, entity.name.function.preprocessor#E6E667—
meta.preprocessor.string#50B6FF—
meta.preprocessor.numeric#ff76dd—
meta.structure.dictionary.key.python#D74BBE—
meta.diff.header#4FE0E0—
meta.decorator variable.other.readwrite, meta.decorator variable.other.property, meta.decorator variable.other.object#d3d3d3—
entity.name.function.target.makefile, entity.name.section.toml, variable.other.key.toml#D74BBE—
constant.other.date, constant.other.timestamp#4FE0E0—
meta.indexer.mapped type.declaration entity.name.type, meta.type.parameters entity.name.type#D3D1EB—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#D74BBE—
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape, string.quoted.docstring.single.python, string.quoted.docstring.single.python punctuation.definition.string.begin, string.quoted.docstring.single.python punctuation.definition.string.end#67D8FF—
source.shell variable.other#2FDE73—
meta.scope.prerequisites.makefile#50B6FF—
support.function.git-rebase#FF9EE7—
constant.sha.git-rebase#FF9EE7—
markup.underline—underline
punctuation.definition.bold.markdown, markup.bold#f9f9f9e5
markup.italic#2FDE73italic
beginning.punctuation.definition.list.markdown, entity.name.section.markdown, markup.heading.setext, markup.heading, punctuation.definition.heading.markdown, punctuation.definition.list.begin.markdown, text.html.markdown invalid.deprecated, text.html.markdown punctuation.definition.tag#FF6FD8—
markup.heading punctuation.definition.heading#E6E667—
markup.error, markup.deleted#fa5170—
markup.fenced_code.block.markdown, markup.inline.raw.markdown, markup.inline.raw.string.markdown, markup.inline.raw, markup.inserted, markup.raw.block.markdown, markup.raw, punctuation.definition.markdown, punctuation.definition.raw.markdown#2FDE73—
constant.other.reference.link.markdown, string.other.link.description.markdown, string.other.link.title.markdown#FF9EE7—
markup.changed, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown, punctuation.definition.constant.markdown, punctuation.definition.metadata.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, string.other.link.description.title.markdown, text.html.markdown string.quoted#AB80FF—
beginning.punctuation.definition.quote.markdown, markup.link, markup.quote.markdown, markup.quote, markup.underline.link.image.markdown, markup.underline.link.markdown, meta.attribute.href.html string.quoted.double.html, meta.attribute.href.html string.quoted.single.html, punctuation.definition.link.restructuredtext#34fde6—
string.regexp, constant.regexp, keyword.operator.or.regexp#39FF88—
constant.character.escape.backslash.regexp, meta.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, support.other.parenthesis.regexp#4FE0E0—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp, punctuation.definition.group.regexp, punctuation.definition.group.capture.regexp, keyword.control.anchor.regexp#AB80FF—
keyword.operator.quantifier.regexp#E6E667—
keyword.operator.negation.regexp, constant.character.regexp, punctuation.definition.range.regexp#FF9EE7—
keyword.control.new, keyword.operator.new—bold italic
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx, entity.name.tag.svelte, entity.name.tag.script.svelte, entity.name.tag.style.svelte#FF315F—
storage.type.accessor, entity.name.tag.class, entity.name.tag.id, support.class.component.svelte, entity.name.tag.component.svelte#39FF88
entity.other.attribute-name, entity.other.attribute-name.svelte, entity.other.attribute-name.event.svelte, entity.other.attribute-name.bind.svelte, entity.other.attribute-name.transition.svelte, entity.other.attribute-name.animation.svelte, entity.other.attribute-name.action.svelte, entity.other.attribute-name.directive.svelte#00D8FFitalic