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#1f2021
  • activityBar.foreground#7f7f80
  • activityBarBadge.background#c88000
  • activityBarBadge.foreground#f8fafd
  • badge.background#c88000
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#151516
  • breadcrumb.focusForeground#e0e0e0
  • breadcrumb.foreground#cccccc60
  • breadcrumbPicker.background#1f2021
  • button.background#404754
  • debugToolBar.background#1f2021
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#252525
  • dropdown.border#1f2021
  • editor.background#151516
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#314365dd
  • editor.foreground#ababab
  • editor.lineHighlightBackground#1f2021
  • editor.lineHighlightBorder#1f2021
  • editor.selectionBackground#3f404180
  • editor.selectionHighlightBackground#ffffff2e
  • editor.selectionHighlightBorder#ffffff2e
  • editor.wordHighlightBackground#484e5bc9
  • editor.wordHighlightBorder#404040
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#404040
  • editorBracketMatch.background#3f4041
  • editorBracketMatch.border#3f4041
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#ffffff
  • editorError.foreground#c24038
  • editorGroup.border#3f4041
  • editorGroup.emptyBackground#151517
  • editorGroupHeader.tabsBackground#1f2021
  • editorHoverWidget.background#1f2021
  • editorHoverWidget.border#404040
  • editorIndentGuide.activeBackground1#c8c8c840
  • editorIndentGuide.background1#1f2021
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#404040
  • editorLineNumber.activeForeground#ffffff2a
  • editorLineNumber.foreground#ffffff1a
  • editorMarkerNavigation.background#1f2021
  • editorRuler.foreground#0059ff26
  • editorSuggestWidget.background#1f2021
  • editorSuggestWidget.border#404040
  • editorSuggestWidget.selectedBackground#303035
  • editorWarning.foreground#d19a66
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#1f2021
  • focusBorder#404040
  • input.background#151516
  • list.activeSelectionBackground#ffffff1a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383e4a
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#ffffff1a
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#d19a66
  • menu.background#101013
  • menu.foreground#808080
  • panel.background#1f2021
  • panel.border#80808000
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbar.shadow#000000f0
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#2f303180
  • scrollbarSlider.hoverBackground#3f4041a0
  • sideBar.background#1b1b1d
  • sideBar.foreground#c0c0c0
  • sideBarSectionHeader.background#1f2021
  • statusBar.background#1f2021
  • statusBar.debuggingBackground#7e00973d
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#c0c0c0
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#1f2021
  • statusBarItem.hoverBackground#404040
  • statusBarItem.remoteBackground#517bce
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#151516
  • tab.activeForeground#dcdcdc
  • tab.border#1f2021
  • tab.hoverBackground#313132
  • tab.inactiveBackground#1f2021
  • 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#ffffff
  • terminal.ansiBrightYellow#f0a45d
  • terminal.ansiCyan#42b3c2
  • terminal.ansiGreen#8cc265
  • terminal.ansiMagenta#c162de
  • terminal.ansiRed#e05561
  • terminal.ansiWhite#e6e6e6
  • terminal.ansiYellow#d18f52
  • terminal.background#151516
  • terminal.border#1f1f20
  • terminal.foreground#abb2bf
  • terminal.selectionBackground#ffffff50
  • textLink.foreground#61afef
  • titleBar.activeBackground#1f2021
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#101011
  • titleBar.inactiveForeground#6b717d
  • tree.indentGuidesStroke#2f2f30
  • tree.tableColumnsBorder#ec0c0c20

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.block.sequence.item.yaml#AAB1C0
markup.quote.markdown#5C6370
comment, punctuation.definition.comment#555555
meta.brace.square#AAB1C0
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#A0A0A0
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#F5C876
punctuation.definition.tag.xi#5C6370
constant.other.color.rgb-value.xi#C0C0C0
wikiword.xi#D8985F
accent.xi#52ADF2
constant.character.xi#52ADF2
beginning.punctuation.definition.list.markdown.xi#404040
beginning.punctuation.definition.quote.markdown.xi#C87F00
invalid.xi#AAB1C0
keyword.control.xi#33D8E4
constant.regexp.xi#6090C0
constant.character.character-class.regexp.xi#A0A0A0
entity.name.class.xi#33D8E4
entity.name.function.xi#F5C876
support.type.swift, support.type.vb.asp#F5C876
text.variable, text.bracketed#A0A0A0
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#9060C0
support.variable.semantic.hlsl#F5C876
meta.definition.class.inherited.classes.groovy#C87F00
meta.definition.variable.name.groovy#A0A0A0
meta.method.groovy#52ADF2
storage.modifier.import.groovy#F5C876
source.makefile#F5C876
meta.scope.prerequisites.makefile#A0A0A0
source.ini#C87F00
meta.arguments.coffee, variable.parameter.function.coffee#A0A0A0
constant.keyword.clojure#33D8E4
meta.symbol.clojure#A0A0A0
entity.global.clojure#F5C876
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#33D8E4
constant.character.entity#A0A0A0
punctuation.quasi.element#FF0000
support.constant.elm#D8985F
support.type.prelude.elm#33D8E4
entity.name.package.go#F5C876
keyword.operator.assignment.go, keyword.operator.address.go#C0C0C0
keyword.operator.assignment#C0C0C0
keyword.other.substitution.end#C87F00
keyword.other.substitution.begin#c87f00c1
keyword.other.template.end#C87F00
keyword.other.template.begin#C87F00
variable.parameter.function.js#A0A0A0
meta.property.object#A0A0A0
support.type.primitive#F5C876
support.type.type.flowtype#52ADF2
keyword.operator.module#C0C0C0
meta.template.expression#AAB1C0
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#C88000
token.debug-token#9060C0
token.error-token#F44747
token.warn-token#D8985F
token.info-token#52ADF2
entity.name.variable.local.cs#A0A0A0
storage.type.cs#F5C876
block.scope.end,block.scope.begin#AAB1C0
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#F5C876
selector.sass#A0A0A0
less rgb-value#D8985F
inline-color-decoration rgb-value#D8985F
rgb-value#33D8E4
constant.language.symbol.ruby#33D8E4
function.parameter.ruby, function.parameter.cs#AAB1C0
function.brace#AAB1C0
function.parameter#AAB1C0
support.token.decorator.python,meta.function.decorator.identifier.python#33D8E4
meta.function.decorator.python#52ADF2
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#C0C0C0
keyword.operator.comparison.php#C0C0C0
keyword.operator.regexp.php#C0C0C0
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#C0C0C0
entity.name.goto-label.php,support.other.php#52ADF2
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#D8985F
support.constant.core.rust#D8985F
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#AAB1C0
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#52ADF2
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#F5C876
invalid.illegal.non-null-typehinted.php#F44747
punctuation.section.array.end.php#AAB1C0
punctuation.section.array.begin.php#AAB1C0
keyword.operator.type.php#C0C0C0
keyword.operator.error-control.php#C0C0C0
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#F5C876
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#9060C0
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#9060C0
support.type.property-name.json punctuation#808080
support.type.property-name.json#6090C0
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#33D8E4
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#C87F00
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#A0A0A0
source.json meta.structure.dictionary.json > string.quoted.json#A0A0A0
invalid.unimplemented#FFFFFF
invalid.deprecated#800000
invalid.broken#FFFFFF
invalid.illegal.bad-ampersand.html#AAB1C0
invalid.illegal#FFFFFF
punctuation.section.embedded.begin,punctuation.section.embedded.end#FF0000
punctuation.section.embedded, variable.interpolation#A0A0A0
constant.character.escape#9060C0
string.regexp#B830F0italic
markup.bold.markdown
string.other.link.title.markdown,string.other.link.description.markdown#52ADF2
markup.underline.link.markdown,markup.underline.link.image.markdown#9060C0
punctuation.definition.metadata.markdown#A0A0A0
beginning.punctuation.definition.list.markdown#A0A0A0
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#A0A0A0
punctuation.definition.list.markdown#A0A0A0
markup.inline.raw.string.markdown#C87F00
markup.inline.raw.markdown#C87F00
punctuation.definition.bold.markdown#D8985F
markup.heading.setext#AAB1C0
punctuation.definition.list.begin.markdown#A0A0A0
punctuation.definition.heading.markdown#A0A0A0
entity.name.section.markdown#A0A0A0
emphasis md#9060C0
markup., punctuation.definition.,todo.emphasis#808080
punctuation.definition.bold#F5C876
markup.bold,todo.bold#D8985F
keyword.other.unit#A0A0A0
markup.heading punctuation.definition.heading, entity.name.section#52ADF2
markup.heading#A0A0A0bold
meta.selector#9060C0
entity.other.attribute-name.class.css#D8985F
entity.other.attribute-name.id#52ADF2
entity.other.attribute-name#D8985F
entity.name.tag#6090C0
punctuation.definition.constant#9060C0
constant.numeric#C84040
constant.other.symbol#B830F0
entity.other.inherited-class#6090C0
string#C06060
meta.tag#AAB1C0
support.constant.font-name#D8985F
support.constant.property-value#AAB1C0
support.type.property-name#AAB1C0
support.function#33D8E4
token.storage.type.java#609CF0
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#C0C0C0
token.storage#6090FF
storage#C88000
keyword.other.special-method#52ADF2
control.elements, keyword.operator.less#d1b093
keyword.control#C88000
entity.name.type#60A0E0
variable.other.class.php#A0A0A0
entity.name.class, variable.other.class.js, variable.other.class.ts#60A0E0
entity.name.class.identifier.namespace.type#60A0E0
support.class, entity.name.type.class#60A0E0
entity.name.type.namespace#60A0E0
entity.name.function, meta.require, support.function.any-method#609060
token.package#AAB1C0
token.package.keyword#306090
import.storage.java#60a0e096
token.variable.parameter.java#AAB1C0
variable.language#60A0E0
variable.c#AAB1C0
variable.parameter#808080
variable.other#AAB1C0
keyword#60A0FF
keyword.operator.assignment.compound#C0C0C0
keyword.operator#C0C0C0
constant.character.format.placeholder.other.python#D8985F
meta.function-call.generic.python#52ADF2
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#AAB1C0
variable.parameter.function.python#D8985F
keyword.operator.logical.python#C0C0C0
support.type.python#33D8E4
variable.parameter.function.language.python#D8985F
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#C0C0C0
support.type.posix-reserved.c,support.type.posix-reserved.cpp#33D8E4
punctuation.separator.c,punctuation.separator.cpp#9060C0
punctuation.separator.delimiter#AAB1C0
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#C0C0C0
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#C0C0C0
support.variable.dom,support.variable.property.dom#A0A0A0
support.type.object.dom#33D8E4
keyword.operator.delete#C0C0C0
keyword.operator.misc.rust#C0C0C0
support.function.console#52ADF2
support.variable.property.process#D8985F
support.type.object.console#A0A0A0
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#C0C0C0
support.constant.json#D8985F
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#A0A0A0
entity.name.type.module#F5C876
support.module.node,support.type.object.module,support.module.node#F5C876
support.type.vendored.property-name.css#33D8E4
support.constant.color.w3c-standard-color-name.css#D8985F
punctuation.separator.list.comma.css#AAB1C0
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#D8985F
keyword.operator.css,keyword.operator.scss,keyword.operator.less#33D8E4
support.constant.property-value.scss,support.constant.property-value.css#D8985F
keyword.operator.channel#C0C0C0
keyword.operator.bitwise#C0C0C0
keyword.operator.logical#C0C0C0
meta.definition.variable.name.java#A0A0A0
keyword.operator.instanceof.java#C0C0C0
storage.modifier.import.java,storage.type.java,storage.type.generic.java#306090
punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java#C88000
punctuation.definition.annotation.java#C88000
storage.type.annotation.java, storage.type.object.array.java#bb9966
variable.other.constant#90A0C0
variable.other.object.property#90A0C0
support.constant.property.math#D8985F
support.constant.math#F5C876
keyword.operator.expression.import#C0C0C0
punctuation.separator.key-value#AAB1C0
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#AAB1C0
meta.function.c,meta.function.cpp#A0A0A0
markup.deleted.diff#A0A0A0
markup.inserted.diff#C87F00
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#52ADF2
markup.changed.diff#F5C876
comment markup.link#555555
variable.parameter.function#AAB1C0
punctuation.definition.string.begin,punctuation.definition.string.end#ABB2BF
keyword.operator.quantifier.regexp#D8985F
constant.other.character-class.regexp#A0A0A0
support.constant.edge#9060C0
variable.language.rust#A0A0A0
entity.name.lifetime.rust#F5C876
support.function.std.rust#52ADF2
storage.modifier.lifetime.rust#AAB1C0
variable.parameter.function.language.special.self.python#F5C876
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#AAB1C0
support.variable.magic.python#A0A0A0
storage.type.haskell#D8985F
variable.other.generic-type.haskell#9060C0
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#A0A0A0
markup..markdown
keyword.control.import.python,keyword.control.flow.python
comment.line.double-slash,comment.block.documentation#555555
keyword.other.documentation#505050
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super
source.java#A0A0A0