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#48638710
  • activityBar.activeBorder#fc5ef080
  • activityBar.background#000000
  • activityBar.foreground#a1a1a1
  • activityBar.inactiveForeground#4e4e4e
  • activityBarBadge.background#fc5ef0
  • activityBarBadge.foreground#000000
  • badge.background#575757
  • badge.foreground#a1a1a1
  • breadcrumb.activeSelectionForeground#a1a1a1
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#a1a1a1
  • breadcrumb.foreground#4e4e4e
  • breadcrumbPicker.background#0c0c0c
  • button.background#181818
  • button.foreground#a1a1a1
  • checkbox.background#181818
  • checkbox.border#0c0c0c
  • checkbox.foreground#a1a1a1
  • contrastBorder#0c0c0c
  • debugToolBar.background#181818
  • diffEditor.insertedTextBackground#a5df5520
  • diffEditor.removedTextBackground#ff1b0050
  • dropdown.background#000000
  • dropdown.border#0c0c0c
  • dropdown.foreground#a1a1a1
  • editor.background#000000
  • editor.findMatchBackground#fbe74a80
  • editor.findMatchHighlightBackground#dbdbdb40
  • editor.findRangeHighlightBackground#25252575
  • editor.foldBackground#181818
  • editor.foreground#a1a1a1
  • editor.hoverHighlightBackground#0c0c0c
  • editor.lineHighlightBorder#575757
  • editor.rangeHighlightBackground#48638715
  • editor.selectionBackground#575757
  • editor.selectionHighlightBackground#575757
  • editor.snippetFinalTabstopHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBorder#a5df55
  • editor.snippetTabstopHighlightBackground#000000
  • editor.snippetTabstopHighlightBorder#4e4e4e
  • editor.wordHighlightBackground#85e9fe50
  • editor.wordHighlightStrongBackground#a5df5550
  • editorCodeLens.foreground#4e4e4e
  • editorError.foreground#ff1b00
  • editorGroup.border#486387
  • editorGroup.dropBackground#25252570
  • editorGroupHeader.tabsBackground#0c0c0c
  • editorGutter.addedBackground#a5df5580
  • editorGutter.deletedBackground#ff1b0080
  • editorGutter.modifiedBackground#85e9fe80
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#4e4e4e
  • editorIndentGuide.activeBackground#dbdbdb45
  • editorIndentGuide.background#dbdbdb1A
  • editorLineNumber.foreground#4e4e4e
  • editorLink.activeForeground#85e9fe
  • editorMarkerNavigation.background#181818
  • editorOverviewRuler.addedForeground#a5df5580
  • editorOverviewRuler.border#0c0c0c
  • editorOverviewRuler.currentContentForeground#a5df55
  • editorOverviewRuler.deletedForeground#ff1b0080
  • editorOverviewRuler.errorForeground#ff1b0080
  • editorOverviewRuler.incomingContentForeground#486387
  • editorOverviewRuler.infoForeground#85e9fe80
  • editorOverviewRuler.modifiedForeground#85e9fe80
  • editorOverviewRuler.selectionHighlightForeground#fbe74a
  • editorOverviewRuler.warningForeground#fbe74a80
  • editorOverviewRuler.wordHighlightForeground#85e9fe
  • editorOverviewRuler.wordHighlightStrongForeground#a5df55
  • editorRuler.foreground#dbdbdb1A
  • editorSuggestWidget.background#181818
  • editorSuggestWidget.foreground#a1a1a1
  • editorSuggestWidget.selectedBackground#575757
  • editorWarning.foreground#fbe74a
  • editorWhitespace.foreground#dbdbdb1A
  • editorWidget.background#181818
  • errorForeground#ff1b00
  • extensionButton.prominentBackground#a5df5590
  • extensionButton.prominentForeground#a1a1a1
  • extensionButton.prominentHoverBackground#a5df5560
  • focusBorder#4e4e4e
  • foreground#a1a1a1
  • gitDecoration.conflictingResourceForeground#fbe74a
  • gitDecoration.deletedResourceForeground#ff1b00
  • gitDecoration.ignoredResourceForeground#4e4e4e
  • gitDecoration.modifiedResourceForeground#85e9fe
  • gitDecoration.untrackedResourceForeground#a5df55
  • input.background#000000
  • input.border#0c0c0c
  • input.foreground#a1a1a1
  • input.placeholderForeground#4e4e4e
  • inputOption.activeBorder#486387
  • inputValidation.errorBackground#000000
  • inputValidation.errorBorder#ff1b00
  • inputValidation.errorForeground#ff1b00
  • inputValidation.infoBackground#000000
  • inputValidation.infoBorder#486387
  • inputValidation.infoForeground#486387
  • inputValidation.warningBackground#000000
  • inputValidation.warningBorder#fbe74a
  • inputValidation.warningForeground#fbe74a
  • list.activeSelectionBackground#575757
  • list.activeSelectionForeground#a1a1a1
  • list.dropBackground#575757
  • list.errorForeground#ff1b00
  • list.focusBackground#25252575
  • list.highlightForeground#85e9fe
  • list.hoverBackground#25252575
  • list.inactiveSelectionBackground#25252575
  • list.warningForeground#fbe74a
  • listFilterWidget.background#000000
  • listFilterWidget.noMatchesOutline#ff1b00
  • listFilterWidget.outline#575757
  • merge.currentHeaderBackground#a5df5590
  • merge.incomingHeaderBackground#48638790
  • notification.background#000000
  • notification.buttonBackground#575757
  • notification.buttonForeground#a1a1a1
  • notification.buttonHoverBackground#25252575
  • notification.errorBackground#ff1b00
  • notification.errorForeground#000000
  • notification.foreground#a1a1a1
  • notification.infoBackground#486387
  • notification.infoForeground#000000
  • notification.warningBackground#fbe74a
  • notification.warningForeground#000000
  • notificationCenter.border#181818
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#a1a1a1
  • notificationLink.foreground#85e9fe
  • notifications.background#000000
  • notifications.border#181818
  • notifications.foreground#a1a1a1
  • notificationsErrorIcon.foreground#ff1b00
  • notificationsInfoIcon.foreground#486387
  • notificationsWarningIcon.foreground#fbe74a
  • notificationToast.border#181818
  • panel.background#000000
  • panel.border#486387
  • panelInput.border#a1a1a1
  • panelTitle.activeBorder#fc5ef0
  • panelTitle.activeForeground#a1a1a1
  • panelTitle.inactiveForeground#4e4e4e
  • peekView.border#575757
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#fbe74980
  • peekViewResult.background#181818
  • peekViewResult.fileForeground#a1a1a1
  • peekViewResult.lineForeground#a1a1a1
  • peekViewResult.matchHighlightBackground#fbe74980
  • peekViewResult.selectionBackground#575757
  • peekViewResult.selectionForeground#a1a1a1
  • peekViewTitle.background#0c0c0c
  • peekViewTitleDescription.foreground#4e4e4e
  • peekViewTitleLabel.foreground#a1a1a1
  • pickerGroup.border#486387
  • pickerGroup.foreground#85e9fe
  • progressBar.background#fc5ef0
  • scrollbar.shadow#444444
  • selection.background#486387
  • settings.checkboxBackground#181818
  • settings.checkboxBorder#0c0c0c
  • settings.checkboxForeground#a1a1a1
  • settings.dropdownBackground#181818
  • settings.dropdownBorder#0c0c0c
  • settings.dropdownForeground#a1a1a1
  • settings.headerForeground#a1a1a1
  • settings.modifiedItemIndicator#fbe74a
  • settings.numberInputBackground#181818
  • settings.numberInputBorder#0c0c0c
  • settings.numberInputForeground#a1a1a1
  • settings.textInputBackground#181818
  • settings.textInputBorder#0c0c0c
  • settings.textInputForeground#a1a1a1
  • sideBar.background#181818
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#0c0c0c
  • sideBarTitle.foreground#a1a1a1
  • statusBar.background#0c0c0c
  • statusBar.debuggingBackground#ff1b00
  • statusBar.debuggingForeground#0c0c0c
  • statusBar.foreground#a1a1a1
  • statusBar.noFolderBackground#0c0c0c
  • statusBar.noFolderForeground#a1a1a1
  • statusBarItem.prominentBackground#ff1b00
  • statusBarItem.prominentHoverBackground#fbe74a
  • statusBarItem.remoteBackground#486387
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#000000
  • tab.activeBorderTop#fc5ef080
  • tab.activeForeground#a1a1a1
  • tab.border#0c0c0c
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#4e4e4e
  • terminal.ansiBlack#575757
  • terminal.ansiBlue#486387
  • terminal.ansiBrightBlack#252525
  • terminal.ansiBrightBlue#89bdff
  • terminal.ansiBrightCyan#85e9fe
  • terminal.ansiBrightGreen#a5df55
  • terminal.ansiBrightMagenta#bf00c0
  • terminal.ansiBrightRed#d41c00
  • terminal.ansiBrightWhite#dbdbdb
  • terminal.ansiBrightYellow#fbe749
  • terminal.ansiCyan#85e9fe
  • terminal.ansiGreen#a5df55
  • terminal.ansiMagenta#fc5ef0
  • terminal.ansiRed#ff1b00
  • terminal.ansiWhite#cbcbcb
  • terminal.ansiYellow#fbe74a
  • terminal.background#000000
  • terminal.border#a1a1a1
  • terminal.foreground#a1a1a1
  • terminal.selectionBackground#57575750
  • textBlockQuote.background#181818
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#a1a1a1
  • titleBar.inactiveBackground#0c0c0c
  • titleBar.inactiveForeground#4e4e4e
  • walkThrough.embeddedEditorBackground#181818
  • welcomePage.buttonBackground#575757
  • welcomePage.buttonHoverBackground#25252575
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#486387
source#a1a1a1
meta.diff, meta.diff.header#4e4e4e
markup.inserted#a5df55
markup.deleted#ff1b00
markup.changed#fbe74a
invalid#ff1b00underline italic
invalid.deprecated#a1a1a1underline italic
entity.name.filename#fbe749
markup.error#ff1b00
markup.underlineunderline
markup.bold#fbe74abold
markup.heading#486387bold
markup.italic#fbe749italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#85e9fe
markup.inline.raw, markup.raw.restructuredtext#a5df55
markup.underline.link, markup.underline.link.image#85e9fe
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#fc5ef0
entity.name.directive.restructuredtext, markup.quote#fbe749italic
meta.separator.markdown#4e4e4e
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#a5df55
punctuation.definition.constant.restructuredtext#486387
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#486387
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#a1a1a1
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fbe749
entity.name.type.class, entity.name.class#85e9fenormal
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#486387italic
entity.other.inherited-class#85e9feitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#4e4e4e
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#fc5ef0
comment.block.documentation entity.name.type#85e9feitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#85e9fe
comment.block.documentation variable#fbe74aitalic
constant, variable.other.constant#486387
constant.character.escape, constant.character.string.escape, constant.regexp#fc5ef0
entity.name.tag#fc5ef0
entity.other.attribute-name.parent-selector#fc5ef0
entity.other.attribute-name#a5df55italic
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#a5df55
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#fbe74aitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#a5df55italic
meta.decorator variable.other.object#a5df55
keyword, punctuation.definition.keyword#fc5ef0
keyword.control.new, keyword.operator.newbold
meta.selector#fc5ef0
support#85e9feitalic
support.function.magic, support.variable, variable.other.predefined#486387regular
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#fc5ef0
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#a1a1a1
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#fc5ef0
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#85e9fe
constant.other.date, constant.other.timestamp#fbe74a
variable.other.alias.yaml#a5df55italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#fc5ef0regular
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#85e9feitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fbe74a
storage.modifier#fc5ef0
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fbe749
punctuation.definition.group.capture.regexp#fc5ef0
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff1b00
punctuation.definition.character-class.regexp#85e9fe
punctuation.definition.group.regexp#fbe74a
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff1b00
meta.assertion.look-ahead.regexp#a5df55
string#fbe749
punctuation.definition.string.begin, punctuation.definition.string.end#89bdff
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#486387
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#4e4e4e
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#a1a1a1
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#fbe74aitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#a1a1a1normal
meta.selectionset.graphql variable#fbe749
meta.selectionset.graphql meta.arguments variable#a1a1a1
entity.name.fragment.graphql, variable.fragment.graphql#85e9fe
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#a1a1a1
source.shell variable.other#486387
support.constant#486387normal
meta.scope.prerequisites.makefile#fbe749
meta.attribute-selector.scss#fbe749
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#a1a1a1
meta.preprocessor.haskell#4e4e4e
Tinted VSCode by Tinted Theming - VS Code Theme