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#8aadf410
  • activityBar.activeBorder#c6a0f680
  • activityBar.background#24273a
  • activityBar.foreground#cad3f5
  • activityBar.inactiveForeground#494d64
  • activityBarBadge.background#c6a0f6
  • activityBarBadge.foreground#24273a
  • badge.background#1e2030
  • badge.foreground#cad3f5
  • breadcrumb.activeSelectionForeground#cad3f5
  • breadcrumb.background#24273a
  • breadcrumb.focusForeground#cad3f5
  • breadcrumb.foreground#494d64
  • breadcrumbPicker.background#181926
  • button.background#1e2030
  • button.foreground#cad3f5
  • checkbox.background#1e2030
  • checkbox.border#181926
  • checkbox.foreground#cad3f5
  • contrastBorder#181926
  • debugToolBar.background#1e2030
  • diffEditor.insertedTextBackground#a6da9520
  • diffEditor.removedTextBackground#ed879650
  • dropdown.background#24273a
  • dropdown.border#181926
  • dropdown.foreground#cad3f5
  • editor.background#24273a
  • editor.findMatchBackground#f5a97f80
  • editor.findMatchHighlightBackground#b7bdf840
  • editor.findRangeHighlightBackground#363a4f75
  • editor.foldBackground#1e2030
  • editor.foreground#cad3f5
  • editor.hoverHighlightBackground#181926
  • editor.lineHighlightBorder#1e2030
  • editor.rangeHighlightBackground#8aadf415
  • editor.selectionBackground#1e2030
  • editor.selectionHighlightBackground#1e2030
  • editor.snippetFinalTabstopHighlightBackground#24273a
  • editor.snippetFinalTabstopHighlightBorder#a6da95
  • editor.snippetTabstopHighlightBackground#24273a
  • editor.snippetTabstopHighlightBorder#494d64
  • editor.wordHighlightBackground#8bd5ca50
  • editor.wordHighlightStrongBackground#a6da9550
  • editorCodeLens.foreground#494d64
  • editorError.foreground#ed8796
  • editorGroup.border#8aadf4
  • editorGroup.dropBackground#363a4f70
  • editorGroupHeader.tabsBackground#181926
  • editorGutter.addedBackground#a6da9580
  • editorGutter.deletedBackground#ed879680
  • editorGutter.modifiedBackground#8bd5ca80
  • editorHoverWidget.background#24273a
  • editorHoverWidget.border#494d64
  • editorIndentGuide.activeBackground#b7bdf845
  • editorIndentGuide.background#b7bdf81A
  • editorLineNumber.foreground#494d64
  • editorLink.activeForeground#8bd5ca
  • editorMarkerNavigation.background#1e2030
  • editorOverviewRuler.addedForeground#a6da9580
  • editorOverviewRuler.border#181926
  • editorOverviewRuler.currentContentForeground#a6da95
  • editorOverviewRuler.deletedForeground#ed879680
  • editorOverviewRuler.errorForeground#ed879680
  • editorOverviewRuler.incomingContentForeground#8aadf4
  • editorOverviewRuler.infoForeground#8bd5ca80
  • editorOverviewRuler.modifiedForeground#8bd5ca80
  • editorOverviewRuler.selectionHighlightForeground#f5a97f
  • editorOverviewRuler.warningForeground#f5a97f80
  • editorOverviewRuler.wordHighlightForeground#8bd5ca
  • editorOverviewRuler.wordHighlightStrongForeground#a6da95
  • editorRuler.foreground#b7bdf81A
  • editorSuggestWidget.background#1e2030
  • editorSuggestWidget.foreground#cad3f5
  • editorSuggestWidget.selectedBackground#1e2030
  • editorWarning.foreground#f5a97f
  • editorWhitespace.foreground#b7bdf81A
  • editorWidget.background#1e2030
  • errorForeground#ed8796
  • extensionButton.prominentBackground#a6da9590
  • extensionButton.prominentForeground#cad3f5
  • extensionButton.prominentHoverBackground#a6da9560
  • focusBorder#494d64
  • foreground#cad3f5
  • gitDecoration.conflictingResourceForeground#f5a97f
  • gitDecoration.deletedResourceForeground#ed8796
  • gitDecoration.ignoredResourceForeground#494d64
  • gitDecoration.modifiedResourceForeground#8bd5ca
  • gitDecoration.untrackedResourceForeground#a6da95
  • input.background#24273a
  • input.border#181926
  • input.foreground#cad3f5
  • input.placeholderForeground#494d64
  • inputOption.activeBorder#8aadf4
  • inputValidation.errorBackground#24273a
  • inputValidation.errorBorder#ed8796
  • inputValidation.errorForeground#ed8796
  • inputValidation.infoBackground#24273a
  • inputValidation.infoBorder#8aadf4
  • inputValidation.infoForeground#8aadf4
  • inputValidation.warningBackground#24273a
  • inputValidation.warningBorder#f5a97f
  • inputValidation.warningForeground#f5a97f
  • list.activeSelectionBackground#1e2030
  • list.activeSelectionForeground#cad3f5
  • list.dropBackground#1e2030
  • list.errorForeground#ed8796
  • list.focusBackground#363a4f75
  • list.highlightForeground#8bd5ca
  • list.hoverBackground#363a4f75
  • list.inactiveSelectionBackground#363a4f75
  • list.warningForeground#f5a97f
  • listFilterWidget.background#24273a
  • listFilterWidget.noMatchesOutline#ed8796
  • listFilterWidget.outline#1e2030
  • merge.currentHeaderBackground#a6da9590
  • merge.incomingHeaderBackground#8aadf490
  • notification.background#24273a
  • notification.buttonBackground#1e2030
  • notification.buttonForeground#cad3f5
  • notification.buttonHoverBackground#363a4f75
  • notification.errorBackground#ed8796
  • notification.errorForeground#24273a
  • notification.foreground#cad3f5
  • notification.infoBackground#8aadf4
  • notification.infoForeground#24273a
  • notification.warningBackground#f5a97f
  • notification.warningForeground#24273a
  • notificationCenter.border#1e2030
  • notificationCenterHeader.background#24273a
  • notificationCenterHeader.foreground#cad3f5
  • notificationLink.foreground#8bd5ca
  • notifications.background#24273a
  • notifications.border#1e2030
  • notifications.foreground#cad3f5
  • notificationsErrorIcon.foreground#ed8796
  • notificationsInfoIcon.foreground#8aadf4
  • notificationsWarningIcon.foreground#f5a97f
  • notificationToast.border#1e2030
  • panel.background#24273a
  • panel.border#8aadf4
  • panelInput.border#cad3f5
  • panelTitle.activeBorder#c6a0f6
  • panelTitle.activeForeground#cad3f5
  • panelTitle.inactiveForeground#494d64
  • peekView.border#1e2030
  • peekViewEditor.background#24273a
  • peekViewEditor.matchHighlightBackground#f4dbd680
  • peekViewResult.background#1e2030
  • peekViewResult.fileForeground#cad3f5
  • peekViewResult.lineForeground#cad3f5
  • peekViewResult.matchHighlightBackground#f4dbd680
  • peekViewResult.selectionBackground#1e2030
  • peekViewResult.selectionForeground#cad3f5
  • peekViewTitle.background#181926
  • peekViewTitleDescription.foreground#494d64
  • peekViewTitleLabel.foreground#cad3f5
  • pickerGroup.border#8aadf4
  • pickerGroup.foreground#8bd5ca
  • progressBar.background#c6a0f6
  • scrollbar.shadow#444444
  • selection.background#8aadf4
  • settings.checkboxBackground#1e2030
  • settings.checkboxBorder#181926
  • settings.checkboxForeground#cad3f5
  • settings.dropdownBackground#1e2030
  • settings.dropdownBorder#181926
  • settings.dropdownForeground#cad3f5
  • settings.headerForeground#cad3f5
  • settings.modifiedItemIndicator#f5a97f
  • settings.numberInputBackground#1e2030
  • settings.numberInputBorder#181926
  • settings.numberInputForeground#cad3f5
  • settings.textInputBackground#1e2030
  • settings.textInputBorder#181926
  • settings.textInputForeground#cad3f5
  • sideBar.background#1e2030
  • sideBarSectionHeader.background#24273a
  • sideBarSectionHeader.border#181926
  • sideBarTitle.foreground#cad3f5
  • statusBar.background#181926
  • statusBar.debuggingBackground#ed8796
  • statusBar.debuggingForeground#181926
  • statusBar.foreground#cad3f5
  • statusBar.noFolderBackground#181926
  • statusBar.noFolderForeground#cad3f5
  • statusBarItem.prominentBackground#ed8796
  • statusBarItem.prominentHoverBackground#f5a97f
  • statusBarItem.remoteBackground#8aadf4
  • statusBarItem.remoteForeground#24273a
  • tab.activeBackground#24273a
  • tab.activeBorderTop#c6a0f680
  • tab.activeForeground#cad3f5
  • tab.border#181926
  • tab.inactiveBackground#1e2030
  • tab.inactiveForeground#494d64
  • terminal.ansiBlack#1e2030
  • terminal.ansiBlue#8aadf4
  • terminal.ansiBrightBlack#363a4f
  • terminal.ansiBrightBlue#7dc4e4
  • terminal.ansiBrightCyan#91d7e3
  • terminal.ansiBrightGreen#a6da95
  • terminal.ansiBrightMagenta#f5bde6
  • terminal.ansiBrightRed#ee99a0
  • terminal.ansiBrightWhite#b7bdf8
  • terminal.ansiBrightYellow#f4dbd6
  • terminal.ansiCyan#8bd5ca
  • terminal.ansiGreen#a6da95
  • terminal.ansiMagenta#c6a0f6
  • terminal.ansiRed#ed8796
  • terminal.ansiWhite#f4dbd6
  • terminal.ansiYellow#f5a97f
  • terminal.background#24273a
  • terminal.border#cad3f5
  • terminal.foreground#cad3f5
  • terminal.selectionBackground#1e203050
  • textBlockQuote.background#1e2030
  • titleBar.activeBackground#1e2030
  • titleBar.activeForeground#cad3f5
  • titleBar.inactiveBackground#181926
  • titleBar.inactiveForeground#494d64
  • walkThrough.embeddedEditorBackground#1e2030
  • welcomePage.buttonBackground#1e2030
  • welcomePage.buttonHoverBackground#363a4f75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#8aadf4
source#cad3f5
meta.diff, meta.diff.header#494d64
markup.inserted#a6da95
markup.deleted#ed8796
markup.changed#f5a97f
invalid#ed8796underline italic
invalid.deprecated#cad3f5underline italic
entity.name.filename#f4dbd6
markup.error#ed8796
markup.underlineunderline
markup.bold#f5a97fbold
markup.heading#8aadf4bold
markup.italic#f4dbd6italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8bd5ca
markup.inline.raw, markup.raw.restructuredtext#a6da95
markup.underline.link, markup.underline.link.image#8bd5ca
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#c6a0f6
entity.name.directive.restructuredtext, markup.quote#f4dbd6italic
meta.separator.markdown#494d64
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#a6da95
punctuation.definition.constant.restructuredtext#8aadf4
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#8aadf4
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#cad3f5
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#f4dbd6
entity.name.type.class, entity.name.class#8bd5canormal
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#8aadf4italic
entity.other.inherited-class#8bd5caitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#494d64
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#c6a0f6
comment.block.documentation entity.name.type#8bd5caitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#8bd5ca
comment.block.documentation variable#f5a97fitalic
constant, variable.other.constant#8aadf4
constant.character.escape, constant.character.string.escape, constant.regexp#c6a0f6
entity.name.tag#c6a0f6
entity.other.attribute-name.parent-selector#c6a0f6
entity.other.attribute-name#a6da95italic
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#a6da95
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#f5a97fitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#a6da95italic
meta.decorator variable.other.object#a6da95
keyword, punctuation.definition.keyword#c6a0f6
keyword.control.new, keyword.operator.newbold
meta.selector#c6a0f6
support#8bd5caitalic
support.function.magic, support.variable, variable.other.predefined#8aadf4regular
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#c6a0f6
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#cad3f5
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#c6a0f6
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#8bd5ca
constant.other.date, constant.other.timestamp#f5a97f
variable.other.alias.yaml#a6da95italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#c6a0f6regular
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#8bd5caitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f5a97f
storage.modifier#c6a0f6
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#f4dbd6
punctuation.definition.group.capture.regexp#c6a0f6
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ed8796
punctuation.definition.character-class.regexp#8bd5ca
punctuation.definition.group.regexp#f5a97f
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ed8796
meta.assertion.look-ahead.regexp#a6da95
string#f4dbd6
punctuation.definition.string.begin, punctuation.definition.string.end#eed49f
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8aadf4
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#494d64
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#cad3f5
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#f5a97fitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#cad3f5normal
meta.selectionset.graphql variable#f4dbd6
meta.selectionset.graphql meta.arguments variable#cad3f5
entity.name.fragment.graphql, variable.fragment.graphql#8bd5ca
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#cad3f5
source.shell variable.other#8aadf4
support.constant#8aadf4normal
meta.scope.prerequisites.makefile#f4dbd6
meta.attribute-selector.scss#f4dbd6
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#cad3f5
meta.preprocessor.haskell#494d64
Tinted VSCode by Tinted Theming - VS Code Theme