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#7372c310
  • activityBar.activeBorder#c372c280
  • activityBar.background#29262f
  • activityBar.foreground#afafaf
  • activityBar.inactiveForeground#5b5b5b
  • activityBarBadge.background#c372c2
  • activityBarBadge.foreground#29262f
  • badge.background#000000
  • badge.foreground#afafaf
  • breadcrumb.activeSelectionForeground#afafaf
  • breadcrumb.background#29262f
  • breadcrumb.focusForeground#afafaf
  • breadcrumb.foreground#5b5b5b
  • breadcrumbPicker.background#101010
  • button.background#212121
  • button.foreground#afafaf
  • checkbox.background#212121
  • checkbox.border#101010
  • checkbox.foreground#afafaf
  • contrastBorder#101010
  • debugToolBar.background#212121
  • diffEditor.insertedTextBackground#72c37320
  • diffEditor.removedTextBackground#c3737250
  • dropdown.background#29262f
  • dropdown.border#101010
  • dropdown.foreground#afafaf
  • editor.background#29262f
  • editor.findMatchBackground#c2c37280
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#32323275
  • editor.foldBackground#212121
  • editor.foreground#afafaf
  • editor.hoverHighlightBackground#101010
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#7372c315
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#29262f
  • editor.snippetFinalTabstopHighlightBorder#72c373
  • editor.snippetTabstopHighlightBackground#29262f
  • editor.snippetTabstopHighlightBorder#5b5b5b
  • editor.wordHighlightBackground#72c2c350
  • editor.wordHighlightStrongBackground#72c37350
  • editorCodeLens.foreground#5b5b5b
  • editorError.foreground#c37372
  • editorGroup.border#7372c3
  • editorGroup.dropBackground#32323270
  • editorGroupHeader.tabsBackground#101010
  • editorGutter.addedBackground#72c37380
  • editorGutter.deletedBackground#c3737280
  • editorGutter.modifiedBackground#72c2c380
  • editorHoverWidget.background#29262f
  • editorHoverWidget.border#5b5b5b
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#5b5b5b
  • editorLink.activeForeground#72c2c3
  • editorMarkerNavigation.background#212121
  • editorOverviewRuler.addedForeground#72c37380
  • editorOverviewRuler.border#101010
  • editorOverviewRuler.currentContentForeground#72c373
  • editorOverviewRuler.deletedForeground#c3737280
  • editorOverviewRuler.errorForeground#c3737280
  • editorOverviewRuler.incomingContentForeground#7372c3
  • editorOverviewRuler.infoForeground#72c2c380
  • editorOverviewRuler.modifiedForeground#72c2c380
  • editorOverviewRuler.selectionHighlightForeground#c2c372
  • editorOverviewRuler.warningForeground#c2c37280
  • editorOverviewRuler.wordHighlightForeground#72c2c3
  • editorOverviewRuler.wordHighlightStrongForeground#72c373
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#212121
  • editorSuggestWidget.foreground#afafaf
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#c2c372
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#212121
  • errorForeground#c37372
  • extensionButton.prominentBackground#72c37390
  • extensionButton.prominentForeground#afafaf
  • extensionButton.prominentHoverBackground#72c37360
  • focusBorder#5b5b5b
  • foreground#afafaf
  • gitDecoration.conflictingResourceForeground#c2c372
  • gitDecoration.deletedResourceForeground#c37372
  • gitDecoration.ignoredResourceForeground#5b5b5b
  • gitDecoration.modifiedResourceForeground#72c2c3
  • gitDecoration.untrackedResourceForeground#72c373
  • input.background#29262f
  • input.border#101010
  • input.foreground#afafaf
  • input.placeholderForeground#5b5b5b
  • inputOption.activeBorder#7372c3
  • inputValidation.errorBackground#29262f
  • inputValidation.errorBorder#c37372
  • inputValidation.errorForeground#c37372
  • inputValidation.infoBackground#29262f
  • inputValidation.infoBorder#7372c3
  • inputValidation.infoForeground#7372c3
  • inputValidation.warningBackground#29262f
  • inputValidation.warningBorder#c2c372
  • inputValidation.warningForeground#c2c372
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#afafaf
  • list.dropBackground#000000
  • list.errorForeground#c37372
  • list.focusBackground#32323275
  • list.highlightForeground#72c2c3
  • list.hoverBackground#32323275
  • list.inactiveSelectionBackground#32323275
  • list.warningForeground#c2c372
  • listFilterWidget.background#29262f
  • listFilterWidget.noMatchesOutline#c37372
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#72c37390
  • merge.incomingHeaderBackground#7372c390
  • notification.background#29262f
  • notification.buttonBackground#000000
  • notification.buttonForeground#afafaf
  • notification.buttonHoverBackground#32323275
  • notification.errorBackground#c37372
  • notification.errorForeground#29262f
  • notification.foreground#afafaf
  • notification.infoBackground#7372c3
  • notification.infoForeground#29262f
  • notification.warningBackground#c2c372
  • notification.warningForeground#29262f
  • notificationCenter.border#212121
  • notificationCenterHeader.background#29262f
  • notificationCenterHeader.foreground#afafaf
  • notificationLink.foreground#72c2c3
  • notifications.background#29262f
  • notifications.border#212121
  • notifications.foreground#afafaf
  • notificationsErrorIcon.foreground#c37372
  • notificationsInfoIcon.foreground#7372c3
  • notificationsWarningIcon.foreground#c2c372
  • notificationToast.border#212121
  • panel.background#29262f
  • panel.border#7372c3
  • panelInput.border#afafaf
  • panelTitle.activeBorder#c372c2
  • panelTitle.activeForeground#afafaf
  • panelTitle.inactiveForeground#5b5b5b
  • peekView.border#000000
  • peekViewEditor.background#29262f
  • peekViewEditor.matchHighlightBackground#dadbaa80
  • peekViewResult.background#212121
  • peekViewResult.fileForeground#afafaf
  • peekViewResult.lineForeground#afafaf
  • peekViewResult.matchHighlightBackground#dadbaa80
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#afafaf
  • peekViewTitle.background#101010
  • peekViewTitleDescription.foreground#5b5b5b
  • peekViewTitleLabel.foreground#afafaf
  • pickerGroup.border#7372c3
  • pickerGroup.foreground#72c2c3
  • progressBar.background#c372c2
  • scrollbar.shadow#444444
  • selection.background#7372c3
  • settings.checkboxBackground#212121
  • settings.checkboxBorder#101010
  • settings.checkboxForeground#afafaf
  • settings.dropdownBackground#212121
  • settings.dropdownBorder#101010
  • settings.dropdownForeground#afafaf
  • settings.headerForeground#afafaf
  • settings.modifiedItemIndicator#c2c372
  • settings.numberInputBackground#212121
  • settings.numberInputBorder#101010
  • settings.numberInputForeground#afafaf
  • settings.textInputBackground#212121
  • settings.textInputBorder#101010
  • settings.textInputForeground#afafaf
  • sideBar.background#212121
  • sideBarSectionHeader.background#29262f
  • sideBarSectionHeader.border#101010
  • sideBarTitle.foreground#afafaf
  • statusBar.background#101010
  • statusBar.debuggingBackground#c37372
  • statusBar.debuggingForeground#101010
  • statusBar.foreground#afafaf
  • statusBar.noFolderBackground#101010
  • statusBar.noFolderForeground#afafaf
  • statusBarItem.prominentBackground#c37372
  • statusBarItem.prominentHoverBackground#c2c372
  • statusBarItem.remoteBackground#7372c3
  • statusBarItem.remoteForeground#29262f
  • tab.activeBackground#29262f
  • tab.activeBorderTop#c372c280
  • tab.activeForeground#afafaf
  • tab.border#101010
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#5b5b5b
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#7372c3
  • terminal.ansiBrightBlack#323232
  • terminal.ansiBrightBlue#aaaadb
  • terminal.ansiBrightCyan#aadadb
  • terminal.ansiBrightGreen#aadbaa
  • terminal.ansiBrightMagenta#dbaada
  • terminal.ansiBrightRed#dbaaaa
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#dadbaa
  • terminal.ansiCyan#72c2c3
  • terminal.ansiGreen#72c373
  • terminal.ansiMagenta#c372c2
  • terminal.ansiRed#c37372
  • terminal.ansiWhite#d9d9d9
  • terminal.ansiYellow#c2c372
  • terminal.background#29262f
  • terminal.border#afafaf
  • terminal.foreground#afafaf
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#212121
  • titleBar.activeBackground#212121
  • titleBar.activeForeground#afafaf
  • titleBar.inactiveBackground#101010
  • titleBar.inactiveForeground#5b5b5b
  • walkThrough.embeddedEditorBackground#212121
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#32323275
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#7372c3
source#afafaf
meta.diff, meta.diff.header#5b5b5b
markup.inserted#72c373
markup.deleted#c37372
markup.changed#c2c372
invalid#c37372underline italic
invalid.deprecated#afafafunderline italic
entity.name.filename#dadbaa
markup.error#c37372
markup.underlineunderline
markup.bold#c2c372bold
markup.heading#7372c3bold
markup.italic#dadbaaitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#72c2c3
markup.inline.raw, markup.raw.restructuredtext#72c373
markup.underline.link, markup.underline.link.image#72c2c3
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#c372c2
entity.name.directive.restructuredtext, markup.quote#dadbaaitalic
meta.separator.markdown#5b5b5b
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#72c373
punctuation.definition.constant.restructuredtext#7372c3
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#7372c3
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#afafaf
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#dadbaa
entity.name.type.class, entity.name.class#72c2c3normal
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#7372c3italic
entity.other.inherited-class#72c2c3italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#5b5b5b
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#c372c2
comment.block.documentation entity.name.type#72c2c3italic
comment.block.documentation entity.name.type punctuation.definition.bracket#72c2c3
comment.block.documentation variable#c2c372italic
constant, variable.other.constant#7372c3
constant.character.escape, constant.character.string.escape, constant.regexp#c372c2
entity.name.tag#c372c2
entity.other.attribute-name.parent-selector#c372c2
entity.other.attribute-name#72c373italic
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#72c373
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#c2c372italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#72c373italic
meta.decorator variable.other.object#72c373
keyword, punctuation.definition.keyword#c372c2
keyword.control.new, keyword.operator.newbold
meta.selector#c372c2
support#72c2c3italic
support.function.magic, support.variable, variable.other.predefined#7372c3regular
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#c372c2
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#afafaf
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#c372c2
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#72c2c3
constant.other.date, constant.other.timestamp#c2c372
variable.other.alias.yaml#72c373italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#c372c2regular
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#72c2c3italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#c2c372
storage.modifier#c372c2
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#dadbaa
punctuation.definition.group.capture.regexp#c372c2
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#c37372
punctuation.definition.character-class.regexp#72c2c3
punctuation.definition.group.regexp#c2c372
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#c37372
meta.assertion.look-ahead.regexp#72c373
string#dadbaa
punctuation.definition.string.begin, punctuation.definition.string.end#aaaadb
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#7372c3
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#5b5b5b
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#afafaf
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#c2c372italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#afafafnormal
meta.selectionset.graphql variable#dadbaa
meta.selectionset.graphql meta.arguments variable#afafaf
entity.name.fragment.graphql, variable.fragment.graphql#72c2c3
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#afafaf
source.shell variable.other#7372c3
support.constant#7372c3normal
meta.scope.prerequisites.makefile#dadbaa
meta.attribute-selector.scss#dadbaa
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#afafaf
meta.preprocessor.haskell#5b5b5b
Tinted VSCode by Tinted Theming - VS Code Theme