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#359ddf10
  • activityBar.activeBorder#d75cff80
  • activityBar.background#0e1011
  • activityBar.foreground#a5acae
  • activityBar.inactiveForeground#374d53
  • activityBarBadge.background#d75cff
  • activityBarBadge.foreground#0e1011
  • badge.background#002731
  • badge.foreground#a5acae
  • breadcrumb.activeSelectionForeground#a5acae
  • breadcrumb.background#0e1011
  • breadcrumb.focusForeground#a5acae
  • breadcrumb.foreground#374d53
  • breadcrumbPicker.background#000a0c
  • button.background#001419
  • button.foreground#a5acae
  • checkbox.background#001419
  • checkbox.border#000a0c
  • checkbox.foreground#a5acae
  • contrastBorder#000a0c
  • debugToolBar.background#001419
  • diffEditor.insertedTextBackground#5eb83c20
  • diffEditor.removedTextBackground#e6385350
  • dropdown.background#0e1011
  • dropdown.border#000a0c
  • dropdown.foreground#a5acae
  • editor.background#0e1011
  • editor.findMatchBackground#a5770580
  • editor.findMatchHighlightBackground#e2e2e240
  • editor.findRangeHighlightBackground#001e2675
  • editor.foldBackground#001419
  • editor.foreground#a5acae
  • editor.hoverHighlightBackground#000a0c
  • editor.lineHighlightBorder#002731
  • editor.rangeHighlightBackground#359ddf15
  • editor.selectionBackground#002731
  • editor.selectionHighlightBackground#002731
  • editor.snippetFinalTabstopHighlightBackground#0e1011
  • editor.snippetFinalTabstopHighlightBorder#5eb83c
  • editor.snippetTabstopHighlightBackground#0e1011
  • editor.snippetTabstopHighlightBorder#374d53
  • editor.wordHighlightBackground#4b73a250
  • editor.wordHighlightStrongBackground#5eb83c50
  • editorCodeLens.foreground#374d53
  • editorError.foreground#e63853
  • editorGroup.border#359ddf
  • editorGroup.dropBackground#001e2670
  • editorGroupHeader.tabsBackground#000a0c
  • editorGutter.addedBackground#5eb83c80
  • editorGutter.deletedBackground#e6385380
  • editorGutter.modifiedBackground#4b73a280
  • editorHoverWidget.background#0e1011
  • editorHoverWidget.border#374d53
  • editorIndentGuide.activeBackground#e2e2e245
  • editorIndentGuide.background#e2e2e21A
  • editorLineNumber.foreground#374d53
  • editorLink.activeForeground#4b73a2
  • editorMarkerNavigation.background#001419
  • editorOverviewRuler.addedForeground#5eb83c80
  • editorOverviewRuler.border#000a0c
  • editorOverviewRuler.currentContentForeground#5eb83c
  • editorOverviewRuler.deletedForeground#e6385380
  • editorOverviewRuler.errorForeground#e6385380
  • editorOverviewRuler.incomingContentForeground#359ddf
  • editorOverviewRuler.infoForeground#4b73a280
  • editorOverviewRuler.modifiedForeground#4b73a280
  • editorOverviewRuler.selectionHighlightForeground#a57705
  • editorOverviewRuler.warningForeground#a5770580
  • editorOverviewRuler.wordHighlightForeground#4b73a2
  • editorOverviewRuler.wordHighlightStrongForeground#5eb83c
  • editorRuler.foreground#e2e2e21A
  • editorSuggestWidget.background#001419
  • editorSuggestWidget.foreground#a5acae
  • editorSuggestWidget.selectedBackground#002731
  • editorWarning.foreground#a57705
  • editorWhitespace.foreground#e2e2e21A
  • editorWidget.background#001419
  • errorForeground#e63853
  • extensionButton.prominentBackground#5eb83c90
  • extensionButton.prominentForeground#a5acae
  • extensionButton.prominentHoverBackground#5eb83c60
  • focusBorder#374d53
  • foreground#a5acae
  • gitDecoration.conflictingResourceForeground#a57705
  • gitDecoration.deletedResourceForeground#e63853
  • gitDecoration.ignoredResourceForeground#374d53
  • gitDecoration.modifiedResourceForeground#4b73a2
  • gitDecoration.untrackedResourceForeground#5eb83c
  • input.background#0e1011
  • input.border#000a0c
  • input.foreground#a5acae
  • input.placeholderForeground#374d53
  • inputOption.activeBorder#359ddf
  • inputValidation.errorBackground#0e1011
  • inputValidation.errorBorder#e63853
  • inputValidation.errorForeground#e63853
  • inputValidation.infoBackground#0e1011
  • inputValidation.infoBorder#359ddf
  • inputValidation.infoForeground#359ddf
  • inputValidation.warningBackground#0e1011
  • inputValidation.warningBorder#a57705
  • inputValidation.warningForeground#a57705
  • list.activeSelectionBackground#002731
  • list.activeSelectionForeground#a5acae
  • list.dropBackground#002731
  • list.errorForeground#e63853
  • list.focusBackground#001e2675
  • list.highlightForeground#4b73a2
  • list.hoverBackground#001e2675
  • list.inactiveSelectionBackground#001e2675
  • list.warningForeground#a57705
  • listFilterWidget.background#0e1011
  • listFilterWidget.noMatchesOutline#e63853
  • listFilterWidget.outline#002731
  • merge.currentHeaderBackground#5eb83c90
  • merge.incomingHeaderBackground#359ddf90
  • notification.background#0e1011
  • notification.buttonBackground#002731
  • notification.buttonForeground#a5acae
  • notification.buttonHoverBackground#001e2675
  • notification.errorBackground#e63853
  • notification.errorForeground#0e1011
  • notification.foreground#a5acae
  • notification.infoBackground#359ddf
  • notification.infoForeground#0e1011
  • notification.warningBackground#a57705
  • notification.warningForeground#0e1011
  • notificationCenter.border#001419
  • notificationCenterHeader.background#0e1011
  • notificationCenterHeader.foreground#a5acae
  • notificationLink.foreground#4b73a2
  • notifications.background#0e1011
  • notifications.border#001419
  • notifications.foreground#a5acae
  • notificationsErrorIcon.foreground#e63853
  • notificationsInfoIcon.foreground#359ddf
  • notificationsWarningIcon.foreground#a57705
  • notificationToast.border#001419
  • panel.background#0e1011
  • panel.border#359ddf
  • panelInput.border#a5acae
  • panelTitle.activeBorder#d75cff
  • panelTitle.activeForeground#a5acae
  • panelTitle.inactiveForeground#374d53
  • peekView.border#002731
  • peekViewEditor.background#0e1011
  • peekViewEditor.matchHighlightBackground#cc930880
  • peekViewResult.background#001419
  • peekViewResult.fileForeground#a5acae
  • peekViewResult.lineForeground#a5acae
  • peekViewResult.matchHighlightBackground#cc930880
  • peekViewResult.selectionBackground#002731
  • peekViewResult.selectionForeground#a5acae
  • peekViewTitle.background#000a0c
  • peekViewTitleDescription.foreground#374d53
  • peekViewTitleLabel.foreground#a5acae
  • pickerGroup.border#359ddf
  • pickerGroup.foreground#4b73a2
  • progressBar.background#d75cff
  • scrollbar.shadow#444444
  • selection.background#359ddf
  • settings.checkboxBackground#001419
  • settings.checkboxBorder#000a0c
  • settings.checkboxForeground#a5acae
  • settings.dropdownBackground#001419
  • settings.dropdownBorder#000a0c
  • settings.dropdownForeground#a5acae
  • settings.headerForeground#a5acae
  • settings.modifiedItemIndicator#a57705
  • settings.numberInputBackground#001419
  • settings.numberInputBorder#000a0c
  • settings.numberInputForeground#a5acae
  • settings.textInputBackground#001419
  • settings.textInputBorder#000a0c
  • settings.textInputForeground#a5acae
  • sideBar.background#001419
  • sideBarSectionHeader.background#0e1011
  • sideBarSectionHeader.border#000a0c
  • sideBarTitle.foreground#a5acae
  • statusBar.background#000a0c
  • statusBar.debuggingBackground#e63853
  • statusBar.debuggingForeground#000a0c
  • statusBar.foreground#a5acae
  • statusBar.noFolderBackground#000a0c
  • statusBar.noFolderForeground#a5acae
  • statusBarItem.prominentBackground#e63853
  • statusBarItem.prominentHoverBackground#a57705
  • statusBarItem.remoteBackground#359ddf
  • statusBarItem.remoteForeground#0e1011
  • tab.activeBackground#0e1011
  • tab.activeBorderTop#d75cff80
  • tab.activeForeground#a5acae
  • tab.border#000a0c
  • tab.inactiveBackground#001419
  • tab.inactiveForeground#374d53
  • terminal.ansiBlack#002731
  • terminal.ansiBlue#359ddf
  • terminal.ansiBrightBlack#001e26
  • terminal.ansiBrightBlue#006fc0
  • terminal.ansiBrightCyan#005794
  • terminal.ansiBrightGreen#1d9000
  • terminal.ansiBrightMagenta#a200da
  • terminal.ansiBrightRed#e1003f
  • terminal.ansiBrightWhite#e2e2e2
  • terminal.ansiBrightYellow#cc9308
  • terminal.ansiCyan#4b73a2
  • terminal.ansiGreen#5eb83c
  • terminal.ansiMagenta#d75cff
  • terminal.ansiRed#e63853
  • terminal.ansiWhite#dcdcdc
  • terminal.ansiYellow#a57705
  • terminal.background#0e1011
  • terminal.border#a5acae
  • terminal.foreground#a5acae
  • terminal.selectionBackground#00273150
  • textBlockQuote.background#001419
  • titleBar.activeBackground#001419
  • titleBar.activeForeground#a5acae
  • titleBar.inactiveBackground#000a0c
  • titleBar.inactiveForeground#374d53
  • walkThrough.embeddedEditorBackground#001419
  • welcomePage.buttonBackground#002731
  • welcomePage.buttonHoverBackground#001e2675
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#359ddf
source#a5acae
meta.diff, meta.diff.header#374d53
markup.inserted#5eb83c
markup.deleted#e63853
markup.changed#a57705
invalid#e63853underline italic
invalid.deprecated#a5acaeunderline italic
entity.name.filename#cc9308
markup.error#e63853
markup.underlineunderline
markup.bold#a57705bold
markup.heading#359ddfbold
markup.italic#cc9308italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#4b73a2
markup.inline.raw, markup.raw.restructuredtext#5eb83c
markup.underline.link, markup.underline.link.image#4b73a2
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#d75cff
entity.name.directive.restructuredtext, markup.quote#cc9308italic
meta.separator.markdown#374d53
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#5eb83c
punctuation.definition.constant.restructuredtext#359ddf
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#359ddf
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#a5acae
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#cc9308
entity.name.type.class, entity.name.class#4b73a2normal
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#359ddfitalic
entity.other.inherited-class#4b73a2italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#374d53
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#d75cff
comment.block.documentation entity.name.type#4b73a2italic
comment.block.documentation entity.name.type punctuation.definition.bracket#4b73a2
comment.block.documentation variable#a57705italic
constant, variable.other.constant#359ddf
constant.character.escape, constant.character.string.escape, constant.regexp#d75cff
entity.name.tag#d75cff
entity.other.attribute-name.parent-selector#d75cff
entity.other.attribute-name#5eb83citalic
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#5eb83c
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#a57705italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#5eb83citalic
meta.decorator variable.other.object#5eb83c
keyword, punctuation.definition.keyword#d75cff
keyword.control.new, keyword.operator.newbold
meta.selector#d75cff
support#4b73a2italic
support.function.magic, support.variable, variable.other.predefined#359ddfregular
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#d75cff
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#a5acae
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#d75cff
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#4b73a2
constant.other.date, constant.other.timestamp#a57705
variable.other.alias.yaml#5eb83citalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#d75cffregular
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#4b73a2italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#a57705
storage.modifier#d75cff
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#cc9308
punctuation.definition.group.capture.regexp#d75cff
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#e63853
punctuation.definition.character-class.regexp#4b73a2
punctuation.definition.group.regexp#a57705
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#e63853
meta.assertion.look-ahead.regexp#5eb83c
string#cc9308
punctuation.definition.string.begin, punctuation.definition.string.end#006fc0
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#359ddf
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#374d53
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#a5acae
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#a57705italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#a5acaenormal
meta.selectionset.graphql variable#cc9308
meta.selectionset.graphql meta.arguments variable#a5acae
entity.name.fragment.graphql, variable.fragment.graphql#4b73a2
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#a5acae
source.shell variable.other#359ddf
support.constant#359ddfnormal
meta.scope.prerequisites.makefile#cc9308
meta.attribute-selector.scss#cc9308
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#a5acae
meta.preprocessor.haskell#374d53
Tinted VSCode by Tinted Theming - VS Code Theme