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#8ff58610
  • activityBar.activeBorder#781aa080
  • activityBar.background#142838
  • activityBar.foreground#cc72a6
  • activityBar.inactiveForeground#eeca92
  • activityBarBadge.background#781aa0
  • activityBarBadge.foreground#142838
  • badge.background#142630
  • badge.foreground#cc72a6
  • breadcrumb.activeSelectionForeground#cc72a6
  • breadcrumb.background#142838
  • breadcrumb.focusForeground#cc72a6
  • breadcrumb.foreground#eeca92
  • breadcrumbPicker.background#55522d
  • button.background#aaa45a
  • button.foreground#cc72a6
  • checkbox.background#aaa45a
  • checkbox.border#55522d
  • checkbox.foreground#cc72a6
  • contrastBorder#55522d
  • debugToolBar.background#aaa45a
  • diffEditor.insertedTextBackground#3aa5ff20
  • diffEditor.removedTextBackground#ff232050
  • dropdown.background#142838
  • dropdown.border#55522d
  • dropdown.foreground#cc72a6
  • editor.background#142838
  • editor.findMatchBackground#e9e75c80
  • editor.findMatchHighlightBackground#8ff58640
  • editor.findRangeHighlightBackground#fff68875
  • editor.foldBackground#aaa45a
  • editor.foreground#cc72a6
  • editor.hoverHighlightBackground#55522d
  • editor.lineHighlightBorder#142630
  • editor.rangeHighlightBackground#8ff58615
  • editor.selectionBackground#142630
  • editor.selectionHighlightBackground#142630
  • editor.snippetFinalTabstopHighlightBackground#142838
  • editor.snippetFinalTabstopHighlightBorder#3aa5ff
  • editor.snippetTabstopHighlightBackground#142838
  • editor.snippetTabstopHighlightBorder#eeca92
  • editor.wordHighlightBackground#8ff58650
  • editor.wordHighlightStrongBackground#3aa5ff50
  • editorCodeLens.foreground#eeca92
  • editorError.foreground#ff2320
  • editorGroup.border#8ff586
  • editorGroup.dropBackground#fff68870
  • editorGroupHeader.tabsBackground#55522d
  • editorGutter.addedBackground#3aa5ff80
  • editorGutter.deletedBackground#ff232080
  • editorGutter.modifiedBackground#8ff58680
  • editorHoverWidget.background#142838
  • editorHoverWidget.border#eeca92
  • editorIndentGuide.activeBackground#8ff58645
  • editorIndentGuide.background#8ff5861A
  • editorLineNumber.foreground#eeca92
  • editorLink.activeForeground#8ff586
  • editorMarkerNavigation.background#aaa45a
  • editorOverviewRuler.addedForeground#3aa5ff80
  • editorOverviewRuler.border#55522d
  • editorOverviewRuler.currentContentForeground#3aa5ff
  • editorOverviewRuler.deletedForeground#ff232080
  • editorOverviewRuler.errorForeground#ff232080
  • editorOverviewRuler.incomingContentForeground#8ff586
  • editorOverviewRuler.infoForeground#8ff58680
  • editorOverviewRuler.modifiedForeground#8ff58680
  • editorOverviewRuler.selectionHighlightForeground#e9e75c
  • editorOverviewRuler.warningForeground#e9e75c80
  • editorOverviewRuler.wordHighlightForeground#8ff586
  • editorOverviewRuler.wordHighlightStrongForeground#3aa5ff
  • editorRuler.foreground#8ff5861A
  • editorSuggestWidget.background#aaa45a
  • editorSuggestWidget.foreground#cc72a6
  • editorSuggestWidget.selectedBackground#142630
  • editorWarning.foreground#e9e75c
  • editorWhitespace.foreground#8ff5861A
  • editorWidget.background#aaa45a
  • errorForeground#ff2320
  • extensionButton.prominentBackground#3aa5ff90
  • extensionButton.prominentForeground#cc72a6
  • extensionButton.prominentHoverBackground#3aa5ff60
  • focusBorder#eeca92
  • foreground#cc72a6
  • gitDecoration.conflictingResourceForeground#e9e75c
  • gitDecoration.deletedResourceForeground#ff2320
  • gitDecoration.ignoredResourceForeground#eeca92
  • gitDecoration.modifiedResourceForeground#8ff586
  • gitDecoration.untrackedResourceForeground#3aa5ff
  • input.background#142838
  • input.border#55522d
  • input.foreground#cc72a6
  • input.placeholderForeground#eeca92
  • inputOption.activeBorder#8ff586
  • inputValidation.errorBackground#142838
  • inputValidation.errorBorder#ff2320
  • inputValidation.errorForeground#ff2320
  • inputValidation.infoBackground#142838
  • inputValidation.infoBorder#8ff586
  • inputValidation.infoForeground#8ff586
  • inputValidation.warningBackground#142838
  • inputValidation.warningBorder#e9e75c
  • inputValidation.warningForeground#e9e75c
  • list.activeSelectionBackground#142630
  • list.activeSelectionForeground#cc72a6
  • list.dropBackground#142630
  • list.errorForeground#ff2320
  • list.focusBackground#fff68875
  • list.highlightForeground#8ff586
  • list.hoverBackground#fff68875
  • list.inactiveSelectionBackground#fff68875
  • list.warningForeground#e9e75c
  • listFilterWidget.background#142838
  • listFilterWidget.noMatchesOutline#ff2320
  • listFilterWidget.outline#142630
  • merge.currentHeaderBackground#3aa5ff90
  • merge.incomingHeaderBackground#8ff58690
  • notification.background#142838
  • notification.buttonBackground#142630
  • notification.buttonForeground#cc72a6
  • notification.buttonHoverBackground#fff68875
  • notification.errorBackground#ff2320
  • notification.errorForeground#142838
  • notification.foreground#cc72a6
  • notification.infoBackground#8ff586
  • notification.infoForeground#142838
  • notification.warningBackground#e9e75c
  • notification.warningForeground#142838
  • notificationCenter.border#aaa45a
  • notificationCenterHeader.background#142838
  • notificationCenterHeader.foreground#cc72a6
  • notificationLink.foreground#8ff586
  • notifications.background#142838
  • notifications.border#aaa45a
  • notifications.foreground#cc72a6
  • notificationsErrorIcon.foreground#ff2320
  • notificationsInfoIcon.foreground#8ff586
  • notificationsWarningIcon.foreground#e9e75c
  • notificationToast.border#aaa45a
  • panel.background#142838
  • panel.border#8ff586
  • panelInput.border#cc72a6
  • panelTitle.activeBorder#781aa0
  • panelTitle.activeForeground#cc72a6
  • panelTitle.inactiveForeground#eeca92
  • peekView.border#142630
  • peekViewEditor.background#142838
  • peekViewEditor.matchHighlightBackground#e9f06d80
  • peekViewResult.background#aaa45a
  • peekViewResult.fileForeground#cc72a6
  • peekViewResult.lineForeground#cc72a6
  • peekViewResult.matchHighlightBackground#e9f06d80
  • peekViewResult.selectionBackground#142630
  • peekViewResult.selectionForeground#cc72a6
  • peekViewTitle.background#55522d
  • peekViewTitleDescription.foreground#eeca92
  • peekViewTitleLabel.foreground#cc72a6
  • pickerGroup.border#8ff586
  • pickerGroup.foreground#8ff586
  • progressBar.background#781aa0
  • scrollbar.shadow#444444
  • selection.background#8ff586
  • settings.checkboxBackground#aaa45a
  • settings.checkboxBorder#55522d
  • settings.checkboxForeground#cc72a6
  • settings.dropdownBackground#aaa45a
  • settings.dropdownBorder#55522d
  • settings.dropdownForeground#cc72a6
  • settings.headerForeground#cc72a6
  • settings.modifiedItemIndicator#e9e75c
  • settings.numberInputBackground#aaa45a
  • settings.numberInputBorder#55522d
  • settings.numberInputForeground#cc72a6
  • settings.textInputBackground#aaa45a
  • settings.textInputBorder#55522d
  • settings.textInputForeground#cc72a6
  • sideBar.background#aaa45a
  • sideBarSectionHeader.background#142838
  • sideBarSectionHeader.border#55522d
  • sideBarTitle.foreground#cc72a6
  • statusBar.background#55522d
  • statusBar.debuggingBackground#ff2320
  • statusBar.debuggingForeground#55522d
  • statusBar.foreground#cc72a6
  • statusBar.noFolderBackground#55522d
  • statusBar.noFolderForeground#cc72a6
  • statusBarItem.prominentBackground#ff2320
  • statusBarItem.prominentHoverBackground#e9e75c
  • statusBarItem.remoteBackground#8ff586
  • statusBarItem.remoteForeground#142838
  • tab.activeBackground#142838
  • tab.activeBorderTop#781aa080
  • tab.activeForeground#cc72a6
  • tab.border#55522d
  • tab.inactiveBackground#aaa45a
  • tab.inactiveForeground#eeca92
  • terminal.ansiBlack#142630
  • terminal.ansiBlue#8ff586
  • terminal.ansiBrightBlack#fff688
  • terminal.ansiBrightBlue#3c7dd2
  • terminal.ansiBrightCyan#6cbc67
  • terminal.ansiBrightGreen#8ff586
  • terminal.ansiBrightMagenta#8230a7
  • terminal.ansiBrightRed#d4312e
  • terminal.ansiBrightWhite#8ff586
  • terminal.ansiBrightYellow#e9f06d
  • terminal.ansiCyan#8ff586
  • terminal.ansiGreen#3aa5ff
  • terminal.ansiMagenta#781aa0
  • terminal.ansiRed#ff2320
  • terminal.ansiWhite#ba45b1
  • terminal.ansiYellow#e9e75c
  • terminal.background#142838
  • terminal.border#cc72a6
  • terminal.foreground#cc72a6
  • terminal.selectionBackground#14263050
  • textBlockQuote.background#aaa45a
  • titleBar.activeBackground#aaa45a
  • titleBar.activeForeground#cc72a6
  • titleBar.inactiveBackground#55522d
  • titleBar.inactiveForeground#eeca92
  • walkThrough.embeddedEditorBackground#aaa45a
  • welcomePage.buttonBackground#142630
  • welcomePage.buttonHoverBackground#fff68875
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#8ff586
source#cc72a6
meta.diff, meta.diff.header#eeca92
markup.inserted#3aa5ff
markup.deleted#ff2320
markup.changed#e9e75c
invalid#ff2320underline italic
invalid.deprecated#cc72a6underline italic
entity.name.filename#e9f06d
markup.error#ff2320
markup.underlineunderline
markup.bold#e9e75cbold
markup.heading#8ff586bold
markup.italic#e9f06ditalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8ff586
markup.inline.raw, markup.raw.restructuredtext#3aa5ff
markup.underline.link, markup.underline.link.image#8ff586
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#781aa0
entity.name.directive.restructuredtext, markup.quote#e9f06ditalic
meta.separator.markdown#eeca92
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#3aa5ff
punctuation.definition.constant.restructuredtext#8ff586
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#8ff586
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#cc72a6
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#e9f06d
entity.name.type.class, entity.name.class#8ff586normal
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#8ff586italic
entity.other.inherited-class#8ff586italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#eeca92
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#781aa0
comment.block.documentation entity.name.type#8ff586italic
comment.block.documentation entity.name.type punctuation.definition.bracket#8ff586
comment.block.documentation variable#e9e75citalic
constant, variable.other.constant#8ff586
constant.character.escape, constant.character.string.escape, constant.regexp#781aa0
entity.name.tag#781aa0
entity.other.attribute-name.parent-selector#781aa0
entity.other.attribute-name#3aa5ffitalic
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#3aa5ff
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#e9e75citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#3aa5ffitalic
meta.decorator variable.other.object#3aa5ff
keyword, punctuation.definition.keyword#781aa0
keyword.control.new, keyword.operator.newbold
meta.selector#781aa0
support#8ff586italic
support.function.magic, support.variable, variable.other.predefined#8ff586regular
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#781aa0
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#cc72a6
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#781aa0
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#8ff586
constant.other.date, constant.other.timestamp#e9e75c
variable.other.alias.yaml#3aa5ffitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#781aa0regular
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#8ff586italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#e9e75c
storage.modifier#781aa0
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e9f06d
punctuation.definition.group.capture.regexp#781aa0
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff2320
punctuation.definition.character-class.regexp#8ff586
punctuation.definition.group.regexp#e9e75c
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff2320
meta.assertion.look-ahead.regexp#3aa5ff
string#e9f06d
punctuation.definition.string.begin, punctuation.definition.string.end#3c7dd2
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8ff586
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#eeca92
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#cc72a6
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#e9e75citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#cc72a6normal
meta.selectionset.graphql variable#e9f06d
meta.selectionset.graphql meta.arguments variable#cc72a6
entity.name.fragment.graphql, variable.fragment.graphql#8ff586
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#cc72a6
source.shell variable.other#8ff586
support.constant#8ff586normal
meta.scope.prerequisites.makefile#e9f06d
meta.attribute-selector.scss#e9f06d
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#cc72a6
meta.preprocessor.haskell#eeca92
Tinted VSCode by Tinted Theming - VS Code Theme