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#a2c5fd10
  • activityBar.activeBorder#ccb7db80
  • activityBar.background#283139
  • activityBar.foreground#93a5b4
  • activityBar.inactiveForeground#60778a
  • activityBarBadge.background#ccb7db
  • activityBarBadge.foreground#283139
  • badge.background#3b4954
  • badge.foreground#93a5b4
  • breadcrumb.activeSelectionForeground#93a5b4
  • breadcrumb.background#283139
  • breadcrumb.focusForeground#93a5b4
  • breadcrumb.foreground#60778a
  • breadcrumbPicker.background#79797a
  • button.background#3e3e3b
  • button.foreground#93a5b4
  • checkbox.background#3e3e3b
  • checkbox.border#79797a
  • checkbox.foreground#93a5b4
  • contrastBorder#79797a
  • debugToolBar.background#3e3e3b
  • diffEditor.insertedTextBackground#8cd4b020
  • diffEditor.removedTextBackground#efa9a950
  • dropdown.background#283139
  • dropdown.border#79797a
  • dropdown.foreground#93a5b4
  • editor.background#283139
  • editor.findMatchBackground#f2db7880
  • editor.findMatchHighlightBackground#e7ebee40
  • editor.findRangeHighlightBackground#4d606f75
  • editor.foldBackground#3e3e3b
  • editor.foreground#93a5b4
  • editor.hoverHighlightBackground#79797a
  • editor.lineHighlightBorder#3b4954
  • editor.rangeHighlightBackground#a2c5fd15
  • editor.selectionBackground#3b4954
  • editor.selectionHighlightBackground#3b4954
  • editor.snippetFinalTabstopHighlightBackground#283139
  • editor.snippetFinalTabstopHighlightBorder#8cd4b0
  • editor.snippetTabstopHighlightBackground#283139
  • editor.snippetTabstopHighlightBorder#60778a
  • editor.wordHighlightBackground#93dfec50
  • editor.wordHighlightStrongBackground#8cd4b050
  • editorCodeLens.foreground#60778a
  • editorError.foreground#efa9a9
  • editorGroup.border#a2c5fd
  • editorGroup.dropBackground#4d606f70
  • editorGroupHeader.tabsBackground#79797a
  • editorGutter.addedBackground#8cd4b080
  • editorGutter.deletedBackground#efa9a980
  • editorGutter.modifiedBackground#93dfec80
  • editorHoverWidget.background#283139
  • editorHoverWidget.border#60778a
  • editorIndentGuide.activeBackground#e7ebee45
  • editorIndentGuide.background#e7ebee1A
  • editorLineNumber.foreground#60778a
  • editorLink.activeForeground#93dfec
  • editorMarkerNavigation.background#3e3e3b
  • editorOverviewRuler.addedForeground#8cd4b080
  • editorOverviewRuler.border#79797a
  • editorOverviewRuler.currentContentForeground#8cd4b0
  • editorOverviewRuler.deletedForeground#efa9a980
  • editorOverviewRuler.errorForeground#efa9a980
  • editorOverviewRuler.incomingContentForeground#a2c5fd
  • editorOverviewRuler.infoForeground#93dfec80
  • editorOverviewRuler.modifiedForeground#93dfec80
  • editorOverviewRuler.selectionHighlightForeground#f2db78
  • editorOverviewRuler.warningForeground#f2db7880
  • editorOverviewRuler.wordHighlightForeground#93dfec
  • editorOverviewRuler.wordHighlightStrongForeground#8cd4b0
  • editorRuler.foreground#e7ebee1A
  • editorSuggestWidget.background#3e3e3b
  • editorSuggestWidget.foreground#93a5b4
  • editorSuggestWidget.selectedBackground#3b4954
  • editorWarning.foreground#f2db78
  • editorWhitespace.foreground#e7ebee1A
  • editorWidget.background#3e3e3b
  • errorForeground#efa9a9
  • extensionButton.prominentBackground#8cd4b090
  • extensionButton.prominentForeground#93a5b4
  • extensionButton.prominentHoverBackground#8cd4b060
  • focusBorder#60778a
  • foreground#93a5b4
  • gitDecoration.conflictingResourceForeground#f2db78
  • gitDecoration.deletedResourceForeground#efa9a9
  • gitDecoration.ignoredResourceForeground#60778a
  • gitDecoration.modifiedResourceForeground#93dfec
  • gitDecoration.untrackedResourceForeground#8cd4b0
  • input.background#283139
  • input.border#79797a
  • input.foreground#93a5b4
  • input.placeholderForeground#60778a
  • inputOption.activeBorder#a2c5fd
  • inputValidation.errorBackground#283139
  • inputValidation.errorBorder#efa9a9
  • inputValidation.errorForeground#efa9a9
  • inputValidation.infoBackground#283139
  • inputValidation.infoBorder#a2c5fd
  • inputValidation.infoForeground#a2c5fd
  • inputValidation.warningBackground#283139
  • inputValidation.warningBorder#f2db78
  • inputValidation.warningForeground#f2db78
  • list.activeSelectionBackground#3b4954
  • list.activeSelectionForeground#93a5b4
  • list.dropBackground#3b4954
  • list.errorForeground#efa9a9
  • list.focusBackground#4d606f75
  • list.highlightForeground#93dfec
  • list.hoverBackground#4d606f75
  • list.inactiveSelectionBackground#4d606f75
  • list.warningForeground#f2db78
  • listFilterWidget.background#283139
  • listFilterWidget.noMatchesOutline#efa9a9
  • listFilterWidget.outline#3b4954
  • merge.currentHeaderBackground#8cd4b090
  • merge.incomingHeaderBackground#a2c5fd90
  • notification.background#283139
  • notification.buttonBackground#3b4954
  • notification.buttonForeground#93a5b4
  • notification.buttonHoverBackground#4d606f75
  • notification.errorBackground#efa9a9
  • notification.errorForeground#283139
  • notification.foreground#93a5b4
  • notification.infoBackground#a2c5fd
  • notification.infoForeground#283139
  • notification.warningBackground#f2db78
  • notification.warningForeground#283139
  • notificationCenter.border#3e3e3b
  • notificationCenterHeader.background#283139
  • notificationCenterHeader.foreground#93a5b4
  • notificationLink.foreground#93dfec
  • notifications.background#283139
  • notifications.border#3e3e3b
  • notifications.foreground#93a5b4
  • notificationsErrorIcon.foreground#efa9a9
  • notificationsInfoIcon.foreground#a2c5fd
  • notificationsWarningIcon.foreground#f2db78
  • notificationToast.border#3e3e3b
  • panel.background#283139
  • panel.border#a2c5fd
  • panelInput.border#93a5b4
  • panelTitle.activeBorder#ccb7db
  • panelTitle.activeForeground#93a5b4
  • panelTitle.inactiveForeground#60778a
  • peekView.border#3b4954
  • peekViewEditor.background#283139
  • peekViewEditor.matchHighlightBackground#fff0b280
  • peekViewResult.background#3e3e3b
  • peekViewResult.fileForeground#93a5b4
  • peekViewResult.lineForeground#93a5b4
  • peekViewResult.matchHighlightBackground#fff0b280
  • peekViewResult.selectionBackground#3b4954
  • peekViewResult.selectionForeground#93a5b4
  • peekViewTitle.background#79797a
  • peekViewTitleDescription.foreground#60778a
  • peekViewTitleLabel.foreground#93a5b4
  • pickerGroup.border#a2c5fd
  • pickerGroup.foreground#93dfec
  • progressBar.background#ccb7db
  • scrollbar.shadow#444444
  • selection.background#a2c5fd
  • settings.checkboxBackground#3e3e3b
  • settings.checkboxBorder#79797a
  • settings.checkboxForeground#93a5b4
  • settings.dropdownBackground#3e3e3b
  • settings.dropdownBorder#79797a
  • settings.dropdownForeground#93a5b4
  • settings.headerForeground#93a5b4
  • settings.modifiedItemIndicator#f2db78
  • settings.numberInputBackground#3e3e3b
  • settings.numberInputBorder#79797a
  • settings.numberInputForeground#93a5b4
  • settings.textInputBackground#3e3e3b
  • settings.textInputBorder#79797a
  • settings.textInputForeground#93a5b4
  • sideBar.background#3e3e3b
  • sideBarSectionHeader.background#283139
  • sideBarSectionHeader.border#79797a
  • sideBarTitle.foreground#93a5b4
  • statusBar.background#79797a
  • statusBar.debuggingBackground#efa9a9
  • statusBar.debuggingForeground#79797a
  • statusBar.foreground#93a5b4
  • statusBar.noFolderBackground#79797a
  • statusBar.noFolderForeground#93a5b4
  • statusBarItem.prominentBackground#efa9a9
  • statusBarItem.prominentHoverBackground#f2db78
  • statusBarItem.remoteBackground#a2c5fd
  • statusBarItem.remoteForeground#283139
  • tab.activeBackground#283139
  • tab.activeBorderTop#ccb7db80
  • tab.activeForeground#93a5b4
  • tab.border#79797a
  • tab.inactiveBackground#3e3e3b
  • tab.inactiveForeground#60778a
  • terminal.ansiBlack#3b4954
  • terminal.ansiBlue#a2c5fd
  • terminal.ansiBrightBlack#4d606f
  • terminal.ansiBrightBlue#c3d9fd
  • terminal.ansiBrightCyan#b2f0fd
  • terminal.ansiBrightGreen#b5e090
  • terminal.ansiBrightMagenta#e3c3e6
  • terminal.ansiBrightRed#f6bfbf
  • terminal.ansiBrightWhite#e7ebee
  • terminal.ansiBrightYellow#fff0b2
  • terminal.ansiCyan#93dfec
  • terminal.ansiGreen#8cd4b0
  • terminal.ansiMagenta#ccb7db
  • terminal.ansiRed#efa9a9
  • terminal.ansiWhite#abb9c4
  • terminal.ansiYellow#f2db78
  • terminal.background#283139
  • terminal.border#93a5b4
  • terminal.foreground#93a5b4
  • terminal.selectionBackground#3b495450
  • textBlockQuote.background#3e3e3b
  • titleBar.activeBackground#3e3e3b
  • titleBar.activeForeground#93a5b4
  • titleBar.inactiveBackground#79797a
  • titleBar.inactiveForeground#60778a
  • walkThrough.embeddedEditorBackground#3e3e3b
  • welcomePage.buttonBackground#3b4954
  • welcomePage.buttonHoverBackground#4d606f75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#a2c5fd
source#93a5b4
meta.diff, meta.diff.header#60778a
markup.inserted#8cd4b0
markup.deleted#efa9a9
markup.changed#f2db78
invalid#efa9a9underline italic
invalid.deprecated#93a5b4underline italic
entity.name.filename#fff0b2
markup.error#efa9a9
markup.underlineunderline
markup.bold#f2db78bold
markup.heading#a2c5fdbold
markup.italic#fff0b2italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#93dfec
markup.inline.raw, markup.raw.restructuredtext#8cd4b0
markup.underline.link, markup.underline.link.image#93dfec
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ccb7db
entity.name.directive.restructuredtext, markup.quote#fff0b2italic
meta.separator.markdown#60778a
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#8cd4b0
punctuation.definition.constant.restructuredtext#a2c5fd
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#a2c5fd
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#93a5b4
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fff0b2
entity.name.type.class, entity.name.class#93dfecnormal
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#a2c5fditalic
entity.other.inherited-class#93dfecitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#60778a
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ccb7db
comment.block.documentation entity.name.type#93dfecitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#93dfec
comment.block.documentation variable#f2db78italic
constant, variable.other.constant#a2c5fd
constant.character.escape, constant.character.string.escape, constant.regexp#ccb7db
entity.name.tag#ccb7db
entity.other.attribute-name.parent-selector#ccb7db
entity.other.attribute-name#8cd4b0italic
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#8cd4b0
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#f2db78italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#8cd4b0italic
meta.decorator variable.other.object#8cd4b0
keyword, punctuation.definition.keyword#ccb7db
keyword.control.new, keyword.operator.newbold
meta.selector#ccb7db
support#93dfecitalic
support.function.magic, support.variable, variable.other.predefined#a2c5fdregular
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#ccb7db
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#93a5b4
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#ccb7db
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#93dfec
constant.other.date, constant.other.timestamp#f2db78
variable.other.alias.yaml#8cd4b0italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ccb7dbregular
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#93dfecitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f2db78
storage.modifier#ccb7db
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fff0b2
punctuation.definition.group.capture.regexp#ccb7db
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#efa9a9
punctuation.definition.character-class.regexp#93dfec
punctuation.definition.group.regexp#f2db78
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#efa9a9
meta.assertion.look-ahead.regexp#8cd4b0
string#fff0b2
punctuation.definition.string.begin, punctuation.definition.string.end#e0b88a
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#a2c5fd
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#60778a
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#93a5b4
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#f2db78italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#93a5b4normal
meta.selectionset.graphql variable#fff0b2
meta.selectionset.graphql meta.arguments variable#93a5b4
entity.name.fragment.graphql, variable.fragment.graphql#93dfec
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#93a5b4
source.shell variable.other#a2c5fd
support.constant#a2c5fdnormal
meta.scope.prerequisites.makefile#fff0b2
meta.attribute-selector.scss#fff0b2
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#93a5b4
meta.preprocessor.haskell#60778a
Tinted VSCode by Tinted Theming - VS Code Theme