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#4f4a7f10
  • activityBar.activeBorder#593f7e80
  • activityBar.background#050014
  • activityBar.foreground#645d6f
  • activityBar.inactiveForeground#463c53
  • activityBarBadge.background#593f7e
  • activityBarBadge.foreground#050014
  • badge.background#230045
  • badge.foreground#645d6f
  • breadcrumb.activeSelectionForeground#645d6f
  • breadcrumb.background#050014
  • breadcrumb.focusForeground#645d6f
  • breadcrumb.foreground#463c53
  • breadcrumbPicker.background#120e17
  • button.background#241d2e
  • button.foreground#645d6f
  • checkbox.background#241d2e
  • checkbox.border#120e17
  • checkbox.foreground#645d6f
  • contrastBorder#120e17
  • debugToolBar.background#241d2e
  • diffEditor.insertedTextBackground#337e6f20
  • diffEditor.removedTextBackground#7c152550
  • dropdown.background#050014
  • dropdown.border#120e17
  • dropdown.foreground#645d6f
  • editor.background#050014
  • editor.findMatchBackground#7f6f4980
  • editor.findMatchHighlightBackground#8c91fa40
  • editor.findRangeHighlightBackground#372c4675
  • editor.foldBackground#241d2e
  • editor.foreground#645d6f
  • editor.hoverHighlightBackground#120e17
  • editor.lineHighlightBorder#230045
  • editor.rangeHighlightBackground#4f4a7f15
  • editor.selectionBackground#230045
  • editor.selectionHighlightBackground#230045
  • editor.snippetFinalTabstopHighlightBackground#050014
  • editor.snippetFinalTabstopHighlightBorder#337e6f
  • editor.snippetTabstopHighlightBackground#050014
  • editor.snippetTabstopHighlightBorder#463c53
  • editor.wordHighlightBackground#57767f50
  • editor.wordHighlightStrongBackground#337e6f50
  • editorCodeLens.foreground#463c53
  • editorError.foreground#7c1525
  • editorGroup.border#4f4a7f
  • editorGroup.dropBackground#372c4670
  • editorGroupHeader.tabsBackground#120e17
  • editorGutter.addedBackground#337e6f80
  • editorGutter.deletedBackground#7c152580
  • editorGutter.modifiedBackground#57767f80
  • editorHoverWidget.background#050014
  • editorHoverWidget.border#463c53
  • editorIndentGuide.activeBackground#8c91fa45
  • editorIndentGuide.background#8c91fa1A
  • editorLineNumber.foreground#463c53
  • editorLink.activeForeground#57767f
  • editorMarkerNavigation.background#241d2e
  • editorOverviewRuler.addedForeground#337e6f80
  • editorOverviewRuler.border#120e17
  • editorOverviewRuler.currentContentForeground#337e6f
  • editorOverviewRuler.deletedForeground#7c152580
  • editorOverviewRuler.errorForeground#7c152580
  • editorOverviewRuler.incomingContentForeground#4f4a7f
  • editorOverviewRuler.infoForeground#57767f80
  • editorOverviewRuler.modifiedForeground#57767f80
  • editorOverviewRuler.selectionHighlightForeground#7f6f49
  • editorOverviewRuler.warningForeground#7f6f4980
  • editorOverviewRuler.wordHighlightForeground#57767f
  • editorOverviewRuler.wordHighlightStrongForeground#337e6f
  • editorRuler.foreground#8c91fa1A
  • editorSuggestWidget.background#241d2e
  • editorSuggestWidget.foreground#645d6f
  • editorSuggestWidget.selectedBackground#230045
  • editorWarning.foreground#7f6f49
  • editorWhitespace.foreground#8c91fa1A
  • editorWidget.background#241d2e
  • errorForeground#7c1525
  • extensionButton.prominentBackground#337e6f90
  • extensionButton.prominentForeground#645d6f
  • extensionButton.prominentHoverBackground#337e6f60
  • focusBorder#463c53
  • foreground#645d6f
  • gitDecoration.conflictingResourceForeground#7f6f49
  • gitDecoration.deletedResourceForeground#7c1525
  • gitDecoration.ignoredResourceForeground#463c53
  • gitDecoration.modifiedResourceForeground#57767f
  • gitDecoration.untrackedResourceForeground#337e6f
  • input.background#050014
  • input.border#120e17
  • input.foreground#645d6f
  • input.placeholderForeground#463c53
  • inputOption.activeBorder#4f4a7f
  • inputValidation.errorBackground#050014
  • inputValidation.errorBorder#7c1525
  • inputValidation.errorForeground#7c1525
  • inputValidation.infoBackground#050014
  • inputValidation.infoBorder#4f4a7f
  • inputValidation.infoForeground#4f4a7f
  • inputValidation.warningBackground#050014
  • inputValidation.warningBorder#7f6f49
  • inputValidation.warningForeground#7f6f49
  • list.activeSelectionBackground#230045
  • list.activeSelectionForeground#645d6f
  • list.dropBackground#230045
  • list.errorForeground#7c1525
  • list.focusBackground#372c4675
  • list.highlightForeground#57767f
  • list.hoverBackground#372c4675
  • list.inactiveSelectionBackground#372c4675
  • list.warningForeground#7f6f49
  • listFilterWidget.background#050014
  • listFilterWidget.noMatchesOutline#7c1525
  • listFilterWidget.outline#230045
  • merge.currentHeaderBackground#337e6f90
  • merge.incomingHeaderBackground#4f4a7f90
  • notification.background#050014
  • notification.buttonBackground#230045
  • notification.buttonForeground#645d6f
  • notification.buttonHoverBackground#372c4675
  • notification.errorBackground#7c1525
  • notification.errorForeground#050014
  • notification.foreground#645d6f
  • notification.infoBackground#4f4a7f
  • notification.infoForeground#050014
  • notification.warningBackground#7f6f49
  • notification.warningForeground#050014
  • notificationCenter.border#241d2e
  • notificationCenterHeader.background#050014
  • notificationCenterHeader.foreground#645d6f
  • notificationLink.foreground#57767f
  • notifications.background#050014
  • notifications.border#241d2e
  • notifications.foreground#645d6f
  • notificationsErrorIcon.foreground#7c1525
  • notificationsInfoIcon.foreground#4f4a7f
  • notificationsWarningIcon.foreground#7f6f49
  • notificationToast.border#241d2e
  • panel.background#050014
  • panel.border#4f4a7f
  • panelInput.border#645d6f
  • panelTitle.activeBorder#593f7e
  • panelTitle.activeForeground#645d6f
  • panelTitle.inactiveForeground#463c53
  • peekView.border#230045
  • peekViewEditor.background#050014
  • peekViewEditor.matchHighlightBackground#e0c28680
  • peekViewResult.background#241d2e
  • peekViewResult.fileForeground#645d6f
  • peekViewResult.lineForeground#645d6f
  • peekViewResult.matchHighlightBackground#e0c28680
  • peekViewResult.selectionBackground#230045
  • peekViewResult.selectionForeground#645d6f
  • peekViewTitle.background#120e17
  • peekViewTitleDescription.foreground#463c53
  • peekViewTitleLabel.foreground#645d6f
  • pickerGroup.border#4f4a7f
  • pickerGroup.foreground#57767f
  • progressBar.background#593f7e
  • scrollbar.shadow#444444
  • selection.background#4f4a7f
  • settings.checkboxBackground#241d2e
  • settings.checkboxBorder#120e17
  • settings.checkboxForeground#645d6f
  • settings.dropdownBackground#241d2e
  • settings.dropdownBorder#120e17
  • settings.dropdownForeground#645d6f
  • settings.headerForeground#645d6f
  • settings.modifiedItemIndicator#7f6f49
  • settings.numberInputBackground#241d2e
  • settings.numberInputBorder#120e17
  • settings.numberInputForeground#645d6f
  • settings.textInputBackground#241d2e
  • settings.textInputBorder#120e17
  • settings.textInputForeground#645d6f
  • sideBar.background#241d2e
  • sideBarSectionHeader.background#050014
  • sideBarSectionHeader.border#120e17
  • sideBarTitle.foreground#645d6f
  • statusBar.background#120e17
  • statusBar.debuggingBackground#7c1525
  • statusBar.debuggingForeground#120e17
  • statusBar.foreground#645d6f
  • statusBar.noFolderBackground#120e17
  • statusBar.noFolderForeground#645d6f
  • statusBarItem.prominentBackground#7c1525
  • statusBarItem.prominentHoverBackground#7f6f49
  • statusBarItem.remoteBackground#4f4a7f
  • statusBarItem.remoteForeground#050014
  • tab.activeBackground#050014
  • tab.activeBorderTop#593f7e80
  • tab.activeForeground#645d6f
  • tab.border#120e17
  • tab.inactiveBackground#241d2e
  • tab.inactiveForeground#463c53
  • terminal.ansiBlack#230045
  • terminal.ansiBlue#4f4a7f
  • terminal.ansiBrightBlack#372c46
  • terminal.ansiBrightBlue#8e86df
  • terminal.ansiBrightCyan#9ad3df
  • terminal.ansiBrightGreen#52e0c4
  • terminal.ansiBrightMagenta#a675df
  • terminal.ansiBrightRed#df5066
  • terminal.ansiBrightWhite#8c91fa
  • terminal.ansiBrightYellow#e0c286
  • terminal.ansiCyan#57767f
  • terminal.ansiGreen#337e6f
  • terminal.ansiMagenta#593f7e
  • terminal.ansiRed#7c1525
  • terminal.ansiWhite#736e7d
  • terminal.ansiYellow#7f6f49
  • terminal.background#050014
  • terminal.border#645d6f
  • terminal.foreground#645d6f
  • terminal.selectionBackground#23004550
  • textBlockQuote.background#241d2e
  • titleBar.activeBackground#241d2e
  • titleBar.activeForeground#645d6f
  • titleBar.inactiveBackground#120e17
  • titleBar.inactiveForeground#463c53
  • walkThrough.embeddedEditorBackground#241d2e
  • welcomePage.buttonBackground#230045
  • welcomePage.buttonHoverBackground#372c4675
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#4f4a7f
source#645d6f
meta.diff, meta.diff.header#463c53
markup.inserted#337e6f
markup.deleted#7c1525
markup.changed#7f6f49
invalid#7c1525underline italic
invalid.deprecated#645d6funderline italic
entity.name.filename#e0c286
markup.error#7c1525
markup.underlineunderline
markup.bold#7f6f49bold
markup.heading#4f4a7fbold
markup.italic#e0c286italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#57767f
markup.inline.raw, markup.raw.restructuredtext#337e6f
markup.underline.link, markup.underline.link.image#57767f
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#593f7e
entity.name.directive.restructuredtext, markup.quote#e0c286italic
meta.separator.markdown#463c53
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#337e6f
punctuation.definition.constant.restructuredtext#4f4a7f
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#4f4a7f
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#645d6f
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#e0c286
entity.name.type.class, entity.name.class#57767fnormal
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#4f4a7fitalic
entity.other.inherited-class#57767fitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#463c53
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#593f7e
comment.block.documentation entity.name.type#57767fitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#57767f
comment.block.documentation variable#7f6f49italic
constant, variable.other.constant#4f4a7f
constant.character.escape, constant.character.string.escape, constant.regexp#593f7e
entity.name.tag#593f7e
entity.other.attribute-name.parent-selector#593f7e
entity.other.attribute-name#337e6fitalic
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#337e6f
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#7f6f49italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#337e6fitalic
meta.decorator variable.other.object#337e6f
keyword, punctuation.definition.keyword#593f7e
keyword.control.new, keyword.operator.newbold
meta.selector#593f7e
support#57767fitalic
support.function.magic, support.variable, variable.other.predefined#4f4a7fregular
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#593f7e
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#645d6f
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#593f7e
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#57767f
constant.other.date, constant.other.timestamp#7f6f49
variable.other.alias.yaml#337e6fitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#593f7eregular
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#57767fitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#7f6f49
storage.modifier#593f7e
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e0c286
punctuation.definition.group.capture.regexp#593f7e
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#7c1525
punctuation.definition.character-class.regexp#57767f
punctuation.definition.group.regexp#7f6f49
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#7c1525
meta.assertion.look-ahead.regexp#337e6f
string#e0c286
punctuation.definition.string.begin, punctuation.definition.string.end#8e86df
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#4f4a7f
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#463c53
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#645d6f
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#7f6f49italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#645d6fnormal
meta.selectionset.graphql variable#e0c286
meta.selectionset.graphql meta.arguments variable#645d6f
entity.name.fragment.graphql, variable.fragment.graphql#57767f
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#645d6f
source.shell variable.other#4f4a7f
support.constant#4f4a7fnormal
meta.scope.prerequisites.makefile#e0c286
meta.attribute-selector.scss#e0c286
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#645d6f
meta.preprocessor.haskell#463c53
Tinted VSCode by Tinted Theming - VS Code Theme