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#272a3e
  • activityBar.border#3A3E5C
  • activityBar.dropBackground#7e57c257
  • activityBar.foreground#747DB8
  • activityBarBadge.background#3A3E5C
  • activityBarBadge.foreground#ffffff
  • badge.background#747DB8
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#A599E9
  • breadcrumbPicker.background#181a29
  • button.background#7e57c298
  • button.foreground#fbf4e2
  • button.hoverBackground#7e57c2
  • debugExceptionWidget.background#181a29
  • debugExceptionWidget.border#3A3E5C
  • debugToolBar.background#272a3e
  • diffEditor.insertedTextBackground#6eec9618
  • diffEditor.removedTextBackground#fa56533b
  • dropdown.background#3d405b
  • dropdown.border#292c3e
  • dropdown.foreground#fbf4e2
  • editor.background#272a3e
  • editor.findMatchBackground#7e57c28b
  • editor.findMatchHighlightBackground#7e57c240
  • editor.foreground#cecec7
  • editor.hoverHighlightBackground#7e57c25a
  • editor.inactiveSelectionBackground#7e57c25a
  • editor.lineHighlightBackground#0003
  • editor.rangeHighlightBackground#7e57c25a
  • editor.selectionBackground#7e57c242
  • editor.selectionHighlightBackground#747DB879
  • editor.wordHighlightBackground#32374D
  • editor.wordHighlightStrongBackground#181a29
  • editorBracketMatch.background#ffecc43e
  • editorCodeLens.foreground#5e82ceb4
  • editorCursor.foreground#fae1aae7
  • editorError.foreground#fa5653
  • editorGroup.border#181a29
  • editorGroup.dropBackground#7e57c257
  • editorGroup.emptyBackground#272a3e
  • editorGroupHeader.noTabsBackground#272a3e
  • editorGroupHeader.tabsBackground#181a29
  • editorGroupHeader.tabsBorder#3A3E5C
  • editorGutter.addedBackground#6eec96
  • editorGutter.background#272a3e
  • editorGutter.deletedBackground#fa5653
  • editorGutter.modifiedBackground#6057c2
  • editorHoverWidget.background#181a29
  • editorHoverWidget.border#3A3E5C
  • editorIndentGuide.activeBackground#7E97AC
  • editorIndentGuide.background#5e81ce52
  • editorLineNumber.activeForeground#C5E4FD
  • editorLineNumber.foreground#4b6479
  • editorMarkerNavigation.background#31364a
  • editorMarkerNavigationError.background#fa5653
  • editorMarkerNavigationWarning.background#f3ca71
  • editorOverviewRuler.commonContentForeground#7e57c2
  • editorOverviewRuler.currentContentForeground#7e57c2
  • editorOverviewRuler.incomingContentForeground#7e57c2
  • editorRuler.foreground#5e81ce52
  • editorSuggestWidget.background#181a29
  • editorSuggestWidget.border#3A3E5C
  • editorSuggestWidget.foreground#cecec7
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#747DB8
  • editorWarning.foreground#f3ca71
  • editorWidget.background#181a29
  • editorWidget.border#3A3E5C
  • errorForeground#fa5653
  • extensionButton.prominentBackground#7e57c2cc
  • extensionButton.prominentForeground#fbf4e2
  • extensionButton.prominentHoverBackground#7e57c2
  • focusBorder#747DB8
  • foreground#cecec7
  • gitDecoration.conflictingResourceForeground#ffec95
  • gitDecoration.deletedResourceForeground#fa5653
  • gitDecoration.ignoredResourceForeground#395a75
  • gitDecoration.modifiedResourceForeground#a2bffc
  • gitDecoration.untrackedResourceForeground#6ef7a7
  • input.background#272a3e
  • input.border#747db868
  • input.foreground#fbf4e2
  • input.placeholderForeground#747DB8
  • inputOption.activeBorder#747DB8
  • inputValidation.errorBackground#AB0300F2
  • inputValidation.errorBorder#fa5653
  • inputValidation.infoBackground#00589EF2
  • inputValidation.infoBorder#64B5F6
  • inputValidation.warningBackground#675700F2
  • inputValidation.warningBorder#FFCA28
  • list.activeSelectionBackground#2e314a
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#7e57c257
  • list.focusBackground#242639
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#272a3e
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#242639
  • list.inactiveSelectionForeground#f7e1b2
  • list.invalidItemForeground#DB7969
  • merge.currentHeaderBackground#747DB8
  • merge.incomingHeaderBackground#7e57c25a
  • meta.objectliteral.js#82AAFF
  • notificationCenter.border#3A3E5C
  • notificationLink.foreground#FEF0CA
  • notifications.background#181a29
  • notifications.border#3A3E5C
  • notifications.foreground#fbf4e2
  • notificationToast.border#3A3E5C
  • panel.background#272a3e
  • panel.border#747DB8
  • panelTitle.activeBorder#747DB8
  • panelTitle.activeForeground#fbf4e2
  • panelTitle.inactiveForeground#cecec780
  • peekView.border#3A3E5C
  • peekViewEditor.background#181a29
  • peekViewEditor.matchHighlightBackground#7e57c25a
  • peekViewResult.background#181a29
  • peekViewResult.fileForeground#3A3E5C
  • peekViewResult.lineForeground#3A3E5C
  • peekViewResult.matchHighlightBackground#3A3E5C
  • peekViewResult.selectionBackground#181a29
  • peekViewResult.selectionForeground#3A3E5C
  • peekViewTitle.background#181a29
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#747DB8
  • pickerGroup.border#272a3e
  • pickerGroup.foreground#d1aaff
  • progress.background#7e57c2
  • punctuation.definition.generic.begin.html#fa5653f2
  • scrollbar.shadow#010b14
  • scrollbarSlider.activeBackground#30355b84
  • scrollbarSlider.background#30355b84
  • scrollbarSlider.hoverBackground#30355ba7
  • selection.background#4373c2
  • sideBar.background#181a29
  • sideBar.foreground#cecec7
  • sideBarSectionHeader.background#181a29
  • sideBarSectionHeader.border#272a3e
  • sideBarSectionHeader.foreground#fae1aa
  • sideBarTitle.foreground#f1f1cb
  • source.elm#747DB8
  • statusBar.background#272a3e
  • statusBar.border#3A3E5C
  • statusBar.debuggingBackground#202431
  • statusBar.debuggingBorder#1F2330
  • statusBar.foreground#747DB8
  • statusBar.noFolderBackground#272a3e
  • statusBar.noFolderBorder#25293A
  • statusBarItem.activeBackground#202431
  • statusBarItem.hoverBackground#202431
  • statusBarItem.prominentBackground#202431
  • statusBarItem.prominentHoverBackground#202431
  • string.quoted.single.js#ffffff
  • tab.activeBackground#3A3E5C
  • tab.activeBorder#3A3E5C
  • tab.activeForeground#fbf4e2
  • tab.border#3A3E5C
  • tab.inactiveBackground#222539
  • tab.inactiveForeground#747DB8
  • tab.unfocusedActiveBorder#262A39
  • tab.unfocusedActiveForeground#747DB8
  • tab.unfocusedInactiveForeground#747DB8
  • terminal.ansiBlack#272a3e
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#575656
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#7fdbca
  • terminal.ansiBrightGreen#22da6e
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#fa5653
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffeb95
  • terminal.ansiCyan#21c7a8
  • terminal.ansiGreen#22da6e
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#fa5653
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#9ef2ff
  • terminal.selectionBackground#7e57c25a
  • terminalCursor.background#234d70
  • titleBar.activeBackground#272a3e
  • titleBar.activeForeground#fbf4e2
  • titleBar.inactiveBackground#010e1a
  • walkThrough.embeddedEditorBackground#272a3e
  • welcomePage.buttonBackground#272a3e
  • welcomePage.buttonHoverBackground#272a3e
  • widget.shadow#272a3e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file#a2bffc
markup.deleted.diff#fa565390
markup.inserted.diff#9ef2ffff
Global settings#cecec7
comment#637777
string#75ffd1
string.quoted, variable.other.readwrite.js#29FFB9
support.constant.math#9ef2ff
constant.numeric, constant.character.numeric#F78C6C
constant.language, punctuation.definition.constant, variable.other.constant#82AAFF
constant.character, constant.other#82AAFF
constant.character.escape#F78C6C
string.regexp, string.regexp keyword.other#5ca7e4
meta.function punctuation.separator.comma#747DB8
variable#9ef2ff
punctuation.accessor, keyword#c792ea
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx#c792ea
storage.type#c792ea
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#FFFCA8
entity.other.inherited-class#9ef2ff
entity.name.function#c792ea
punctuation.definition.tag, meta.tag#dcc4f8
entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#FF5A77
entity.other.attribute-name#f5f5be
entity.name.tag.custom#9ef2ff
support.function, support.constant#82AAFF
support.constant.meta.property-value#7fdbca
support.type, support.class#9ef2ff
support.variable.dom#9ef2ff
invalid#ffffff
invalid.deprecated#ffffff
keyword.operator#FFE2A2
keyword.operator.relational#c792ea
keyword.operator.assignment#c792ea
keyword.operator.arithmetic#c792ea
keyword.operator.bitwise#c792ea
keyword.operator.increment#c792ea
keyword.operator.ternary#c792ea
comment.line.double-slash#637777
object#cdebf7
constant.language.null#ff5874
meta.brace#cecec7
meta.delimiter.period#c792ea
punctuation.definition.string#29ffb9
constant.language.boolean#ff5874
object.comma#ffffff
variable.parameter.function#f9f9aa
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#7fdbca
meta.property-list entity.name.tag.reference#57eaf1
constant.other.color.rgb-value punctuation.definition.constant#F78C6C
constant.other.color#FFEB95
keyword.other.unit#FFEB95
meta.selector#c792ea
entity.other.attribute-name.id#82AAFF
meta.property-name#FEF0CA
entity.name.tag.doctype, meta.tag.sgml.doctype#c792ea
punctuation.definition.parameters#29ffb9
keyword.control.operator#FFE2A2
keyword.operator.logical#c792ea
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#FF5A77
variable.other.object.property#FF5A77
variable.other.object.js
entity.name.function#82a9ff
keyword.control.conditional.js, keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#c792ea
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#f9f9aa
support.function#9ef2ff
invalid.broken#020e14
invalid.unimplemented#ffffff
invalid.illegal#ffffff
variable.language#f9f9aa
support.variable.property#f9f9aa
variable.function#82AAFF
variable.interpolation#ec5f67
meta.function-call#82AAFF
punctuation.section.embedded#d3423e
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#cecec7
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#29ffb9
string.template meta.template.expression#d3423e
string.template punctuation.definition.string#cecec7
italic#c792eaitalic
bold#9ef2ffbold
quote#697098
raw#FEF0CA
variable.assignment.coffee#31e1eb
variable.parameter.function.coffee#cecec7
variable.assignment.coffee#7fdbca
variable.other.readwrite.cs#cecec7
entity.name.type.class.cs, storage.type.cs#82AAFF
entity.name.type.namespace.cs#B2CCD6
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#ff6363
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#7fdbca
keyword.other.unit.css#FFEB95
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#F78C6C
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#82AAFF
source.elixir entity.name.function#9ef2ff
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#82AAFF
source.elixir punctuation.definition.string#9ef2ff
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#9ef2ff
source.elixir .punctuation.binary.elixir#c792ea
constant.keyword.clojure#7fdbca
source.go meta.function-call.go#DDDDDD
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go#c792ea
source.go constant.language.go, source.go constant.other.placeholder.go#ff5874
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#7fdbcaff
meta.namespace-block.cpp#e0dec6
storage.type.language.primitive.cpp#ff5874
meta.preprocessor.macro.cpp#cecec7
variable.parameter#FFFCA8
variable.other.readwrite.powershell#82AAFF
support.function.powershell#7fdbcaff
entity.other.attribute-name.id.html#9ef2ff
punctuation.definition.tag.html#6ae9f0
meta.tag.sgml.doctype.html#c792ea
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#747DB8
variable.other.jsdoc, variable.other.phpdoc#78ccf0
support.type.property-name.json#7fdbca
support.constant.json#9ef2ff
meta.structure.dictionary.value.json string.quoted.double#29ffb9
string.quoted.double.json punctuation.definition.string.json#FEF0CA
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ff5874
variable.other.ruby#cecec7
entity.name.type.class.ruby#ecc48d
constant.language.symbol.hashkey.ruby#7fdbca
entity.name.tag.less#7fdbca
keyword.other.unit.css#FFEB95
meta.attribute-selector.less entity.other.attribute-name.attribute#F78C6C
variable.other.php#bec5d4
support.class.php#FFFCA8
meta.function-call.php punctuation#cecec7
variable.other.global.php#9ef2ff
variable.other.global.php punctuation.definition.variable#9ef2ff
constant.language.python#ff5874
variable.parameter.function.python, meta.function-call.arguments.python#82AAFF
meta.function-call.python, meta.function-call.generic.python#B2CCD6
punctuation.python#cecec7
entity.name.function.decorator.python#9ef2ff
source.python variable.language.special#8EACE3
keyword.control#c792ea
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#9ef2ff
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#82AAFF
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#bec5d4
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#F78C6C
entity.name.tag.scss, entity.name.tag.sass#7fdbca
keyword.other.unit.scss, keyword.other.unit.sass#FFEB95
entity.name.tag.yaml#7fdbca
punctuation.definition.string.begin.markdown#ff5874
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#82b1ff
markup.italic.markdown#c792eaitalic
markup.bold.markdown#9ef2ffbold
markup.quote.markdown#697098
markup.inline.raw.markdown#FEF0CA
markup.underline.link.markdown, markup.underline.link.image.markdown#ff869a
string.other.link.title.markdown, string.other.link.description.markdown#cecec7
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#82b1ff
punctuation.definition.metadata.markdown#7fdbca
beginning.punctuation.definition.list.markdown#82b1ff
markup.inline.raw.string.markdown#9ef2ff
meta.class entity.name.type.class.tsx#FFFCA8
entity.name.type.module.tsx, meta.type.declaration.tsx#ff5874
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#82AAFF
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#ffffe0
variable.parameter.ts, variable.parameter.tsx#FFF9E3
variable.object.property.ts, variable.object.property.tsx#75ffd1
variable.other.object.ts, variable.other.object.tsx#75ffd1
variable.other.constant, variable.other.readwrite.ts, variable.other.readwrite.tsx#FFF9E3
entity.name.type.interface.tsx, entity.name.type.interface.ts, entity.name.type.alias.tsx, entity.name.type.alias.ts, entity.name.type.tsx, entity.name.type.ts#fbfbb9
support.class.node.ts, support.class.node.tsx#82AAFF
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#747DB8
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#cecec7
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#82AAFF
meta.tag.js meta.jsx.children.tsx#82AAFF
variable.other.object.js#FFF9E3
variable.other.readwrite.shorthandpropertyname.js#75ffd1
variable.other.object.js#75ffd1
variable.other.readwrite.js, variable.parameter#ffffe0
meta.class entity.name.type.class.js#FFFCA8
meta.method.declaration storage.type.js#82AAFF
terminator.js#cecec7
meta.js punctuation.definition.js#cecec7
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#cecec7
variable.parameter.function.js#e28080
variable.js, variable.other.js#cecec7
entity.name.type.js, entity.name.type.module.js#FFFCA8
support.class.js#cecec7
variable.object.property.js, variable.object.property.jsx#e28080
support.class, support.class.component.open.js#a995fb
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx, meta.jsx.children.ts, meta.tag.jsx, meta.tag.js#fffff6
support.class.component.js, support.class.component.tsx#a995fb
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted