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#4c84bd10
  • activityBar.activeBorder#b765b080
  • activityBar.background#180d18
  • activityBar.foreground#ffe0a3
  • activityBar.inactiveForeground#a0747c
  • activityBarBadge.background#b765b0
  • activityBarBadge.foreground#180d18
  • badge.background#2a1424
  • badge.foreground#ffe0a3
  • breadcrumb.activeSelectionForeground#ffe0a3
  • breadcrumb.background#180d18
  • breadcrumb.focusForeground#ffe0a3
  • breadcrumb.foreground#a0747c
  • breadcrumbPicker.background#ff9f37
  • button.background#ff6e79
  • button.foreground#ffe0a3
  • checkbox.background#ff6e79
  • checkbox.border#ff9f37
  • checkbox.foreground#ffe0a3
  • contrastBorder#ff9f37
  • debugToolBar.background#ff6e79
  • diffEditor.insertedTextBackground#36aa7220
  • diffEditor.removedTextBackground#d9536150
  • dropdown.background#180d18
  • dropdown.border#ff9f37
  • dropdown.foreground#ffe0a3
  • editor.background#180d18
  • editor.findMatchBackground#d9832880
  • editor.findMatchHighlightBackground#fff7e640
  • editor.findRangeHighlightBackground#43203175
  • editor.foldBackground#ff6e79
  • editor.foreground#ffe0a3
  • editor.hoverHighlightBackground#ff9f37
  • editor.lineHighlightBorder#2a1424
  • editor.rangeHighlightBackground#4c84bd15
  • editor.selectionBackground#2a1424
  • editor.selectionHighlightBackground#2a1424
  • editor.snippetFinalTabstopHighlightBackground#180d18
  • editor.snippetFinalTabstopHighlightBorder#36aa72
  • editor.snippetTabstopHighlightBackground#180d18
  • editor.snippetTabstopHighlightBorder#a0747c
  • editor.wordHighlightBackground#31a99e50
  • editor.wordHighlightStrongBackground#36aa7250
  • editorCodeLens.foreground#a0747c
  • editorError.foreground#d95361
  • editorGroup.border#4c84bd
  • editorGroup.dropBackground#43203170
  • editorGroupHeader.tabsBackground#ff9f37
  • editorGutter.addedBackground#36aa7280
  • editorGutter.deletedBackground#d9536180
  • editorGutter.modifiedBackground#31a99e80
  • editorHoverWidget.background#180d18
  • editorHoverWidget.border#a0747c
  • editorIndentGuide.activeBackground#fff7e645
  • editorIndentGuide.background#fff7e61A
  • editorLineNumber.foreground#a0747c
  • editorLink.activeForeground#31a99e
  • editorMarkerNavigation.background#ff6e79
  • editorOverviewRuler.addedForeground#36aa7280
  • editorOverviewRuler.border#ff9f37
  • editorOverviewRuler.currentContentForeground#36aa72
  • editorOverviewRuler.deletedForeground#d9536180
  • editorOverviewRuler.errorForeground#d9536180
  • editorOverviewRuler.incomingContentForeground#4c84bd
  • editorOverviewRuler.infoForeground#31a99e80
  • editorOverviewRuler.modifiedForeground#31a99e80
  • editorOverviewRuler.selectionHighlightForeground#d98328
  • editorOverviewRuler.warningForeground#d9832880
  • editorOverviewRuler.wordHighlightForeground#31a99e
  • editorOverviewRuler.wordHighlightStrongForeground#36aa72
  • editorRuler.foreground#fff7e61A
  • editorSuggestWidget.background#ff6e79
  • editorSuggestWidget.foreground#ffe0a3
  • editorSuggestWidget.selectedBackground#2a1424
  • editorWarning.foreground#d98328
  • editorWhitespace.foreground#fff7e61A
  • editorWidget.background#ff6e79
  • errorForeground#d95361
  • extensionButton.prominentBackground#36aa7290
  • extensionButton.prominentForeground#ffe0a3
  • extensionButton.prominentHoverBackground#36aa7260
  • focusBorder#a0747c
  • foreground#ffe0a3
  • gitDecoration.conflictingResourceForeground#d98328
  • gitDecoration.deletedResourceForeground#d95361
  • gitDecoration.ignoredResourceForeground#a0747c
  • gitDecoration.modifiedResourceForeground#31a99e
  • gitDecoration.untrackedResourceForeground#36aa72
  • input.background#180d18
  • input.border#ff9f37
  • input.foreground#ffe0a3
  • input.placeholderForeground#a0747c
  • inputOption.activeBorder#4c84bd
  • inputValidation.errorBackground#180d18
  • inputValidation.errorBorder#d95361
  • inputValidation.errorForeground#d95361
  • inputValidation.infoBackground#180d18
  • inputValidation.infoBorder#4c84bd
  • inputValidation.infoForeground#4c84bd
  • inputValidation.warningBackground#180d18
  • inputValidation.warningBorder#d98328
  • inputValidation.warningForeground#d98328
  • list.activeSelectionBackground#2a1424
  • list.activeSelectionForeground#ffe0a3
  • list.dropBackground#2a1424
  • list.errorForeground#d95361
  • list.focusBackground#43203175
  • list.highlightForeground#31a99e
  • list.hoverBackground#43203175
  • list.inactiveSelectionBackground#43203175
  • list.warningForeground#d98328
  • listFilterWidget.background#180d18
  • listFilterWidget.noMatchesOutline#d95361
  • listFilterWidget.outline#2a1424
  • merge.currentHeaderBackground#36aa7290
  • merge.incomingHeaderBackground#4c84bd90
  • notification.background#180d18
  • notification.buttonBackground#2a1424
  • notification.buttonForeground#ffe0a3
  • notification.buttonHoverBackground#43203175
  • notification.errorBackground#d95361
  • notification.errorForeground#180d18
  • notification.foreground#ffe0a3
  • notification.infoBackground#4c84bd
  • notification.infoForeground#180d18
  • notification.warningBackground#d98328
  • notification.warningForeground#180d18
  • notificationCenter.border#ff6e79
  • notificationCenterHeader.background#180d18
  • notificationCenterHeader.foreground#ffe0a3
  • notificationLink.foreground#31a99e
  • notifications.background#180d18
  • notifications.border#ff6e79
  • notifications.foreground#ffe0a3
  • notificationsErrorIcon.foreground#d95361
  • notificationsInfoIcon.foreground#4c84bd
  • notificationsWarningIcon.foreground#d98328
  • notificationToast.border#ff6e79
  • panel.background#180d18
  • panel.border#4c84bd
  • panelInput.border#ffe0a3
  • panelTitle.activeBorder#b765b0
  • panelTitle.activeForeground#ffe0a3
  • panelTitle.inactiveForeground#a0747c
  • peekView.border#2a1424
  • peekViewEditor.background#180d18
  • peekViewEditor.matchHighlightBackground#43d98d80
  • peekViewResult.background#ff6e79
  • peekViewResult.fileForeground#ffe0a3
  • peekViewResult.lineForeground#ffe0a3
  • peekViewResult.matchHighlightBackground#43d98d80
  • peekViewResult.selectionBackground#2a1424
  • peekViewResult.selectionForeground#ffe0a3
  • peekViewTitle.background#ff9f37
  • peekViewTitleDescription.foreground#a0747c
  • peekViewTitleLabel.foreground#ffe0a3
  • pickerGroup.border#4c84bd
  • pickerGroup.foreground#31a99e
  • progressBar.background#b765b0
  • scrollbar.shadow#444444
  • selection.background#4c84bd
  • settings.checkboxBackground#ff6e79
  • settings.checkboxBorder#ff9f37
  • settings.checkboxForeground#ffe0a3
  • settings.dropdownBackground#ff6e79
  • settings.dropdownBorder#ff9f37
  • settings.dropdownForeground#ffe0a3
  • settings.headerForeground#ffe0a3
  • settings.modifiedItemIndicator#d98328
  • settings.numberInputBackground#ff6e79
  • settings.numberInputBorder#ff9f37
  • settings.numberInputForeground#ffe0a3
  • settings.textInputBackground#ff6e79
  • settings.textInputBorder#ff9f37
  • settings.textInputForeground#ffe0a3
  • sideBar.background#ff6e79
  • sideBarSectionHeader.background#180d18
  • sideBarSectionHeader.border#ff9f37
  • sideBarTitle.foreground#ffe0a3
  • statusBar.background#ff9f37
  • statusBar.debuggingBackground#d95361
  • statusBar.debuggingForeground#ff9f37
  • statusBar.foreground#ffe0a3
  • statusBar.noFolderBackground#ff9f37
  • statusBar.noFolderForeground#ffe0a3
  • statusBarItem.prominentBackground#d95361
  • statusBarItem.prominentHoverBackground#d98328
  • statusBarItem.remoteBackground#4c84bd
  • statusBarItem.remoteForeground#180d18
  • tab.activeBackground#180d18
  • tab.activeBorderTop#b765b080
  • tab.activeForeground#ffe0a3
  • tab.border#ff9f37
  • tab.inactiveBackground#ff6e79
  • tab.inactiveForeground#a0747c
  • terminal.ansiBlack#2a1424
  • terminal.ansiBlue#4c84bd
  • terminal.ansiBrightBlack#432031
  • terminal.ansiBrightBlue#e581dc
  • terminal.ansiBrightCyan#64abf4
  • terminal.ansiBrightGreen#3ed2c3
  • terminal.ansiBrightMagenta#ed7d51
  • terminal.ansiBrightRed#ffd052
  • terminal.ansiBrightWhite#fff7e6
  • terminal.ansiBrightYellow#43d98d
  • terminal.ansiCyan#31a99e
  • terminal.ansiGreen#36aa72
  • terminal.ansiMagenta#b765b0
  • terminal.ansiRed#d95361
  • terminal.ansiWhite#ffebc5
  • terminal.ansiYellow#d98328
  • terminal.background#180d18
  • terminal.border#ffe0a3
  • terminal.foreground#ffe0a3
  • terminal.selectionBackground#2a142450
  • textBlockQuote.background#ff6e79
  • titleBar.activeBackground#ff6e79
  • titleBar.activeForeground#ffe0a3
  • titleBar.inactiveBackground#ff9f37
  • titleBar.inactiveForeground#a0747c
  • walkThrough.embeddedEditorBackground#ff6e79
  • welcomePage.buttonBackground#2a1424
  • welcomePage.buttonHoverBackground#43203175
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#4c84bd
source#ffe0a3
meta.diff, meta.diff.header#a0747c
markup.inserted#36aa72
markup.deleted#d95361
markup.changed#d98328
invalid#d95361underline italic
invalid.deprecated#ffe0a3underline italic
entity.name.filename#43d98d
markup.error#d95361
markup.underlineunderline
markup.bold#d98328bold
markup.heading#4c84bdbold
markup.italic#43d98ditalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#31a99e
markup.inline.raw, markup.raw.restructuredtext#36aa72
markup.underline.link, markup.underline.link.image#31a99e
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#b765b0
entity.name.directive.restructuredtext, markup.quote#43d98ditalic
meta.separator.markdown#a0747c
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#36aa72
punctuation.definition.constant.restructuredtext#4c84bd
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#4c84bd
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#ffe0a3
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#43d98d
entity.name.type.class, entity.name.class#31a99enormal
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#4c84bditalic
entity.other.inherited-class#31a99eitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#a0747c
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#b765b0
comment.block.documentation entity.name.type#31a99eitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#31a99e
comment.block.documentation variable#d98328italic
constant, variable.other.constant#4c84bd
constant.character.escape, constant.character.string.escape, constant.regexp#b765b0
entity.name.tag#b765b0
entity.other.attribute-name.parent-selector#b765b0
entity.other.attribute-name#36aa72italic
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#36aa72
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#d98328italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#36aa72italic
meta.decorator variable.other.object#36aa72
keyword, punctuation.definition.keyword#b765b0
keyword.control.new, keyword.operator.newbold
meta.selector#b765b0
support#31a99eitalic
support.function.magic, support.variable, variable.other.predefined#4c84bdregular
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#b765b0
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#ffe0a3
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#b765b0
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#31a99e
constant.other.date, constant.other.timestamp#d98328
variable.other.alias.yaml#36aa72italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#b765b0regular
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#31a99eitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#d98328
storage.modifier#b765b0
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#43d98d
punctuation.definition.group.capture.regexp#b765b0
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#d95361
punctuation.definition.character-class.regexp#31a99e
punctuation.definition.group.regexp#d98328
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#d95361
meta.assertion.look-ahead.regexp#36aa72
string#43d98d
punctuation.definition.string.begin, punctuation.definition.string.end#d8a93a
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#4c84bd
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#a0747c
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#ffe0a3
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#d98328italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#ffe0a3normal
meta.selectionset.graphql variable#43d98d
meta.selectionset.graphql meta.arguments variable#ffe0a3
entity.name.fragment.graphql, variable.fragment.graphql#31a99e
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#ffe0a3
source.shell variable.other#4c84bd
support.constant#4c84bdnormal
meta.scope.prerequisites.makefile#43d98d
meta.attribute-selector.scss#43d98d
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#ffe0a3
meta.preprocessor.haskell#a0747c
Tinted VSCode by Tinted Theming - VS Code Theme