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#222222
  • activityBar.foreground#ff699a
  • activityBarBadge.background#ff71a2
  • activityBarBadge.foreground#f8fafd
  • badge.background#222222
  • button.background#404754
  • debugToolBar.background#222226
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#222226
  • dropdown.border#222226
  • editor.background#222222
  • 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
  • editorActiveLineNumber.foreground#737984
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.foreground#c24038
  • editorGroup.background#181a1f
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#222226
  • editorHoverWidget.background#222226
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#c8c8c859
  • editorIndentGuide.background#3b4048
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#222226
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#222226
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#323232
  • editorWarning.foreground#ff9a5a
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#222226
  • focusBorder#464646
  • input.background#1d1f23
  • list.activeSelectionBackground#323232
  • list.activeSelectionForeground#ff7854
  • list.focusBackground#383e4a
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#414141
  • list.inactiveSelectionBackground#323232
  • list.inactiveSelectionForeground#ff7854
  • list.warningForeground#ff9a5a
  • menu.foreground#c8c8c8
  • panelSectionHeader.background#222226
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#222226
  • sideBarSectionHeader.background#222222
  • sideBarTitle.foreground#817A85
  • statusBar.background#222226
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#222226
  • statusBarItem.hoverBackground#323232
  • statusBarItem.remoteBackground#F73118
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#222222
  • tab.activeForeground#dcdcdc
  • tab.border#181a1f
  • tab.hoverBackground#323842
  • tab.inactiveBackground#222226
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#3f4451
  • terminal.ansiBlue#4aa5f0
  • terminal.ansiBrightBlack#4f5666
  • terminal.ansiBrightBlue#89e6fa
  • terminal.ansiBrightCyan#699aff
  • terminal.ansiBrightGreen#69c49a
  • terminal.ansiBrightMagenta#de73ff
  • terminal.ansiBrightRed#ff616e
  • terminal.ansiBrightWhite#ff7854
  • terminal.ansiBrightYellow#ff71a2
  • terminal.ansiCyan#42b3c2
  • terminal.ansiGreen#94ca6d
  • terminal.ansiMagenta#c162de
  • terminal.ansiRed#e05561
  • terminal.ansiWhite#e6e6e6
  • terminal.ansiYellow#FF805C
  • terminal.background#222226
  • terminal.border#abb2bf
  • terminal.foreground#abb2bf
  • terminal.selectionBackground#abb2bf30
  • textLink.foreground#70cde1
  • titleBar.activeBackground#222226
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#222226
  • titleBar.inactiveForeground#6b717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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