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.

  • actionBar.toggledBackground#525761
  • activityBar.background#16191d
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4d78cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#23272e
  • button.background#404754
  • button.secondaryBackground#30333d
  • button.secondaryForeground#c0bdbd
  • checkbox.border#404754
  • debugToolBar.background#1e2227
  • descriptionForeground#abb2bf
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#1e2227
  • dropdown.border#1e2227
  • editor.background#16191d
  • editor.findMatchBackground#d19a6644
  • editor.findMatchBorder#ffffff5a
  • editor.findMatchHighlightBackground#ffffff22
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#2c313c
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffd33d44
  • editor.selectionHighlightBorder#dddddd
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorBracketHighlight.foreground1#d19a66
  • editorBracketHighlight.foreground2#c678dd
  • editorBracketHighlight.foreground3#56b6c2
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.foreground#c24038
  • editorGroup.background#181a1f
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#16191d
  • editorGutter.addedBackground#109868
  • editorGutter.deletedBackground#9A353D
  • editorGutter.modifiedBackground#948B60
  • editorHoverWidget.background#1e2227
  • editorHoverWidget.border#181a1f
  • editorHoverWidget.highlightForeground#61afef
  • editorIndentGuide.activeBackground1#c8c8c859
  • editorIndentGuide.background1#3b4048
  • editorInlayHint.background#2c313c
  • editorInlayHint.foreground#abb2bf
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#667187
  • editorMarkerNavigation.background#1e2227
  • editorOverviewRuler.addedBackground#109868
  • editorOverviewRuler.deletedBackground#9A353D
  • editorOverviewRuler.modifiedBackground#948B60
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#1e2227
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#d19a66
  • editorWhitespace.foreground#ffffff1d
  • editorWidget.background#1e2227
  • 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#d19a66
  • menu.foreground#abb2bf
  • menu.separatorBackground#343a45
  • minimapGutter.addedBackground#109868
  • minimapGutter.deletedBackground#9A353D
  • minimapGutter.modifiedBackground#948B60
  • panel.border#3e4452
  • panelSectionHeader.background#1e2227
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbar.shadow#23252c
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • settings.focusedRowBackground#23272e
  • settings.headerForeground#fff
  • sideBar.background#16191d
  • sideBar.border#37393d
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#16191d
  • sideBarSectionHeader.foreground#abb2bf
  • statusBar.background#16191d
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#ff000000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#1e2227
  • statusBarItem.remoteBackground#4d78cc
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#23272e
  • tab.activeBorder#b4b4b4
  • tab.activeForeground#dcdcdc
  • tab.border#181a1f
  • tab.hoverBackground#323842
  • tab.inactiveBackground#16191d
  • 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#16191d
  • terminal.border#3e4452
  • terminal.foreground#abb2bf
  • terminal.selectionBackground#abb2bf30
  • textBlockQuote.background#2e3440
  • textBlockQuote.border#4b5362
  • textLink.foreground#61afef
  • textPreformat.foreground#d19a66
  • titleBar.activeBackground#16191d
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#16191d
  • titleBar.inactiveForeground#6b717d
  • tree.indentGuidesStroke#ffffff1d
  • walkThrough.embeddedEditorBackground#2e3440
  • welcomePage.buttonHoverBackground#404754

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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