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#2c70b710
  • activityBar.activeBorder#f02d4e80
  • activityBar.background#1b1b1d
  • activityBar.foreground#98ac9c
  • activityBar.inactiveForeground#71ac7c
  • activityBarBadge.background#f02d4e
  • activityBarBadge.foreground#1b1b1d
  • badge.background#242426
  • badge.foreground#98ac9c
  • breadcrumb.activeSelectionForeground#98ac9c
  • breadcrumb.background#1b1b1d
  • breadcrumb.focusForeground#98ac9c
  • breadcrumb.foreground#71ac7c
  • breadcrumbPicker.background#1f3924
  • button.background#3e7248
  • button.foreground#98ac9c
  • checkbox.background#3e7248
  • checkbox.border#1f3924
  • checkbox.foreground#98ac9c
  • contrastBorder#1f3924
  • debugToolBar.background#3e7248
  • diffEditor.insertedTextBackground#56574620
  • diffEditor.removedTextBackground#f8501a50
  • dropdown.background#1b1b1d
  • dropdown.border#1f3924
  • dropdown.foreground#98ac9c
  • editor.background#1b1b1d
  • editor.findMatchBackground#f9761d80
  • editor.findMatchHighlightBackground#8b735a40
  • editor.findRangeHighlightBackground#5eac6c75
  • editor.foldBackground#3e7248
  • editor.foreground#98ac9c
  • editor.hoverHighlightBackground#1f3924
  • editor.lineHighlightBorder#242426
  • editor.rangeHighlightBackground#2c70b715
  • editor.selectionBackground#242426
  • editor.selectionHighlightBackground#242426
  • editor.snippetFinalTabstopHighlightBackground#1b1b1d
  • editor.snippetFinalTabstopHighlightBorder#565746
  • editor.snippetTabstopHighlightBackground#1b1b1d
  • editor.snippetTabstopHighlightBorder#71ac7c
  • editor.wordHighlightBackground#3ba0a550
  • editor.wordHighlightStrongBackground#56574650
  • editorCodeLens.foreground#71ac7c
  • editorError.foreground#f8501a
  • editorGroup.border#2c70b7
  • editorGroup.dropBackground#5eac6c70
  • editorGroupHeader.tabsBackground#1f3924
  • editorGutter.addedBackground#56574680
  • editorGutter.deletedBackground#f8501a80
  • editorGutter.modifiedBackground#3ba0a580
  • editorHoverWidget.background#1b1b1d
  • editorHoverWidget.border#71ac7c
  • editorIndentGuide.activeBackground#8b735a45
  • editorIndentGuide.background#8b735a1A
  • editorLineNumber.foreground#71ac7c
  • editorLink.activeForeground#3ba0a5
  • editorMarkerNavigation.background#3e7248
  • editorOverviewRuler.addedForeground#56574680
  • editorOverviewRuler.border#1f3924
  • editorOverviewRuler.currentContentForeground#565746
  • editorOverviewRuler.deletedForeground#f8501a80
  • editorOverviewRuler.errorForeground#f8501a80
  • editorOverviewRuler.incomingContentForeground#2c70b7
  • editorOverviewRuler.infoForeground#3ba0a580
  • editorOverviewRuler.modifiedForeground#3ba0a580
  • editorOverviewRuler.selectionHighlightForeground#f9761d
  • editorOverviewRuler.warningForeground#f9761d80
  • editorOverviewRuler.wordHighlightForeground#3ba0a5
  • editorOverviewRuler.wordHighlightStrongForeground#565746
  • editorRuler.foreground#8b735a1A
  • editorSuggestWidget.background#3e7248
  • editorSuggestWidget.foreground#98ac9c
  • editorSuggestWidget.selectedBackground#242426
  • editorWarning.foreground#f9761d
  • editorWhitespace.foreground#8b735a1A
  • editorWidget.background#3e7248
  • errorForeground#f8501a
  • extensionButton.prominentBackground#56574690
  • extensionButton.prominentForeground#98ac9c
  • extensionButton.prominentHoverBackground#56574660
  • focusBorder#71ac7c
  • foreground#98ac9c
  • gitDecoration.conflictingResourceForeground#f9761d
  • gitDecoration.deletedResourceForeground#f8501a
  • gitDecoration.ignoredResourceForeground#71ac7c
  • gitDecoration.modifiedResourceForeground#3ba0a5
  • gitDecoration.untrackedResourceForeground#565746
  • input.background#1b1b1d
  • input.border#1f3924
  • input.foreground#98ac9c
  • input.placeholderForeground#71ac7c
  • inputOption.activeBorder#2c70b7
  • inputValidation.errorBackground#1b1b1d
  • inputValidation.errorBorder#f8501a
  • inputValidation.errorForeground#f8501a
  • inputValidation.infoBackground#1b1b1d
  • inputValidation.infoBorder#2c70b7
  • inputValidation.infoForeground#2c70b7
  • inputValidation.warningBackground#1b1b1d
  • inputValidation.warningBorder#f9761d
  • inputValidation.warningForeground#f9761d
  • list.activeSelectionBackground#242426
  • list.activeSelectionForeground#98ac9c
  • list.dropBackground#242426
  • list.errorForeground#f8501a
  • list.focusBackground#5eac6c75
  • list.highlightForeground#3ba0a5
  • list.hoverBackground#5eac6c75
  • list.inactiveSelectionBackground#5eac6c75
  • list.warningForeground#f9761d
  • listFilterWidget.background#1b1b1d
  • listFilterWidget.noMatchesOutline#f8501a
  • listFilterWidget.outline#242426
  • merge.currentHeaderBackground#56574690
  • merge.incomingHeaderBackground#2c70b790
  • notification.background#1b1b1d
  • notification.buttonBackground#242426
  • notification.buttonForeground#98ac9c
  • notification.buttonHoverBackground#5eac6c75
  • notification.errorBackground#f8501a
  • notification.errorForeground#1b1b1d
  • notification.foreground#98ac9c
  • notification.infoBackground#2c70b7
  • notification.infoForeground#1b1b1d
  • notification.warningBackground#f9761d
  • notification.warningForeground#1b1b1d
  • notificationCenter.border#3e7248
  • notificationCenterHeader.background#1b1b1d
  • notificationCenterHeader.foreground#98ac9c
  • notificationLink.foreground#3ba0a5
  • notifications.background#1b1b1d
  • notifications.border#3e7248
  • notifications.foreground#98ac9c
  • notificationsErrorIcon.foreground#f8501a
  • notificationsInfoIcon.foreground#2c70b7
  • notificationsWarningIcon.foreground#f9761d
  • notificationToast.border#3e7248
  • panel.background#1b1b1d
  • panel.border#2c70b7
  • panelInput.border#98ac9c
  • panelTitle.activeBorder#f02d4e
  • panelTitle.activeForeground#98ac9c
  • panelTitle.inactiveForeground#71ac7c
  • peekView.border#242426
  • peekViewEditor.background#1b1b1d
  • peekViewEditor.matchHighlightBackground#fcc22480
  • peekViewResult.background#3e7248
  • peekViewResult.fileForeground#98ac9c
  • peekViewResult.lineForeground#98ac9c
  • peekViewResult.matchHighlightBackground#fcc22480
  • peekViewResult.selectionBackground#242426
  • peekViewResult.selectionForeground#98ac9c
  • peekViewTitle.background#1f3924
  • peekViewTitleDescription.foreground#71ac7c
  • peekViewTitleLabel.foreground#98ac9c
  • pickerGroup.border#2c70b7
  • pickerGroup.foreground#3ba0a5
  • progressBar.background#f02d4e
  • scrollbar.shadow#444444
  • selection.background#2c70b7
  • settings.checkboxBackground#3e7248
  • settings.checkboxBorder#1f3924
  • settings.checkboxForeground#98ac9c
  • settings.dropdownBackground#3e7248
  • settings.dropdownBorder#1f3924
  • settings.dropdownForeground#98ac9c
  • settings.headerForeground#98ac9c
  • settings.modifiedItemIndicator#f9761d
  • settings.numberInputBackground#3e7248
  • settings.numberInputBorder#1f3924
  • settings.numberInputForeground#98ac9c
  • settings.textInputBackground#3e7248
  • settings.textInputBorder#1f3924
  • settings.textInputForeground#98ac9c
  • sideBar.background#3e7248
  • sideBarSectionHeader.background#1b1b1d
  • sideBarSectionHeader.border#1f3924
  • sideBarTitle.foreground#98ac9c
  • statusBar.background#1f3924
  • statusBar.debuggingBackground#f8501a
  • statusBar.debuggingForeground#1f3924
  • statusBar.foreground#98ac9c
  • statusBar.noFolderBackground#1f3924
  • statusBar.noFolderForeground#98ac9c
  • statusBarItem.prominentBackground#f8501a
  • statusBarItem.prominentHoverBackground#f9761d
  • statusBarItem.remoteBackground#2c70b7
  • statusBarItem.remoteForeground#1b1b1d
  • tab.activeBackground#1b1b1d
  • tab.activeBorderTop#f02d4e80
  • tab.activeForeground#98ac9c
  • tab.border#1f3924
  • tab.inactiveBackground#3e7248
  • tab.inactiveForeground#71ac7c
  • terminal.ansiBlack#242426
  • terminal.ansiBlue#2c70b7
  • terminal.ansiBrightBlack#5eac6c
  • terminal.ansiBrightBlue#3393c9
  • terminal.ansiBrightCyan#4ebce5
  • terminal.ansiBrightGreen#74eb4c
  • terminal.ansiBrightMagenta#e75e4e
  • terminal.ansiBrightRed#f64319
  • terminal.ansiBrightWhite#8b735a
  • terminal.ansiBrightYellow#fcc224
  • terminal.ansiCyan#3ba0a5
  • terminal.ansiGreen#565746
  • terminal.ansiMagenta#f02d4e
  • terminal.ansiRed#f8501a
  • terminal.ansiWhite#acacac
  • terminal.ansiYellow#f9761d
  • terminal.background#1b1b1d
  • terminal.border#98ac9c
  • terminal.foreground#98ac9c
  • terminal.selectionBackground#24242650
  • textBlockQuote.background#3e7248
  • titleBar.activeBackground#3e7248
  • titleBar.activeForeground#98ac9c
  • titleBar.inactiveBackground#1f3924
  • titleBar.inactiveForeground#71ac7c
  • walkThrough.embeddedEditorBackground#3e7248
  • welcomePage.buttonBackground#242426
  • welcomePage.buttonHoverBackground#5eac6c75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#2c70b7
source#98ac9c
meta.diff, meta.diff.header#71ac7c
markup.inserted#565746
markup.deleted#f8501a
markup.changed#f9761d
invalid#f8501aunderline italic
invalid.deprecated#98ac9cunderline italic
entity.name.filename#fcc224
markup.error#f8501a
markup.underlineunderline
markup.bold#f9761dbold
markup.heading#2c70b7bold
markup.italic#fcc224italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#3ba0a5
markup.inline.raw, markup.raw.restructuredtext#565746
markup.underline.link, markup.underline.link.image#3ba0a5
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#f02d4e
entity.name.directive.restructuredtext, markup.quote#fcc224italic
meta.separator.markdown#71ac7c
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#565746
punctuation.definition.constant.restructuredtext#2c70b7
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#2c70b7
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#98ac9c
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fcc224
entity.name.type.class, entity.name.class#3ba0a5normal
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#2c70b7italic
entity.other.inherited-class#3ba0a5italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#71ac7c
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#f02d4e
comment.block.documentation entity.name.type#3ba0a5italic
comment.block.documentation entity.name.type punctuation.definition.bracket#3ba0a5
comment.block.documentation variable#f9761ditalic
constant, variable.other.constant#2c70b7
constant.character.escape, constant.character.string.escape, constant.regexp#f02d4e
entity.name.tag#f02d4e
entity.other.attribute-name.parent-selector#f02d4e
entity.other.attribute-name#565746italic
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#565746
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#f9761ditalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#565746italic
meta.decorator variable.other.object#565746
keyword, punctuation.definition.keyword#f02d4e
keyword.control.new, keyword.operator.newbold
meta.selector#f02d4e
support#3ba0a5italic
support.function.magic, support.variable, variable.other.predefined#2c70b7regular
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#f02d4e
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#98ac9c
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#f02d4e
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#3ba0a5
constant.other.date, constant.other.timestamp#f9761d
variable.other.alias.yaml#565746italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#f02d4eregular
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#3ba0a5italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f9761d
storage.modifier#f02d4e
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fcc224
punctuation.definition.group.capture.regexp#f02d4e
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f8501a
punctuation.definition.character-class.regexp#3ba0a5
punctuation.definition.group.regexp#f9761d
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f8501a
meta.assertion.look-ahead.regexp#565746
string#fcc224
punctuation.definition.string.begin, punctuation.definition.string.end#3393c9
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#2c70b7
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#71ac7c
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#98ac9c
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#f9761ditalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#98ac9cnormal
meta.selectionset.graphql variable#fcc224
meta.selectionset.graphql meta.arguments variable#98ac9c
entity.name.fragment.graphql, variable.fragment.graphql#3ba0a5
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#98ac9c
source.shell variable.other#2c70b7
support.constant#2c70b7normal
meta.scope.prerequisites.makefile#fcc224
meta.attribute-selector.scss#fcc224
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#98ac9c
meta.preprocessor.haskell#71ac7c
Tinted VSCode by Tinted Theming - VS Code Theme