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#9B8AE010
  • activityBar.activeBorder#CF6B8E80
  • activityBar.background#142C22
  • activityBar.foreground#f2f2f2
  • activityBar.inactiveForeground#717874
  • activityBarBadge.background#bb7f94
  • activityBarBadge.foreground#f2f2f2
  • badge.background#1C3A2D
  • badge.foreground#f2f2f2
  • breadcrumb.activeSelectionForeground#f2f2f2
  • breadcrumb.background#0D1F17
  • breadcrumb.focusForeground#f2f2f2
  • breadcrumb.foreground#717874
  • breadcrumbPicker.background#06110C
  • button.background#1C3A2D
  • button.foreground#f2f2f2
  • button.secondaryBackground#0D1F17
  • button.secondaryForeground#f2f2f2
  • button.secondaryHoverBackground#142C22
  • debugToolBar.background#0d1511
  • diffEditor.insertedTextBackground#33B07420
  • diffEditor.removedTextBackground#E05D5750
  • dropdown.background#142C22
  • dropdown.border#06110C
  • dropdown.foreground#f2f2f2
  • editor.background#0D1F17
  • editor.findMatchBackground#E8A84C80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#1C3A2D75
  • editor.foldBackground#0A181280
  • editor.foreground#f2f2f2
  • editor.hoverHighlightBackground#3ECF8E50
  • editor.lineHighlightBorder#1C3A2D
  • editor.rangeHighlightBackground#9B8AE015
  • editor.selectionBackground#1C3A2D
  • editor.selectionHighlightBackground#1C3A2D
  • editor.snippetFinalTabstopHighlightBackground#0D1F17
  • editor.snippetFinalTabstopHighlightBorder#4a9973
  • editor.snippetTabstopHighlightBackground#0D1F17
  • editor.snippetTabstopHighlightBorder#717874
  • editor.wordHighlightBackground#3ECF8E50
  • editor.wordHighlightStrongBackground#33B07450
  • editorBracketHighlight.foreground1#f2f2f2
  • editorBracketHighlight.foreground2#bb7f94
  • editorBracketHighlight.foreground3#56b78b
  • editorBracketHighlight.foreground4#4a9973
  • editorBracketHighlight.foreground5#a499d1
  • editorBracketHighlight.foreground6#E8A84C
  • editorBracketHighlight.unexpectedBracket.foreground#cc6f6b
  • editorCodeLens.foreground#717874
  • editorError.foreground#cc6f6b
  • editorGroup.border#a499d1
  • editorGroup.dropBackground#1C3A2D70
  • editorGroupHeader.tabsBackground#06110C
  • editorGutter.addedBackground#33B07480
  • editorGutter.deletedBackground#E05D5780
  • editorGutter.modifiedBackground#3ECF8E80
  • editorHoverWidget.background#0D1F17
  • editorHoverWidget.border#717874
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#717874
  • editorLink.activeForeground#56b78b
  • editorMarkerNavigation.background#0d1511
  • editorOverviewRuler.addedForeground#33B07480
  • editorOverviewRuler.border#06110C
  • editorOverviewRuler.currentContentForeground#4a9973
  • editorOverviewRuler.deletedForeground#E05D5780
  • editorOverviewRuler.errorForeground#E05D5780
  • editorOverviewRuler.incomingContentForeground#a499d1
  • editorOverviewRuler.infoForeground#3ECF8E80
  • editorOverviewRuler.modifiedForeground#3ECF8E80
  • editorOverviewRuler.selectionHighlightForeground#E8A84C
  • editorOverviewRuler.warningForeground#E8A84C80
  • editorOverviewRuler.wordHighlightForeground#56b78b
  • editorOverviewRuler.wordHighlightStrongForeground#4a9973
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#0d1511
  • editorSuggestWidget.foreground#f2f2f2
  • editorSuggestWidget.selectedBackground#1C3A2D
  • editorWarning.foreground#56b78b
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#0d1511
  • errorForeground#cc6f6b
  • extensionButton.prominentBackground#33B07490
  • extensionButton.prominentForeground#f2f2f2
  • extensionButton.prominentHoverBackground#33B07460
  • focusBorder#717874
  • foreground#f2f2f2
  • gitDecoration.conflictingResourceForeground#E8A84C
  • gitDecoration.deletedResourceForeground#cc6f6b
  • gitDecoration.ignoredResourceForeground#717874
  • gitDecoration.modifiedResourceForeground#56b78b
  • gitDecoration.untrackedResourceForeground#4a9973
  • inlineChat.regionHighlight#142C22
  • input.background#0D1F17
  • input.border#06110C
  • input.foreground#f2f2f2
  • input.placeholderForeground#717874
  • inputOption.activeBorder#a499d1
  • inputValidation.errorBorder#cc6f6b
  • inputValidation.infoBorder#bb7f94
  • inputValidation.warningBorder#E8A84C
  • list.activeSelectionBackground#1C3A2D
  • list.activeSelectionForeground#f2f2f2
  • list.dropBackground#1C3A2D
  • list.errorForeground#cc6f6b
  • list.focusBackground#1C3A2D75
  • list.highlightForeground#56b78b
  • list.hoverBackground#1C3A2D75
  • list.inactiveSelectionBackground#1C3A2D75
  • list.warningForeground#E8A84C
  • listFilterWidget.background#142C22
  • listFilterWidget.noMatchesOutline#cc6f6b
  • listFilterWidget.outline#1C3A2D
  • merge.currentHeaderBackground#33B07490
  • merge.incomingHeaderBackground#9B8AE090
  • panel.background#0D1F17
  • panel.border#a499d1
  • panelTitle.activeBorder#bb7f94
  • panelTitle.activeForeground#f2f2f2
  • panelTitle.inactiveForeground#717874
  • peekView.border#1C3A2D
  • peekViewEditor.background#0D1F17
  • peekViewEditor.matchHighlightBackground#E0D94C80
  • peekViewResult.background#0d1511
  • peekViewResult.fileForeground#f2f2f2
  • peekViewResult.lineForeground#f2f2f2
  • peekViewResult.matchHighlightBackground#E0D94C80
  • peekViewResult.selectionBackground#1C3A2D
  • peekViewResult.selectionForeground#f2f2f2
  • peekViewTitle.background#06110C
  • peekViewTitleDescription.foreground#717874
  • peekViewTitleLabel.foreground#f2f2f2
  • pickerGroup.border#a499d1
  • pickerGroup.foreground#56b78b
  • progressBar.background#bb7f94
  • selection.background#a499d1
  • settings.checkboxBackground#0d1511
  • settings.checkboxBorder#06110C
  • settings.checkboxForeground#f2f2f2
  • settings.dropdownBackground#0d1511
  • settings.dropdownBorder#06110C
  • settings.dropdownForeground#f2f2f2
  • settings.headerForeground#f2f2f2
  • settings.modifiedItemIndicator#E8A84C
  • settings.numberInputBackground#0d1511
  • settings.numberInputBorder#06110C
  • settings.numberInputForeground#f2f2f2
  • settings.textInputBackground#0d1511
  • settings.textInputBorder#06110C
  • settings.textInputForeground#f2f2f2
  • sideBar.background#0d1511
  • sideBarSectionHeader.background#0D1F17
  • sideBarSectionHeader.border#06110C
  • sideBarTitle.foreground#f2f2f2
  • statusBar.background#06110C
  • statusBar.debuggingBackground#cc6f6b
  • statusBar.debuggingForeground#06110C
  • statusBar.foreground#f2f2f2
  • statusBar.noFolderBackground#06110C
  • statusBar.noFolderForeground#f2f2f2
  • statusBarItem.prominentBackground#cc6f6b
  • statusBarItem.prominentHoverBackground#E8A84C
  • statusBarItem.remoteBackground#a499d1
  • statusBarItem.remoteForeground#0D1F17
  • tab.activeBackground#0D1F17
  • tab.activeBorderTop#CF6B8E80
  • tab.activeForeground#f2f2f2
  • tab.border#06110C
  • tab.inactiveBackground#0d1511
  • tab.inactiveForeground#717874
  • terminal.ansiBlack#0d1511
  • terminal.ansiBlue#a499d1
  • terminal.ansiBrightBlack#717874
  • terminal.ansiBrightBlue#b7abe5
  • terminal.ansiBrightCyan#72c6bf
  • terminal.ansiBrightGreen#56b78b
  • terminal.ansiBrightMagenta#c791a5
  • terminal.ansiBrightRed#d88782
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#d6d178
  • terminal.ansiCyan#56b78b
  • terminal.ansiGreen#4a9973
  • terminal.ansiMagenta#bb7f94
  • terminal.ansiRed#cc6f6b
  • terminal.ansiWhite#f2f2f2
  • terminal.ansiYellow#cbc661
  • terminal.background#0D1F17
  • terminal.foreground#f2f2f2
  • titleBar.activeBackground#0d1511
  • titleBar.activeForeground#f2f2f2
  • titleBar.inactiveBackground#06110C
  • titleBar.inactiveForeground#717874
  • walkThrough.embeddedEditorBackground#0d1511

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#a499d1—
meta.diff, meta.diff.header#717874—
markup.inserted#4a9973—
markup.deleted#cc6f6b—
markup.changed#E8A84C—
invalid#cc6f6bunderline italic
invalid.deprecated#f2f2f2underline italic
entity.name.filename#cbc661—
markup.error#cc6f6b—
markup.underline—underline
markup.bold#E8A84Cbold
markup.heading#a499d1bold
markup.italic#cbc661italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#56b78b—
markup.inline.raw, markup.raw.restructuredtext#4a9973—
markup.underline.link, markup.underline.link.image#56b78b—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#bb7f94—
entity.name.directive.restructuredtext, markup.quote#cbc661italic
meta.separator.markdown#717874—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#4a9973—
punctuation.definition.constant.restructuredtext#a499d1—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#a499d1—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#f2f2f2—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#cbc661—
entity.name.type.class, entity.name.class#56b78bnormal
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#a499d1italic
entity.other.inherited-class#56b78bitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#717874—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#bb7f94—
comment.block.documentation entity.name.type#56b78bitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#56b78b—
comment.block.documentation variable#E8A84Citalic
constant, variable.other.constant#a499d1—
constant.character.escape, constant.character.string.escape, constant.regexp#bb7f94—
entity.name.tag#bb7f94—
entity.other.attribute-name.parent-selector#bb7f94—
entity.other.attribute-name#4a9973italic
entity.name.function, 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#4a9973—
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#E8A84Citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#4a9973italic
meta.decorator variable.other.object#4a9973—
keyword, punctuation.definition.keyword#bb7f94—
keyword.control.new, keyword.operator.new—bold
meta.selector#bb7f94—
support#56b78bitalic
support.function.magic, support.variable, variable.other.predefined#a499d1regular
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#bb7f94—
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, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#f2f2f2—
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#bb7f94—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#56b78b—
constant.other.date, constant.other.timestamp#E8A84C—
variable.other.alias.yaml#4a9973italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#bb7f94regular
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#56b78bitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E8A84C—
storage.modifier#bb7f94—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#cbc661—
punctuation.definition.group.capture.regexp#bb7f94—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#cc6f6b—
punctuation.definition.character-class.regexp#56b78b—
punctuation.definition.group.regexp#E8A84C—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#cc6f6b—
meta.assertion.look-ahead.regexp#4a9973—
string#cbc661—
punctuation.definition.string.begin, punctuation.definition.string.end#d6d178—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#72c6bf—
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#717874—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#f2f2f2—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#E8A84Citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#f2f2f2normal
meta.selectionset.graphql variable#cbc661—
meta.selectionset.graphql meta.arguments variable#f2f2f2—
entity.name.fragment.graphql, variable.fragment.graphql#56b78b—
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#f2f2f2—
source.shell variable.other#a499d1—
support.constant#a499d1normal
meta.scope.prerequisites.makefile#cbc661—
meta.attribute-selector.scss#cbc661—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#f2f2f2—
meta.preprocessor.haskell#717874—
log.error#cc6f6bbold
log.warning#cbc661bold