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.activeBackground#DF4A16
  • activityBar.activeBorder#DF4A16
  • activityBar.background#2C2C2C
  • activityBar.dropBorder#60D4FD
  • activityBar.foreground#fdfdfd
  • activityBar.inactiveForeground#c2c2c2
  • activityBarBadge.background#DF4A16
  • activityBarBadge.foreground#FFFFFF
  • badge.background#773F72
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#fdfdfd
  • breadcrumb.background#222222
  • breadcrumb.focusForeground#fdfdfd
  • breadcrumb.foreground#97918F
  • breadcrumbPicker.background#222222
  • button.background#484848
  • button.foreground#fdfdfd
  • button.hoverBackground#0C6D1A
  • button.secondaryBackground#DF4A16
  • contrastBorder#1A1A1A
  • debugToolBar.background#222222
  • diffEditor.insertedTextBackground#52D86620
  • diffEditor.removedTextBackground#FF794A50
  • dropdown.background#2C2C2C
  • dropdown.border#EF8661b3
  • dropdown.foreground#fdfdfd
  • editor.background#222222
  • editor.findMatchBackground#FFA26780
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#343434
  • editor.foldBackground#222222
  • editor.foreground#fdfdfd
  • editor.hoverHighlightBackground#60D4FD50
  • editor.lineHighlightBackground#343434
  • editor.lineHighlightBorder#343434
  • editor.rangeHighlightBackground#773F7215
  • editor.selectionBackground#1BAEE23f
  • editor.selectionHighlightBackground#343434
  • editor.snippetFinalTabstopHighlightBackground#222222
  • editor.snippetFinalTabstopHighlightBorder#52D866
  • editor.snippetTabstopHighlightBackground#222222
  • editor.snippetTabstopHighlightBorder#97918F
  • editor.wordHighlightBackground#60D4FD50
  • editor.wordHighlightStrongBackground#52D86630
  • editorCodeLens.foreground#97918F
  • editorError.foreground#FF794A
  • editorGroup.border#343434
  • editorGroup.dropBackground#2c2c2c
  • editorGroupHeader.tabsBackground#2C2C2C
  • editorGutter.addedBackground#52D86680
  • editorGutter.deletedBackground#FF794A80
  • editorGutter.modifiedBackground#60D4FD80
  • editorHoverWidget.background#222222
  • editorHoverWidget.border#97918F
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#97918F75
  • editorLink.activeForeground#60D4FD
  • editorMarkerNavigation.background#222222
  • editorOverviewRuler.addedForeground#52D86680
  • editorOverviewRuler.border#1A1A1A
  • editorOverviewRuler.currentContentForeground#52D866
  • editorOverviewRuler.deletedForeground#FF794A80
  • editorOverviewRuler.errorForeground#FF794A80
  • editorOverviewRuler.incomingContentForeground#DF4A16
  • editorOverviewRuler.infoForeground#60D4FD80
  • editorOverviewRuler.modifiedForeground#60D4FD80
  • editorOverviewRuler.selectionHighlightForeground#FFA267
  • editorOverviewRuler.warningForeground#FFA26780
  • editorOverviewRuler.wordHighlightForeground#60D4FD
  • editorOverviewRuler.wordHighlightStrongForeground#52D866
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#222222
  • editorSuggestWidget.foreground#fdfdfd
  • editorSuggestWidget.selectedBackground#1BAEE23f
  • editorWarning.foreground#60D4FD
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#222222
  • errorForeground#FF794A
  • extensionButton.prominentBackground#0C6D1A
  • extensionButton.prominentForeground#fdfdfd
  • extensionButton.prominentHoverBackground#0C6D1A90
  • focusBorder#EF8661b3
  • foreground#fdfdfd
  • gitDecoration.conflictingResourceForeground#FFA267
  • gitDecoration.deletedResourceForeground#FF794A
  • gitDecoration.ignoredResourceForeground#97918F
  • gitDecoration.modifiedResourceForeground#60D4FD
  • gitDecoration.untrackedResourceForeground#52D866
  • input.background#2C2C2C
  • input.border#EF8661b3
  • input.foreground#fdfdfd
  • input.placeholderForeground#c2c2c270
  • inputOption.activeBorder#DF4A16
  • inputValidation.errorBorder#FF794A
  • inputValidation.infoBorder#FF9D88
  • inputValidation.warningBorder#FFA267
  • list.activeSelectionBackground#2C2C2C
  • list.activeSelectionForeground#fdfdfd
  • list.dropBackground#773F7250
  • list.errorForeground#FF794A
  • list.focusBackground#773F7230
  • list.highlightForeground#60D4FD
  • list.hoverBackground#773F7230
  • list.inactiveSelectionBackground#2C2C2C50
  • list.warningForeground#FFA267
  • listFilterWidget.background#2C2C2C
  • listFilterWidget.noMatchesOutline#FF794A
  • listFilterWidget.outline#343434
  • menu.background#2C2C2C
  • menu.foreground#c2c2c2
  • menu.selectionBackground#DF4A16
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#343434
  • menubar.selectionBackground#DF4A16
  • menubar.selectionForeground#FFFFFF
  • merge.currentHeaderBackground#52D86690
  • merge.incomingHeaderBackground#DF4A1690
  • minimap.findMatchHighlight#FFA26785
  • minimap.selectionHighlight#60D4FD50
  • notification.background#222222
  • notification.buttonBackground#DF4A16
  • notification.buttonForeground#fdfdfd
  • notification.buttonHoverBackground#343434
  • notification.errorBackground#FF794A
  • notification.errorForeground#fdfdfd
  • notification.foreground#fdfdfd
  • notification.infoBackground#60D4FD
  • notification.infoForeground#222222
  • notification.warningBackground#FFA267
  • notification.warningForeground#222222
  • panel.background#222222
  • panel.border#773F72
  • panelTitle.activeBorder#DF4A16
  • panelTitle.activeForeground#fdfdfd
  • panelTitle.inactiveForeground#c2c2c2
  • peekView.border#1BAEE23f
  • peekViewEditor.background#222222
  • peekViewEditor.matchHighlightBackground#FFDC9880
  • peekViewResult.background#222222
  • peekViewResult.fileForeground#fdfdfd
  • peekViewResult.lineForeground#fdfdfd
  • peekViewResult.matchHighlightBackground#FFDC9880
  • peekViewResult.selectionBackground#1BAEE23f
  • peekViewResult.selectionForeground#fdfdfd
  • peekViewTitle.background#1A1A1A
  • peekViewTitleDescription.foreground#97918F
  • peekViewTitleLabel.foreground#fdfdfd
  • pickerGroup.border#484848
  • pickerGroup.foreground#60D4FD
  • progressBar.background#FF9D88
  • scrollbar.shadow#1A1A1A
  • scrollbarSlider.activeBackground#c2c2c2
  • scrollbarSlider.background#343434
  • selection.background#773F72
  • sideBar.background#222222
  • sideBar.foreground#c2c2c2
  • sideBarSectionHeader.background#2C2C2C50
  • sideBarSectionHeader.border#1A1A1A
  • sideBarSectionHeader.foreground#c2c2c2
  • sideBarTitle.foreground#fdfdfd
  • statusBar.background#773F72
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#1A1A1A
  • statusBar.noFolderForeground#fdfdfd
  • statusBarItem.prominentBackground#FF794A
  • statusBarItem.prominentHoverBackground#FFA267
  • statusBarItem.remoteBackground#0C6D1A
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#222222
  • tab.activeBorderTop#DF4A16
  • tab.activeForeground#fdfdfd
  • tab.activeModifiedBorder#DF4A16
  • tab.border#1A1A1A
  • tab.inactiveBackground#2C2C2C
  • tab.inactiveForeground#c2c2c2
  • tab.inactiveModifiedBorder#773F72
  • terminal.ansiBlack#222222
  • terminal.ansiBlue#EE80D6
  • terminal.ansiBrightBlack#928986
  • terminal.ansiBrightBlue#FFA2EB
  • terminal.ansiBrightCyan#98E4FF
  • terminal.ansiBrightGreen#69FF94
  • terminal.ansiBrightMagenta#FFAEA0
  • terminal.ansiBrightRed#FF6D4C
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFF5BC
  • terminal.ansiCyan#60D4FD
  • terminal.ansiGreen#52D866
  • terminal.ansiMagenta#FF9D88
  • terminal.ansiRed#FF794A
  • terminal.ansiWhite#fdfdfd
  • terminal.ansiYellow#FFDC98
  • terminal.background#222222
  • terminal.foreground#fdfdfd
  • titleBar.activeBackground#2C2C2C
  • titleBar.activeForeground#fdfdfd
  • titleBar.inactiveBackground#222222
  • titleBar.inactiveForeground#c2c2c2
  • walkThrough.embeddedEditorBackground#222222
  • widget.shadow#1A1A1A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#EE80D6—
source#fdfdfd—
meta.diff, meta.diff.header#97918F—
markup.inserted#52D866—
markup.deleted#FF794A—
markup.changed#FFA267—
invalid#FF794Aunderline italic
invalid.deprecated#fdfdfdunderline italic
entity.name.filename#FFDC98—
markup.error#FF794A—
markup.underline—underline
markup.bold#FFA267bold
markup.heading#EE80D6bold
markup.italic#FFDC98italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#60D4FD—
markup.inline.raw, markup.raw.restructuredtext#52D866—
markup.underline.link, markup.underline.link.image#60D4FD—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#FF9D88—
entity.name.directive.restructuredtext, markup.quote#FFDC98italic
meta.separator.markdown#97918F—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#52D866—
punctuation.definition.constant.restructuredtext#EE80D6—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#EE80D6—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#fdfdfd—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#FFDC98—
entity.name.type.class, entity.name.class#60D4FDnormal
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#EE80D6italic
entity.other.inherited-class#60D4FDitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#97918F—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#FF9D88—
comment.block.documentation entity.name.type#60D4FDitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#60D4FD—
comment.block.documentation variable#FFA267italic
constant, variable.other.constant#EE80D6—
constant.character.escape, constant.character.string.escape, constant.regexp#FF9D88—
entity.name.tag#FF9D88—
entity.other.attribute-name.parent-selector#FF9D88—
entity.other.attribute-name#52D866italic
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#52D866—
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#FFA267italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#52D866italic
meta.decorator variable.other.object#52D866—
keyword, punctuation.definition.keyword#FF9D88—
keyword.control.new, keyword.operator.new—bold
meta.selector#FF9D88—
support#60D4FDitalic
support.function.magic, support.variable, variable.other.predefined#EE80D6regular
support.function, support.type.property-name—regular
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#FF9D88—
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#fdfdfd—
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#FF9D88—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#60D4FD—
constant.other.date, constant.other.timestamp#FFA267—
variable.other.alias.yaml#52D866italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#FF9D88regular
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#60D4FDitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFA267—
storage.modifier#FF9D88—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#FFDC98—
punctuation.definition.group.capture.regexp#FF9D88—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF794A—
punctuation.definition.character-class.regexp#60D4FD—
punctuation.definition.group.regexp#FFA267—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF794A—
meta.assertion.look-ahead.regexp#52D866—
string#FFDC98—
punctuation.definition.string.begin, punctuation.definition.string.end#FFF5BC—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#98E4FF—
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#97918F—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#fdfdfd—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FFA267italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#fdfdfdnormal
meta.selectionset.graphql variable#FFDC98—
meta.selectionset.graphql meta.arguments variable#fdfdfd—
entity.name.fragment.graphql, variable.fragment.graphql#60D4FD—
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#fdfdfd—
source.shell variable.other#EE80D6—
support.constant#EE80D6normal
meta.scope.prerequisites.makefile#FFDC98—
meta.attribute-selector.scss#FFDC98—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#fdfdfd—
meta.preprocessor.haskell#97918F—