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#1e66f510
  • activityBar.activeBorder#8839ef80
  • activityBar.background#eff1f5
  • activityBar.foreground#4c4f69
  • activityBar.inactiveForeground#bcc0cc
  • activityBarBadge.background#8839ef
  • activityBarBadge.foreground#eff1f5
  • badge.background#e6e9ef
  • badge.foreground#4c4f69
  • breadcrumb.activeSelectionForeground#4c4f69
  • breadcrumb.background#eff1f5
  • breadcrumb.focusForeground#4c4f69
  • breadcrumb.foreground#bcc0cc
  • breadcrumbPicker.background#dce0e8
  • button.background#e6e9ef
  • button.foreground#4c4f69
  • checkbox.background#e6e9ef
  • checkbox.border#dce0e8
  • checkbox.foreground#4c4f69
  • contrastBorder#dce0e8
  • debugToolBar.background#e6e9ef
  • diffEditor.insertedTextBackground#40a02b20
  • diffEditor.removedTextBackground#d20f3950
  • dropdown.background#eff1f5
  • dropdown.border#dce0e8
  • dropdown.foreground#4c4f69
  • editor.background#eff1f5
  • editor.findMatchBackground#fe640b80
  • editor.findMatchHighlightBackground#7287fd40
  • editor.findRangeHighlightBackground#ccd0da75
  • editor.foldBackground#e6e9ef
  • editor.foreground#4c4f69
  • editor.hoverHighlightBackground#dce0e8
  • editor.lineHighlightBorder#e6e9ef
  • editor.rangeHighlightBackground#1e66f515
  • editor.selectionBackground#e6e9ef
  • editor.selectionHighlightBackground#e6e9ef
  • editor.snippetFinalTabstopHighlightBackground#eff1f5
  • editor.snippetFinalTabstopHighlightBorder#40a02b
  • editor.snippetTabstopHighlightBackground#eff1f5
  • editor.snippetTabstopHighlightBorder#bcc0cc
  • editor.wordHighlightBackground#17929950
  • editor.wordHighlightStrongBackground#40a02b50
  • editorCodeLens.foreground#bcc0cc
  • editorError.foreground#d20f39
  • editorGroup.border#1e66f5
  • editorGroup.dropBackground#ccd0da70
  • editorGroupHeader.tabsBackground#dce0e8
  • editorGutter.addedBackground#40a02b80
  • editorGutter.deletedBackground#d20f3980
  • editorGutter.modifiedBackground#17929980
  • editorHoverWidget.background#eff1f5
  • editorHoverWidget.border#bcc0cc
  • editorIndentGuide.activeBackground#7287fd45
  • editorIndentGuide.background#7287fd1A
  • editorLineNumber.foreground#bcc0cc
  • editorLink.activeForeground#179299
  • editorMarkerNavigation.background#e6e9ef
  • editorOverviewRuler.addedForeground#40a02b80
  • editorOverviewRuler.border#dce0e8
  • editorOverviewRuler.currentContentForeground#40a02b
  • editorOverviewRuler.deletedForeground#d20f3980
  • editorOverviewRuler.errorForeground#d20f3980
  • editorOverviewRuler.incomingContentForeground#1e66f5
  • editorOverviewRuler.infoForeground#17929980
  • editorOverviewRuler.modifiedForeground#17929980
  • editorOverviewRuler.selectionHighlightForeground#fe640b
  • editorOverviewRuler.warningForeground#fe640b80
  • editorOverviewRuler.wordHighlightForeground#179299
  • editorOverviewRuler.wordHighlightStrongForeground#40a02b
  • editorRuler.foreground#7287fd1A
  • editorSuggestWidget.background#e6e9ef
  • editorSuggestWidget.foreground#4c4f69
  • editorSuggestWidget.selectedBackground#e6e9ef
  • editorWarning.foreground#fe640b
  • editorWhitespace.foreground#7287fd1A
  • editorWidget.background#e6e9ef
  • errorForeground#d20f39
  • extensionButton.prominentBackground#40a02b90
  • extensionButton.prominentForeground#4c4f69
  • extensionButton.prominentHoverBackground#40a02b60
  • focusBorder#bcc0cc
  • foreground#4c4f69
  • gitDecoration.conflictingResourceForeground#fe640b
  • gitDecoration.deletedResourceForeground#d20f39
  • gitDecoration.ignoredResourceForeground#bcc0cc
  • gitDecoration.modifiedResourceForeground#179299
  • gitDecoration.untrackedResourceForeground#40a02b
  • input.background#eff1f5
  • input.border#dce0e8
  • input.foreground#4c4f69
  • input.placeholderForeground#bcc0cc
  • inputOption.activeBorder#1e66f5
  • inputValidation.errorBackground#eff1f5
  • inputValidation.errorBorder#d20f39
  • inputValidation.errorForeground#d20f39
  • inputValidation.infoBackground#eff1f5
  • inputValidation.infoBorder#1e66f5
  • inputValidation.infoForeground#1e66f5
  • inputValidation.warningBackground#eff1f5
  • inputValidation.warningBorder#fe640b
  • inputValidation.warningForeground#fe640b
  • list.activeSelectionBackground#e6e9ef
  • list.activeSelectionForeground#4c4f69
  • list.dropBackground#e6e9ef
  • list.errorForeground#d20f39
  • list.focusBackground#ccd0da75
  • list.highlightForeground#179299
  • list.hoverBackground#ccd0da75
  • list.inactiveSelectionBackground#ccd0da75
  • list.warningForeground#fe640b
  • listFilterWidget.background#eff1f5
  • listFilterWidget.noMatchesOutline#d20f39
  • listFilterWidget.outline#e6e9ef
  • merge.currentHeaderBackground#40a02b90
  • merge.incomingHeaderBackground#1e66f590
  • notification.background#eff1f5
  • notification.buttonBackground#e6e9ef
  • notification.buttonForeground#4c4f69
  • notification.buttonHoverBackground#ccd0da75
  • notification.errorBackground#d20f39
  • notification.errorForeground#eff1f5
  • notification.foreground#4c4f69
  • notification.infoBackground#1e66f5
  • notification.infoForeground#eff1f5
  • notification.warningBackground#fe640b
  • notification.warningForeground#eff1f5
  • notificationCenter.border#e6e9ef
  • notificationCenterHeader.background#eff1f5
  • notificationCenterHeader.foreground#4c4f69
  • notificationLink.foreground#179299
  • notifications.background#eff1f5
  • notifications.border#e6e9ef
  • notifications.foreground#4c4f69
  • notificationsErrorIcon.foreground#d20f39
  • notificationsInfoIcon.foreground#1e66f5
  • notificationsWarningIcon.foreground#fe640b
  • notificationToast.border#e6e9ef
  • panel.background#eff1f5
  • panel.border#1e66f5
  • panelInput.border#4c4f69
  • panelTitle.activeBorder#8839ef
  • panelTitle.activeForeground#4c4f69
  • panelTitle.inactiveForeground#bcc0cc
  • peekView.border#e6e9ef
  • peekViewEditor.background#eff1f5
  • peekViewEditor.matchHighlightBackground#dc8a7880
  • peekViewResult.background#e6e9ef
  • peekViewResult.fileForeground#4c4f69
  • peekViewResult.lineForeground#4c4f69
  • peekViewResult.matchHighlightBackground#dc8a7880
  • peekViewResult.selectionBackground#e6e9ef
  • peekViewResult.selectionForeground#4c4f69
  • peekViewTitle.background#dce0e8
  • peekViewTitleDescription.foreground#bcc0cc
  • peekViewTitleLabel.foreground#4c4f69
  • pickerGroup.border#1e66f5
  • pickerGroup.foreground#179299
  • progressBar.background#8839ef
  • scrollbar.shadow#444444
  • selection.background#1e66f5
  • settings.checkboxBackground#e6e9ef
  • settings.checkboxBorder#dce0e8
  • settings.checkboxForeground#4c4f69
  • settings.dropdownBackground#e6e9ef
  • settings.dropdownBorder#dce0e8
  • settings.dropdownForeground#4c4f69
  • settings.headerForeground#4c4f69
  • settings.modifiedItemIndicator#fe640b
  • settings.numberInputBackground#e6e9ef
  • settings.numberInputBorder#dce0e8
  • settings.numberInputForeground#4c4f69
  • settings.textInputBackground#e6e9ef
  • settings.textInputBorder#dce0e8
  • settings.textInputForeground#4c4f69
  • sideBar.background#e6e9ef
  • sideBarSectionHeader.background#eff1f5
  • sideBarSectionHeader.border#dce0e8
  • sideBarTitle.foreground#4c4f69
  • statusBar.background#dce0e8
  • statusBar.debuggingBackground#d20f39
  • statusBar.debuggingForeground#dce0e8
  • statusBar.foreground#4c4f69
  • statusBar.noFolderBackground#dce0e8
  • statusBar.noFolderForeground#4c4f69
  • statusBarItem.prominentBackground#d20f39
  • statusBarItem.prominentHoverBackground#fe640b
  • statusBarItem.remoteBackground#1e66f5
  • statusBarItem.remoteForeground#eff1f5
  • tab.activeBackground#eff1f5
  • tab.activeBorderTop#8839ef80
  • tab.activeForeground#4c4f69
  • tab.border#dce0e8
  • tab.inactiveBackground#e6e9ef
  • tab.inactiveForeground#bcc0cc
  • terminal.ansiBlack#e6e9ef
  • terminal.ansiBlue#1e66f5
  • terminal.ansiBrightBlack#ccd0da
  • terminal.ansiBrightBlue#209fb5
  • terminal.ansiBrightCyan#04a5e5
  • terminal.ansiBrightGreen#40a02b
  • terminal.ansiBrightMagenta#ea76cb
  • terminal.ansiBrightRed#e64553
  • terminal.ansiBrightWhite#7287fd
  • terminal.ansiBrightYellow#dc8a78
  • terminal.ansiCyan#179299
  • terminal.ansiGreen#40a02b
  • terminal.ansiMagenta#8839ef
  • terminal.ansiRed#d20f39
  • terminal.ansiWhite#dc8a78
  • terminal.ansiYellow#fe640b
  • terminal.background#eff1f5
  • terminal.border#4c4f69
  • terminal.foreground#4c4f69
  • terminal.selectionBackground#e6e9ef50
  • textBlockQuote.background#e6e9ef
  • titleBar.activeBackground#e6e9ef
  • titleBar.activeForeground#4c4f69
  • titleBar.inactiveBackground#dce0e8
  • titleBar.inactiveForeground#bcc0cc
  • walkThrough.embeddedEditorBackground#e6e9ef
  • welcomePage.buttonBackground#e6e9ef
  • welcomePage.buttonHoverBackground#ccd0da75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#1e66f5
source#4c4f69
meta.diff, meta.diff.header#bcc0cc
markup.inserted#40a02b
markup.deleted#d20f39
markup.changed#fe640b
invalid#d20f39underline italic
invalid.deprecated#4c4f69underline italic
entity.name.filename#dc8a78
markup.error#d20f39
markup.underlineunderline
markup.bold#fe640bbold
markup.heading#1e66f5bold
markup.italic#dc8a78italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#179299
markup.inline.raw, markup.raw.restructuredtext#40a02b
markup.underline.link, markup.underline.link.image#179299
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#8839ef
entity.name.directive.restructuredtext, markup.quote#dc8a78italic
meta.separator.markdown#bcc0cc
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#40a02b
punctuation.definition.constant.restructuredtext#1e66f5
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#1e66f5
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#4c4f69
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#dc8a78
entity.name.type.class, entity.name.class#179299normal
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#1e66f5italic
entity.other.inherited-class#179299italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#bcc0cc
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#8839ef
comment.block.documentation entity.name.type#179299italic
comment.block.documentation entity.name.type punctuation.definition.bracket#179299
comment.block.documentation variable#fe640bitalic
constant, variable.other.constant#1e66f5
constant.character.escape, constant.character.string.escape, constant.regexp#8839ef
entity.name.tag#8839ef
entity.other.attribute-name.parent-selector#8839ef
entity.other.attribute-name#40a02bitalic
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#40a02b
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#fe640bitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#40a02bitalic
meta.decorator variable.other.object#40a02b
keyword, punctuation.definition.keyword#8839ef
keyword.control.new, keyword.operator.newbold
meta.selector#8839ef
support#179299italic
support.function.magic, support.variable, variable.other.predefined#1e66f5regular
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#8839ef
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#4c4f69
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#8839ef
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#179299
constant.other.date, constant.other.timestamp#fe640b
variable.other.alias.yaml#40a02bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#8839efregular
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#179299italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fe640b
storage.modifier#8839ef
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#dc8a78
punctuation.definition.group.capture.regexp#8839ef
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#d20f39
punctuation.definition.character-class.regexp#179299
punctuation.definition.group.regexp#fe640b
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#d20f39
meta.assertion.look-ahead.regexp#40a02b
string#dc8a78
punctuation.definition.string.begin, punctuation.definition.string.end#df8e1d
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#1e66f5
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#bcc0cc
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#4c4f69
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#fe640bitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#4c4f69normal
meta.selectionset.graphql variable#dc8a78
meta.selectionset.graphql meta.arguments variable#4c4f69
entity.name.fragment.graphql, variable.fragment.graphql#179299
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#4c4f69
source.shell variable.other#1e66f5
support.constant#1e66f5normal
meta.scope.prerequisites.makefile#dc8a78
meta.attribute-selector.scss#dc8a78
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#4c4f69
meta.preprocessor.haskell#bcc0cc
Tinted VSCode by Tinted Theming - VS Code Theme