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#006ab310
  • activityBar.activeBorder#6a267480
  • activityBar.background#212224
  • activityBar.foreground#c8c5c4
  • activityBar.inactiveForeground#807672
  • activityBarBadge.background#6a2674
  • activityBarBadge.foreground#212224
  • badge.background#000000
  • badge.foreground#c8c5c4
  • breadcrumb.activeSelectionForeground#c8c5c4
  • breadcrumb.background#212224
  • breadcrumb.focusForeground#c8c5c4
  • breadcrumb.foreground#807672
  • breadcrumbPicker.background#1e1a18
  • button.background#3d3430
  • button.foreground#c8c5c4
  • checkbox.background#3d3430
  • checkbox.border#1e1a18
  • checkbox.foreground#c8c5c4
  • contrastBorder#1e1a18
  • debugToolBar.background#3d3430
  • diffEditor.insertedTextBackground#12803320
  • diffEditor.removedTextBackground#cf0d1750
  • dropdown.background#212224
  • dropdown.border#1e1a18
  • dropdown.foreground#c8c5c4
  • editor.background#212224
  • editor.findMatchBackground#ffca3d80
  • editor.findMatchHighlightBackground#fefffe40
  • editor.findRangeHighlightBackground#5c4f4975
  • editor.foldBackground#3d3430
  • editor.foreground#c8c5c4
  • editor.hoverHighlightBackground#1e1a18
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#006ab315
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#212224
  • editor.snippetFinalTabstopHighlightBorder#128033
  • editor.snippetTabstopHighlightBackground#212224
  • editor.snippetTabstopHighlightBorder#807672
  • editor.wordHighlightBackground#38456350
  • editor.wordHighlightStrongBackground#12803350
  • editorCodeLens.foreground#807672
  • editorError.foreground#cf0d17
  • editorGroup.border#006ab3
  • editorGroup.dropBackground#5c4f4970
  • editorGroupHeader.tabsBackground#1e1a18
  • editorGutter.addedBackground#12803380
  • editorGutter.deletedBackground#cf0d1780
  • editorGutter.modifiedBackground#38456380
  • editorHoverWidget.background#212224
  • editorHoverWidget.border#807672
  • editorIndentGuide.activeBackground#fefffe45
  • editorIndentGuide.background#fefffe1A
  • editorLineNumber.foreground#807672
  • editorLink.activeForeground#384563
  • editorMarkerNavigation.background#3d3430
  • editorOverviewRuler.addedForeground#12803380
  • editorOverviewRuler.border#1e1a18
  • editorOverviewRuler.currentContentForeground#128033
  • editorOverviewRuler.deletedForeground#cf0d1780
  • editorOverviewRuler.errorForeground#cf0d1780
  • editorOverviewRuler.incomingContentForeground#006ab3
  • editorOverviewRuler.infoForeground#38456380
  • editorOverviewRuler.modifiedForeground#38456380
  • editorOverviewRuler.selectionHighlightForeground#ffca3d
  • editorOverviewRuler.warningForeground#ffca3d80
  • editorOverviewRuler.wordHighlightForeground#384563
  • editorOverviewRuler.wordHighlightStrongForeground#128033
  • editorRuler.foreground#fefffe1A
  • editorSuggestWidget.background#3d3430
  • editorSuggestWidget.foreground#c8c5c4
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#ffca3d
  • editorWhitespace.foreground#fefffe1A
  • editorWidget.background#3d3430
  • errorForeground#cf0d17
  • extensionButton.prominentBackground#12803390
  • extensionButton.prominentForeground#c8c5c4
  • extensionButton.prominentHoverBackground#12803360
  • focusBorder#807672
  • foreground#c8c5c4
  • gitDecoration.conflictingResourceForeground#ffca3d
  • gitDecoration.deletedResourceForeground#cf0d17
  • gitDecoration.ignoredResourceForeground#807672
  • gitDecoration.modifiedResourceForeground#384563
  • gitDecoration.untrackedResourceForeground#128033
  • input.background#212224
  • input.border#1e1a18
  • input.foreground#c8c5c4
  • input.placeholderForeground#807672
  • inputOption.activeBorder#006ab3
  • inputValidation.errorBackground#212224
  • inputValidation.errorBorder#cf0d17
  • inputValidation.errorForeground#cf0d17
  • inputValidation.infoBackground#212224
  • inputValidation.infoBorder#006ab3
  • inputValidation.infoForeground#006ab3
  • inputValidation.warningBackground#212224
  • inputValidation.warningBorder#ffca3d
  • inputValidation.warningForeground#ffca3d
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#c8c5c4
  • list.dropBackground#000000
  • list.errorForeground#cf0d17
  • list.focusBackground#5c4f4975
  • list.highlightForeground#384563
  • list.hoverBackground#5c4f4975
  • list.inactiveSelectionBackground#5c4f4975
  • list.warningForeground#ffca3d
  • listFilterWidget.background#212224
  • listFilterWidget.noMatchesOutline#cf0d17
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#12803390
  • merge.incomingHeaderBackground#006ab390
  • notification.background#212224
  • notification.buttonBackground#000000
  • notification.buttonForeground#c8c5c4
  • notification.buttonHoverBackground#5c4f4975
  • notification.errorBackground#cf0d17
  • notification.errorForeground#212224
  • notification.foreground#c8c5c4
  • notification.infoBackground#006ab3
  • notification.infoForeground#212224
  • notification.warningBackground#ffca3d
  • notification.warningForeground#212224
  • notificationCenter.border#3d3430
  • notificationCenterHeader.background#212224
  • notificationCenterHeader.foreground#c8c5c4
  • notificationLink.foreground#384563
  • notifications.background#212224
  • notifications.border#3d3430
  • notifications.foreground#c8c5c4
  • notificationsErrorIcon.foreground#cf0d17
  • notificationsInfoIcon.foreground#006ab3
  • notificationsWarningIcon.foreground#ffca3d
  • notificationToast.border#3d3430
  • panel.background#212224
  • panel.border#006ab3
  • panelInput.border#c8c5c4
  • panelTitle.activeBorder#6a2674
  • panelTitle.activeForeground#c8c5c4
  • panelTitle.inactiveForeground#807672
  • peekView.border#000000
  • peekViewEditor.background#212224
  • peekViewEditor.matchHighlightBackground#fff11f80
  • peekViewResult.background#3d3430
  • peekViewResult.fileForeground#c8c5c4
  • peekViewResult.lineForeground#c8c5c4
  • peekViewResult.matchHighlightBackground#fff11f80
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#c8c5c4
  • peekViewTitle.background#1e1a18
  • peekViewTitleDescription.foreground#807672
  • peekViewTitleLabel.foreground#c8c5c4
  • pickerGroup.border#006ab3
  • pickerGroup.foreground#384563
  • progressBar.background#6a2674
  • scrollbar.shadow#444444
  • selection.background#006ab3
  • settings.checkboxBackground#3d3430
  • settings.checkboxBorder#1e1a18
  • settings.checkboxForeground#c8c5c4
  • settings.dropdownBackground#3d3430
  • settings.dropdownBorder#1e1a18
  • settings.dropdownForeground#c8c5c4
  • settings.headerForeground#c8c5c4
  • settings.modifiedItemIndicator#ffca3d
  • settings.numberInputBackground#3d3430
  • settings.numberInputBorder#1e1a18
  • settings.numberInputForeground#c8c5c4
  • settings.textInputBackground#3d3430
  • settings.textInputBorder#1e1a18
  • settings.textInputForeground#c8c5c4
  • sideBar.background#3d3430
  • sideBarSectionHeader.background#212224
  • sideBarSectionHeader.border#1e1a18
  • sideBarTitle.foreground#c8c5c4
  • statusBar.background#1e1a18
  • statusBar.debuggingBackground#cf0d17
  • statusBar.debuggingForeground#1e1a18
  • statusBar.foreground#c8c5c4
  • statusBar.noFolderBackground#1e1a18
  • statusBar.noFolderForeground#c8c5c4
  • statusBarItem.prominentBackground#cf0d17
  • statusBarItem.prominentHoverBackground#ffca3d
  • statusBarItem.remoteBackground#006ab3
  • statusBarItem.remoteForeground#212224
  • tab.activeBackground#212224
  • tab.activeBorderTop#6a267480
  • tab.activeForeground#c8c5c4
  • tab.border#1e1a18
  • tab.inactiveBackground#3d3430
  • tab.inactiveForeground#807672
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#006ab3
  • terminal.ansiBrightBlack#5c4f49
  • terminal.ansiBrightBlue#4fc2fd
  • terminal.ansiBrightCyan#5c4f49
  • terminal.ansiBrightGreen#b1d130
  • terminal.ansiBrightMagenta#de0070
  • terminal.ansiBrightRed#ef7d17
  • terminal.ansiBrightWhite#fefffe
  • terminal.ansiBrightYellow#fff11f
  • terminal.ansiCyan#384563
  • terminal.ansiGreen#128033
  • terminal.ansiMagenta#6a2674
  • terminal.ansiRed#cf0d17
  • terminal.ansiWhite#ededed
  • terminal.ansiYellow#ffca3d
  • terminal.background#212224
  • terminal.border#c8c5c4
  • terminal.foreground#c8c5c4
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#3d3430
  • titleBar.activeBackground#3d3430
  • titleBar.activeForeground#c8c5c4
  • titleBar.inactiveBackground#1e1a18
  • titleBar.inactiveForeground#807672
  • walkThrough.embeddedEditorBackground#3d3430
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#5c4f4975
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#006ab3
source#c8c5c4
meta.diff, meta.diff.header#807672
markup.inserted#128033
markup.deleted#cf0d17
markup.changed#ffca3d
invalid#cf0d17underline italic
invalid.deprecated#c8c5c4underline italic
entity.name.filename#fff11f
markup.error#cf0d17
markup.underlineunderline
markup.bold#ffca3dbold
markup.heading#006ab3bold
markup.italic#fff11fitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#384563
markup.inline.raw, markup.raw.restructuredtext#128033
markup.underline.link, markup.underline.link.image#384563
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#6a2674
entity.name.directive.restructuredtext, markup.quote#fff11fitalic
meta.separator.markdown#807672
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#128033
punctuation.definition.constant.restructuredtext#006ab3
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#006ab3
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#c8c5c4
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fff11f
entity.name.type.class, entity.name.class#384563normal
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#006ab3italic
entity.other.inherited-class#384563italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#807672
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#6a2674
comment.block.documentation entity.name.type#384563italic
comment.block.documentation entity.name.type punctuation.definition.bracket#384563
comment.block.documentation variable#ffca3ditalic
constant, variable.other.constant#006ab3
constant.character.escape, constant.character.string.escape, constant.regexp#6a2674
entity.name.tag#6a2674
entity.other.attribute-name.parent-selector#6a2674
entity.other.attribute-name#128033italic
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#128033
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#ffca3ditalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#128033italic
meta.decorator variable.other.object#128033
keyword, punctuation.definition.keyword#6a2674
keyword.control.new, keyword.operator.newbold
meta.selector#6a2674
support#384563italic
support.function.magic, support.variable, variable.other.predefined#006ab3regular
support.function, support.type.property-nameregular
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#6a2674
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#c8c5c4
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#6a2674
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#384563
constant.other.date, constant.other.timestamp#ffca3d
variable.other.alias.yaml#128033italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#6a2674regular
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#384563italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ffca3d
storage.modifier#6a2674
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fff11f
punctuation.definition.group.capture.regexp#6a2674
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#cf0d17
punctuation.definition.character-class.regexp#384563
punctuation.definition.group.regexp#ffca3d
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#cf0d17
meta.assertion.look-ahead.regexp#128033
string#fff11f
punctuation.definition.string.begin, punctuation.definition.string.end#4fc2fd
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#006ab3
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#807672
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#c8c5c4
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ffca3ditalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#c8c5c4normal
meta.selectionset.graphql variable#fff11f
meta.selectionset.graphql meta.arguments variable#c8c5c4
entity.name.fragment.graphql, variable.fragment.graphql#384563
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#c8c5c4
source.shell variable.other#006ab3
support.constant#006ab3normal
meta.scope.prerequisites.makefile#fff11f
meta.attribute-selector.scss#fff11f
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#c8c5c4
meta.preprocessor.haskell#807672