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#c48dff10
  • activityBar.activeBorder#fa257380
  • activityBar.background#000000
  • activityBar.foreground#cacaca
  • activityBar.inactiveForeground#7c7c7c
  • activityBarBadge.background#fa2573
  • activityBarBadge.foreground#000000
  • badge.background#000000
  • badge.foreground#cacaca
  • breadcrumb.activeSelectionForeground#cacaca
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#cacaca
  • breadcrumb.foreground#7c7c7c
  • breadcrumbPicker.background#1c1c1c
  • button.background#383838
  • button.foreground#cacaca
  • checkbox.background#383838
  • checkbox.border#1c1c1c
  • checkbox.foreground#cacaca
  • contrastBorder#1c1c1c
  • debugToolBar.background#383838
  • diffEditor.insertedTextBackground#a6e32d20
  • diffEditor.removedTextBackground#e5222250
  • dropdown.background#000000
  • dropdown.border#1c1c1c
  • dropdown.foreground#cacaca
  • editor.background#000000
  • editor.findMatchBackground#fc951e80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#55555575
  • editor.foldBackground#383838
  • editor.foreground#cacaca
  • editor.hoverHighlightBackground#1c1c1c
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#c48dff15
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBorder#a6e32d
  • editor.snippetTabstopHighlightBackground#000000
  • editor.snippetTabstopHighlightBorder#7c7c7c
  • editor.wordHighlightBackground#67d9f050
  • editor.wordHighlightStrongBackground#a6e32d50
  • editorCodeLens.foreground#7c7c7c
  • editorError.foreground#e52222
  • editorGroup.border#c48dff
  • editorGroup.dropBackground#55555570
  • editorGroupHeader.tabsBackground#1c1c1c
  • editorGutter.addedBackground#a6e32d80
  • editorGutter.deletedBackground#e5222280
  • editorGutter.modifiedBackground#67d9f080
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#7c7c7c
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#7c7c7c
  • editorLink.activeForeground#67d9f0
  • editorMarkerNavigation.background#383838
  • editorOverviewRuler.addedForeground#a6e32d80
  • editorOverviewRuler.border#1c1c1c
  • editorOverviewRuler.currentContentForeground#a6e32d
  • editorOverviewRuler.deletedForeground#e5222280
  • editorOverviewRuler.errorForeground#e5222280
  • editorOverviewRuler.incomingContentForeground#c48dff
  • editorOverviewRuler.infoForeground#67d9f080
  • editorOverviewRuler.modifiedForeground#67d9f080
  • editorOverviewRuler.selectionHighlightForeground#fc951e
  • editorOverviewRuler.warningForeground#fc951e80
  • editorOverviewRuler.wordHighlightForeground#67d9f0
  • editorOverviewRuler.wordHighlightStrongForeground#a6e32d
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#383838
  • editorSuggestWidget.foreground#cacaca
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#fc951e
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#383838
  • errorForeground#e52222
  • extensionButton.prominentBackground#a6e32d90
  • extensionButton.prominentForeground#cacaca
  • extensionButton.prominentHoverBackground#a6e32d60
  • focusBorder#7c7c7c
  • foreground#cacaca
  • gitDecoration.conflictingResourceForeground#fc951e
  • gitDecoration.deletedResourceForeground#e52222
  • gitDecoration.ignoredResourceForeground#7c7c7c
  • gitDecoration.modifiedResourceForeground#67d9f0
  • gitDecoration.untrackedResourceForeground#a6e32d
  • input.background#000000
  • input.border#1c1c1c
  • input.foreground#cacaca
  • input.placeholderForeground#7c7c7c
  • inputOption.activeBorder#c48dff
  • inputValidation.errorBackground#000000
  • inputValidation.errorBorder#e52222
  • inputValidation.errorForeground#e52222
  • inputValidation.infoBackground#000000
  • inputValidation.infoBorder#c48dff
  • inputValidation.infoForeground#c48dff
  • inputValidation.warningBackground#000000
  • inputValidation.warningBorder#fc951e
  • inputValidation.warningForeground#fc951e
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#cacaca
  • list.dropBackground#000000
  • list.errorForeground#e52222
  • list.focusBackground#55555575
  • list.highlightForeground#67d9f0
  • list.hoverBackground#55555575
  • list.inactiveSelectionBackground#55555575
  • list.warningForeground#fc951e
  • listFilterWidget.background#000000
  • listFilterWidget.noMatchesOutline#e52222
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#a6e32d90
  • merge.incomingHeaderBackground#c48dff90
  • notification.background#000000
  • notification.buttonBackground#000000
  • notification.buttonForeground#cacaca
  • notification.buttonHoverBackground#55555575
  • notification.errorBackground#e52222
  • notification.errorForeground#000000
  • notification.foreground#cacaca
  • notification.infoBackground#c48dff
  • notification.infoForeground#000000
  • notification.warningBackground#fc951e
  • notification.warningForeground#000000
  • notificationCenter.border#383838
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#cacaca
  • notificationLink.foreground#67d9f0
  • notifications.background#000000
  • notifications.border#383838
  • notifications.foreground#cacaca
  • notificationsErrorIcon.foreground#e52222
  • notificationsInfoIcon.foreground#c48dff
  • notificationsWarningIcon.foreground#fc951e
  • notificationToast.border#383838
  • panel.background#000000
  • panel.border#c48dff
  • panelInput.border#cacaca
  • panelTitle.activeBorder#fa2573
  • panelTitle.activeForeground#cacaca
  • panelTitle.inactiveForeground#7c7c7c
  • peekView.border#000000
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#ffff5580
  • peekViewResult.background#383838
  • peekViewResult.fileForeground#cacaca
  • peekViewResult.lineForeground#cacaca
  • peekViewResult.matchHighlightBackground#ffff5580
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#cacaca
  • peekViewTitle.background#1c1c1c
  • peekViewTitleDescription.foreground#7c7c7c
  • peekViewTitleLabel.foreground#cacaca
  • pickerGroup.border#c48dff
  • pickerGroup.foreground#67d9f0
  • progressBar.background#fa2573
  • scrollbar.shadow#444444
  • selection.background#c48dff
  • settings.checkboxBackground#383838
  • settings.checkboxBorder#1c1c1c
  • settings.checkboxForeground#cacaca
  • settings.dropdownBackground#383838
  • settings.dropdownBorder#1c1c1c
  • settings.dropdownForeground#cacaca
  • settings.headerForeground#cacaca
  • settings.modifiedItemIndicator#fc951e
  • settings.numberInputBackground#383838
  • settings.numberInputBorder#1c1c1c
  • settings.numberInputForeground#cacaca
  • settings.textInputBackground#383838
  • settings.textInputBorder#1c1c1c
  • settings.textInputForeground#cacaca
  • sideBar.background#383838
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#1c1c1c
  • sideBarTitle.foreground#cacaca
  • statusBar.background#1c1c1c
  • statusBar.debuggingBackground#e52222
  • statusBar.debuggingForeground#1c1c1c
  • statusBar.foreground#cacaca
  • statusBar.noFolderBackground#1c1c1c
  • statusBar.noFolderForeground#cacaca
  • statusBarItem.prominentBackground#e52222
  • statusBarItem.prominentHoverBackground#fc951e
  • statusBarItem.remoteBackground#c48dff
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#000000
  • tab.activeBorderTop#fa257380
  • tab.activeForeground#cacaca
  • tab.border#1c1c1c
  • tab.inactiveBackground#383838
  • tab.inactiveForeground#7c7c7c
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#c48dff
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#5555ff
  • terminal.ansiBrightCyan#55ffff
  • terminal.ansiBrightGreen#55ff55
  • terminal.ansiBrightMagenta#ff55ff
  • terminal.ansiBrightRed#ff5555
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff55
  • terminal.ansiCyan#67d9f0
  • terminal.ansiGreen#a6e32d
  • terminal.ansiMagenta#fa2573
  • terminal.ansiRed#e52222
  • terminal.ansiWhite#f2f2f2
  • terminal.ansiYellow#fc951e
  • terminal.background#000000
  • terminal.border#cacaca
  • terminal.foreground#cacaca
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#383838
  • titleBar.activeBackground#383838
  • titleBar.activeForeground#cacaca
  • titleBar.inactiveBackground#1c1c1c
  • titleBar.inactiveForeground#7c7c7c
  • walkThrough.embeddedEditorBackground#383838
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#55555575
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#c48dff
source#cacaca
meta.diff, meta.diff.header#7c7c7c
markup.inserted#a6e32d
markup.deleted#e52222
markup.changed#fc951e
invalid#e52222underline italic
invalid.deprecated#cacacaunderline italic
entity.name.filename#ffff55
markup.error#e52222
markup.underlineunderline
markup.bold#fc951ebold
markup.heading#c48dffbold
markup.italic#ffff55italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#67d9f0
markup.inline.raw, markup.raw.restructuredtext#a6e32d
markup.underline.link, markup.underline.link.image#67d9f0
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#fa2573
entity.name.directive.restructuredtext, markup.quote#ffff55italic
meta.separator.markdown#7c7c7c
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#a6e32d
punctuation.definition.constant.restructuredtext#c48dff
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#c48dff
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#ffff55
entity.name.type.class, entity.name.class#67d9f0normal
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#c48dffitalic
entity.other.inherited-class#67d9f0italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7c7c7c
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#fa2573
comment.block.documentation entity.name.type#67d9f0italic
comment.block.documentation entity.name.type punctuation.definition.bracket#67d9f0
comment.block.documentation variable#fc951eitalic
constant, variable.other.constant#c48dff
constant.character.escape, constant.character.string.escape, constant.regexp#fa2573
entity.name.tag#fa2573
entity.other.attribute-name.parent-selector#fa2573
entity.other.attribute-name#a6e32ditalic
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#a6e32d
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#fc951eitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#a6e32ditalic
meta.decorator variable.other.object#a6e32d
keyword, punctuation.definition.keyword#fa2573
keyword.control.new, keyword.operator.newbold
meta.selector#fa2573
support#67d9f0italic
support.function.magic, support.variable, variable.other.predefined#c48dffregular
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#fa2573
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#fa2573
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#67d9f0
constant.other.date, constant.other.timestamp#fc951e
variable.other.alias.yaml#a6e32ditalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#fa2573regular
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#67d9f0italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fc951e
storage.modifier#fa2573
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffff55
punctuation.definition.group.capture.regexp#fa2573
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#e52222
punctuation.definition.character-class.regexp#67d9f0
punctuation.definition.group.regexp#fc951e
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#e52222
meta.assertion.look-ahead.regexp#a6e32d
string#ffff55
punctuation.definition.string.begin, punctuation.definition.string.end#5555ff
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#c48dff
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#7c7c7c
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#fc951eitalic
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#ffff55
meta.selectionset.graphql meta.arguments variable#cacaca
entity.name.fragment.graphql, variable.fragment.graphql#67d9f0
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#c48dff
support.constant#c48dffnormal
meta.scope.prerequisites.makefile#ffff55
meta.attribute-selector.scss#ffff55
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#cacaca
meta.preprocessor.haskell#7c7c7c
Tinted VSCode by Tinted Theming - VS Code Theme