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#568ccf10
  • activityBar.activeBorder#8b66d680
  • activityBar.background#001c1f
  • activityBar.foreground#d4e1e8
  • activityBar.inactiveForeground#004852
  • activityBarBadge.background#8b66d6
  • activityBarBadge.foreground#001c1f
  • badge.background#002931
  • badge.foreground#d4e1e8
  • breadcrumb.activeSelectionForeground#d4e1e8
  • breadcrumb.background#001c1f
  • breadcrumb.focusForeground#d4e1e8
  • breadcrumb.foreground#004852
  • breadcrumbPicker.background#2a2f30
  • button.background#1f2628
  • button.foreground#d4e1e8
  • checkbox.background#1f2628
  • checkbox.border#2a2f30
  • checkbox.foreground#d4e1e8
  • contrastBorder#2a2f30
  • debugToolBar.background#1f2628
  • diffEditor.insertedTextBackground#63b78420
  • diffEditor.removedTextBackground#d3464d50
  • dropdown.background#001c1f
  • dropdown.border#2a2f30
  • dropdown.foreground#d4e1e8
  • editor.background#001c1f
  • editor.findMatchBackground#e3755280
  • editor.findMatchHighlightBackground#f2f7f940
  • editor.findRangeHighlightBackground#00364075
  • editor.foldBackground#1f2628
  • editor.foreground#d4e1e8
  • editor.hoverHighlightBackground#2a2f30
  • editor.lineHighlightBorder#002931
  • editor.rangeHighlightBackground#568ccf15
  • editor.selectionBackground#002931
  • editor.selectionHighlightBackground#002931
  • editor.snippetFinalTabstopHighlightBackground#001c1f
  • editor.snippetFinalTabstopHighlightBorder#63b784
  • editor.snippetTabstopHighlightBackground#001c1f
  • editor.snippetTabstopHighlightBorder#004852
  • editor.wordHighlightBackground#4fb7ae50
  • editor.wordHighlightStrongBackground#63b78450
  • editorCodeLens.foreground#004852
  • editorError.foreground#d3464d
  • editorGroup.border#568ccf
  • editorGroup.dropBackground#00364070
  • editorGroupHeader.tabsBackground#2a2f30
  • editorGutter.addedBackground#63b78480
  • editorGutter.deletedBackground#d3464d80
  • editorGutter.modifiedBackground#4fb7ae80
  • editorHoverWidget.background#001c1f
  • editorHoverWidget.border#004852
  • editorIndentGuide.activeBackground#f2f7f945
  • editorIndentGuide.background#f2f7f91A
  • editorLineNumber.foreground#004852
  • editorLink.activeForeground#4fb7ae
  • editorMarkerNavigation.background#1f2628
  • editorOverviewRuler.addedForeground#63b78480
  • editorOverviewRuler.border#2a2f30
  • editorOverviewRuler.currentContentForeground#63b784
  • editorOverviewRuler.deletedForeground#d3464d80
  • editorOverviewRuler.errorForeground#d3464d80
  • editorOverviewRuler.incomingContentForeground#568ccf
  • editorOverviewRuler.infoForeground#4fb7ae80
  • editorOverviewRuler.modifiedForeground#4fb7ae80
  • editorOverviewRuler.selectionHighlightForeground#e37552
  • editorOverviewRuler.warningForeground#e3755280
  • editorOverviewRuler.wordHighlightForeground#4fb7ae
  • editorOverviewRuler.wordHighlightStrongForeground#63b784
  • editorRuler.foreground#f2f7f91A
  • editorSuggestWidget.background#1f2628
  • editorSuggestWidget.foreground#d4e1e8
  • editorSuggestWidget.selectedBackground#002931
  • editorWarning.foreground#e37552
  • editorWhitespace.foreground#f2f7f91A
  • editorWidget.background#1f2628
  • errorForeground#d3464d
  • extensionButton.prominentBackground#63b78490
  • extensionButton.prominentForeground#d4e1e8
  • extensionButton.prominentHoverBackground#63b78460
  • focusBorder#004852
  • foreground#d4e1e8
  • gitDecoration.conflictingResourceForeground#e37552
  • gitDecoration.deletedResourceForeground#d3464d
  • gitDecoration.ignoredResourceForeground#004852
  • gitDecoration.modifiedResourceForeground#4fb7ae
  • gitDecoration.untrackedResourceForeground#63b784
  • input.background#001c1f
  • input.border#2a2f30
  • input.foreground#d4e1e8
  • input.placeholderForeground#004852
  • inputOption.activeBorder#568ccf
  • inputValidation.errorBackground#001c1f
  • inputValidation.errorBorder#d3464d
  • inputValidation.errorForeground#d3464d
  • inputValidation.infoBackground#001c1f
  • inputValidation.infoBorder#568ccf
  • inputValidation.infoForeground#568ccf
  • inputValidation.warningBackground#001c1f
  • inputValidation.warningBorder#e37552
  • inputValidation.warningForeground#e37552
  • list.activeSelectionBackground#002931
  • list.activeSelectionForeground#d4e1e8
  • list.dropBackground#002931
  • list.errorForeground#d3464d
  • list.focusBackground#00364075
  • list.highlightForeground#4fb7ae
  • list.hoverBackground#00364075
  • list.inactiveSelectionBackground#00364075
  • list.warningForeground#e37552
  • listFilterWidget.background#001c1f
  • listFilterWidget.noMatchesOutline#d3464d
  • listFilterWidget.outline#002931
  • merge.currentHeaderBackground#63b78490
  • merge.incomingHeaderBackground#568ccf90
  • notification.background#001c1f
  • notification.buttonBackground#002931
  • notification.buttonForeground#d4e1e8
  • notification.buttonHoverBackground#00364075
  • notification.errorBackground#d3464d
  • notification.errorForeground#001c1f
  • notification.foreground#d4e1e8
  • notification.infoBackground#568ccf
  • notification.infoForeground#001c1f
  • notification.warningBackground#e37552
  • notification.warningForeground#001c1f
  • notificationCenter.border#1f2628
  • notificationCenterHeader.background#001c1f
  • notificationCenterHeader.foreground#d4e1e8
  • notificationLink.foreground#4fb7ae
  • notifications.background#001c1f
  • notifications.border#1f2628
  • notifications.foreground#d4e1e8
  • notificationsErrorIcon.foreground#d3464d
  • notificationsInfoIcon.foreground#568ccf
  • notificationsWarningIcon.foreground#e37552
  • notificationToast.border#1f2628
  • panel.background#001c1f
  • panel.border#568ccf
  • panelInput.border#d4e1e8
  • panelTitle.activeBorder#8b66d6
  • panelTitle.activeForeground#d4e1e8
  • panelTitle.inactiveForeground#004852
  • peekView.border#002931
  • peekViewEditor.background#001c1f
  • peekViewEditor.matchHighlightBackground#ffe08a80
  • peekViewResult.background#1f2628
  • peekViewResult.fileForeground#d4e1e8
  • peekViewResult.lineForeground#d4e1e8
  • peekViewResult.matchHighlightBackground#ffe08a80
  • peekViewResult.selectionBackground#002931
  • peekViewResult.selectionForeground#d4e1e8
  • peekViewTitle.background#2a2f30
  • peekViewTitleDescription.foreground#004852
  • peekViewTitleLabel.foreground#d4e1e8
  • pickerGroup.border#568ccf
  • pickerGroup.foreground#4fb7ae
  • progressBar.background#8b66d6
  • scrollbar.shadow#444444
  • selection.background#568ccf
  • settings.checkboxBackground#1f2628
  • settings.checkboxBorder#2a2f30
  • settings.checkboxForeground#d4e1e8
  • settings.dropdownBackground#1f2628
  • settings.dropdownBorder#2a2f30
  • settings.dropdownForeground#d4e1e8
  • settings.headerForeground#d4e1e8
  • settings.modifiedItemIndicator#e37552
  • settings.numberInputBackground#1f2628
  • settings.numberInputBorder#2a2f30
  • settings.numberInputForeground#d4e1e8
  • settings.textInputBackground#1f2628
  • settings.textInputBorder#2a2f30
  • settings.textInputForeground#d4e1e8
  • sideBar.background#1f2628
  • sideBarSectionHeader.background#001c1f
  • sideBarSectionHeader.border#2a2f30
  • sideBarTitle.foreground#d4e1e8
  • statusBar.background#2a2f30
  • statusBar.debuggingBackground#d3464d
  • statusBar.debuggingForeground#2a2f30
  • statusBar.foreground#d4e1e8
  • statusBar.noFolderBackground#2a2f30
  • statusBar.noFolderForeground#d4e1e8
  • statusBarItem.prominentBackground#d3464d
  • statusBarItem.prominentHoverBackground#e37552
  • statusBarItem.remoteBackground#568ccf
  • statusBarItem.remoteForeground#001c1f
  • tab.activeBackground#001c1f
  • tab.activeBorderTop#8b66d680
  • tab.activeForeground#d4e1e8
  • tab.border#2a2f30
  • tab.inactiveBackground#1f2628
  • tab.inactiveForeground#004852
  • terminal.ansiBlack#002931
  • terminal.ansiBlue#568ccf
  • terminal.ansiBrightBlack#003640
  • terminal.ansiBrightBlue#5caeff
  • terminal.ansiBrightCyan#4de3e3
  • terminal.ansiBrightGreen#72e1a6
  • terminal.ansiBrightMagenta#b788ff
  • terminal.ansiBrightRed#ff6670
  • terminal.ansiBrightWhite#f2f7f9
  • terminal.ansiBrightYellow#ffe08a
  • terminal.ansiCyan#4fb7ae
  • terminal.ansiGreen#63b784
  • terminal.ansiMagenta#8b66d6
  • terminal.ansiRed#d3464d
  • terminal.ansiWhite#e0e9ef
  • terminal.ansiYellow#e37552
  • terminal.background#001c1f
  • terminal.border#d4e1e8
  • terminal.foreground#d4e1e8
  • terminal.selectionBackground#00293150
  • textBlockQuote.background#1f2628
  • titleBar.activeBackground#1f2628
  • titleBar.activeForeground#d4e1e8
  • titleBar.inactiveBackground#2a2f30
  • titleBar.inactiveForeground#004852
  • walkThrough.embeddedEditorBackground#1f2628
  • welcomePage.buttonBackground#002931
  • welcomePage.buttonHoverBackground#00364075
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#568ccf
source#d4e1e8
meta.diff, meta.diff.header#004852
markup.inserted#63b784
markup.deleted#d3464d
markup.changed#e37552
invalid#d3464dunderline italic
invalid.deprecated#d4e1e8underline italic
entity.name.filename#ffe08a
markup.error#d3464d
markup.underlineunderline
markup.bold#e37552bold
markup.heading#568ccfbold
markup.italic#ffe08aitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#4fb7ae
markup.inline.raw, markup.raw.restructuredtext#63b784
markup.underline.link, markup.underline.link.image#4fb7ae
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#8b66d6
entity.name.directive.restructuredtext, markup.quote#ffe08aitalic
meta.separator.markdown#004852
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#63b784
punctuation.definition.constant.restructuredtext#568ccf
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#568ccf
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#d4e1e8
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffe08a
entity.name.type.class, entity.name.class#4fb7aenormal
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#568ccfitalic
entity.other.inherited-class#4fb7aeitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#004852
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#8b66d6
comment.block.documentation entity.name.type#4fb7aeitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#4fb7ae
comment.block.documentation variable#e37552italic
constant, variable.other.constant#568ccf
constant.character.escape, constant.character.string.escape, constant.regexp#8b66d6
entity.name.tag#8b66d6
entity.other.attribute-name.parent-selector#8b66d6
entity.other.attribute-name#63b784italic
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#63b784
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#e37552italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#63b784italic
meta.decorator variable.other.object#63b784
keyword, punctuation.definition.keyword#8b66d6
keyword.control.new, keyword.operator.newbold
meta.selector#8b66d6
support#4fb7aeitalic
support.function.magic, support.variable, variable.other.predefined#568ccfregular
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#8b66d6
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#d4e1e8
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#8b66d6
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#4fb7ae
constant.other.date, constant.other.timestamp#e37552
variable.other.alias.yaml#63b784italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#8b66d6regular
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#4fb7aeitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#e37552
storage.modifier#8b66d6
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffe08a
punctuation.definition.group.capture.regexp#8b66d6
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#d3464d
punctuation.definition.character-class.regexp#4fb7ae
punctuation.definition.group.regexp#e37552
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#d3464d
meta.assertion.look-ahead.regexp#63b784
string#ffe08a
punctuation.definition.string.begin, punctuation.definition.string.end#f3b863
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#568ccf
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#004852
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#d4e1e8
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#e37552italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#d4e1e8normal
meta.selectionset.graphql variable#ffe08a
meta.selectionset.graphql meta.arguments variable#d4e1e8
entity.name.fragment.graphql, variable.fragment.graphql#4fb7ae
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#d4e1e8
source.shell variable.other#568ccf
support.constant#568ccfnormal
meta.scope.prerequisites.makefile#ffe08a
meta.attribute-selector.scss#ffe08a
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#d4e1e8
meta.preprocessor.haskell#004852
Tinted VSCode by Tinted Theming - VS Code Theme