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#622cbc10
  • activityBar.activeBorder#a0111f80
  • activityBar.background#ffffff
  • activityBar.foreground#343b43
  • activityBar.inactiveForeground#88929d
  • activityBarBadge.background#a0111f
  • activityBarBadge.foreground#ffffff
  • badge.background#e7ecf0
  • badge.foreground#343b43
  • breadcrumb.activeSelectionForeground#343b43
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#343b43
  • breadcrumb.foreground#88929d
  • breadcrumbPicker.background#000000
  • button.background#0e1116
  • button.foreground#343b43
  • checkbox.background#0e1116
  • checkbox.border#000000
  • checkbox.foreground#343b43
  • contrastBorder#000000
  • debugToolBar.background#0e1116
  • diffEditor.insertedTextBackground#03256320
  • diffEditor.removedTextBackground#702c0050
  • dropdown.background#ffffff
  • dropdown.border#000000
  • dropdown.foreground#343b43
  • editor.background#ffffff
  • editor.findMatchBackground#023b9580
  • editor.findMatchHighlightBackground#0e111640
  • editor.findRangeHighlightBackground#acb6c075
  • editor.foldBackground#0e1116
  • editor.foreground#343b43
  • editor.hoverHighlightBackground#000000
  • editor.lineHighlightBorder#e7ecf0
  • editor.rangeHighlightBackground#622cbc15
  • editor.selectionBackground#e7ecf0
  • editor.selectionHighlightBackground#e7ecf0
  • editor.snippetFinalTabstopHighlightBackground#ffffff
  • editor.snippetFinalTabstopHighlightBorder#032563
  • editor.snippetTabstopHighlightBackground#ffffff
  • editor.snippetTabstopHighlightBorder#88929d
  • editor.wordHighlightBackground#024c1a50
  • editor.wordHighlightStrongBackground#03256350
  • editorCodeLens.foreground#88929d
  • editorError.foreground#702c00
  • editorGroup.border#622cbc
  • editorGroup.dropBackground#acb6c070
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#03256380
  • editorGutter.deletedBackground#702c0080
  • editorGutter.modifiedBackground#024c1a80
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#88929d
  • editorIndentGuide.activeBackground#0e111645
  • editorIndentGuide.background#0e11161A
  • editorLineNumber.foreground#88929d
  • editorLink.activeForeground#024c1a
  • editorMarkerNavigation.background#0e1116
  • editorOverviewRuler.addedForeground#03256380
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.currentContentForeground#032563
  • editorOverviewRuler.deletedForeground#702c0080
  • editorOverviewRuler.errorForeground#702c0080
  • editorOverviewRuler.incomingContentForeground#622cbc
  • editorOverviewRuler.infoForeground#024c1a80
  • editorOverviewRuler.modifiedForeground#024c1a80
  • editorOverviewRuler.selectionHighlightForeground#023b95
  • editorOverviewRuler.warningForeground#023b9580
  • editorOverviewRuler.wordHighlightForeground#024c1a
  • editorOverviewRuler.wordHighlightStrongForeground#032563
  • editorRuler.foreground#0e11161A
  • editorSuggestWidget.background#0e1116
  • editorSuggestWidget.foreground#343b43
  • editorSuggestWidget.selectedBackground#e7ecf0
  • editorWarning.foreground#023b95
  • editorWhitespace.foreground#0e11161A
  • editorWidget.background#0e1116
  • errorForeground#702c00
  • extensionButton.prominentBackground#03256390
  • extensionButton.prominentForeground#343b43
  • extensionButton.prominentHoverBackground#03256360
  • focusBorder#88929d
  • foreground#343b43
  • gitDecoration.conflictingResourceForeground#023b95
  • gitDecoration.deletedResourceForeground#702c00
  • gitDecoration.ignoredResourceForeground#88929d
  • gitDecoration.modifiedResourceForeground#024c1a
  • gitDecoration.untrackedResourceForeground#032563
  • input.background#ffffff
  • input.border#000000
  • input.foreground#343b43
  • input.placeholderForeground#88929d
  • inputOption.activeBorder#622cbc
  • inputValidation.errorBackground#ffffff
  • inputValidation.errorBorder#702c00
  • inputValidation.errorForeground#702c00
  • inputValidation.infoBackground#ffffff
  • inputValidation.infoBorder#622cbc
  • inputValidation.infoForeground#622cbc
  • inputValidation.warningBackground#ffffff
  • inputValidation.warningBorder#023b95
  • inputValidation.warningForeground#023b95
  • list.activeSelectionBackground#e7ecf0
  • list.activeSelectionForeground#343b43
  • list.dropBackground#e7ecf0
  • list.errorForeground#702c00
  • list.focusBackground#acb6c075
  • list.highlightForeground#024c1a
  • list.hoverBackground#acb6c075
  • list.inactiveSelectionBackground#acb6c075
  • list.warningForeground#023b95
  • listFilterWidget.background#ffffff
  • listFilterWidget.noMatchesOutline#702c00
  • listFilterWidget.outline#e7ecf0
  • merge.currentHeaderBackground#03256390
  • merge.incomingHeaderBackground#622cbc90
  • notification.background#ffffff
  • notification.buttonBackground#e7ecf0
  • notification.buttonForeground#343b43
  • notification.buttonHoverBackground#acb6c075
  • notification.errorBackground#702c00
  • notification.errorForeground#ffffff
  • notification.foreground#343b43
  • notification.infoBackground#622cbc
  • notification.infoForeground#ffffff
  • notification.warningBackground#023b95
  • notification.warningForeground#ffffff
  • notificationCenter.border#0e1116
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#343b43
  • notificationLink.foreground#024c1a
  • notifications.background#ffffff
  • notifications.border#0e1116
  • notifications.foreground#343b43
  • notificationsErrorIcon.foreground#702c00
  • notificationsInfoIcon.foreground#622cbc
  • notificationsWarningIcon.foreground#023b95
  • notificationToast.border#0e1116
  • panel.background#ffffff
  • panel.border#622cbc
  • panelInput.border#343b43
  • panelTitle.activeBorder#a0111f
  • panelTitle.activeForeground#343b43
  • panelTitle.inactiveForeground#88929d
  • peekView.border#e7ecf0
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#b5840780
  • peekViewResult.background#0e1116
  • peekViewResult.fileForeground#343b43
  • peekViewResult.lineForeground#343b43
  • peekViewResult.matchHighlightBackground#b5840780
  • peekViewResult.selectionBackground#e7ecf0
  • peekViewResult.selectionForeground#343b43
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#88929d
  • peekViewTitleLabel.foreground#343b43
  • pickerGroup.border#622cbc
  • pickerGroup.foreground#024c1a
  • progressBar.background#a0111f
  • scrollbar.shadow#444444
  • selection.background#622cbc
  • settings.checkboxBackground#0e1116
  • settings.checkboxBorder#000000
  • settings.checkboxForeground#343b43
  • settings.dropdownBackground#0e1116
  • settings.dropdownBorder#000000
  • settings.dropdownForeground#343b43
  • settings.headerForeground#343b43
  • settings.modifiedItemIndicator#023b95
  • settings.numberInputBackground#0e1116
  • settings.numberInputBorder#000000
  • settings.numberInputForeground#343b43
  • settings.textInputBackground#0e1116
  • settings.textInputBorder#000000
  • settings.textInputForeground#343b43
  • sideBar.background#0e1116
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#000000
  • sideBarTitle.foreground#343b43
  • statusBar.background#000000
  • statusBar.debuggingBackground#702c00
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#343b43
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#343b43
  • statusBarItem.prominentBackground#702c00
  • statusBarItem.prominentHoverBackground#023b95
  • statusBarItem.remoteBackground#622cbc
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#a0111f80
  • tab.activeForeground#343b43
  • tab.border#000000
  • tab.inactiveBackground#0e1116
  • tab.inactiveForeground#88929d
  • terminal.ansiBlack#e7ecf0
  • terminal.ansiBlue#622cbc
  • terminal.ansiBrightBlack#acb6c0
  • terminal.ansiBrightBlue#368cf9
  • terminal.ansiBrightCyan#49bcb7
  • terminal.ansiBrightGreen#26a148
  • terminal.ansiBrightMagenta#a371f7
  • terminal.ansiBrightRed#ee5a5d
  • terminal.ansiBrightWhite#0e1116
  • terminal.ansiBrightYellow#b58407
  • terminal.ansiCyan#024c1a
  • terminal.ansiGreen#032563
  • terminal.ansiMagenta#a0111f
  • terminal.ansiRed#702c00
  • terminal.ansiWhite#20252c
  • terminal.ansiYellow#023b95
  • terminal.background#ffffff
  • terminal.border#343b43
  • terminal.foreground#343b43
  • terminal.selectionBackground#e7ecf050
  • textBlockQuote.background#0e1116
  • titleBar.activeBackground#0e1116
  • titleBar.activeForeground#343b43
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#88929d
  • walkThrough.embeddedEditorBackground#0e1116
  • welcomePage.buttonBackground#e7ecf0
  • welcomePage.buttonHoverBackground#acb6c075
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#622cbc
source#343b43
meta.diff, meta.diff.header#88929d
markup.inserted#032563
markup.deleted#702c00
markup.changed#023b95
invalid#702c00underline italic
invalid.deprecated#343b43underline italic
entity.name.filename#b58407
markup.error#702c00
markup.underlineunderline
markup.bold#023b95bold
markup.heading#622cbcbold
markup.italic#b58407italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#024c1a
markup.inline.raw, markup.raw.restructuredtext#032563
markup.underline.link, markup.underline.link.image#024c1a
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#a0111f
entity.name.directive.restructuredtext, markup.quote#b58407italic
meta.separator.markdown#88929d
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#032563
punctuation.definition.constant.restructuredtext#622cbc
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#622cbc
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#343b43
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#b58407
entity.name.type.class, entity.name.class#024c1anormal
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#622cbcitalic
entity.other.inherited-class#024c1aitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#88929d
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#a0111f
comment.block.documentation entity.name.type#024c1aitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#024c1a
comment.block.documentation variable#023b95italic
constant, variable.other.constant#622cbc
constant.character.escape, constant.character.string.escape, constant.regexp#a0111f
entity.name.tag#a0111f
entity.other.attribute-name.parent-selector#a0111f
entity.other.attribute-name#032563italic
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#032563
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#023b95italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#032563italic
meta.decorator variable.other.object#032563
keyword, punctuation.definition.keyword#a0111f
keyword.control.new, keyword.operator.newbold
meta.selector#a0111f
support#024c1aitalic
support.function.magic, support.variable, variable.other.predefined#622cbcregular
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#a0111f
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#343b43
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#a0111f
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#024c1a
constant.other.date, constant.other.timestamp#023b95
variable.other.alias.yaml#032563italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#a0111fregular
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#024c1aitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#023b95
storage.modifier#a0111f
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#b58407
punctuation.definition.group.capture.regexp#a0111f
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#702c00
punctuation.definition.character-class.regexp#024c1a
punctuation.definition.group.regexp#023b95
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#702c00
meta.assertion.look-ahead.regexp#032563
string#b58407
punctuation.definition.string.begin, punctuation.definition.string.end#956400
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#622cbc
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#88929d
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#343b43
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#023b95italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#343b43normal
meta.selectionset.graphql variable#b58407
meta.selectionset.graphql meta.arguments variable#343b43
entity.name.fragment.graphql, variable.fragment.graphql#024c1a
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#343b43
source.shell variable.other#622cbc
support.constant#622cbcnormal
meta.scope.prerequisites.makefile#b58407
meta.attribute-selector.scss#b58407
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#343b43
meta.preprocessor.haskell#88929d
Tinted VSCode by Tinted Theming - VS Code Theme