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#5fafd710
  • activityBar.activeBorder#af87d780
  • activityBar.background#1c1c1c
  • activityBar.foreground#d0d0d0
  • activityBar.inactiveForeground#808080
  • activityBarBadge.background#af87d7
  • activityBarBadge.foreground#1c1c1c
  • badge.background#303030
  • badge.foreground#d0d0d0
  • breadcrumb.activeSelectionForeground#d0d0d0
  • breadcrumb.background#1c1c1c
  • breadcrumb.focusForeground#d0d0d0
  • breadcrumb.foreground#808080
  • breadcrumbPicker.background#080808
  • button.background#121212
  • button.foreground#d0d0d0
  • checkbox.background#121212
  • checkbox.border#080808
  • checkbox.foreground#d0d0d0
  • contrastBorder#080808
  • debugToolBar.background#121212
  • diffEditor.insertedTextBackground#5faf0020
  • diffEditor.removedTextBackground#af005f50
  • dropdown.background#1c1c1c
  • dropdown.border#080808
  • dropdown.foreground#d0d0d0
  • editor.background#1c1c1c
  • editor.findMatchBackground#5faf5f80
  • editor.findMatchHighlightBackground#c6c6c640
  • editor.findRangeHighlightBackground#3a3a3a75
  • editor.foldBackground#121212
  • editor.foreground#d0d0d0
  • editor.hoverHighlightBackground#080808
  • editor.lineHighlightBorder#303030
  • editor.rangeHighlightBackground#5fafd715
  • editor.selectionBackground#303030
  • editor.selectionHighlightBackground#303030
  • editor.snippetFinalTabstopHighlightBackground#1c1c1c
  • editor.snippetFinalTabstopHighlightBorder#5faf00
  • editor.snippetTabstopHighlightBackground#1c1c1c
  • editor.snippetTabstopHighlightBorder#808080
  • editor.wordHighlightBackground#ffaf0050
  • editor.wordHighlightStrongBackground#5faf0050
  • editorCodeLens.foreground#808080
  • editorError.foreground#af005f
  • editorGroup.border#5fafd7
  • editorGroup.dropBackground#3a3a3a70
  • editorGroupHeader.tabsBackground#080808
  • editorGutter.addedBackground#5faf0080
  • editorGutter.deletedBackground#af005f80
  • editorGutter.modifiedBackground#ffaf0080
  • editorHoverWidget.background#1c1c1c
  • editorHoverWidget.border#808080
  • editorIndentGuide.activeBackground#c6c6c645
  • editorIndentGuide.background#c6c6c61A
  • editorLineNumber.foreground#808080
  • editorLink.activeForeground#ffaf00
  • editorMarkerNavigation.background#121212
  • editorOverviewRuler.addedForeground#5faf0080
  • editorOverviewRuler.border#080808
  • editorOverviewRuler.currentContentForeground#5faf00
  • editorOverviewRuler.deletedForeground#af005f80
  • editorOverviewRuler.errorForeground#af005f80
  • editorOverviewRuler.incomingContentForeground#5fafd7
  • editorOverviewRuler.infoForeground#ffaf0080
  • editorOverviewRuler.modifiedForeground#ffaf0080
  • editorOverviewRuler.selectionHighlightForeground#5faf5f
  • editorOverviewRuler.warningForeground#5faf5f80
  • editorOverviewRuler.wordHighlightForeground#ffaf00
  • editorOverviewRuler.wordHighlightStrongForeground#5faf00
  • editorRuler.foreground#c6c6c61A
  • editorSuggestWidget.background#121212
  • editorSuggestWidget.foreground#d0d0d0
  • editorSuggestWidget.selectedBackground#303030
  • editorWarning.foreground#5faf5f
  • editorWhitespace.foreground#c6c6c61A
  • editorWidget.background#121212
  • errorForeground#af005f
  • extensionButton.prominentBackground#5faf0090
  • extensionButton.prominentForeground#d0d0d0
  • extensionButton.prominentHoverBackground#5faf0060
  • focusBorder#808080
  • foreground#d0d0d0
  • gitDecoration.conflictingResourceForeground#5faf5f
  • gitDecoration.deletedResourceForeground#af005f
  • gitDecoration.ignoredResourceForeground#808080
  • gitDecoration.modifiedResourceForeground#ffaf00
  • gitDecoration.untrackedResourceForeground#5faf00
  • input.background#1c1c1c
  • input.border#080808
  • input.foreground#d0d0d0
  • input.placeholderForeground#808080
  • inputOption.activeBorder#5fafd7
  • inputValidation.errorBackground#1c1c1c
  • inputValidation.errorBorder#af005f
  • inputValidation.errorForeground#af005f
  • inputValidation.infoBackground#1c1c1c
  • inputValidation.infoBorder#5fafd7
  • inputValidation.infoForeground#5fafd7
  • inputValidation.warningBackground#1c1c1c
  • inputValidation.warningBorder#5faf5f
  • inputValidation.warningForeground#5faf5f
  • list.activeSelectionBackground#303030
  • list.activeSelectionForeground#d0d0d0
  • list.dropBackground#303030
  • list.errorForeground#af005f
  • list.focusBackground#3a3a3a75
  • list.highlightForeground#ffaf00
  • list.hoverBackground#3a3a3a75
  • list.inactiveSelectionBackground#3a3a3a75
  • list.warningForeground#5faf5f
  • listFilterWidget.background#1c1c1c
  • listFilterWidget.noMatchesOutline#af005f
  • listFilterWidget.outline#303030
  • merge.currentHeaderBackground#5faf0090
  • merge.incomingHeaderBackground#5fafd790
  • notification.background#1c1c1c
  • notification.buttonBackground#303030
  • notification.buttonForeground#d0d0d0
  • notification.buttonHoverBackground#3a3a3a75
  • notification.errorBackground#af005f
  • notification.errorForeground#1c1c1c
  • notification.foreground#d0d0d0
  • notification.infoBackground#5fafd7
  • notification.infoForeground#1c1c1c
  • notification.warningBackground#5faf5f
  • notification.warningForeground#1c1c1c
  • notificationCenter.border#121212
  • notificationCenterHeader.background#1c1c1c
  • notificationCenterHeader.foreground#d0d0d0
  • notificationLink.foreground#ffaf00
  • notifications.background#1c1c1c
  • notifications.border#121212
  • notifications.foreground#d0d0d0
  • notificationsErrorIcon.foreground#af005f
  • notificationsInfoIcon.foreground#5fafd7
  • notificationsWarningIcon.foreground#5faf5f
  • notificationToast.border#121212
  • panel.background#1c1c1c
  • panel.border#5fafd7
  • panelInput.border#d0d0d0
  • panelTitle.activeBorder#af87d7
  • panelTitle.activeForeground#d0d0d0
  • panelTitle.inactiveForeground#808080
  • peekView.border#303030
  • peekViewEditor.background#1c1c1c
  • peekViewEditor.matchHighlightBackground#87d75f80
  • peekViewResult.background#121212
  • peekViewResult.fileForeground#d0d0d0
  • peekViewResult.lineForeground#d0d0d0
  • peekViewResult.matchHighlightBackground#87d75f80
  • peekViewResult.selectionBackground#303030
  • peekViewResult.selectionForeground#d0d0d0
  • peekViewTitle.background#080808
  • peekViewTitleDescription.foreground#808080
  • peekViewTitleLabel.foreground#d0d0d0
  • pickerGroup.border#5fafd7
  • pickerGroup.foreground#ffaf00
  • progressBar.background#af87d7
  • scrollbar.shadow#444444
  • selection.background#5fafd7
  • settings.checkboxBackground#121212
  • settings.checkboxBorder#080808
  • settings.checkboxForeground#d0d0d0
  • settings.dropdownBackground#121212
  • settings.dropdownBorder#080808
  • settings.dropdownForeground#d0d0d0
  • settings.headerForeground#d0d0d0
  • settings.modifiedItemIndicator#5faf5f
  • settings.numberInputBackground#121212
  • settings.numberInputBorder#080808
  • settings.numberInputForeground#d0d0d0
  • settings.textInputBackground#121212
  • settings.textInputBorder#080808
  • settings.textInputForeground#d0d0d0
  • sideBar.background#121212
  • sideBarSectionHeader.background#1c1c1c
  • sideBarSectionHeader.border#080808
  • sideBarTitle.foreground#d0d0d0
  • statusBar.background#080808
  • statusBar.debuggingBackground#af005f
  • statusBar.debuggingForeground#080808
  • statusBar.foreground#d0d0d0
  • statusBar.noFolderBackground#080808
  • statusBar.noFolderForeground#d0d0d0
  • statusBarItem.prominentBackground#af005f
  • statusBarItem.prominentHoverBackground#5faf5f
  • statusBarItem.remoteBackground#5fafd7
  • statusBarItem.remoteForeground#1c1c1c
  • tab.activeBackground#1c1c1c
  • tab.activeBorderTop#af87d780
  • tab.activeForeground#d0d0d0
  • tab.border#080808
  • tab.inactiveBackground#121212
  • tab.inactiveForeground#808080
  • terminal.ansiBlack#303030
  • terminal.ansiBlue#5fafd7
  • terminal.ansiBrightBlack#3a3a3a
  • terminal.ansiBrightBlue#ffd700
  • terminal.ansiBrightCyan#87d700
  • terminal.ansiBrightGreen#ffd75f
  • terminal.ansiBrightMagenta#87d7ff
  • terminal.ansiBrightRed#d7005f
  • terminal.ansiBrightWhite#c6c6c6
  • terminal.ansiBrightYellow#87d75f
  • terminal.ansiCyan#ffaf00
  • terminal.ansiGreen#5faf00
  • terminal.ansiMagenta#af87d7
  • terminal.ansiRed#af005f
  • terminal.ansiWhite#bcbcbc
  • terminal.ansiYellow#5faf5f
  • terminal.background#1c1c1c
  • terminal.border#d0d0d0
  • terminal.foreground#d0d0d0
  • terminal.selectionBackground#30303050
  • textBlockQuote.background#121212
  • titleBar.activeBackground#121212
  • titleBar.activeForeground#d0d0d0
  • titleBar.inactiveBackground#080808
  • titleBar.inactiveForeground#808080
  • walkThrough.embeddedEditorBackground#121212
  • welcomePage.buttonBackground#303030
  • welcomePage.buttonHoverBackground#3a3a3a75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#5fafd7
source#d0d0d0
meta.diff, meta.diff.header#808080
markup.inserted#5faf00
markup.deleted#af005f
markup.changed#5faf5f
invalid#af005funderline italic
invalid.deprecated#d0d0d0underline italic
entity.name.filename#87d75f
markup.error#af005f
markup.underlineunderline
markup.bold#5faf5fbold
markup.heading#5fafd7bold
markup.italic#87d75fitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#ffaf00
markup.inline.raw, markup.raw.restructuredtext#5faf00
markup.underline.link, markup.underline.link.image#ffaf00
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#af87d7
entity.name.directive.restructuredtext, markup.quote#87d75fitalic
meta.separator.markdown#808080
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#5faf00
punctuation.definition.constant.restructuredtext#5fafd7
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#5fafd7
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#d0d0d0
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#87d75f
entity.name.type.class, entity.name.class#ffaf00normal
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#5fafd7italic
entity.other.inherited-class#ffaf00italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#808080
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#af87d7
comment.block.documentation entity.name.type#ffaf00italic
comment.block.documentation entity.name.type punctuation.definition.bracket#ffaf00
comment.block.documentation variable#5faf5fitalic
constant, variable.other.constant#5fafd7
constant.character.escape, constant.character.string.escape, constant.regexp#af87d7
entity.name.tag#af87d7
entity.other.attribute-name.parent-selector#af87d7
entity.other.attribute-name#5faf00italic
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#5faf00
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#5faf5fitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#5faf00italic
meta.decorator variable.other.object#5faf00
keyword, punctuation.definition.keyword#af87d7
keyword.control.new, keyword.operator.newbold
meta.selector#af87d7
support#ffaf00italic
support.function.magic, support.variable, variable.other.predefined#5fafd7regular
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#af87d7
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#d0d0d0
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#af87d7
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#ffaf00
constant.other.date, constant.other.timestamp#5faf5f
variable.other.alias.yaml#5faf00italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#af87d7regular
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#ffaf00italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#5faf5f
storage.modifier#af87d7
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#87d75f
punctuation.definition.group.capture.regexp#af87d7
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#af005f
punctuation.definition.character-class.regexp#ffaf00
punctuation.definition.group.regexp#5faf5f
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#af005f
meta.assertion.look-ahead.regexp#5faf00
string#87d75f
punctuation.definition.string.begin, punctuation.definition.string.end#d7af5f
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#5fafd7
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#808080
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#d0d0d0
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#5faf5fitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#d0d0d0normal
meta.selectionset.graphql variable#87d75f
meta.selectionset.graphql meta.arguments variable#d0d0d0
entity.name.fragment.graphql, variable.fragment.graphql#ffaf00
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#d0d0d0
source.shell variable.other#5fafd7
support.constant#5fafd7normal
meta.scope.prerequisites.makefile#87d75f
meta.attribute-selector.scss#87d75f
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#d0d0d0
meta.preprocessor.haskell#808080
Tinted VSCode by Tinted Theming - VS Code Theme