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#0A0812
  • activityBar.foreground#5EF4C6
  • activityBar.inactiveForeground#837A94
  • activityBarBadge.background#7C5CFF
  • activityBarBadge.foreground#0A0812
  • badge.background#3B3054
  • badge.foreground#F7F1EA
  • button.background#FF7A59CC
  • button.foreground#160806
  • button.hoverBackground#5EF4C6
  • button.secondaryBackground#241C35
  • button.secondaryForeground#F7F1EA
  • button.secondaryHoverBackground#302542
  • diffEditor.insertedTextBackground#5EF4A833
  • diffEditor.removedTextBackground#FF7A5933
  • dropdown.background#1B1628
  • dropdown.border#31273F
  • dropdown.foreground#F7F1EA
  • editor.background#11101A
  • editor.findMatchBackground#FF7A5966
  • editor.findMatchHighlightBackground#7C5CFF44
  • editor.foreground#F7F1EA
  • editor.lineHighlightBackground#1C1728
  • editor.selectionBackground#7C5CFF55
  • editor.selectionHighlightBackground#FF7A5935
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightStrongBackground#00000000
  • editor.wordHighlightTextBackground#00000000
  • editorBracketHighlight.foreground1#5EF4C6
  • editorBracketHighlight.foreground2#FFD166
  • editorBracketHighlight.foreground3#C084FC
  • editorBracketHighlight.foreground4#7C9CFF
  • editorBracketHighlight.foreground5#7EF29D
  • editorBracketHighlight.foreground6#FF7A59
  • editorBracketHighlight.unexpectedBracket.foreground#FF5C7A
  • editorCursor.foreground#5EF4C6
  • editorError.foreground#FF5C7A
  • editorGroup.border#31273F
  • editorGroupHeader.tabsBackground#1B1628
  • editorGroupHeader.tabsBorder#31273F
  • editorHoverWidget.background#1B1628
  • editorHoverWidget.border#FF7A5966
  • editorIndentGuide.activeBackground1#FF7A59AA
  • editorIndentGuide.background1#2A2238
  • editorInfo.foreground#6DDCFF
  • editorLineNumber.activeForeground#5EF4C6
  • editorLineNumber.foreground#5D526E
  • editorRuler.foreground#392F4A
  • editorSuggestWidget.background#1B1628
  • editorSuggestWidget.border#31273F
  • editorSuggestWidget.foreground#F7F1EA
  • editorSuggestWidget.selectedBackground#302542
  • editorWarning.foreground#FFD166
  • editorWhitespace.foreground#312843
  • editorWidget.background#1B1628
  • editorWidget.border#31273F
  • focusBorder#FF7A59
  • foreground#F7F1EA
  • gitDecoration.addedResourceForeground#7EF29D
  • gitDecoration.conflictingResourceForeground#FFD166
  • gitDecoration.deletedResourceForeground#FF5C7A
  • gitDecoration.ignoredResourceForeground#645A72
  • gitDecoration.modifiedResourceForeground#C084FC
  • gitDecoration.stageDeletedResourceForeground#FF5C7ABF
  • gitDecoration.stageModifiedResourceForeground#C084FCBF
  • gitDecoration.submoduleResourceForeground#FFD166
  • gitDecoration.untrackedResourceForeground#5EF4C6
  • input.background#241C35
  • input.border#31273F
  • input.foreground#F7F1EA
  • list.activeSelectionBackground#302545
  • list.activeSelectionForeground#F7F1EA
  • list.focusBackground#352B4A
  • list.focusForeground#F7F1EA
  • list.highlightForeground#5EF4C6
  • list.hoverBackground#241D33
  • list.inactiveSelectionBackground#241C35
  • list.inactiveSelectionForeground#F7F1EA
  • menu.background#1B1628
  • menu.foreground#F7F1EA
  • menu.selectionBackground#302542
  • menu.selectionForeground#F7F1EA
  • panel.background#1B1628
  • panel.border#31273F
  • panelTitle.activeForeground#5EF4C6
  • panelTitle.inactiveForeground#837A94
  • peekView.border#7C5CFF
  • peekViewEditor.background#171425
  • peekViewResult.background#1B1628
  • scrollbarSlider.activeBackground#6A578488
  • scrollbarSlider.background#3C304F80
  • scrollbarSlider.hoverBackground#51426788
  • sideBar.background#151120
  • sideBar.border#31273F
  • sideBar.foreground#F7F1EA
  • sideBarSectionHeader.background#241C35
  • sideBarSectionHeader.foreground#5EF4C6
  • sideBarTitle.foreground#F7F1EA
  • statusBar.background#FF7A59
  • statusBar.debuggingBackground#7C5CFF
  • statusBar.debuggingForeground#160806
  • statusBar.foreground#180B08
  • statusBar.noFolderBackground#1B1628
  • statusBar.noFolderForeground#F7F1EA
  • statusBarItem.hoverBackground#302542
  • statusBarItem.hoverForeground#F7F1EA
  • tab.activeBackground#11101A
  • tab.activeBorderTop#5EF4C6
  • tab.activeForeground#F7F1EA
  • tab.border#31273F
  • tab.hoverBackground#241C35
  • tab.inactiveBackground#1B1628
  • tab.inactiveForeground#837A94
  • terminal.ansiBlack#0A0812
  • terminal.ansiBlue#7C9CFF
  • terminal.ansiBrightBlack#675B76
  • terminal.ansiBrightBlue#9DB4FF
  • terminal.ansiBrightCyan#8CFFE0
  • terminal.ansiBrightGreen#A0FFC0
  • terminal.ansiBrightMagenta#D8B4FE
  • terminal.ansiBrightRed#FF9478
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE08A
  • terminal.ansiCyan#5EF4C6
  • terminal.ansiGreen#7EF29D
  • terminal.ansiMagenta#C084FC
  • terminal.ansiRed#FF7A59
  • terminal.ansiWhite#EDE5DD
  • terminal.ansiYellow#FFD166
  • terminalCursor.foreground#5EF4C6
  • titleBar.activeBackground#1A1426
  • titleBar.activeForeground#F7F1EA
  • titleBar.inactiveBackground#0A0812
  • titleBar.inactiveForeground#837A94

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#81758Fitalic
text, source#F7F1EA—
emphasis—italic
strong—bold
invalid#FF5C7Aitalic
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#7EF29Dbold
keyword.operator.accessor, entity.name.tag.class.jsx, JSXNested#6DDCFFitalic
keyword.other.unit#FF6B5E—
keyword.other.special-method, entity.name.other.preprocessor.macro, variable.other.event#FFD166—
constant.character#5EF4C6—
constant.character.escape#FF9E64—
entity.name.label, entity.name.namespace#D8C8FF—
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#A7F3D0—
variable, entity.name.variable, variable.other.readwrite.js, variable.other.readwrite.jsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.readwrite.python#D7B8FFitalic
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#FF88B8italic
entity.name.type.type-parameter#5EF4C6
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#6DDCFFitalic
entity.name.section, entity.name.type.module, support.type.primitive, variable.other.enummember#FFB86B
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#8EA7FF—
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#66E6E0italic
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#88F078—
entity.name.function.member, support.function, entity.name.function.method, entity.name.function.method.ts, entity.name.function.method.tsx#5EF4C6
keyword.operator#FF6B5E
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#FF9E64
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#6DDCFF
string, meta.embedded.assembly, string.tag, string.value#FFE06E—
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#5EF4C6italic
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#5EF4C6italic
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#C084FCbold
constant.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent#D986FF
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#FFB86B—
keyword.operator.decorator, punctuation.decorator, entity.name.class.decorator, variable.other.readwrite.decorator, punctuation.definition.decorator.python, meta.function.decorator.python#FFD166—
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#F7F1EA—
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#5EF4C6—
meta.embedded, source.groovy.embedded#D3D1EB—
entity.name.tag#FF6B5E—
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#8EA7FF—
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#8DD9FF—
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#FFB86B—
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#88F078—
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#FF6B5E—
storage.type.accessor, entity.name.tag.class, entity.name.tag.id, support.class.component.svelte, entity.name.tag.component.svelte#88F078
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#6DDCFFitalic
SeeSharp Theme by Armant Goldswain - VS Code Theme