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#005FB8
  • activityBar.background#f8f8f8
  • activityBar.border#0000001a
  • activityBar.foreground#1f1f1f
  • activityBar.inactiveForeground#0000009e
  • activityBarBadge.background#005FB8
  • activityBarBadge.foreground#ffffff
  • badge.background#005FB8
  • badge.foreground#ffffff
  • button.background#005FB8
  • button.border#0000001a
  • button.foreground#ffffff
  • button.hoverBackground#005FB8e6
  • button.secondaryBackground#0000001a
  • button.secondaryForeground#3b3b3b
  • button.secondaryHoverBackground#00000034
  • checkbox.background#f8f8f8
  • checkbox.border#CECECE
  • descriptionForeground#3b3b3b
  • diffEditor.insertedLineBackground#23863633
  • diffEditor.insertedTextBackground#2386364d
  • diffEditor.removedLineBackground#da363333
  • diffEditor.removedTextBackground#da36334d
  • dropdown.background#ffffff
  • dropdown.border#CECECE
  • dropdown.foreground#3b3b3b
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#9e6a03
  • editor.foreground#3b3b3b
  • editor.inactiveSelectionBackground#E5EBF1
  • editor.selectionHighlightBackground#ADD6FF80
  • editorGroup.border#0000001a
  • editorGroupHeader.tabsBackground#f8f8f8
  • editorGroupHeader.tabsBorder#0000001a
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#005FB8
  • editorIndentGuide.background#D3D3D3
  • editorInlayHint.background#8b949e33
  • editorInlayHint.foreground#8b949e
  • editorInlayHint.typeBackground#8b949e33
  • editorInlayHint.typeForeground#8b949e
  • editorLineNumber.activeForeground#171184
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#0000001a
  • editorSuggestWidget.background#f8f8f8
  • editorWidget.background#ffffff
  • errorForeground#f85149
  • focusBorder#005FB8
  • foreground#3b3b3b
  • icon.foreground#3b3b3b
  • input.background#ffffff
  • input.border#CECECE
  • input.foreground#3b3b3b
  • input.placeholderForeground#00000079
  • inputOption.activeBackground#005fb841
  • inputOption.activeBorder#005FB8
  • inputOption.activeForeground#000000
  • keybindingLabel.foreground#3b3b3b
  • list.activeSelectionBackground#e8e8e8
  • list.activeSelectionForeground#000000
  • list.activeSelectionIconForeground#000000
  • list.hoverBackground#f2f2f2
  • menu.border#D4D4D4
  • notebook.cellBorderColor#E8E8E8
  • notebook.selectedCellBackground#c8ddf150
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#3b3b3b
  • notifications.background#ffffff
  • notifications.border#0000001a
  • notifications.foreground#3b3b3b
  • panel.background#f8f8f8
  • panel.border#0000001a
  • panelInput.border#0000001a
  • panelTitle.activeBorder#005FB8
  • panelTitle.activeForeground#3b3b3b
  • panelTitle.inactiveForeground#3b3b3b
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#ffffff
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#0000001a
  • pickerGroup.foreground#8b949e
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#005FB8
  • quickInput.background#ffffff
  • quickInput.foreground#3b3b3b
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#6e768187
  • scrollbarSlider.background#6e768133
  • scrollbarSlider.hoverBackground#6e768145
  • searchEditor.textInputBorder#CECECE
  • settings.dropdownBackground#ffffff
  • settings.dropdownBorder#CECECE
  • settings.headerForeground#1f1f1f
  • settings.modifiedItemIndicator#bb800966
  • settings.numberInputBorder#CECECE
  • settings.textInputBorder#CECECE
  • sideBar.background#f8f8f8
  • sideBar.border#0000001a
  • sideBar.foreground#3b3b3b
  • sideBarSectionHeader.background#f8f8f8
  • sideBarSectionHeader.border#0000001a
  • sideBarSectionHeader.foreground#3b3b3b
  • sideBarTitle.foreground#3b3b3b
  • statusBar.background#f8f8f8
  • statusBar.border#0000001a
  • statusBar.debuggingBackground#fd716c
  • statusBar.debuggingForeground#000000
  • statusBar.focusBorder#005FB8
  • statusBar.foreground#3b3b3b
  • statusBar.noFolderBackground#f8f8f8
  • statusBarItem.errorBackground#c72e0f
  • statusBarItem.focusBorder#005FB8
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#005FB8
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#f8f8f8
  • tab.activeBorderTop#005FB8
  • tab.activeForeground#3b3b3b
  • tab.border#0000001a
  • tab.hoverBackground#ffffff
  • tab.inactiveBackground#f8f8f8
  • tab.inactiveForeground#00000080
  • tab.lastPinnedBorder#3b3b3b30
  • tab.unfocusedActiveBorder#f8f8f8
  • tab.unfocusedActiveBorderTop#00000015
  • tab.unfocusedHoverBackground#6e76811a
  • terminal.foreground#3b3b3b
  • terminal.inactiveSelectionBackground#E5EBF1
  • terminal.tab.activeBorder#005fb8
  • terminalCursor.foreground#005FB8
  • textBlockQuote.background#f8f8f8
  • textBlockQuote.border#0000001a
  • textCodeBlock.background#6e768166
  • textLink.activeForeground#005FB8
  • textLink.foreground#005FB8
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#f8f8f8
  • titleBar.activeForeground#1e1e1e
  • titleBar.border#0000001a
  • titleBar.inactiveBackground#f8f8f8
  • titleBar.inactiveForeground#8b949e
  • welcomePage.tileBackground#f3f3f3
  • widgetBorder#0000001a

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