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#3c5ea810
  • activityBar.activeBorder#a454b280
  • activityBar.background#ffffff
  • activityBar.foreground#515151
  • activityBar.inactiveForeground#c1c1c1
  • activityBarBadge.background#a454b2
  • activityBarBadge.foreground#ffffff
  • badge.background#f1f1f1
  • badge.foreground#515151
  • breadcrumb.activeSelectionForeground#515151
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#515151
  • breadcrumb.foreground#c1c1c1
  • breadcrumbPicker.background#151515
  • button.background#2a2a2a
  • button.foreground#515151
  • checkbox.background#2a2a2a
  • checkbox.border#151515
  • checkbox.foreground#515151
  • contrastBorder#151515
  • debugToolBar.background#2a2a2a
  • diffEditor.insertedTextBackground#66781e20
  • diffEditor.removedTextBackground#b2377150
  • dropdown.background#ffffff
  • dropdown.border#151515
  • dropdown.foreground#515151
  • editor.background#ffffff
  • editor.findMatchBackground#cd6f3480
  • editor.findMatchHighlightBackground#21212140
  • editor.findRangeHighlightBackground#e1e1e175
  • editor.foldBackground#2a2a2a
  • editor.foreground#515151
  • editor.hoverHighlightBackground#151515
  • editor.lineHighlightBorder#f1f1f1
  • editor.rangeHighlightBackground#3c5ea815
  • editor.selectionBackground#f1f1f1
  • editor.selectionHighlightBackground#f1f1f1
  • editor.snippetFinalTabstopHighlightBackground#ffffff
  • editor.snippetFinalTabstopHighlightBorder#66781e
  • editor.snippetTabstopHighlightBackground#ffffff
  • editor.snippetTabstopHighlightBorder#c1c1c1
  • editor.wordHighlightBackground#1e787850
  • editor.wordHighlightStrongBackground#66781e50
  • editorCodeLens.foreground#c1c1c1
  • editorError.foreground#b23771
  • editorGroup.border#3c5ea8
  • editorGroup.dropBackground#e1e1e170
  • editorGroupHeader.tabsBackground#151515
  • editorGutter.addedBackground#66781e80
  • editorGutter.deletedBackground#b2377180
  • editorGutter.modifiedBackground#1e787880
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#c1c1c1
  • editorIndentGuide.activeBackground#21212145
  • editorIndentGuide.background#2121211A
  • editorLineNumber.foreground#c1c1c1
  • editorLink.activeForeground#1e7878
  • editorMarkerNavigation.background#2a2a2a
  • editorOverviewRuler.addedForeground#66781e80
  • editorOverviewRuler.border#151515
  • editorOverviewRuler.currentContentForeground#66781e
  • editorOverviewRuler.deletedForeground#b2377180
  • editorOverviewRuler.errorForeground#b2377180
  • editorOverviewRuler.incomingContentForeground#3c5ea8
  • editorOverviewRuler.infoForeground#1e787880
  • editorOverviewRuler.modifiedForeground#1e787880
  • editorOverviewRuler.selectionHighlightForeground#cd6f34
  • editorOverviewRuler.warningForeground#cd6f3480
  • editorOverviewRuler.wordHighlightForeground#1e7878
  • editorOverviewRuler.wordHighlightStrongForeground#66781e
  • editorRuler.foreground#2121211A
  • editorSuggestWidget.background#2a2a2a
  • editorSuggestWidget.foreground#515151
  • editorSuggestWidget.selectedBackground#f1f1f1
  • editorWarning.foreground#cd6f34
  • editorWhitespace.foreground#2121211A
  • editorWidget.background#2a2a2a
  • errorForeground#b23771
  • extensionButton.prominentBackground#66781e90
  • extensionButton.prominentForeground#515151
  • extensionButton.prominentHoverBackground#66781e60
  • focusBorder#c1c1c1
  • foreground#515151
  • gitDecoration.conflictingResourceForeground#cd6f34
  • gitDecoration.deletedResourceForeground#b23771
  • gitDecoration.ignoredResourceForeground#c1c1c1
  • gitDecoration.modifiedResourceForeground#1e7878
  • gitDecoration.untrackedResourceForeground#66781e
  • input.background#ffffff
  • input.border#151515
  • input.foreground#515151
  • input.placeholderForeground#c1c1c1
  • inputOption.activeBorder#3c5ea8
  • inputValidation.errorBackground#ffffff
  • inputValidation.errorBorder#b23771
  • inputValidation.errorForeground#b23771
  • inputValidation.infoBackground#ffffff
  • inputValidation.infoBorder#3c5ea8
  • inputValidation.infoForeground#3c5ea8
  • inputValidation.warningBackground#ffffff
  • inputValidation.warningBorder#cd6f34
  • inputValidation.warningForeground#cd6f34
  • list.activeSelectionBackground#f1f1f1
  • list.activeSelectionForeground#515151
  • list.dropBackground#f1f1f1
  • list.errorForeground#b23771
  • list.focusBackground#e1e1e175
  • list.highlightForeground#1e7878
  • list.hoverBackground#e1e1e175
  • list.inactiveSelectionBackground#e1e1e175
  • list.warningForeground#cd6f34
  • listFilterWidget.background#ffffff
  • listFilterWidget.noMatchesOutline#b23771
  • listFilterWidget.outline#f1f1f1
  • merge.currentHeaderBackground#66781e90
  • merge.incomingHeaderBackground#3c5ea890
  • notification.background#ffffff
  • notification.buttonBackground#f1f1f1
  • notification.buttonForeground#515151
  • notification.buttonHoverBackground#e1e1e175
  • notification.errorBackground#b23771
  • notification.errorForeground#ffffff
  • notification.foreground#515151
  • notification.infoBackground#3c5ea8
  • notification.infoForeground#ffffff
  • notification.warningBackground#cd6f34
  • notification.warningForeground#ffffff
  • notificationCenter.border#2a2a2a
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#515151
  • notificationLink.foreground#1e7878
  • notifications.background#ffffff
  • notifications.border#2a2a2a
  • notifications.foreground#515151
  • notificationsErrorIcon.foreground#b23771
  • notificationsInfoIcon.foreground#3c5ea8
  • notificationsWarningIcon.foreground#cd6f34
  • notificationToast.border#2a2a2a
  • panel.background#ffffff
  • panel.border#3c5ea8
  • panelInput.border#515151
  • panelTitle.activeBorder#a454b2
  • panelTitle.activeForeground#515151
  • panelTitle.inactiveForeground#c1c1c1
  • peekView.border#f1f1f1
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#cd6f3480
  • peekViewResult.background#2a2a2a
  • peekViewResult.fileForeground#515151
  • peekViewResult.lineForeground#515151
  • peekViewResult.matchHighlightBackground#cd6f3480
  • peekViewResult.selectionBackground#f1f1f1
  • peekViewResult.selectionForeground#515151
  • peekViewTitle.background#151515
  • peekViewTitleDescription.foreground#c1c1c1
  • peekViewTitleLabel.foreground#515151
  • pickerGroup.border#3c5ea8
  • pickerGroup.foreground#1e7878
  • progressBar.background#a454b2
  • scrollbar.shadow#444444
  • selection.background#3c5ea8
  • settings.checkboxBackground#2a2a2a
  • settings.checkboxBorder#151515
  • settings.checkboxForeground#515151
  • settings.dropdownBackground#2a2a2a
  • settings.dropdownBorder#151515
  • settings.dropdownForeground#515151
  • settings.headerForeground#515151
  • settings.modifiedItemIndicator#cd6f34
  • settings.numberInputBackground#2a2a2a
  • settings.numberInputBorder#151515
  • settings.numberInputForeground#515151
  • settings.textInputBackground#2a2a2a
  • settings.textInputBorder#151515
  • settings.textInputForeground#515151
  • sideBar.background#2a2a2a
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#151515
  • sideBarTitle.foreground#515151
  • statusBar.background#151515
  • statusBar.debuggingBackground#b23771
  • statusBar.debuggingForeground#151515
  • statusBar.foreground#515151
  • statusBar.noFolderBackground#151515
  • statusBar.noFolderForeground#515151
  • statusBarItem.prominentBackground#b23771
  • statusBarItem.prominentHoverBackground#cd6f34
  • statusBarItem.remoteBackground#3c5ea8
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#a454b280
  • tab.activeForeground#515151
  • tab.border#151515
  • tab.inactiveBackground#2a2a2a
  • tab.inactiveForeground#c1c1c1
  • terminal.ansiBlack#f1f1f1
  • terminal.ansiBlue#3c5ea8
  • terminal.ansiBrightBlack#e1e1e1
  • terminal.ansiBrightBlue#3c5ea8
  • terminal.ansiBrightCyan#175e5e
  • terminal.ansiBrightGreen#829429
  • terminal.ansiBrightMagenta#a454b2
  • terminal.ansiBrightRed#db3365
  • terminal.ansiBrightWhite#212121
  • terminal.ansiBrightYellow#cd6f34
  • terminal.ansiCyan#1e7878
  • terminal.ansiGreen#66781e
  • terminal.ansiMagenta#a454b2
  • terminal.ansiRed#b23771
  • terminal.ansiWhite#414141
  • terminal.ansiYellow#cd6f34
  • terminal.background#ffffff
  • terminal.border#515151
  • terminal.foreground#515151
  • terminal.selectionBackground#f1f1f150
  • textBlockQuote.background#2a2a2a
  • titleBar.activeBackground#2a2a2a
  • titleBar.activeForeground#515151
  • titleBar.inactiveBackground#151515
  • titleBar.inactiveForeground#c1c1c1
  • walkThrough.embeddedEditorBackground#2a2a2a
  • welcomePage.buttonBackground#f1f1f1
  • welcomePage.buttonHoverBackground#e1e1e175
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#3c5ea8
source#515151
meta.diff, meta.diff.header#c1c1c1
markup.inserted#66781e
markup.deleted#b23771
markup.changed#cd6f34
invalid#b23771underline italic
invalid.deprecated#515151underline italic
entity.name.filename#cd6f34
markup.error#b23771
markup.underlineunderline
markup.bold#cd6f34bold
markup.heading#3c5ea8bold
markup.italic#cd6f34italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#1e7878
markup.inline.raw, markup.raw.restructuredtext#66781e
markup.underline.link, markup.underline.link.image#1e7878
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#a454b2
entity.name.directive.restructuredtext, markup.quote#cd6f34italic
meta.separator.markdown#c1c1c1
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#66781e
punctuation.definition.constant.restructuredtext#3c5ea8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#3c5ea8
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#515151
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#cd6f34
entity.name.type.class, entity.name.class#1e7878normal
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#3c5ea8italic
entity.other.inherited-class#1e7878italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#c1c1c1
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#a454b2
comment.block.documentation entity.name.type#1e7878italic
comment.block.documentation entity.name.type punctuation.definition.bracket#1e7878
comment.block.documentation variable#cd6f34italic
constant, variable.other.constant#3c5ea8
constant.character.escape, constant.character.string.escape, constant.regexp#a454b2
entity.name.tag#a454b2
entity.other.attribute-name.parent-selector#a454b2
entity.other.attribute-name#66781eitalic
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#66781e
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#cd6f34italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#66781eitalic
meta.decorator variable.other.object#66781e
keyword, punctuation.definition.keyword#a454b2
keyword.control.new, keyword.operator.newbold
meta.selector#a454b2
support#1e7878italic
support.function.magic, support.variable, variable.other.predefined#3c5ea8regular
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#a454b2
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#515151
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#a454b2
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#1e7878
constant.other.date, constant.other.timestamp#cd6f34
variable.other.alias.yaml#66781eitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#a454b2regular
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#1e7878italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#cd6f34
storage.modifier#a454b2
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#cd6f34
punctuation.definition.group.capture.regexp#a454b2
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#b23771
punctuation.definition.character-class.regexp#1e7878
punctuation.definition.group.regexp#cd6f34
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#b23771
meta.assertion.look-ahead.regexp#66781e
string#cd6f34
punctuation.definition.string.begin, punctuation.definition.string.end#cda434
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#3c5ea8
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#c1c1c1
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#515151
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#cd6f34italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#515151normal
meta.selectionset.graphql variable#cd6f34
meta.selectionset.graphql meta.arguments variable#515151
entity.name.fragment.graphql, variable.fragment.graphql#1e7878
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#515151
source.shell variable.other#3c5ea8
support.constant#3c5ea8normal
meta.scope.prerequisites.makefile#cd6f34
meta.attribute-selector.scss#cd6f34
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#515151
meta.preprocessor.haskell#c1c1c1
Tinted VSCode by Tinted Theming - VS Code Theme