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#4876d610
  • activityBar.activeBorder#403f5380
  • activityBar.background#ffffff
  • activityBar.foreground#585b5b
  • activityBar.inactiveForeground#b1b4b4
  • activityBarBadge.background#403f53
  • activityBarBadge.foreground#ffffff
  • badge.background#e5e6e6
  • badge.foreground#585b5b
  • breadcrumb.activeSelectionForeground#585b5b
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#585b5b
  • breadcrumb.foreground#b1b4b4
  • breadcrumbPicker.background#282b2b
  • button.background#515656
  • button.foreground#585b5b
  • checkbox.background#515656
  • checkbox.border#282b2b
  • checkbox.foreground#585b5b
  • contrastBorder#282b2b
  • debugToolBar.background#515656
  • diffEditor.insertedTextBackground#2aa29820
  • diffEditor.removedTextBackground#d3423e50
  • dropdown.background#ffffff
  • dropdown.border#282b2b
  • dropdown.foreground#585b5b
  • editor.background#ffffff
  • editor.findMatchBackground#daaa0180
  • editor.findMatchHighlightBackground#01162740
  • editor.findRangeHighlightBackground#cbcdcd75
  • editor.foldBackground#515656
  • editor.foreground#585b5b
  • editor.hoverHighlightBackground#282b2b
  • editor.lineHighlightBorder#e5e6e6
  • editor.rangeHighlightBackground#4876d615
  • editor.selectionBackground#e5e6e6
  • editor.selectionHighlightBackground#e5e6e6
  • editor.snippetFinalTabstopHighlightBackground#ffffff
  • editor.snippetFinalTabstopHighlightBorder#2aa298
  • editor.snippetTabstopHighlightBackground#ffffff
  • editor.snippetTabstopHighlightBorder#b1b4b4
  • editor.wordHighlightBackground#08916a50
  • editor.wordHighlightStrongBackground#2aa29850
  • editorCodeLens.foreground#b1b4b4
  • editorError.foreground#d3423e
  • editorGroup.border#4876d6
  • editorGroup.dropBackground#cbcdcd70
  • editorGroupHeader.tabsBackground#282b2b
  • editorGutter.addedBackground#2aa29880
  • editorGutter.deletedBackground#d3423e80
  • editorGutter.modifiedBackground#08916a80
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#b1b4b4
  • editorIndentGuide.activeBackground#01162745
  • editorIndentGuide.background#0116271A
  • editorLineNumber.foreground#b1b4b4
  • editorLink.activeForeground#08916a
  • editorMarkerNavigation.background#515656
  • editorOverviewRuler.addedForeground#2aa29880
  • editorOverviewRuler.border#282b2b
  • editorOverviewRuler.currentContentForeground#2aa298
  • editorOverviewRuler.deletedForeground#d3423e80
  • editorOverviewRuler.errorForeground#d3423e80
  • editorOverviewRuler.incomingContentForeground#4876d6
  • editorOverviewRuler.infoForeground#08916a80
  • editorOverviewRuler.modifiedForeground#08916a80
  • editorOverviewRuler.selectionHighlightForeground#daaa01
  • editorOverviewRuler.warningForeground#daaa0180
  • editorOverviewRuler.wordHighlightForeground#08916a
  • editorOverviewRuler.wordHighlightStrongForeground#2aa298
  • editorRuler.foreground#0116271A
  • editorSuggestWidget.background#515656
  • editorSuggestWidget.foreground#585b5b
  • editorSuggestWidget.selectedBackground#e5e6e6
  • editorWarning.foreground#daaa01
  • editorWhitespace.foreground#0116271A
  • editorWidget.background#515656
  • errorForeground#d3423e
  • extensionButton.prominentBackground#2aa29890
  • extensionButton.prominentForeground#585b5b
  • extensionButton.prominentHoverBackground#2aa29860
  • focusBorder#b1b4b4
  • foreground#585b5b
  • gitDecoration.conflictingResourceForeground#daaa01
  • gitDecoration.deletedResourceForeground#d3423e
  • gitDecoration.ignoredResourceForeground#b1b4b4
  • gitDecoration.modifiedResourceForeground#08916a
  • gitDecoration.untrackedResourceForeground#2aa298
  • input.background#ffffff
  • input.border#282b2b
  • input.foreground#585b5b
  • input.placeholderForeground#b1b4b4
  • inputOption.activeBorder#4876d6
  • inputValidation.errorBackground#ffffff
  • inputValidation.errorBorder#d3423e
  • inputValidation.errorForeground#d3423e
  • inputValidation.infoBackground#ffffff
  • inputValidation.infoBorder#4876d6
  • inputValidation.infoForeground#4876d6
  • inputValidation.warningBackground#ffffff
  • inputValidation.warningBorder#daaa01
  • inputValidation.warningForeground#daaa01
  • list.activeSelectionBackground#e5e6e6
  • list.activeSelectionForeground#585b5b
  • list.dropBackground#e5e6e6
  • list.errorForeground#d3423e
  • list.focusBackground#cbcdcd75
  • list.highlightForeground#08916a
  • list.hoverBackground#cbcdcd75
  • list.inactiveSelectionBackground#cbcdcd75
  • list.warningForeground#daaa01
  • listFilterWidget.background#ffffff
  • listFilterWidget.noMatchesOutline#d3423e
  • listFilterWidget.outline#e5e6e6
  • merge.currentHeaderBackground#2aa29890
  • merge.incomingHeaderBackground#4876d690
  • notification.background#ffffff
  • notification.buttonBackground#e5e6e6
  • notification.buttonForeground#585b5b
  • notification.buttonHoverBackground#cbcdcd75
  • notification.errorBackground#d3423e
  • notification.errorForeground#ffffff
  • notification.foreground#585b5b
  • notification.infoBackground#4876d6
  • notification.infoForeground#ffffff
  • notification.warningBackground#daaa01
  • notification.warningForeground#ffffff
  • notificationCenter.border#515656
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#585b5b
  • notificationLink.foreground#08916a
  • notifications.background#ffffff
  • notifications.border#515656
  • notifications.foreground#585b5b
  • notificationsErrorIcon.foreground#d3423e
  • notificationsInfoIcon.foreground#4876d6
  • notificationsWarningIcon.foreground#daaa01
  • notificationToast.border#515656
  • panel.background#ffffff
  • panel.border#4876d6
  • panelInput.border#585b5b
  • panelTitle.activeBorder#403f53
  • panelTitle.activeForeground#585b5b
  • panelTitle.inactiveForeground#b1b4b4
  • peekView.border#e5e6e6
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#dac26b80
  • peekViewResult.background#515656
  • peekViewResult.fileForeground#585b5b
  • peekViewResult.lineForeground#585b5b
  • peekViewResult.matchHighlightBackground#dac26b80
  • peekViewResult.selectionBackground#e5e6e6
  • peekViewResult.selectionForeground#585b5b
  • peekViewTitle.background#282b2b
  • peekViewTitleDescription.foreground#b1b4b4
  • peekViewTitleLabel.foreground#585b5b
  • pickerGroup.border#4876d6
  • pickerGroup.foreground#08916a
  • progressBar.background#403f53
  • scrollbar.shadow#444444
  • selection.background#4876d6
  • settings.checkboxBackground#515656
  • settings.checkboxBorder#282b2b
  • settings.checkboxForeground#585b5b
  • settings.dropdownBackground#515656
  • settings.dropdownBorder#282b2b
  • settings.dropdownForeground#585b5b
  • settings.headerForeground#585b5b
  • settings.modifiedItemIndicator#daaa01
  • settings.numberInputBackground#515656
  • settings.numberInputBorder#282b2b
  • settings.numberInputForeground#585b5b
  • settings.textInputBackground#515656
  • settings.textInputBorder#282b2b
  • settings.textInputForeground#585b5b
  • sideBar.background#515656
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#282b2b
  • sideBarTitle.foreground#585b5b
  • statusBar.background#282b2b
  • statusBar.debuggingBackground#d3423e
  • statusBar.debuggingForeground#282b2b
  • statusBar.foreground#585b5b
  • statusBar.noFolderBackground#282b2b
  • statusBar.noFolderForeground#585b5b
  • statusBarItem.prominentBackground#d3423e
  • statusBarItem.prominentHoverBackground#daaa01
  • statusBarItem.remoteBackground#4876d6
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#403f5380
  • tab.activeForeground#585b5b
  • tab.border#282b2b
  • tab.inactiveBackground#515656
  • tab.inactiveForeground#b1b4b4
  • terminal.ansiBlack#e5e6e6
  • terminal.ansiBlue#4876d6
  • terminal.ansiBrightBlack#cbcdcd
  • terminal.ansiBrightBlue#5ca7e4
  • terminal.ansiBrightCyan#00c990
  • terminal.ansiBrightGreen#49d0c5
  • terminal.ansiBrightMagenta#697098
  • terminal.ansiBrightRed#f76e6e
  • terminal.ansiBrightWhite#011627
  • terminal.ansiBrightYellow#dac26b
  • terminal.ansiCyan#08916a
  • terminal.ansiGreen#2aa298
  • terminal.ansiMagenta#403f53
  • terminal.ansiRed#d3423e
  • terminal.ansiWhite#3f4141
  • terminal.ansiYellow#daaa01
  • terminal.background#ffffff
  • terminal.border#585b5b
  • terminal.foreground#585b5b
  • terminal.selectionBackground#e5e6e650
  • textBlockQuote.background#515656
  • titleBar.activeBackground#515656
  • titleBar.activeForeground#585b5b
  • titleBar.inactiveBackground#282b2b
  • titleBar.inactiveForeground#b1b4b4
  • walkThrough.embeddedEditorBackground#515656
  • welcomePage.buttonBackground#e5e6e6
  • welcomePage.buttonHoverBackground#cbcdcd75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#4876d6
source#585b5b
meta.diff, meta.diff.header#b1b4b4
markup.inserted#2aa298
markup.deleted#d3423e
markup.changed#daaa01
invalid#d3423eunderline italic
invalid.deprecated#585b5bunderline italic
entity.name.filename#dac26b
markup.error#d3423e
markup.underlineunderline
markup.bold#daaa01bold
markup.heading#4876d6bold
markup.italic#dac26bitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#08916a
markup.inline.raw, markup.raw.restructuredtext#2aa298
markup.underline.link, markup.underline.link.image#08916a
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#403f53
entity.name.directive.restructuredtext, markup.quote#dac26bitalic
meta.separator.markdown#b1b4b4
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#2aa298
punctuation.definition.constant.restructuredtext#4876d6
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#4876d6
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#585b5b
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#dac26b
entity.name.type.class, entity.name.class#08916anormal
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#4876d6italic
entity.other.inherited-class#08916aitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#b1b4b4
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#403f53
comment.block.documentation entity.name.type#08916aitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#08916a
comment.block.documentation variable#daaa01italic
constant, variable.other.constant#4876d6
constant.character.escape, constant.character.string.escape, constant.regexp#403f53
entity.name.tag#403f53
entity.other.attribute-name.parent-selector#403f53
entity.other.attribute-name#2aa298italic
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#2aa298
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#daaa01italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#2aa298italic
meta.decorator variable.other.object#2aa298
keyword, punctuation.definition.keyword#403f53
keyword.control.new, keyword.operator.newbold
meta.selector#403f53
support#08916aitalic
support.function.magic, support.variable, variable.other.predefined#4876d6regular
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#403f53
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#585b5b
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#403f53
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#08916a
constant.other.date, constant.other.timestamp#daaa01
variable.other.alias.yaml#2aa298italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#403f53regular
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#08916aitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#daaa01
storage.modifier#403f53
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#dac26b
punctuation.definition.group.capture.regexp#403f53
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#d3423e
punctuation.definition.character-class.regexp#08916a
punctuation.definition.group.regexp#daaa01
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#d3423e
meta.assertion.look-ahead.regexp#2aa298
string#dac26b
punctuation.definition.string.begin, punctuation.definition.string.end#dac801
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#4876d6
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#b1b4b4
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#585b5b
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#daaa01italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#585b5bnormal
meta.selectionset.graphql variable#dac26b
meta.selectionset.graphql meta.arguments variable#585b5b
entity.name.fragment.graphql, variable.fragment.graphql#08916a
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#585b5b
source.shell variable.other#4876d6
support.constant#4876d6normal
meta.scope.prerequisites.makefile#dac26b
meta.attribute-selector.scss#dac26b
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#585b5b
meta.preprocessor.haskell#b1b4b4
Tinted VSCode by Tinted Theming - VS Code Theme