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.activeBorder#00000080
  • activityBar.background#dadada
  • activityBar.border#dadada
  • activityBar.foreground#4a4b40
  • activityBar.inactiveForeground#00000090
  • activityBarBadge.background#334960
  • activityBarBadge.foreground#dadada
  • badge.background#334960
  • badge.foreground#e4e4e4
  • button.background#334960
  • button.foreground#dadada
  • button.hoverBackground#33496090
  • button.secondaryBackground#33496090
  • button.secondaryForeground#e4e4e4
  • button.secondaryHoverBackground#33496080
  • debugConsoleInputIcon.foreground#334960
  • debugExceptionWidget.background#e4e4e4
  • debugExceptionWidget.border#4a4b40
  • debugIcon.breakpointDisabledForeground#334960
  • debugIcon.breakpointForeground#334960
  • debugToolBar.background#e4e4e4
  • descriptionForeground#000000
  • diffEditor.diagonalFill#4a4b40
  • diffEditor.insertedTextBackground#24630585
  • diffEditor.removedTextBackground#c22d3e85
  • disabledForeground#00000070
  • dropdown.background#e4e4e4
  • dropdown.border#000000
  • dropdown.foreground#000000
  • editor.background#dadada
  • editor.findMatchBackground#4a4b40
  • editor.findMatchBorder#4a4b40
  • editor.findMatchHighlightBackground#4a4b4085
  • editor.findMatchHighlightBorder#4a4b40
  • editor.findRangeHighlightBackground#4a4b4085
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#00000085
  • editor.lineHighlightBackground#e4e4e4
  • editor.rangeHighlightBackground#4a4b4085
  • editor.selectionBackground#4a4b4020
  • editor.selectionForeground#dadada
  • editor.selectionHighlightBackground#60606090
  • editor.selectionHighlightBorder#246305
  • editor.snippetTabstopHighlightBackground#000000
  • editor.wordHighlightBackground#4a4b4085
  • editor.wordHighlightBorder#4a4b40
  • editor.wordHighlightStrongBackground#24630585
  • editor.wordHighlightStrongBorder#246305
  • editorBracketHighlight.foreground1#000000
  • editorBracketHighlight.foreground2#000000
  • editorBracketHighlight.foreground3#000000
  • editorBracketHighlight.foreground4#000000
  • editorBracketHighlight.foreground5#000000
  • editorBracketHighlight.foreground6#000000
  • editorBracketMatch.background#4a4b40
  • editorBracketMatch.border#4a4b40
  • editorCodeLens.foreground#787b80
  • editorError.foreground#c22d3e
  • editorGhostText.background#e4e4e4
  • editorGhostText.foreground#000000
  • editorGroup.border#4a4b40
  • editorGroupHeader.noTabsBackground#dadada
  • editorGroupHeader.tabsBackground#dadada
  • editorGroupHeader.tabsBorder#dadada
  • editorGutter.addedBackground#246305
  • editorGutter.deletedBackground#334960
  • editorGutter.modifiedBackground#4a4b40
  • editorHoverWidget.background#e4e4e4
  • editorHoverWidget.border#4a4b40
  • editorLineNumber.activeForeground#00000090
  • editorLineNumber.foreground#4a4b40
  • editorLink.activeForeground#00000090
  • editorMarkerNavigation.background#e4e4e4
  • editorOverviewRuler.addedForeground#246305
  • editorOverviewRuler.border#4a4b40
  • editorOverviewRuler.bracketMatchForeground#4a4b40
  • editorOverviewRuler.deletedForeground#c22d3e
  • editorOverviewRuler.errorForeground#c22d3e
  • editorOverviewRuler.findMatchForeground#4a4b4085
  • editorOverviewRuler.modifiedForeground#4a4b40
  • editorOverviewRuler.warningForeground#334960
  • editorOverviewRuler.wordHighlightForeground#4a4b4085
  • editorOverviewRuler.wordHighlightStrongForeground#24630585
  • editorRuler.foreground#4a4b40
  • editorSuggestWidget.background#e4e4e4
  • editorSuggestWidget.border#4a4b40
  • editorSuggestWidget.highlightForeground#334960
  • editorSuggestWidget.selectedBackground#4a4b40
  • editorWarning.foreground#334960
  • editorWhitespace.foreground#00000030
  • editorWidget.background#e4e4e4
  • editorWidget.border#4a4b40
  • errorForeground#c22d3e
  • extensionButton.prominentBackground#334960
  • extensionButton.prominentForeground#e4e4e4
  • extensionButton.prominentHoverBackground#334960
  • focusBorder#334960
  • foreground#000000
  • gitDecoration.conflictingResourceForeground#c22d3e85
  • gitDecoration.deletedResourceForeground#c22d3e
  • gitDecoration.ignoredResourceForeground#00000070
  • gitDecoration.modifiedResourceForeground#4a4b40
  • gitDecoration.submoduleResourceForeground#4a4b40
  • gitDecoration.untrackedResourceForeground#246305
  • icon.foreground#000000
  • input.background#e4e4e4
  • input.border#000000
  • input.foreground#4a4b40
  • input.placeholderForeground#000000
  • inputOption.activeBackground#334960
  • inputOption.activeBorder#334960
  • inputOption.activeForeground#00000090
  • inputValidation.errorBackground#e4e4e4
  • inputValidation.errorBorder#c22d3e
  • inputValidation.infoBackground#dadada
  • inputValidation.infoBorder#4a4b40
  • inputValidation.warningBackground#dadada
  • inputValidation.warningBorder#334960
  • keybindingLabel.background#e4e4e4
  • keybindingLabel.border#4a4b40
  • keybindingLabel.bottomBorder#4a4b40
  • keybindingLabel.foreground#4a4b40
  • list.activeSelectionBackground#4a4b4085
  • list.activeSelectionForeground#4a4b40
  • list.deemphasizedForeground#4a4b4085
  • list.errorForeground#c22d3e
  • list.filterMatchBackground#4a4b4085
  • list.filterMatchBorder#4a4b40
  • list.focusBackground#4a4b4085
  • list.focusForeground#4a4b40
  • list.focusOutline#4a4b40
  • list.highlightForeground#334960
  • list.hoverBackground#4a4b4085
  • list.inactiveSelectionBackground#4a4b4085
  • list.inactiveSelectionForeground#4a4b40
  • list.invalidItemForeground#4a4b40
  • listFilterWidget.background#e4e4e4
  • listFilterWidget.noMatchesOutline#c22d3e
  • listFilterWidget.outline#334960
  • menu.foreground#000000
  • minimap.background#dadada
  • minimap.errorHighlight#c22d3e
  • minimap.findMatchHighlight#4a4b4085
  • minimap.selectionHighlight#00000085
  • minimapGutter.addedBackground#246305
  • minimapGutter.deletedBackground#c22d3e
  • minimapGutter.modifiedBackground#4a4b40
  • panel.background#dadada
  • panel.border#4a4b40
  • panelTitle.activeBorder#00000080
  • panelTitle.activeForeground#00000090
  • panelTitle.inactiveForeground#00000070
  • peekView.border#4a4b40
  • peekViewEditor.background#e4e4e4
  • peekViewEditor.matchHighlightBackground#4a4b40
  • peekViewEditor.matchHighlightBorder#4a4b40
  • peekViewResult.background#e4e4e4
  • peekViewResult.fileForeground#4a4b40
  • peekViewResult.lineForeground#4a4b40
  • peekViewResult.matchHighlightBackground#4a4b40
  • peekViewResult.selectionBackground#4a4b40
  • peekViewTitle.background#4a4b40
  • peekViewTitleDescription.foreground#4a4b40
  • peekViewTitleLabel.foreground#4a4b40
  • pickerGroup.border#4a4b40
  • pickerGroup.foreground#4a4b40
  • progressBar.background#334960
  • scrollbar.shadow#4a4b40
  • scrollbarSlider.activeBackground#4a4b40
  • scrollbarSlider.background#4a4b40
  • scrollbarSlider.hoverBackground#4a4b40
  • selection.background#4a4b4040
  • settings.headerForeground#4a4b40
  • settings.modifiedItemIndicator#4a4b40
  • sideBar.background#dadada
  • sideBar.border#dadada
  • sideBarSectionHeader.background#dadada
  • sideBarSectionHeader.border#dadada
  • sideBarSectionHeader.foreground#4a4b40
  • sideBarTitle.foreground#4a4b40
  • statusBar.background#dadada
  • statusBar.border#dadada
  • statusBar.debuggingBackground#334960
  • statusBar.debuggingForeground#e4e4e4
  • statusBar.foreground#4a4b40
  • statusBar.noFolderBackground#e4e4e4
  • statusBarItem.activeBackground#4a4b40
  • statusBarItem.hoverBackground#4a4b40
  • statusBarItem.prominentBackground#4a4b40
  • statusBarItem.prominentHoverBackground#000000
  • statusBarItem.remoteBackground#334960
  • statusBarItem.remoteForeground#e4e4e4
  • tab.activeBackground#dadada
  • tab.activeBorder#00000080
  • tab.activeForeground#000000
  • tab.border#dadada
  • tab.inactiveBackground#dadada
  • tab.inactiveForeground#00000070
  • tab.unfocusedActiveBorder#00000080
  • tab.unfocusedActiveForeground#00000090
  • tab.unfocusedInactiveForeground#00000070
  • terminal.background#dadada
  • terminal.foreground#000000
  • terminal.selectionBackground#334960
  • terminal.selectionForeground#dadada
  • textBlockQuote.background#e4e4e4
  • textLink.activeForeground#00000090
  • textLink.foreground#334960
  • textPreformat.foreground#4a4b40
  • titleBar.activeBackground#dadada
  • titleBar.activeForeground#000000
  • titleBar.border#dadada
  • titleBar.inactiveBackground#dadada
  • titleBar.inactiveForeground#00000070
  • tree.indentGuidesStroke#4a4b40
  • walkThrough.embeddedEditorBackground#e4e4e4
  • welcomePage.progress.background#4a4b40
  • welcomePage.tileBackground#dadada
  • widget.shadow#00000090

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