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#db3b2110
  • activityBar.activeBorder#380d7580
  • activityBar.background#2e2e2e
  • activityBar.foreground#cfd0d0
  • activityBar.inactiveForeground#737373
  • activityBarBadge.background#380d75
  • activityBarBadge.foreground#2e2e2e
  • badge.background#2e2e2e
  • badge.foreground#cfd0d0
  • breadcrumb.activeSelectionForeground#cfd0d0
  • breadcrumb.background#2e2e2e
  • breadcrumb.focusForeground#cfd0d0
  • breadcrumb.foreground#737373
  • breadcrumbPicker.background#171717
  • button.background#2e2e2e
  • button.foreground#cfd0d0
  • checkbox.background#2e2e2e
  • checkbox.border#171717
  • checkbox.foreground#cfd0d0
  • contrastBorder#171717
  • debugToolBar.background#2e2e2e
  • diffEditor.insertedTextBackground#3eb38320
  • diffEditor.removedTextBackground#fc6d2650
  • dropdown.background#2e2e2e
  • dropdown.border#171717
  • dropdown.foreground#cfd0d0
  • editor.background#2e2e2e
  • editor.findMatchBackground#fca12180
  • editor.findMatchHighlightBackground#feffff40
  • editor.findRangeHighlightBackground#45454575
  • editor.foldBackground#2e2e2e
  • editor.foreground#cfd0d0
  • editor.hoverHighlightBackground#171717
  • editor.lineHighlightBorder#2e2e2e
  • editor.rangeHighlightBackground#db3b2115
  • editor.selectionBackground#2e2e2e
  • editor.selectionHighlightBackground#2e2e2e
  • editor.snippetFinalTabstopHighlightBackground#2e2e2e
  • editor.snippetFinalTabstopHighlightBorder#3eb383
  • editor.snippetTabstopHighlightBackground#2e2e2e
  • editor.snippetTabstopHighlightBorder#737373
  • editor.wordHighlightBackground#6e49cb50
  • editor.wordHighlightStrongBackground#3eb38350
  • editorCodeLens.foreground#737373
  • editorError.foreground#fc6d26
  • editorGroup.border#db3b21
  • editorGroup.dropBackground#45454570
  • editorGroupHeader.tabsBackground#171717
  • editorGutter.addedBackground#3eb38380
  • editorGutter.deletedBackground#fc6d2680
  • editorGutter.modifiedBackground#6e49cb80
  • editorHoverWidget.background#2e2e2e
  • editorHoverWidget.border#737373
  • editorIndentGuide.activeBackground#feffff45
  • editorIndentGuide.background#feffff1A
  • editorLineNumber.foreground#737373
  • editorLink.activeForeground#6e49cb
  • editorMarkerNavigation.background#2e2e2e
  • editorOverviewRuler.addedForeground#3eb38380
  • editorOverviewRuler.border#171717
  • editorOverviewRuler.currentContentForeground#3eb383
  • editorOverviewRuler.deletedForeground#fc6d2680
  • editorOverviewRuler.errorForeground#fc6d2680
  • editorOverviewRuler.incomingContentForeground#db3b21
  • editorOverviewRuler.infoForeground#6e49cb80
  • editorOverviewRuler.modifiedForeground#6e49cb80
  • editorOverviewRuler.selectionHighlightForeground#fca121
  • editorOverviewRuler.warningForeground#fca12180
  • editorOverviewRuler.wordHighlightForeground#6e49cb
  • editorOverviewRuler.wordHighlightStrongForeground#3eb383
  • editorRuler.foreground#feffff1A
  • editorSuggestWidget.background#2e2e2e
  • editorSuggestWidget.foreground#cfd0d0
  • editorSuggestWidget.selectedBackground#2e2e2e
  • editorWarning.foreground#fca121
  • editorWhitespace.foreground#feffff1A
  • editorWidget.background#2e2e2e
  • errorForeground#fc6d26
  • extensionButton.prominentBackground#3eb38390
  • extensionButton.prominentForeground#cfd0d0
  • extensionButton.prominentHoverBackground#3eb38360
  • focusBorder#737373
  • foreground#cfd0d0
  • gitDecoration.conflictingResourceForeground#fca121
  • gitDecoration.deletedResourceForeground#fc6d26
  • gitDecoration.ignoredResourceForeground#737373
  • gitDecoration.modifiedResourceForeground#6e49cb
  • gitDecoration.untrackedResourceForeground#3eb383
  • input.background#2e2e2e
  • input.border#171717
  • input.foreground#cfd0d0
  • input.placeholderForeground#737373
  • inputOption.activeBorder#db3b21
  • inputValidation.errorBackground#2e2e2e
  • inputValidation.errorBorder#fc6d26
  • inputValidation.errorForeground#fc6d26
  • inputValidation.infoBackground#2e2e2e
  • inputValidation.infoBorder#db3b21
  • inputValidation.infoForeground#db3b21
  • inputValidation.warningBackground#2e2e2e
  • inputValidation.warningBorder#fca121
  • inputValidation.warningForeground#fca121
  • list.activeSelectionBackground#2e2e2e
  • list.activeSelectionForeground#cfd0d0
  • list.dropBackground#2e2e2e
  • list.errorForeground#fc6d26
  • list.focusBackground#45454575
  • list.highlightForeground#6e49cb
  • list.hoverBackground#45454575
  • list.inactiveSelectionBackground#45454575
  • list.warningForeground#fca121
  • listFilterWidget.background#2e2e2e
  • listFilterWidget.noMatchesOutline#fc6d26
  • listFilterWidget.outline#2e2e2e
  • merge.currentHeaderBackground#3eb38390
  • merge.incomingHeaderBackground#db3b2190
  • notification.background#2e2e2e
  • notification.buttonBackground#2e2e2e
  • notification.buttonForeground#cfd0d0
  • notification.buttonHoverBackground#45454575
  • notification.errorBackground#fc6d26
  • notification.errorForeground#2e2e2e
  • notification.foreground#cfd0d0
  • notification.infoBackground#db3b21
  • notification.infoForeground#2e2e2e
  • notification.warningBackground#fca121
  • notification.warningForeground#2e2e2e
  • notificationCenter.border#2e2e2e
  • notificationCenterHeader.background#2e2e2e
  • notificationCenterHeader.foreground#cfd0d0
  • notificationLink.foreground#6e49cb
  • notifications.background#2e2e2e
  • notifications.border#2e2e2e
  • notifications.foreground#cfd0d0
  • notificationsErrorIcon.foreground#fc6d26
  • notificationsInfoIcon.foreground#db3b21
  • notificationsWarningIcon.foreground#fca121
  • notificationToast.border#2e2e2e
  • panel.background#2e2e2e
  • panel.border#db3b21
  • panelInput.border#cfd0d0
  • panelTitle.activeBorder#380d75
  • panelTitle.activeForeground#cfd0d0
  • panelTitle.inactiveForeground#737373
  • peekView.border#2e2e2e
  • peekViewEditor.background#2e2e2e
  • peekViewEditor.matchHighlightBackground#fca01280
  • peekViewResult.background#2e2e2e
  • peekViewResult.fileForeground#cfd0d0
  • peekViewResult.lineForeground#cfd0d0
  • peekViewResult.matchHighlightBackground#fca01280
  • peekViewResult.selectionBackground#2e2e2e
  • peekViewResult.selectionForeground#cfd0d0
  • peekViewTitle.background#171717
  • peekViewTitleDescription.foreground#737373
  • peekViewTitleLabel.foreground#cfd0d0
  • pickerGroup.border#db3b21
  • pickerGroup.foreground#6e49cb
  • progressBar.background#380d75
  • scrollbar.shadow#444444
  • selection.background#db3b21
  • settings.checkboxBackground#2e2e2e
  • settings.checkboxBorder#171717
  • settings.checkboxForeground#cfd0d0
  • settings.dropdownBackground#2e2e2e
  • settings.dropdownBorder#171717
  • settings.dropdownForeground#cfd0d0
  • settings.headerForeground#cfd0d0
  • settings.modifiedItemIndicator#fca121
  • settings.numberInputBackground#2e2e2e
  • settings.numberInputBorder#171717
  • settings.numberInputForeground#cfd0d0
  • settings.textInputBackground#2e2e2e
  • settings.textInputBorder#171717
  • settings.textInputForeground#cfd0d0
  • sideBar.background#2e2e2e
  • sideBarSectionHeader.background#2e2e2e
  • sideBarSectionHeader.border#171717
  • sideBarTitle.foreground#cfd0d0
  • statusBar.background#171717
  • statusBar.debuggingBackground#fc6d26
  • statusBar.debuggingForeground#171717
  • statusBar.foreground#cfd0d0
  • statusBar.noFolderBackground#171717
  • statusBar.noFolderForeground#cfd0d0
  • statusBarItem.prominentBackground#fc6d26
  • statusBarItem.prominentHoverBackground#fca121
  • statusBarItem.remoteBackground#db3b21
  • statusBarItem.remoteForeground#2e2e2e
  • tab.activeBackground#2e2e2e
  • tab.activeBorderTop#380d7580
  • tab.activeForeground#cfd0d0
  • tab.border#171717
  • tab.inactiveBackground#2e2e2e
  • tab.inactiveForeground#737373
  • terminal.ansiBlack#2e2e2e
  • terminal.ansiBlue#db3b21
  • terminal.ansiBrightBlack#454545
  • terminal.ansiBrightBlue#db501f
  • terminal.ansiBrightCyan#7d53e7
  • terminal.ansiBrightGreen#52e9a8
  • terminal.ansiBrightMagenta#441090
  • terminal.ansiBrightRed#ff6517
  • terminal.ansiBrightWhite#feffff
  • terminal.ansiBrightYellow#fca012
  • terminal.ansiCyan#6e49cb
  • terminal.ansiGreen#3eb383
  • terminal.ansiMagenta#380d75
  • terminal.ansiRed#fc6d26
  • terminal.ansiWhite#feffff
  • terminal.ansiYellow#fca121
  • terminal.background#2e2e2e
  • terminal.border#cfd0d0
  • terminal.foreground#cfd0d0
  • terminal.selectionBackground#2e2e2e50
  • textBlockQuote.background#2e2e2e
  • titleBar.activeBackground#2e2e2e
  • titleBar.activeForeground#cfd0d0
  • titleBar.inactiveBackground#171717
  • titleBar.inactiveForeground#737373
  • walkThrough.embeddedEditorBackground#2e2e2e
  • welcomePage.buttonBackground#2e2e2e
  • welcomePage.buttonHoverBackground#45454575
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#db3b21
source#cfd0d0
meta.diff, meta.diff.header#737373
markup.inserted#3eb383
markup.deleted#fc6d26
markup.changed#fca121
invalid#fc6d26underline italic
invalid.deprecated#cfd0d0underline italic
entity.name.filename#fca012
markup.error#fc6d26
markup.underlineunderline
markup.bold#fca121bold
markup.heading#db3b21bold
markup.italic#fca012italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#6e49cb
markup.inline.raw, markup.raw.restructuredtext#3eb383
markup.underline.link, markup.underline.link.image#6e49cb
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#380d75
entity.name.directive.restructuredtext, markup.quote#fca012italic
meta.separator.markdown#737373
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#3eb383
punctuation.definition.constant.restructuredtext#db3b21
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#db3b21
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#cfd0d0
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fca012
entity.name.type.class, entity.name.class#6e49cbnormal
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#db3b21italic
entity.other.inherited-class#6e49cbitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#737373
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#380d75
comment.block.documentation entity.name.type#6e49cbitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#6e49cb
comment.block.documentation variable#fca121italic
constant, variable.other.constant#db3b21
constant.character.escape, constant.character.string.escape, constant.regexp#380d75
entity.name.tag#380d75
entity.other.attribute-name.parent-selector#380d75
entity.other.attribute-name#3eb383italic
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#3eb383
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#fca121italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#3eb383italic
meta.decorator variable.other.object#3eb383
keyword, punctuation.definition.keyword#380d75
keyword.control.new, keyword.operator.newbold
meta.selector#380d75
support#6e49cbitalic
support.function.magic, support.variable, variable.other.predefined#db3b21regular
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#380d75
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#cfd0d0
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#380d75
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#6e49cb
constant.other.date, constant.other.timestamp#fca121
variable.other.alias.yaml#3eb383italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#380d75regular
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#6e49cbitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fca121
storage.modifier#380d75
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fca012
punctuation.definition.group.capture.regexp#380d75
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#fc6d26
punctuation.definition.character-class.regexp#6e49cb
punctuation.definition.group.regexp#fca121
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#fc6d26
meta.assertion.look-ahead.regexp#3eb383
string#fca012
punctuation.definition.string.begin, punctuation.definition.string.end#db501f
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#db3b21
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#737373
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#cfd0d0
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#fca121italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#cfd0d0normal
meta.selectionset.graphql variable#fca012
meta.selectionset.graphql meta.arguments variable#cfd0d0
entity.name.fragment.graphql, variable.fragment.graphql#6e49cb
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#cfd0d0
source.shell variable.other#db3b21
support.constant#db3b21normal
meta.scope.prerequisites.makefile#fca012
meta.attribute-selector.scss#fca012
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#cfd0d0
meta.preprocessor.haskell#737373
Tinted VSCode by Tinted Theming - VS Code Theme