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#606baf10
  • activityBar.activeBorder#8b599080
  • activityBar.background#1d1808
  • activityBar.foreground#aea578
  • activityBar.inactiveForeground#786d38
  • activityBarBadge.background#8b5990
  • activityBarBadge.foreground#1d1808
  • badge.background#000000
  • badge.foreground#aea578
  • breadcrumb.activeSelectionForeground#aea578
  • breadcrumb.background#1d1808
  • breadcrumb.focusForeground#aea578
  • breadcrumb.foreground#786d38
  • breadcrumbPicker.background#1f1b08
  • button.background#3e3610
  • button.foreground#aea578
  • checkbox.background#3e3610
  • checkbox.border#1f1b08
  • checkbox.foreground#aea578
  • contrastBorder#1f1b08
  • debugToolBar.background#3e3610
  • diffEditor.insertedTextBackground#7c8a1620
  • diffEditor.removedTextBackground#b54c0050
  • dropdown.background#1d1808
  • dropdown.border#1f1b08
  • dropdown.foreground#aea578
  • editor.background#1d1808
  • editor.findMatchBackground#d2bd2580
  • editor.findMatchHighlightBackground#fed59740
  • editor.findRangeHighlightBackground#5e511875
  • editor.foldBackground#3e3610
  • editor.foreground#aea578
  • editor.hoverHighlightBackground#1f1b08
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#606baf15
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#1d1808
  • editor.snippetFinalTabstopHighlightBorder#7c8a16
  • editor.snippetTabstopHighlightBackground#1d1808
  • editor.snippetTabstopHighlightBorder#786d38
  • editor.wordHighlightBackground#906b2550
  • editor.wordHighlightStrongBackground#7c8a1650
  • editorCodeLens.foreground#786d38
  • editorError.foreground#b54c00
  • editorGroup.border#606baf
  • editorGroup.dropBackground#5e511870
  • editorGroupHeader.tabsBackground#1f1b08
  • editorGutter.addedBackground#7c8a1680
  • editorGutter.deletedBackground#b54c0080
  • editorGutter.modifiedBackground#906b2580
  • editorHoverWidget.background#1d1808
  • editorHoverWidget.border#786d38
  • editorIndentGuide.activeBackground#fed59745
  • editorIndentGuide.background#fed5971A
  • editorLineNumber.foreground#786d38
  • editorLink.activeForeground#906b25
  • editorMarkerNavigation.background#3e3610
  • editorOverviewRuler.addedForeground#7c8a1680
  • editorOverviewRuler.border#1f1b08
  • editorOverviewRuler.currentContentForeground#7c8a16
  • editorOverviewRuler.deletedForeground#b54c0080
  • editorOverviewRuler.errorForeground#b54c0080
  • editorOverviewRuler.incomingContentForeground#606baf
  • editorOverviewRuler.infoForeground#906b2580
  • editorOverviewRuler.modifiedForeground#906b2580
  • editorOverviewRuler.selectionHighlightForeground#d2bd25
  • editorOverviewRuler.warningForeground#d2bd2580
  • editorOverviewRuler.wordHighlightForeground#906b25
  • editorOverviewRuler.wordHighlightStrongForeground#7c8a16
  • editorRuler.foreground#fed5971A
  • editorSuggestWidget.background#3e3610
  • editorSuggestWidget.foreground#aea578
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#d2bd25
  • editorWhitespace.foreground#fed5971A
  • editorWidget.background#3e3610
  • errorForeground#b54c00
  • extensionButton.prominentBackground#7c8a1690
  • extensionButton.prominentForeground#aea578
  • extensionButton.prominentHoverBackground#7c8a1660
  • focusBorder#786d38
  • foreground#aea578
  • gitDecoration.conflictingResourceForeground#d2bd25
  • gitDecoration.deletedResourceForeground#b54c00
  • gitDecoration.ignoredResourceForeground#786d38
  • gitDecoration.modifiedResourceForeground#906b25
  • gitDecoration.untrackedResourceForeground#7c8a16
  • input.background#1d1808
  • input.border#1f1b08
  • input.foreground#aea578
  • input.placeholderForeground#786d38
  • inputOption.activeBorder#606baf
  • inputValidation.errorBackground#1d1808
  • inputValidation.errorBorder#b54c00
  • inputValidation.errorForeground#b54c00
  • inputValidation.infoBackground#1d1808
  • inputValidation.infoBorder#606baf
  • inputValidation.infoForeground#606baf
  • inputValidation.warningBackground#1d1808
  • inputValidation.warningBorder#d2bd25
  • inputValidation.warningForeground#d2bd25
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#aea578
  • list.dropBackground#000000
  • list.errorForeground#b54c00
  • list.focusBackground#5e511875
  • list.highlightForeground#906b25
  • list.hoverBackground#5e511875
  • list.inactiveSelectionBackground#5e511875
  • list.warningForeground#d2bd25
  • listFilterWidget.background#1d1808
  • listFilterWidget.noMatchesOutline#b54c00
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#7c8a1690
  • merge.incomingHeaderBackground#606baf90
  • notification.background#1d1808
  • notification.buttonBackground#000000
  • notification.buttonForeground#aea578
  • notification.buttonHoverBackground#5e511875
  • notification.errorBackground#b54c00
  • notification.errorForeground#1d1808
  • notification.foreground#aea578
  • notification.infoBackground#606baf
  • notification.infoForeground#1d1808
  • notification.warningBackground#d2bd25
  • notification.warningForeground#1d1808
  • notificationCenter.border#3e3610
  • notificationCenterHeader.background#1d1808
  • notificationCenterHeader.foreground#aea578
  • notificationLink.foreground#906b25
  • notifications.background#1d1808
  • notifications.border#3e3610
  • notifications.foreground#aea578
  • notificationsErrorIcon.foreground#b54c00
  • notificationsInfoIcon.foreground#606baf
  • notificationsWarningIcon.foreground#d2bd25
  • notificationToast.border#3e3610
  • panel.background#1d1808
  • panel.border#606baf
  • panelInput.border#aea578
  • panelTitle.activeBorder#8b5990
  • panelTitle.activeForeground#aea578
  • panelTitle.inactiveForeground#786d38
  • peekView.border#000000
  • peekViewEditor.background#1d1808
  • peekViewEditor.matchHighlightBackground#ffe44980
  • peekViewResult.background#3e3610
  • peekViewResult.fileForeground#aea578
  • peekViewResult.lineForeground#aea578
  • peekViewResult.matchHighlightBackground#ffe44980
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#aea578
  • peekViewTitle.background#1f1b08
  • peekViewTitleDescription.foreground#786d38
  • peekViewTitleLabel.foreground#aea578
  • pickerGroup.border#606baf
  • pickerGroup.foreground#906b25
  • progressBar.background#8b5990
  • scrollbar.shadow#444444
  • selection.background#606baf
  • settings.checkboxBackground#3e3610
  • settings.checkboxBorder#1f1b08
  • settings.checkboxForeground#aea578
  • settings.dropdownBackground#3e3610
  • settings.dropdownBorder#1f1b08
  • settings.dropdownForeground#aea578
  • settings.headerForeground#aea578
  • settings.modifiedItemIndicator#d2bd25
  • settings.numberInputBackground#3e3610
  • settings.numberInputBorder#1f1b08
  • settings.numberInputForeground#aea578
  • settings.textInputBackground#3e3610
  • settings.textInputBorder#1f1b08
  • settings.textInputForeground#aea578
  • sideBar.background#3e3610
  • sideBarSectionHeader.background#1d1808
  • sideBarSectionHeader.border#1f1b08
  • sideBarTitle.foreground#aea578
  • statusBar.background#1f1b08
  • statusBar.debuggingBackground#b54c00
  • statusBar.debuggingForeground#1f1b08
  • statusBar.foreground#aea578
  • statusBar.noFolderBackground#1f1b08
  • statusBar.noFolderForeground#aea578
  • statusBarItem.prominentBackground#b54c00
  • statusBarItem.prominentHoverBackground#d2bd25
  • statusBarItem.remoteBackground#606baf
  • statusBarItem.remoteForeground#1d1808
  • tab.activeBackground#1d1808
  • tab.activeBorderTop#8b599080
  • tab.activeForeground#aea578
  • tab.border#1f1b08
  • tab.inactiveBackground#3e3610
  • tab.inactiveForeground#786d38
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#606baf
  • terminal.ansiBrightBlack#5e5118
  • terminal.ansiBrightBlue#abb8ff
  • terminal.ansiBrightCyan#ffbb51
  • terminal.ansiBrightGreen#b1c93a
  • terminal.ansiBrightMagenta#fe9fff
  • terminal.ansiBrightRed#ff9148
  • terminal.ansiBrightWhite#fed597
  • terminal.ansiBrightYellow#ffe449
  • terminal.ansiCyan#906b25
  • terminal.ansiGreen#7c8a16
  • terminal.ansiMagenta#8b5990
  • terminal.ansiRed#b54c00
  • terminal.ansiWhite#c9c199
  • terminal.ansiYellow#d2bd25
  • terminal.background#1d1808
  • terminal.border#aea578
  • terminal.foreground#aea578
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#3e3610
  • titleBar.activeBackground#3e3610
  • titleBar.activeForeground#aea578
  • titleBar.inactiveBackground#1f1b08
  • titleBar.inactiveForeground#786d38
  • walkThrough.embeddedEditorBackground#3e3610
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#5e511875
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#606baf
source#aea578
meta.diff, meta.diff.header#786d38
markup.inserted#7c8a16
markup.deleted#b54c00
markup.changed#d2bd25
invalid#b54c00underline italic
invalid.deprecated#aea578underline italic
entity.name.filename#ffe449
markup.error#b54c00
markup.underlineunderline
markup.bold#d2bd25bold
markup.heading#606bafbold
markup.italic#ffe449italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#906b25
markup.inline.raw, markup.raw.restructuredtext#7c8a16
markup.underline.link, markup.underline.link.image#906b25
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#8b5990
entity.name.directive.restructuredtext, markup.quote#ffe449italic
meta.separator.markdown#786d38
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#7c8a16
punctuation.definition.constant.restructuredtext#606baf
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#606baf
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#aea578
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffe449
entity.name.type.class, entity.name.class#906b25normal
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#606bafitalic
entity.other.inherited-class#906b25italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#786d38
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#8b5990
comment.block.documentation entity.name.type#906b25italic
comment.block.documentation entity.name.type punctuation.definition.bracket#906b25
comment.block.documentation variable#d2bd25italic
constant, variable.other.constant#606baf
constant.character.escape, constant.character.string.escape, constant.regexp#8b5990
entity.name.tag#8b5990
entity.other.attribute-name.parent-selector#8b5990
entity.other.attribute-name#7c8a16italic
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#7c8a16
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#d2bd25italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#7c8a16italic
meta.decorator variable.other.object#7c8a16
keyword, punctuation.definition.keyword#8b5990
keyword.control.new, keyword.operator.newbold
meta.selector#8b5990
support#906b25italic
support.function.magic, support.variable, variable.other.predefined#606bafregular
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#8b5990
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#aea578
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#8b5990
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#906b25
constant.other.date, constant.other.timestamp#d2bd25
variable.other.alias.yaml#7c8a16italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#8b5990regular
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#906b25italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#d2bd25
storage.modifier#8b5990
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffe449
punctuation.definition.group.capture.regexp#8b5990
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#b54c00
punctuation.definition.character-class.regexp#906b25
punctuation.definition.group.regexp#d2bd25
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#b54c00
meta.assertion.look-ahead.regexp#7c8a16
string#ffe449
punctuation.definition.string.begin, punctuation.definition.string.end#abb8ff
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#606baf
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#786d38
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#aea578
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#d2bd25italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#aea578normal
meta.selectionset.graphql variable#ffe449
meta.selectionset.graphql meta.arguments variable#aea578
entity.name.fragment.graphql, variable.fragment.graphql#906b25
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#aea578
source.shell variable.other#606baf
support.constant#606bafnormal
meta.scope.prerequisites.makefile#ffe449
meta.attribute-selector.scss#ffe449
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#aea578
meta.preprocessor.haskell#786d38
Tinted VSCode by Tinted Theming - VS Code Theme