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#8f8aac10
  • activityBar.activeBorder#ac8aac80
  • activityBar.background#0f0f0f
  • activityBar.foreground#cacaca
  • activityBar.inactiveForeground#393939
  • activityBarBadge.background#ac8aac
  • activityBarBadge.foreground#0f0f0f
  • badge.background#191919
  • badge.foreground#cacaca
  • breadcrumb.activeSelectionForeground#cacaca
  • breadcrumb.background#0f0f0f
  • breadcrumb.focusForeground#cacaca
  • breadcrumb.foreground#393939
  • breadcrumbPicker.background#0a0a0a
  • button.background#0d0d0d
  • button.foreground#cacaca
  • checkbox.background#0d0d0d
  • checkbox.border#0a0a0a
  • checkbox.foreground#cacaca
  • contrastBorder#0a0a0a
  • debugToolBar.background#0d0d0d
  • diffEditor.insertedTextBackground#8aac8b20
  • diffEditor.removedTextBackground#ac8a8c50
  • dropdown.background#0f0f0f
  • dropdown.border#0a0a0a
  • dropdown.foreground#cacaca
  • editor.background#0f0f0f
  • editor.findMatchBackground#c6a67980
  • editor.findMatchHighlightBackground#f0f0f040
  • editor.findRangeHighlightBackground#26262675
  • editor.foldBackground#0d0d0d
  • editor.foreground#cacaca
  • editor.hoverHighlightBackground#0a0a0a
  • editor.lineHighlightBorder#191919
  • editor.rangeHighlightBackground#8f8aac15
  • editor.selectionBackground#191919
  • editor.selectionHighlightBackground#191919
  • editor.snippetFinalTabstopHighlightBackground#0f0f0f
  • editor.snippetFinalTabstopHighlightBorder#8aac8b
  • editor.snippetTabstopHighlightBackground#0f0f0f
  • editor.snippetTabstopHighlightBorder#393939
  • editor.wordHighlightBackground#8aabac50
  • editor.wordHighlightStrongBackground#8aac8b50
  • editorCodeLens.foreground#393939
  • editorError.foreground#ac8a8c
  • editorGroup.border#8f8aac
  • editorGroup.dropBackground#26262670
  • editorGroupHeader.tabsBackground#0a0a0a
  • editorGutter.addedBackground#8aac8b80
  • editorGutter.deletedBackground#ac8a8c80
  • editorGutter.modifiedBackground#8aabac80
  • editorHoverWidget.background#0f0f0f
  • editorHoverWidget.border#393939
  • editorIndentGuide.activeBackground#f0f0f045
  • editorIndentGuide.background#f0f0f01A
  • editorLineNumber.foreground#393939
  • editorLink.activeForeground#8aabac
  • editorMarkerNavigation.background#0d0d0d
  • editorOverviewRuler.addedForeground#8aac8b80
  • editorOverviewRuler.border#0a0a0a
  • editorOverviewRuler.currentContentForeground#8aac8b
  • editorOverviewRuler.deletedForeground#ac8a8c80
  • editorOverviewRuler.errorForeground#ac8a8c80
  • editorOverviewRuler.incomingContentForeground#8f8aac
  • editorOverviewRuler.infoForeground#8aabac80
  • editorOverviewRuler.modifiedForeground#8aabac80
  • editorOverviewRuler.selectionHighlightForeground#c6a679
  • editorOverviewRuler.warningForeground#c6a67980
  • editorOverviewRuler.wordHighlightForeground#8aabac
  • editorOverviewRuler.wordHighlightStrongForeground#8aac8b
  • editorRuler.foreground#f0f0f01A
  • editorSuggestWidget.background#0d0d0d
  • editorSuggestWidget.foreground#cacaca
  • editorSuggestWidget.selectedBackground#191919
  • editorWarning.foreground#c6a679
  • editorWhitespace.foreground#f0f0f01A
  • editorWidget.background#0d0d0d
  • errorForeground#ac8a8c
  • extensionButton.prominentBackground#8aac8b90
  • extensionButton.prominentForeground#cacaca
  • extensionButton.prominentHoverBackground#8aac8b60
  • focusBorder#393939
  • foreground#cacaca
  • gitDecoration.conflictingResourceForeground#c6a679
  • gitDecoration.deletedResourceForeground#ac8a8c
  • gitDecoration.ignoredResourceForeground#393939
  • gitDecoration.modifiedResourceForeground#8aabac
  • gitDecoration.untrackedResourceForeground#8aac8b
  • input.background#0f0f0f
  • input.border#0a0a0a
  • input.foreground#cacaca
  • input.placeholderForeground#393939
  • inputOption.activeBorder#8f8aac
  • inputValidation.errorBackground#0f0f0f
  • inputValidation.errorBorder#ac8a8c
  • inputValidation.errorForeground#ac8a8c
  • inputValidation.infoBackground#0f0f0f
  • inputValidation.infoBorder#8f8aac
  • inputValidation.infoForeground#8f8aac
  • inputValidation.warningBackground#0f0f0f
  • inputValidation.warningBorder#c6a679
  • inputValidation.warningForeground#c6a679
  • list.activeSelectionBackground#191919
  • list.activeSelectionForeground#cacaca
  • list.dropBackground#191919
  • list.errorForeground#ac8a8c
  • list.focusBackground#26262675
  • list.highlightForeground#8aabac
  • list.hoverBackground#26262675
  • list.inactiveSelectionBackground#26262675
  • list.warningForeground#c6a679
  • listFilterWidget.background#0f0f0f
  • listFilterWidget.noMatchesOutline#ac8a8c
  • listFilterWidget.outline#191919
  • merge.currentHeaderBackground#8aac8b90
  • merge.incomingHeaderBackground#8f8aac90
  • notification.background#0f0f0f
  • notification.buttonBackground#191919
  • notification.buttonForeground#cacaca
  • notification.buttonHoverBackground#26262675
  • notification.errorBackground#ac8a8c
  • notification.errorForeground#0f0f0f
  • notification.foreground#cacaca
  • notification.infoBackground#8f8aac
  • notification.infoForeground#0f0f0f
  • notification.warningBackground#c6a679
  • notification.warningForeground#0f0f0f
  • notificationCenter.border#0d0d0d
  • notificationCenterHeader.background#0f0f0f
  • notificationCenterHeader.foreground#cacaca
  • notificationLink.foreground#8aabac
  • notifications.background#0f0f0f
  • notifications.border#0d0d0d
  • notifications.foreground#cacaca
  • notificationsErrorIcon.foreground#ac8a8c
  • notificationsInfoIcon.foreground#8f8aac
  • notificationsWarningIcon.foreground#c6a679
  • notificationToast.border#0d0d0d
  • panel.background#0f0f0f
  • panel.border#8f8aac
  • panelInput.border#cacaca
  • panelTitle.activeBorder#ac8aac
  • panelTitle.activeForeground#cacaca
  • panelTitle.inactiveForeground#393939
  • peekView.border#191919
  • peekViewEditor.background#0f0f0f
  • peekViewEditor.matchHighlightBackground#c4c19e80
  • peekViewResult.background#0d0d0d
  • peekViewResult.fileForeground#cacaca
  • peekViewResult.lineForeground#cacaca
  • peekViewResult.matchHighlightBackground#c4c19e80
  • peekViewResult.selectionBackground#191919
  • peekViewResult.selectionForeground#cacaca
  • peekViewTitle.background#0a0a0a
  • peekViewTitleDescription.foreground#393939
  • peekViewTitleLabel.foreground#cacaca
  • pickerGroup.border#8f8aac
  • pickerGroup.foreground#8aabac
  • progressBar.background#ac8aac
  • scrollbar.shadow#444444
  • selection.background#8f8aac
  • settings.checkboxBackground#0d0d0d
  • settings.checkboxBorder#0a0a0a
  • settings.checkboxForeground#cacaca
  • settings.dropdownBackground#0d0d0d
  • settings.dropdownBorder#0a0a0a
  • settings.dropdownForeground#cacaca
  • settings.headerForeground#cacaca
  • settings.modifiedItemIndicator#c6a679
  • settings.numberInputBackground#0d0d0d
  • settings.numberInputBorder#0a0a0a
  • settings.numberInputForeground#cacaca
  • settings.textInputBackground#0d0d0d
  • settings.textInputBorder#0a0a0a
  • settings.textInputForeground#cacaca
  • sideBar.background#0d0d0d
  • sideBarSectionHeader.background#0f0f0f
  • sideBarSectionHeader.border#0a0a0a
  • sideBarTitle.foreground#cacaca
  • statusBar.background#0a0a0a
  • statusBar.debuggingBackground#ac8a8c
  • statusBar.debuggingForeground#0a0a0a
  • statusBar.foreground#cacaca
  • statusBar.noFolderBackground#0a0a0a
  • statusBar.noFolderForeground#cacaca
  • statusBarItem.prominentBackground#ac8a8c
  • statusBarItem.prominentHoverBackground#c6a679
  • statusBarItem.remoteBackground#8f8aac
  • statusBarItem.remoteForeground#0f0f0f
  • tab.activeBackground#0f0f0f
  • tab.activeBorderTop#ac8aac80
  • tab.activeForeground#cacaca
  • tab.border#0a0a0a
  • tab.inactiveBackground#0d0d0d
  • tab.inactiveForeground#393939
  • terminal.ansiBlack#191919
  • terminal.ansiBlue#8f8aac
  • terminal.ansiBrightBlack#262626
  • terminal.ansiBrightBlue#a39ec4
  • terminal.ansiBrightCyan#9ec3c4
  • terminal.ansiBrightGreen#9ec49f
  • terminal.ansiBrightMagenta#c49ec4
  • terminal.ansiBrightRed#c49ea0
  • terminal.ansiBrightWhite#f0f0f0
  • terminal.ansiBrightYellow#c4c19e
  • terminal.ansiCyan#8aabac
  • terminal.ansiGreen#8aac8b
  • terminal.ansiMagenta#ac8aac
  • terminal.ansiRed#ac8a8c
  • terminal.ansiWhite#e7e7e7
  • terminal.ansiYellow#c6a679
  • terminal.background#0f0f0f
  • terminal.border#cacaca
  • terminal.foreground#cacaca
  • terminal.selectionBackground#19191950
  • textBlockQuote.background#0d0d0d
  • titleBar.activeBackground#0d0d0d
  • titleBar.activeForeground#cacaca
  • titleBar.inactiveBackground#0a0a0a
  • titleBar.inactiveForeground#393939
  • walkThrough.embeddedEditorBackground#0d0d0d
  • welcomePage.buttonBackground#191919
  • welcomePage.buttonHoverBackground#26262675
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#8f8aac
source#cacaca
meta.diff, meta.diff.header#393939
markup.inserted#8aac8b
markup.deleted#ac8a8c
markup.changed#c6a679
invalid#ac8a8cunderline italic
invalid.deprecated#cacacaunderline italic
entity.name.filename#c4c19e
markup.error#ac8a8c
markup.underlineunderline
markup.bold#c6a679bold
markup.heading#8f8aacbold
markup.italic#c4c19eitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8aabac
markup.inline.raw, markup.raw.restructuredtext#8aac8b
markup.underline.link, markup.underline.link.image#8aabac
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ac8aac
entity.name.directive.restructuredtext, markup.quote#c4c19eitalic
meta.separator.markdown#393939
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#8aac8b
punctuation.definition.constant.restructuredtext#8f8aac
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#8f8aac
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#cacaca
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#c4c19e
entity.name.type.class, entity.name.class#8aabacnormal
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#8f8aacitalic
entity.other.inherited-class#8aabacitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#393939
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ac8aac
comment.block.documentation entity.name.type#8aabacitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#8aabac
comment.block.documentation variable#c6a679italic
constant, variable.other.constant#8f8aac
constant.character.escape, constant.character.string.escape, constant.regexp#ac8aac
entity.name.tag#ac8aac
entity.other.attribute-name.parent-selector#ac8aac
entity.other.attribute-name#8aac8bitalic
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#8aac8b
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#c6a679italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#8aac8bitalic
meta.decorator variable.other.object#8aac8b
keyword, punctuation.definition.keyword#ac8aac
keyword.control.new, keyword.operator.newbold
meta.selector#ac8aac
support#8aabacitalic
support.function.magic, support.variable, variable.other.predefined#8f8aacregular
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#ac8aac
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#cacaca
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#ac8aac
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#8aabac
constant.other.date, constant.other.timestamp#c6a679
variable.other.alias.yaml#8aac8bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ac8aacregular
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#8aabacitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#c6a679
storage.modifier#ac8aac
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#c4c19e
punctuation.definition.group.capture.regexp#ac8aac
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ac8a8c
punctuation.definition.character-class.regexp#8aabac
punctuation.definition.group.regexp#c6a679
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ac8a8c
meta.assertion.look-ahead.regexp#8aac8b
string#c4c19e
punctuation.definition.string.begin, punctuation.definition.string.end#aca98a
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8f8aac
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#393939
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#cacaca
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#c6a679italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#cacacanormal
meta.selectionset.graphql variable#c4c19e
meta.selectionset.graphql meta.arguments variable#cacaca
entity.name.fragment.graphql, variable.fragment.graphql#8aabac
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#cacaca
source.shell variable.other#8f8aac
support.constant#8f8aacnormal
meta.scope.prerequisites.makefile#c4c19e
meta.attribute-selector.scss#c4c19e
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#cacaca
meta.preprocessor.haskell#393939
Tinted VSCode by Tinted Theming - VS Code Theme