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#0442fe10
  • activityBar.activeBorder#f800f880
  • activityBar.background#121212
  • activityBar.foreground#dfdfdf
  • activityBar.inactiveForeground#525252
  • activityBarBadge.background#f800f8
  • activityBarBadge.foreground#121212
  • badge.background#323232
  • badge.foreground#dfdfdf
  • breadcrumb.activeSelectionForeground#dfdfdf
  • breadcrumb.background#121212
  • breadcrumb.focusForeground#dfdfdf
  • breadcrumb.foreground#525252
  • breadcrumbPicker.background#2b2b2b
  • button.background#565656
  • button.foreground#dfdfdf
  • checkbox.background#565656
  • checkbox.border#2b2b2b
  • checkbox.foreground#dfdfdf
  • contrastBorder#2b2b2b
  • debugToolBar.background#565656
  • diffEditor.insertedTextBackground#97e12320
  • diffEditor.removedTextBackground#fa283450
  • dropdown.background#121212
  • dropdown.border#2b2b2b
  • dropdown.foreground#dfdfdf
  • editor.background#121212
  • editor.findMatchBackground#fec50a80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#42424275
  • editor.foldBackground#565656
  • editor.foreground#dfdfdf
  • editor.hoverHighlightBackground#2b2b2b
  • editor.lineHighlightBorder#323232
  • editor.rangeHighlightBackground#0442fe15
  • editor.selectionBackground#323232
  • editor.selectionHighlightBackground#323232
  • editor.snippetFinalTabstopHighlightBackground#121212
  • editor.snippetFinalTabstopHighlightBorder#97e123
  • editor.snippetTabstopHighlightBackground#121212
  • editor.snippetTabstopHighlightBorder#525252
  • editor.wordHighlightBackground#01b6ed50
  • editor.wordHighlightStrongBackground#97e12350
  • editorCodeLens.foreground#525252
  • editorError.foreground#fa2834
  • editorGroup.border#0442fe
  • editorGroup.dropBackground#42424270
  • editorGroupHeader.tabsBackground#2b2b2b
  • editorGutter.addedBackground#97e12380
  • editorGutter.deletedBackground#fa283480
  • editorGutter.modifiedBackground#01b6ed80
  • editorHoverWidget.background#121212
  • editorHoverWidget.border#525252
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#525252
  • editorLink.activeForeground#01b6ed
  • editorMarkerNavigation.background#565656
  • editorOverviewRuler.addedForeground#97e12380
  • editorOverviewRuler.border#2b2b2b
  • editorOverviewRuler.currentContentForeground#97e123
  • editorOverviewRuler.deletedForeground#fa283480
  • editorOverviewRuler.errorForeground#fa283480
  • editorOverviewRuler.incomingContentForeground#0442fe
  • editorOverviewRuler.infoForeground#01b6ed80
  • editorOverviewRuler.modifiedForeground#01b6ed80
  • editorOverviewRuler.selectionHighlightForeground#fec50a
  • editorOverviewRuler.warningForeground#fec50a80
  • editorOverviewRuler.wordHighlightForeground#01b6ed
  • editorOverviewRuler.wordHighlightStrongForeground#97e123
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#565656
  • editorSuggestWidget.foreground#dfdfdf
  • editorSuggestWidget.selectedBackground#323232
  • editorWarning.foreground#fec50a
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#565656
  • errorForeground#fa2834
  • extensionButton.prominentBackground#97e12390
  • extensionButton.prominentForeground#dfdfdf
  • extensionButton.prominentHoverBackground#97e12360
  • focusBorder#525252
  • foreground#dfdfdf
  • gitDecoration.conflictingResourceForeground#fec50a
  • gitDecoration.deletedResourceForeground#fa2834
  • gitDecoration.ignoredResourceForeground#525252
  • gitDecoration.modifiedResourceForeground#01b6ed
  • gitDecoration.untrackedResourceForeground#97e123
  • input.background#121212
  • input.border#2b2b2b
  • input.foreground#dfdfdf
  • input.placeholderForeground#525252
  • inputOption.activeBorder#0442fe
  • inputValidation.errorBackground#121212
  • inputValidation.errorBorder#fa2834
  • inputValidation.errorForeground#fa2834
  • inputValidation.infoBackground#121212
  • inputValidation.infoBorder#0442fe
  • inputValidation.infoForeground#0442fe
  • inputValidation.warningBackground#121212
  • inputValidation.warningBorder#fec50a
  • inputValidation.warningForeground#fec50a
  • list.activeSelectionBackground#323232
  • list.activeSelectionForeground#dfdfdf
  • list.dropBackground#323232
  • list.errorForeground#fa2834
  • list.focusBackground#42424275
  • list.highlightForeground#01b6ed
  • list.hoverBackground#42424275
  • list.inactiveSelectionBackground#42424275
  • list.warningForeground#fec50a
  • listFilterWidget.background#121212
  • listFilterWidget.noMatchesOutline#fa2834
  • listFilterWidget.outline#323232
  • merge.currentHeaderBackground#97e12390
  • merge.incomingHeaderBackground#0442fe90
  • notification.background#121212
  • notification.buttonBackground#323232
  • notification.buttonForeground#dfdfdf
  • notification.buttonHoverBackground#42424275
  • notification.errorBackground#fa2834
  • notification.errorForeground#121212
  • notification.foreground#dfdfdf
  • notification.infoBackground#0442fe
  • notification.infoForeground#121212
  • notification.warningBackground#fec50a
  • notification.warningForeground#121212
  • notificationCenter.border#565656
  • notificationCenterHeader.background#121212
  • notificationCenterHeader.foreground#dfdfdf
  • notificationLink.foreground#01b6ed
  • notifications.background#121212
  • notifications.border#565656
  • notifications.foreground#dfdfdf
  • notificationsErrorIcon.foreground#fa2834
  • notificationsInfoIcon.foreground#0442fe
  • notificationsWarningIcon.foreground#fec50a
  • notificationToast.border#565656
  • panel.background#121212
  • panel.border#0442fe
  • panelInput.border#dfdfdf
  • panelTitle.activeBorder#f800f8
  • panelTitle.activeForeground#dfdfdf
  • panelTitle.inactiveForeground#525252
  • peekView.border#323232
  • peekViewEditor.background#121212
  • peekViewEditor.matchHighlightBackground#fef26c80
  • peekViewResult.background#565656
  • peekViewResult.fileForeground#dfdfdf
  • peekViewResult.lineForeground#dfdfdf
  • peekViewResult.matchHighlightBackground#fef26c80
  • peekViewResult.selectionBackground#323232
  • peekViewResult.selectionForeground#dfdfdf
  • peekViewTitle.background#2b2b2b
  • peekViewTitleDescription.foreground#525252
  • peekViewTitleLabel.foreground#dfdfdf
  • pickerGroup.border#0442fe
  • pickerGroup.foreground#01b6ed
  • progressBar.background#f800f8
  • scrollbar.shadow#444444
  • selection.background#0442fe
  • settings.checkboxBackground#565656
  • settings.checkboxBorder#2b2b2b
  • settings.checkboxForeground#dfdfdf
  • settings.dropdownBackground#565656
  • settings.dropdownBorder#2b2b2b
  • settings.dropdownForeground#dfdfdf
  • settings.headerForeground#dfdfdf
  • settings.modifiedItemIndicator#fec50a
  • settings.numberInputBackground#565656
  • settings.numberInputBorder#2b2b2b
  • settings.numberInputForeground#dfdfdf
  • settings.textInputBackground#565656
  • settings.textInputBorder#2b2b2b
  • settings.textInputForeground#dfdfdf
  • sideBar.background#565656
  • sideBarSectionHeader.background#121212
  • sideBarSectionHeader.border#2b2b2b
  • sideBarTitle.foreground#dfdfdf
  • statusBar.background#2b2b2b
  • statusBar.debuggingBackground#fa2834
  • statusBar.debuggingForeground#2b2b2b
  • statusBar.foreground#dfdfdf
  • statusBar.noFolderBackground#2b2b2b
  • statusBar.noFolderForeground#dfdfdf
  • statusBarItem.prominentBackground#fa2834
  • statusBarItem.prominentHoverBackground#fec50a
  • statusBarItem.remoteBackground#0442fe
  • statusBarItem.remoteForeground#121212
  • tab.activeBackground#121212
  • tab.activeBorderTop#f800f880
  • tab.activeForeground#dfdfdf
  • tab.border#2b2b2b
  • tab.inactiveBackground#565656
  • tab.inactiveForeground#525252
  • terminal.ansiBlack#323232
  • terminal.ansiBlue#0442fe
  • terminal.ansiBrightBlack#424242
  • terminal.ansiBrightBlue#0442fe
  • terminal.ansiBrightCyan#50cdfe
  • terminal.ansiBrightGreen#b0e05e
  • terminal.ansiBrightMagenta#f200f5
  • terminal.ansiBrightRed#f5669c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fef26c
  • terminal.ansiCyan#01b6ed
  • terminal.ansiGreen#97e123
  • terminal.ansiMagenta#f800f8
  • terminal.ansiRed#fa2834
  • terminal.ansiWhite#f1f1f1
  • terminal.ansiYellow#fec50a
  • terminal.background#121212
  • terminal.border#dfdfdf
  • terminal.foreground#dfdfdf
  • terminal.selectionBackground#32323250
  • textBlockQuote.background#565656
  • titleBar.activeBackground#565656
  • titleBar.activeForeground#dfdfdf
  • titleBar.inactiveBackground#2b2b2b
  • titleBar.inactiveForeground#525252
  • walkThrough.embeddedEditorBackground#565656
  • welcomePage.buttonBackground#323232
  • welcomePage.buttonHoverBackground#42424275
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#0442fe
source#dfdfdf
meta.diff, meta.diff.header#525252
markup.inserted#97e123
markup.deleted#fa2834
markup.changed#fec50a
invalid#fa2834underline italic
invalid.deprecated#dfdfdfunderline italic
entity.name.filename#fef26c
markup.error#fa2834
markup.underlineunderline
markup.bold#fec50abold
markup.heading#0442febold
markup.italic#fef26citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#01b6ed
markup.inline.raw, markup.raw.restructuredtext#97e123
markup.underline.link, markup.underline.link.image#01b6ed
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#f800f8
entity.name.directive.restructuredtext, markup.quote#fef26citalic
meta.separator.markdown#525252
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#97e123
punctuation.definition.constant.restructuredtext#0442fe
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#0442fe
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#dfdfdf
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fef26c
entity.name.type.class, entity.name.class#01b6ednormal
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#0442feitalic
entity.other.inherited-class#01b6editalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#525252
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#f800f8
comment.block.documentation entity.name.type#01b6editalic
comment.block.documentation entity.name.type punctuation.definition.bracket#01b6ed
comment.block.documentation variable#fec50aitalic
constant, variable.other.constant#0442fe
constant.character.escape, constant.character.string.escape, constant.regexp#f800f8
entity.name.tag#f800f8
entity.other.attribute-name.parent-selector#f800f8
entity.other.attribute-name#97e123italic
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#97e123
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#fec50aitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#97e123italic
meta.decorator variable.other.object#97e123
keyword, punctuation.definition.keyword#f800f8
keyword.control.new, keyword.operator.newbold
meta.selector#f800f8
support#01b6editalic
support.function.magic, support.variable, variable.other.predefined#0442feregular
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#f800f8
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#dfdfdf
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#f800f8
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#01b6ed
constant.other.date, constant.other.timestamp#fec50a
variable.other.alias.yaml#97e123italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#f800f8regular
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#01b6editalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fec50a
storage.modifier#f800f8
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fef26c
punctuation.definition.group.capture.regexp#f800f8
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#fa2834
punctuation.definition.character-class.regexp#01b6ed
punctuation.definition.group.regexp#fec50a
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#fa2834
meta.assertion.look-ahead.regexp#97e123
string#fef26c
punctuation.definition.string.begin, punctuation.definition.string.end#fef20a
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#0442fe
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#525252
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#dfdfdf
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#fec50aitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#dfdfdfnormal
meta.selectionset.graphql variable#fef26c
meta.selectionset.graphql meta.arguments variable#dfdfdf
entity.name.fragment.graphql, variable.fragment.graphql#01b6ed
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#dfdfdf
source.shell variable.other#0442fe
support.constant#0442fenormal
meta.scope.prerequisites.makefile#fef26c
meta.attribute-selector.scss#fef26c
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#dfdfdf
meta.preprocessor.haskell#525252
Tinted VSCode by Tinted Theming - VS Code Theme