Skip to main content
CodingTheme

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.activeBorder#ffbe41
  • activityBar.background#110f17
  • activityBar.border#000000
  • activityBar.foreground#ffbe41
  • activityBar.inactiveForeground#525156
  • activityBarBadge.background#9b78ff
  • activityBarBadge.foreground#110f17
  • badge.background#9b78ff
  • badge.foreground#110f17
  • button.background#9b78ff
  • button.foreground#110f17
  • button.hoverBackground#ffbe41
  • diffEditor.insertedTextBackground#00d89023
  • diffEditor.removedTextBackground#ff474720
  • dropdown.background#110f17
  • dropdown.border#3b334b
  • dropdown.foreground#cdccce
  • editor.background#110f17
  • editor.findMatchBackground#3d375e7f
  • editor.findMatchHighlightBackground#3d375e7f
  • editor.findRangeHighlightBackground#3d375e7f
  • editor.foreground#edecee
  • editor.inactiveSelectionBackground#3d375e7f
  • editor.lineHighlightBackground#a394f033
  • editor.lineHighlightBorder#a394f000
  • editor.selectionBackground#3d375e7f
  • editor.selectionHighlightBackground#3d375e7f
  • editor.stackFrameHighlightBackground#353424
  • editor.wordHighlightBackground#3d375e7f
  • editor.wordHighlightStrongBackground#3d375e7f
  • editorBracketMatch.border#9b78ff
  • editorCursor.foreground#9b78ff
  • editorError.border#ffffff00
  • editorError.foreground#ff5164
  • editorGroup.border#000000
  • editorGroup.dropBackground#3d375e7f
  • editorGroupHeader.tabsBackground#110f17
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#87ff5f
  • editorGutter.deletedBackground#ff5164
  • editorGutter.modifiedBackground#ffbe41
  • editorHoverWidget.background#110f17
  • editorHoverWidget.border#2d2d2d
  • editorIndentGuide.activeBackground#6d6d6d
  • editorIndentGuide.background#2d2d2d
  • editorInlayHint.background#2e2b38
  • editorInlayHint.foreground#cdccce
  • editorLineNumber.foreground#a394f033
  • editorLink.activeForeground#9b78ff
  • editorSuggestWidget.background#110f17
  • editorSuggestWidget.border#2d2d2d
  • editorSuggestWidget.foreground#cdccce
  • editorSuggestWidget.highlightForeground#87ff5f
  • editorSuggestWidget.selectedBackground#4d4d4d
  • editorWarning.border#ffffff00
  • editorWarning.foreground#ffbe41
  • editorWhitespace.foreground#2d2d2d
  • editorWidget.background#110f17
  • editorWidget.border#2d2d2d
  • errorForeground#ff5164
  • focusBorder#a394f033
  • foreground#edecee
  • gitDecoration.conflictingResourceForeground#9b78ff
  • gitDecoration.deletedResourceForeground#ff5164
  • gitDecoration.ignoredResourceForeground#4d4d4d
  • gitDecoration.modifiedResourceForeground#ffca85
  • gitDecoration.untrackedResourceForeground#87ff5f
  • input.background#110f17
  • input.border#3b334b
  • input.foreground#cdccce
  • input.placeholderForeground#af8aff7f
  • inputOption.activeBorder#9b78ff
  • list.activeSelectionBackground#2e2b38
  • list.activeSelectionForeground#9b78ff
  • list.focusBackground#3b334b
  • list.focusForeground#9b78ff
  • list.highlightForeground#ffbe41
  • list.hoverBackground#3b334b
  • list.hoverForeground#edecee
  • list.inactiveSelectionBackground#2e2b38
  • list.inactiveSelectionForeground#9b78ff
  • panel.border#000000
  • panelTitle.activeBorder#87ff5f
  • panelTitle.activeForeground#cdccce
  • progressBar.background#87ff5f
  • scrollbar.shadow#110f17
  • scrollbarSlider.activeBackground#3d375e7f
  • scrollbarSlider.background#a394f033
  • scrollbarSlider.hoverBackground#a394f033
  • selection.background#3d375e7f
  • sideBar.background#110f17
  • sideBar.border#000000
  • sideBar.foreground#cdccce
  • sideBarSectionHeader.background#110f17
  • sideBarSectionHeader.foreground#adacae
  • sideBarTitle.foreground#adacae
  • statusBar.background#110f17
  • statusBar.border#000000
  • statusBar.debuggingBackground#a19c77
  • statusBar.debuggingForeground#110f17
  • statusBar.foreground#adacae
  • statusBar.noFolderBackground#110f17
  • statusBarItem.activeBackground#9b78ff
  • statusBarItem.remoteBackground#9b78ff
  • statusBarItem.remoteForeground#110f17
  • tab.activeBackground#00000000
  • tab.activeBorderTop#41d7ff
  • tab.activeForeground#41d7ff
  • tab.border#000000
  • tab.inactiveBackground#110f17
  • tab.inactiveForeground#6d6d6d
  • terminal.ansiBlack#110f17
  • terminal.ansiBlue#9b78ff
  • terminal.ansiBrightBlack#2d2d2d
  • terminal.ansiBrightBlue#9b78ff
  • terminal.ansiBrightCyan#87ff5f
  • terminal.ansiBrightGreen#9b78ff
  • terminal.ansiBrightMagenta#87ff5f
  • terminal.ansiBrightRed#ffca85
  • terminal.ansiBrightWhite#edecee
  • terminal.ansiBrightYellow#ffca85
  • terminal.ansiCyan#9b78ff
  • terminal.ansiGreen#87ff5f
  • terminal.ansiMagenta#87ff5f
  • terminal.ansiRed#ff5164
  • terminal.ansiWhite#cdccce
  • terminal.ansiYellow#ffca85
  • terminal.background#110f17
  • terminal.border#41d7ff
  • terminal.foreground#cdccce
  • terminal.selectionBackground#3d375e7f
  • terminal.tab.activeBorder#41d7ff
  • terminalCursor.background#2d2d2d
  • terminalCursor.foreground#adacae
  • titleBar.activeBackground#110f17
  • titleBar.border#000000
  • titleBar.inactiveBackground#2d2b38
  • tree.indentGuidesStroke#4d4d4d
  • widget.shadow#0f0f0f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded#f57dff
punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison#ff5164
variable.other.generic-type.haskell#9b78ff
storage.type.haskell#ffbe41
support.variable.magic.python#ff5164
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#f57dff
variable.parameter.function.language.special.self.python#ffbe41
variable.parameter.function.language.special.cls.python#ffbe41
storage.modifier.lifetime.rust#f57dff
support.function.std.rust#41d7ff
entity.name.lifetime.rust#ffbe41
variable.language.rust#ff5164
support.constant.edge#9b78ff
constant.other.character-class.regexp#ff5164
keyword.operator.word#9b78ff
keyword.operator.quantifier.regexp#ffbe41
variable.parameter.function#f57dff
comment markup.link#5c6370
markup.changed.diff#ffbe41
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#41d7ff
markup.inserted.diff#87ff5f
markup.deleted.diff#ff5164
meta.function.c,meta.function.cpp#ff5164
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c,meta.bracket.square.access,punctuation.definition.end.bracket.square, punctuation.section.parens.begin.bracket.round.cpp,punctuation.section.parens.end.bracket.round.cpp#f57dff
punctuation.separator.key-value#f57dff
keyword.operator.expression.import#41d7ff
support.constant.math#ffbe41
support.constant.property.math#ffbe41
variable.other.constant#ffbe41
storage.type.annotation.java, storage.type.object.array.java#ffbe41
source.java#ff5164
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java#f57dff
meta.method.java#41d7ff
storage.modifier.import.java,storage.type.java,storage.type.generic.java#ffbe41
keyword.operator.instanceof.java#9b78ff
meta.definition.variable.name.java#ff5164
keyword.operator.logical#9b78ff
keyword.operator.bitwise#9b78ff
keyword.operator.channel#9b78ff
support.constant.property-value.scss,support.constant.property-value.css#ffbe41
keyword.operator.css,keyword.operator.scss,keyword.operator.less#9b78ff
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#ffbe41
punctuation.separator.list.comma.css#f57dff
support.constant.color.w3c-standard-color-name.css#ffbe41
support.type.vendored.property-name.css#41d7ff
support.module.node,support.type.object.module,support.module.node#ffbe41
entity.name.type.module#ffbe41
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#ff5164
support.constant.json#ffbe41
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#9b78ff
support.type.object.console#ff5164
support.variable.property.process#ffbe41
entity.name.function,support.function.console#41d7ff
keyword.operator.misc.rust#f57dff
keyword.operator.sigil.rust#9b78ff
keyword.operator.delete#9b78ff
support.type.object.dom#41d7ff
support.variable.dom,support.variable.property.dom#ff5164
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#ffffff
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp#9b78ff
punctuation.separator.delimiter#f57dff
punctuation.separator.c,punctuation.separator.cpp#9b78ff
support.type.posix-reserved.c,support.type.posix-reserved.cpp#41d7ff
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#9b78ff
variable.other.readwrite#f57dff
variable.parameter.function.language.python, meta.item-access.arguments.python#ffbe41
support.type.python#41d7ff
keyword.operator.logical.python#41d7ff
variable.parameter.function.python#ffbe41
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python,#41D7FF
meta.function-call.generic.python,entity.name.function.member#ffbe41
constant.character.format.placeholder.other.python#ffbe41
keyword.operator#f57dff
keyword.operator.assignment.compound#9b78ff
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#ffbe41
keyword#9b78ff
entity.name.namespace#ffbe41
variable#ff5164
variable.c,variable.other.property.cpp,variable.other.local.cpp#f57dff
variable.language#ffbe41
token.variable.parameter.java#f57dff
import.storage.java#ffbe41
token.package.keyword#9b78ff
token.package#f57dff
entity.name.function, meta.require, variable.function#ffbe41
entity.name.type.namespace#ffbe41
support.class, entity.name.type.class#41d7ff
entity.name.class.identifier.namespace.type#ffbe41
entity.name.class, variable.other.class.js, variable.other.class.ts#ffbe41
variable.other.class.php#ff5164
entity.name.type#41d7ff
keyword.control#9b78ffitalic
control.elements, keyword.operator.less#ffbe41
keyword.other.special-method#41d7ff
storage#9b78ffitalic
token.storage#9b78ff
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#9b78ff
token.storage.type.java#ffbe41
support.function#41d7ff
support.type.property-name#f57dff
support.type.property-name.toml, support.type.property-name.table.toml, support.type.property-name.array.toml#ff5164
support.constant.property-value#f57dff
support.constant.font-name#ffbe41
meta.tag#9B78FF
string#87ff5f
constant.other.symbol#41d7ff
constant.numeric#ffffff
constant#87ff5f
punctuation.definition.constant#ffbe41
entity.name.tag#9B78FF
entity.other.attribute-name#ffbe41
entity.other.attribute-name.id#41d7ff
entity.other.attribute-name.class.css#ffbe41
meta.selector#9b78ff
markup.heading#ff5164
markup.heading punctuation.definition.heading, entity.name.section#41d7ff
keyword.other.unit#ff5164
markup.bold,todo.bold#ffbe41
punctuation.definition.bold#ffbe41
markup.italic, punctuation.definition.italic,todo.emphasis#9b78ff
emphasis md#9b78ff
entity.name.section.markdown#ff5164
punctuation.definition.heading.markdown#ff5164
punctuation.definition.list.begin.markdown#ffbe41
markup.heading.setext#f57dff
punctuation.definition.bold.markdown#ffbe41
markup.inline.raw.markdown#87ff5f
markup.inline.raw.string.markdown#9b78ff
punctuation.definition.raw.markdown#ffbe41
punctuation.definition.list.markdown#ffbe41
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#F57DFF
beginning.punctuation.definition.list.markdown#ff5164
punctuation.definition.metadata.markdown#F57DFF
markup.underline.link.markdown,markup.underline.link.image.markdown#87ff5f
string.other.link.title.markdown,string.other.link.description.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown#41d7ff
markup.raw.monospace.asciidoc#87ff5f
punctuation.definition.asciidoc#ffbe41
markup.list.asciidoc#ffbe41
markup.link.asciidoc,markup.other.url.asciidoc#9b78ff
string.unquoted.asciidoc,markup.other.url.asciidoc#41d7ff
string.regexp#41d7ff
punctuation.section.embedded, variable.interpolation#ff5164
punctuation.section.embedded.begin,punctuation.section.embedded.end#9b78ff
invalid.illegal#ffffff
invalid.illegal.bad-ampersand.html#f57dff
invalid.illegal.unrecognized-tag.html#ff5164
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.deprecated.entity.other.attribute-name.html#ffbe41
invalid.unimplemented#ffffff
source.json meta.structure.dictionary.json > string.quoted.json#ff5164
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#ff5164
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#87ff5f
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#41d7ff
support.type.property-name.json#9b78ff
support.type.property-name.json punctuation#9b78ff
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#9b78ff
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#9b78ff
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php#ffbe41
keyword.operator.error-control.php#9b78ff
keyword.operator.type.php#9b78ff
punctuation.section.array.begin.php#f57dff
punctuation.section.array.end.php#f57dff
invalid.illegal.non-null-typehinted.php#f44747
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#ffbe41
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#41d7ff
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php#f57dff
support.constant.core.rust#ffbe41
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#ffbe41
entity.name.goto-label.php,support.other.php#41d7ff
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#41d7ff
keyword.operator.regexp.php#9b78ff
keyword.operator.comparison.php#9b78ff
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#9b78ff
meta.function.decorator.python#41d7ff
support.token.decorator.python,meta.function.decorator.identifier.python,meta.function.python,entity.name.function.python,entity.name.function.operator.member,entity.name.function.operator,keyword.operator.arithmetic,keyword.operator.comparison#f57dff
function.parameter#f57dff
function.brace#f57dff
function.parameter.ruby, function.parameter.cs#f57dff
constant.language.symbol.ruby#41d7ff
constant.language.symbol.hashkey.ruby#41d7ff
rgb-value#41d7ff
inline-color-decoration rgb-value#ffbe41
less rgb-value#ffbe41
selector.sass#ff5164
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#ffbe41
block.scope.end,block.scope.begin#f57dff
storage.type.cs#ffbe41
entity.name.variable.local.cs#ff5164
token.info-token#41d7ff
token.warn-token#ffbe41
token.error-token#f44747
token.debug-token#9b78ff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#9b78ff
meta.template.expression#f57dff
keyword.operator.module#9b78ff
support.type.type.flowtype#41d7ff
support.type.primitive#ffbe41
meta.property.object#ff5164
variable.parameter.function.js#ff5164
keyword.other.template.begin#87ff5f
keyword.other.template.end#87ff5f
keyword.other.substitution.begin#87ff5f
keyword.other.substitution.end#87ff5f
keyword.operator.assignment#9b78ff
keyword.operator.assignment.go#ffbe41
keyword.operator.arithmetic.go, keyword.operator.address.go#9b78ff
entity.name.package.go#ffbe41
support.type.prelude.elm#41d7ff
support.constant.elm#ffbe41
punctuation.quasi.element#9b78ff
constant.character.entity#ff5164
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#41d7ff
entity.global.clojure#ffbe41
meta.symbol.clojure#ff5164
constant.keyword.clojure#41d7ff
meta.arguments.coffee, variable.parameter.function.coffee#ff5164
source.ini#87ff5f
meta.scope.prerequisites.makefile#ff5164
source.makefile#ffbe41
storage.modifier.import.groovy#ffbe41
meta.method.groovy#41d7ff
meta.definition.variable.name.groovy#ff5164
meta.definition.class.inherited.classes.groovy#87ff5f
support.variable.semantic.hlsl#ffbe41
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl#9b78ff
text.variable, text.bracketed#ff5164
support.type.swift, support.type.vb.asp#ffbe41
entity.name.function.xi#ffbe41
entity.name.class.xi#41d7ff
constant.character.character-class.regexp.xi#ff5164
constant.regexp.xi#9b78ff
keyword.control.xi#41d7ff
invalid.xi#f57dff
beginning.punctuation.definition.quote.markdown.xi#87ff5f
beginning.punctuation.definition.list.markdown.xi#7f848e
constant.character.xi#41d7ff
accent.xi#41d7ff
wikiword.xi#ffbe41
constant.other.color.rgb-value.xi#ffffff
punctuation.definition.tag.xi#5c6370
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition, punctuation.terminator.statement.cpp, punctuation.terminator.dart#ffbe41
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#ff5164
meta.brace.square#f57dff
comment, punctuation.definition.comment#7f848eitalic
markup.quote.markdown#5c6370
punctuation.definition.block.sequence.item.yaml#f57dff
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir#41d7ff
entity.name.variable.parameter.cs#ffbe41
entity.name.variable.field.cs#ff5164
markup.deleted#ff5164
markup.inserted#87ff5f
markup.underlineunderline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#BE5046
support.other.namespace.php#f57dff
variable.parameter.function.latex#ff5164
variable.other.object#ffbe41
variable.other.constant.property#ff5164
entity.other.inherited-class#ffbe41
variable.other.readwrite.c#ff5164
entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php,punctuation.separator#f57dff
constant.numeric.decimal.asm.x86_64#9b78ff
support.other.parenthesis.regexp#ffbe41
constant.character.escape#41d7ff
string.regexp#ff5164
log.info#87ff5f
log.warning#ffbe41
log.error#ff5164
keyword.operator.expression.is#9b78ff
entity.name.label,entity.name.function.templated#ff5164
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.language.superitalic
comment.line.double-slash,comment.block.documentationitalic
markup.italic.markdownitalic

Shiki preview

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

Loading...

Duck Mode! by MEvesalTR - VS Code Theme