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.background#282c34
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4d78cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#282c34
  • button.background#404754
  • button.secondaryBackground#30333d
  • button.secondaryForeground#c0bdbd
  • checkbox.border#404754
  • debugToolBar.background#21252b
  • descriptionForeground#abb2bf
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#21252b
  • dropdown.border#21252b
  • editor.background#282c34
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#6199ff2f
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#2c313c
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#dddddd
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorBracketHighlight.foreground1#90e9ff
  • editorBracketHighlight.foreground2#c678dd
  • editorBracketHighlight.foreground3#7DF9FF
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.foreground#c24038
  • editorGroup.background#181a1f
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#21252b
  • editorGutter.addedBackground#109868
  • editorGutter.deletedBackground#9A353D
  • editorGutter.modifiedBackground#948B60
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorHoverWidget.highlightForeground#61afef
  • editorIndentGuide.activeBackground#c8c8c859
  • editorIndentGuide.background#3b4048
  • editorInlayHint.background#2c313c
  • editorInlayHint.foreground#abb2bf
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#21252b
  • editorOverviewRuler.addedBackground#109868
  • editorOverviewRuler.deletedBackground#9A353D
  • editorOverviewRuler.modifiedBackground#948B60
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#90e9ff
  • editorWhitespace.foreground#ffffff1d
  • editorWidget.background#21252b
  • focusBorder#3e4452
  • gitDecoration.ignoredResourceForeground#636b78
  • input.background#1d1f23
  • input.foreground#abb2bf
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#323842
  • list.focusForeground#f0f0f0
  • list.highlightForeground#ecebeb
  • list.hoverBackground#2c313a
  • list.hoverForeground#abb2bf
  • list.inactiveSelectionBackground#323842
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#90e9ff
  • menu.foreground#abb2bf
  • menu.separatorBackground#343a45
  • minimapGutter.addedBackground#109868
  • minimapGutter.deletedBackground#9A353D
  • minimapGutter.modifiedBackground#948B60
  • panel.border#3e4452
  • panelSectionHeader.background#21252b
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbar.shadow#23252c
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • settings.focusedRowBackground#282c34
  • settings.headerForeground#fff
  • sideBar.background#21252b
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#282c34
  • sideBarSectionHeader.foreground#abb2bf
  • statusBar.background#21252b
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#ff000000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252b
  • statusBarItem.remoteBackground#4d78cc
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#282c34
  • tab.activeBorder#b4b4b4
  • tab.activeForeground#dcdcdc
  • tab.border#181a1f
  • tab.hoverBackground#323842
  • tab.inactiveBackground#21252b
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#3f4451
  • terminal.ansiBlue#4aa5f0
  • terminal.ansiBrightBlack#4f5666
  • terminal.ansiBrightBlue#4dc4ff
  • terminal.ansiBrightCyan#4cd1e0
  • terminal.ansiBrightGreen#a5e075
  • terminal.ansiBrightMagenta#de73ff
  • terminal.ansiBrightRed#ff616e
  • terminal.ansiBrightWhite#e6e6e6
  • terminal.ansiBrightYellow#f0a45d
  • terminal.ansiCyan#42b3c2
  • terminal.ansiGreen#8cc265
  • terminal.ansiMagenta#c162de
  • terminal.ansiRed#e05561
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#d18f52
  • terminal.background#282c34
  • terminal.border#3e4452
  • terminal.foreground#abb2bf
  • terminal.selectionBackground#abb2bf30
  • textBlockQuote.background#2e3440
  • textBlockQuote.border#4b5362
  • textLink.foreground#61afef
  • textPreformat.foreground#90e9ff
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#282c34
  • titleBar.inactiveForeground#6b717d
  • tree.indentGuidesStroke#ffffff1d
  • walkThrough.embeddedEditorBackground#2e3440
  • welcomePage.buttonHoverBackground#404754

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

One Dark Pro Colorblind (Deuteranopia) by Suhaybu - VS Code Theme