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#388bfd10
  • activityBar.activeBorder#a371f780
  • activityBar.background#161b22
  • activityBar.foreground#c9d1d9
  • activityBar.inactiveForeground#6e7681
  • activityBarBadge.background#a371f7
  • activityBarBadge.foreground#161b22
  • badge.background#30363d
  • badge.foreground#c9d1d9
  • breadcrumb.activeSelectionForeground#c9d1d9
  • breadcrumb.background#161b22
  • breadcrumb.focusForeground#c9d1d9
  • breadcrumb.foreground#6e7681
  • breadcrumbPicker.background#000000
  • button.background#1f2328
  • button.foreground#c9d1d9
  • checkbox.background#1f2328
  • checkbox.border#000000
  • checkbox.foreground#c9d1d9
  • contrastBorder#000000
  • debugToolBar.background#1f2328
  • diffEditor.insertedTextBackground#2ea04320
  • diffEditor.removedTextBackground#f8514950
  • dropdown.background#161b22
  • dropdown.border#000000
  • dropdown.foreground#c9d1d9
  • editor.background#161b22
  • editor.findMatchBackground#db6d2880
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#484f5875
  • editor.foldBackground#1f2328
  • editor.foreground#c9d1d9
  • editor.hoverHighlightBackground#000000
  • editor.lineHighlightBorder#30363d
  • editor.rangeHighlightBackground#388bfd15
  • editor.selectionBackground#30363d
  • editor.selectionHighlightBackground#30363d
  • editor.snippetFinalTabstopHighlightBackground#161b22
  • editor.snippetFinalTabstopHighlightBorder#2ea043
  • editor.snippetTabstopHighlightBackground#161b22
  • editor.snippetTabstopHighlightBorder#6e7681
  • editor.wordHighlightBackground#2a9d9a50
  • editor.wordHighlightStrongBackground#2ea04350
  • editorCodeLens.foreground#6e7681
  • editorError.foreground#f85149
  • editorGroup.border#388bfd
  • editorGroup.dropBackground#484f5870
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#2ea04380
  • editorGutter.deletedBackground#f8514980
  • editorGutter.modifiedBackground#2a9d9a80
  • editorHoverWidget.background#161b22
  • editorHoverWidget.border#6e7681
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#6e7681
  • editorLink.activeForeground#2a9d9a
  • editorMarkerNavigation.background#1f2328
  • editorOverviewRuler.addedForeground#2ea04380
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.currentContentForeground#2ea043
  • editorOverviewRuler.deletedForeground#f8514980
  • editorOverviewRuler.errorForeground#f8514980
  • editorOverviewRuler.incomingContentForeground#388bfd
  • editorOverviewRuler.infoForeground#2a9d9a80
  • editorOverviewRuler.modifiedForeground#2a9d9a80
  • editorOverviewRuler.selectionHighlightForeground#db6d28
  • editorOverviewRuler.warningForeground#db6d2880
  • editorOverviewRuler.wordHighlightForeground#2a9d9a
  • editorOverviewRuler.wordHighlightStrongForeground#2ea043
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#1f2328
  • editorSuggestWidget.foreground#c9d1d9
  • editorSuggestWidget.selectedBackground#30363d
  • editorWarning.foreground#db6d28
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#1f2328
  • errorForeground#f85149
  • extensionButton.prominentBackground#2ea04390
  • extensionButton.prominentForeground#c9d1d9
  • extensionButton.prominentHoverBackground#2ea04360
  • focusBorder#6e7681
  • foreground#c9d1d9
  • gitDecoration.conflictingResourceForeground#db6d28
  • gitDecoration.deletedResourceForeground#f85149
  • gitDecoration.ignoredResourceForeground#6e7681
  • gitDecoration.modifiedResourceForeground#2a9d9a
  • gitDecoration.untrackedResourceForeground#2ea043
  • input.background#161b22
  • input.border#000000
  • input.foreground#c9d1d9
  • input.placeholderForeground#6e7681
  • inputOption.activeBorder#388bfd
  • inputValidation.errorBackground#161b22
  • inputValidation.errorBorder#f85149
  • inputValidation.errorForeground#f85149
  • inputValidation.infoBackground#161b22
  • inputValidation.infoBorder#388bfd
  • inputValidation.infoForeground#388bfd
  • inputValidation.warningBackground#161b22
  • inputValidation.warningBorder#db6d28
  • inputValidation.warningForeground#db6d28
  • list.activeSelectionBackground#30363d
  • list.activeSelectionForeground#c9d1d9
  • list.dropBackground#30363d
  • list.errorForeground#f85149
  • list.focusBackground#484f5875
  • list.highlightForeground#2a9d9a
  • list.hoverBackground#484f5875
  • list.inactiveSelectionBackground#484f5875
  • list.warningForeground#db6d28
  • listFilterWidget.background#161b22
  • listFilterWidget.noMatchesOutline#f85149
  • listFilterWidget.outline#30363d
  • merge.currentHeaderBackground#2ea04390
  • merge.incomingHeaderBackground#388bfd90
  • notification.background#161b22
  • notification.buttonBackground#30363d
  • notification.buttonForeground#c9d1d9
  • notification.buttonHoverBackground#484f5875
  • notification.errorBackground#f85149
  • notification.errorForeground#161b22
  • notification.foreground#c9d1d9
  • notification.infoBackground#388bfd
  • notification.infoForeground#161b22
  • notification.warningBackground#db6d28
  • notification.warningForeground#161b22
  • notificationCenter.border#1f2328
  • notificationCenterHeader.background#161b22
  • notificationCenterHeader.foreground#c9d1d9
  • notificationLink.foreground#2a9d9a
  • notifications.background#161b22
  • notifications.border#1f2328
  • notifications.foreground#c9d1d9
  • notificationsErrorIcon.foreground#f85149
  • notificationsInfoIcon.foreground#388bfd
  • notificationsWarningIcon.foreground#db6d28
  • notificationToast.border#1f2328
  • panel.background#161b22
  • panel.border#388bfd
  • panelInput.border#c9d1d9
  • panelTitle.activeBorder#a371f7
  • panelTitle.activeForeground#c9d1d9
  • panelTitle.inactiveForeground#6e7681
  • peekView.border#30363d
  • peekViewEditor.background#161b22
  • peekViewEditor.matchHighlightBackground#d2992280
  • peekViewResult.background#1f2328
  • peekViewResult.fileForeground#c9d1d9
  • peekViewResult.lineForeground#c9d1d9
  • peekViewResult.matchHighlightBackground#d2992280
  • peekViewResult.selectionBackground#30363d
  • peekViewResult.selectionForeground#c9d1d9
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#6e7681
  • peekViewTitleLabel.foreground#c9d1d9
  • pickerGroup.border#388bfd
  • pickerGroup.foreground#2a9d9a
  • progressBar.background#a371f7
  • scrollbar.shadow#444444
  • selection.background#388bfd
  • settings.checkboxBackground#1f2328
  • settings.checkboxBorder#000000
  • settings.checkboxForeground#c9d1d9
  • settings.dropdownBackground#1f2328
  • settings.dropdownBorder#000000
  • settings.dropdownForeground#c9d1d9
  • settings.headerForeground#c9d1d9
  • settings.modifiedItemIndicator#db6d28
  • settings.numberInputBackground#1f2328
  • settings.numberInputBorder#000000
  • settings.numberInputForeground#c9d1d9
  • settings.textInputBackground#1f2328
  • settings.textInputBorder#000000
  • settings.textInputForeground#c9d1d9
  • sideBar.background#1f2328
  • sideBarSectionHeader.background#161b22
  • sideBarSectionHeader.border#000000
  • sideBarTitle.foreground#c9d1d9
  • statusBar.background#000000
  • statusBar.debuggingBackground#f85149
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#c9d1d9
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#c9d1d9
  • statusBarItem.prominentBackground#f85149
  • statusBarItem.prominentHoverBackground#db6d28
  • statusBarItem.remoteBackground#388bfd
  • statusBarItem.remoteForeground#161b22
  • tab.activeBackground#161b22
  • tab.activeBorderTop#a371f780
  • tab.activeForeground#c9d1d9
  • tab.border#000000
  • tab.inactiveBackground#1f2328
  • tab.inactiveForeground#6e7681
  • terminal.ansiBlack#30363d
  • terminal.ansiBlue#388bfd
  • terminal.ansiBrightBlack#484f58
  • terminal.ansiBrightBlue#58a6ff
  • terminal.ansiBrightCyan#33b3ae
  • terminal.ansiBrightGreen#3fb950
  • terminal.ansiBrightMagenta#bc8cff
  • terminal.ansiBrightRed#ff7b72
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#d29922
  • terminal.ansiCyan#2a9d9a
  • terminal.ansiGreen#2ea043
  • terminal.ansiMagenta#a371f7
  • terminal.ansiRed#f85149
  • terminal.ansiWhite#f0f6fc
  • terminal.ansiYellow#db6d28
  • terminal.background#161b22
  • terminal.border#c9d1d9
  • terminal.foreground#c9d1d9
  • terminal.selectionBackground#30363d50
  • textBlockQuote.background#1f2328
  • titleBar.activeBackground#1f2328
  • titleBar.activeForeground#c9d1d9
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#6e7681
  • walkThrough.embeddedEditorBackground#1f2328
  • welcomePage.buttonBackground#30363d
  • welcomePage.buttonHoverBackground#484f5875
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#388bfd
source#c9d1d9
meta.diff, meta.diff.header#6e7681
markup.inserted#2ea043
markup.deleted#f85149
markup.changed#db6d28
invalid#f85149underline italic
invalid.deprecated#c9d1d9underline italic
entity.name.filename#d29922
markup.error#f85149
markup.underlineunderline
markup.bold#db6d28bold
markup.heading#388bfdbold
markup.italic#d29922italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#2a9d9a
markup.inline.raw, markup.raw.restructuredtext#2ea043
markup.underline.link, markup.underline.link.image#2a9d9a
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#a371f7
entity.name.directive.restructuredtext, markup.quote#d29922italic
meta.separator.markdown#6e7681
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#2ea043
punctuation.definition.constant.restructuredtext#388bfd
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#388bfd
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#c9d1d9
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#d29922
entity.name.type.class, entity.name.class#2a9d9anormal
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#388bfditalic
entity.other.inherited-class#2a9d9aitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6e7681
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#a371f7
comment.block.documentation entity.name.type#2a9d9aitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#2a9d9a
comment.block.documentation variable#db6d28italic
constant, variable.other.constant#388bfd
constant.character.escape, constant.character.string.escape, constant.regexp#a371f7
entity.name.tag#a371f7
entity.other.attribute-name.parent-selector#a371f7
entity.other.attribute-name#2ea043italic
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#2ea043
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#db6d28italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#2ea043italic
meta.decorator variable.other.object#2ea043
keyword, punctuation.definition.keyword#a371f7
keyword.control.new, keyword.operator.newbold
meta.selector#a371f7
support#2a9d9aitalic
support.function.magic, support.variable, variable.other.predefined#388bfdregular
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#a371f7
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#c9d1d9
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#a371f7
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#2a9d9a
constant.other.date, constant.other.timestamp#db6d28
variable.other.alias.yaml#2ea043italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#a371f7regular
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#2a9d9aitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#db6d28
storage.modifier#a371f7
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#d29922
punctuation.definition.group.capture.regexp#a371f7
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f85149
punctuation.definition.character-class.regexp#2a9d9a
punctuation.definition.group.regexp#db6d28
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f85149
meta.assertion.look-ahead.regexp#2ea043
string#d29922
punctuation.definition.string.begin, punctuation.definition.string.end#bb8009
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#388bfd
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#6e7681
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#c9d1d9
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#db6d28italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#c9d1d9normal
meta.selectionset.graphql variable#d29922
meta.selectionset.graphql meta.arguments variable#c9d1d9
entity.name.fragment.graphql, variable.fragment.graphql#2a9d9a
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#c9d1d9
source.shell variable.other#388bfd
support.constant#388bfdnormal
meta.scope.prerequisites.makefile#d29922
meta.attribute-selector.scss#d29922
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#c9d1d9
meta.preprocessor.haskell#6e7681
Tinted VSCode by Tinted Theming - VS Code Theme