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#525fb810
  • activityBar.activeBorder#976f8180
  • activityBar.background#222436
  • activityBar.foreground#ccc9c9
  • activityBar.inactiveForeground#8c7f63
  • activityBarBadge.background#976f81
  • activityBarBadge.foreground#222436
  • badge.background#03063c
  • badge.foreground#ccc9c9
  • breadcrumb.activeSelectionForeground#ccc9c9
  • breadcrumb.background#222436
  • breadcrumb.focusForeground#ccc9c9
  • breadcrumb.foreground#8c7f63
  • breadcrumbPicker.background#241e10
  • button.background#483c20
  • button.foreground#ccc9c9
  • checkbox.background#483c20
  • checkbox.border#241e10
  • checkbox.foreground#ccc9c9
  • contrastBorder#241e10
  • debugToolBar.background#483c20
  • diffEditor.insertedTextBackground#abf15720
  • diffEditor.removedTextBackground#c6004950
  • dropdown.background#222436
  • dropdown.border#241e10
  • dropdown.foreground#ccc9c9
  • editor.background#222436
  • editor.findMatchBackground#fdcd5e80
  • editor.findMatchHighlightBackground#f6ffec40
  • editor.findRangeHighlightBackground#6c5a3075
  • editor.foldBackground#483c20
  • editor.foreground#ccc9c9
  • editor.hoverHighlightBackground#241e10
  • editor.lineHighlightBorder#03063c
  • editor.rangeHighlightBackground#525fb815
  • editor.selectionBackground#03063c
  • editor.selectionHighlightBackground#03063c
  • editor.snippetFinalTabstopHighlightBackground#222436
  • editor.snippetFinalTabstopHighlightBorder#abf157
  • editor.snippetTabstopHighlightBackground#222436
  • editor.snippetTabstopHighlightBorder#8c7f63
  • editor.wordHighlightBackground#96866250
  • editor.wordHighlightStrongBackground#abf15750
  • editorCodeLens.foreground#8c7f63
  • editorError.foreground#c60049
  • editorGroup.border#525fb8
  • editorGroup.dropBackground#6c5a3070
  • editorGroupHeader.tabsBackground#241e10
  • editorGutter.addedBackground#abf15780
  • editorGutter.deletedBackground#c6004980
  • editorGutter.modifiedBackground#96866280
  • editorHoverWidget.background#222436
  • editorHoverWidget.border#8c7f63
  • editorIndentGuide.activeBackground#f6ffec45
  • editorIndentGuide.background#f6ffec1A
  • editorLineNumber.foreground#8c7f63
  • editorLink.activeForeground#968662
  • editorMarkerNavigation.background#483c20
  • editorOverviewRuler.addedForeground#abf15780
  • editorOverviewRuler.border#241e10
  • editorOverviewRuler.currentContentForeground#abf157
  • editorOverviewRuler.deletedForeground#c6004980
  • editorOverviewRuler.errorForeground#c6004980
  • editorOverviewRuler.incomingContentForeground#525fb8
  • editorOverviewRuler.infoForeground#96866280
  • editorOverviewRuler.modifiedForeground#96866280
  • editorOverviewRuler.selectionHighlightForeground#fdcd5e
  • editorOverviewRuler.warningForeground#fdcd5e80
  • editorOverviewRuler.wordHighlightForeground#968662
  • editorOverviewRuler.wordHighlightStrongForeground#abf157
  • editorRuler.foreground#f6ffec1A
  • editorSuggestWidget.background#483c20
  • editorSuggestWidget.foreground#ccc9c9
  • editorSuggestWidget.selectedBackground#03063c
  • editorWarning.foreground#fdcd5e
  • editorWhitespace.foreground#f6ffec1A
  • editorWidget.background#483c20
  • errorForeground#c60049
  • extensionButton.prominentBackground#abf15790
  • extensionButton.prominentForeground#ccc9c9
  • extensionButton.prominentHoverBackground#abf15760
  • focusBorder#8c7f63
  • foreground#ccc9c9
  • gitDecoration.conflictingResourceForeground#fdcd5e
  • gitDecoration.deletedResourceForeground#c60049
  • gitDecoration.ignoredResourceForeground#8c7f63
  • gitDecoration.modifiedResourceForeground#968662
  • gitDecoration.untrackedResourceForeground#abf157
  • input.background#222436
  • input.border#241e10
  • input.foreground#ccc9c9
  • input.placeholderForeground#8c7f63
  • inputOption.activeBorder#525fb8
  • inputValidation.errorBackground#222436
  • inputValidation.errorBorder#c60049
  • inputValidation.errorForeground#c60049
  • inputValidation.infoBackground#222436
  • inputValidation.infoBorder#525fb8
  • inputValidation.infoForeground#525fb8
  • inputValidation.warningBackground#222436
  • inputValidation.warningBorder#fdcd5e
  • inputValidation.warningForeground#fdcd5e
  • list.activeSelectionBackground#03063c
  • list.activeSelectionForeground#ccc9c9
  • list.dropBackground#03063c
  • list.errorForeground#c60049
  • list.focusBackground#6c5a3075
  • list.highlightForeground#968662
  • list.hoverBackground#6c5a3075
  • list.inactiveSelectionBackground#6c5a3075
  • list.warningForeground#fdcd5e
  • listFilterWidget.background#222436
  • listFilterWidget.noMatchesOutline#c60049
  • listFilterWidget.outline#03063c
  • merge.currentHeaderBackground#abf15790
  • merge.incomingHeaderBackground#525fb890
  • notification.background#222436
  • notification.buttonBackground#03063c
  • notification.buttonForeground#ccc9c9
  • notification.buttonHoverBackground#6c5a3075
  • notification.errorBackground#c60049
  • notification.errorForeground#222436
  • notification.foreground#ccc9c9
  • notification.infoBackground#525fb8
  • notification.infoForeground#222436
  • notification.warningBackground#fdcd5e
  • notification.warningForeground#222436
  • notificationCenter.border#483c20
  • notificationCenterHeader.background#222436
  • notificationCenterHeader.foreground#ccc9c9
  • notificationLink.foreground#968662
  • notifications.background#222436
  • notifications.border#483c20
  • notifications.foreground#ccc9c9
  • notificationsErrorIcon.foreground#c60049
  • notificationsInfoIcon.foreground#525fb8
  • notificationsWarningIcon.foreground#fdcd5e
  • notificationToast.border#483c20
  • panel.background#222436
  • panel.border#525fb8
  • panelInput.border#ccc9c9
  • panelTitle.activeBorder#976f81
  • panelTitle.activeForeground#ccc9c9
  • panelTitle.inactiveForeground#8c7f63
  • peekView.border#03063c
  • peekViewEditor.background#222436
  • peekViewEditor.matchHighlightBackground#fee6a880
  • peekViewResult.background#483c20
  • peekViewResult.fileForeground#ccc9c9
  • peekViewResult.lineForeground#ccc9c9
  • peekViewResult.matchHighlightBackground#fee6a880
  • peekViewResult.selectionBackground#03063c
  • peekViewResult.selectionForeground#ccc9c9
  • peekViewTitle.background#241e10
  • peekViewTitleDescription.foreground#8c7f63
  • peekViewTitleLabel.foreground#ccc9c9
  • pickerGroup.border#525fb8
  • pickerGroup.foreground#968662
  • progressBar.background#976f81
  • scrollbar.shadow#444444
  • selection.background#525fb8
  • settings.checkboxBackground#483c20
  • settings.checkboxBorder#241e10
  • settings.checkboxForeground#ccc9c9
  • settings.dropdownBackground#483c20
  • settings.dropdownBorder#241e10
  • settings.dropdownForeground#ccc9c9
  • settings.headerForeground#ccc9c9
  • settings.modifiedItemIndicator#fdcd5e
  • settings.numberInputBackground#483c20
  • settings.numberInputBorder#241e10
  • settings.numberInputForeground#ccc9c9
  • settings.textInputBackground#483c20
  • settings.textInputBorder#241e10
  • settings.textInputForeground#ccc9c9
  • sideBar.background#483c20
  • sideBarSectionHeader.background#222436
  • sideBarSectionHeader.border#241e10
  • sideBarTitle.foreground#ccc9c9
  • statusBar.background#241e10
  • statusBar.debuggingBackground#c60049
  • statusBar.debuggingForeground#241e10
  • statusBar.foreground#ccc9c9
  • statusBar.noFolderBackground#241e10
  • statusBar.noFolderForeground#ccc9c9
  • statusBarItem.prominentBackground#c60049
  • statusBarItem.prominentHoverBackground#fdcd5e
  • statusBarItem.remoteBackground#525fb8
  • statusBarItem.remoteForeground#222436
  • tab.activeBackground#222436
  • tab.activeBorderTop#976f8180
  • tab.activeForeground#ccc9c9
  • tab.border#241e10
  • tab.inactiveBackground#483c20
  • tab.inactiveForeground#8c7f63
  • terminal.ansiBlack#03063c
  • terminal.ansiBlue#525fb8
  • terminal.ansiBrightBlack#6c5a30
  • terminal.ansiBrightBlue#b1bdf9
  • terminal.ansiBrightCyan#a4bc86
  • terminal.ansiBrightGreen#daffa8
  • terminal.ansiBrightMagenta#fda4cc
  • terminal.ansiBrightRed#d94a8a
  • terminal.ansiBrightWhite#f6ffec
  • terminal.ansiBrightYellow#fee6a8
  • terminal.ansiCyan#968662
  • terminal.ansiGreen#abf157
  • terminal.ansiMagenta#976f81
  • terminal.ansiRed#c60049
  • terminal.ansiWhite#eceffc
  • terminal.ansiYellow#fdcd5e
  • terminal.background#222436
  • terminal.border#ccc9c9
  • terminal.foreground#ccc9c9
  • terminal.selectionBackground#03063c50
  • textBlockQuote.background#483c20
  • titleBar.activeBackground#483c20
  • titleBar.activeForeground#ccc9c9
  • titleBar.inactiveBackground#241e10
  • titleBar.inactiveForeground#8c7f63
  • walkThrough.embeddedEditorBackground#483c20
  • welcomePage.buttonBackground#03063c
  • welcomePage.buttonHoverBackground#6c5a3075
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#525fb8
source#ccc9c9
meta.diff, meta.diff.header#8c7f63
markup.inserted#abf157
markup.deleted#c60049
markup.changed#fdcd5e
invalid#c60049underline italic
invalid.deprecated#ccc9c9underline italic
entity.name.filename#fee6a8
markup.error#c60049
markup.underlineunderline
markup.bold#fdcd5ebold
markup.heading#525fb8bold
markup.italic#fee6a8italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#968662
markup.inline.raw, markup.raw.restructuredtext#abf157
markup.underline.link, markup.underline.link.image#968662
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#976f81
entity.name.directive.restructuredtext, markup.quote#fee6a8italic
meta.separator.markdown#8c7f63
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#abf157
punctuation.definition.constant.restructuredtext#525fb8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#525fb8
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#ccc9c9
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fee6a8
entity.name.type.class, entity.name.class#968662normal
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#525fb8italic
entity.other.inherited-class#968662italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#8c7f63
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#976f81
comment.block.documentation entity.name.type#968662italic
comment.block.documentation entity.name.type punctuation.definition.bracket#968662
comment.block.documentation variable#fdcd5eitalic
constant, variable.other.constant#525fb8
constant.character.escape, constant.character.string.escape, constant.regexp#976f81
entity.name.tag#976f81
entity.other.attribute-name.parent-selector#976f81
entity.other.attribute-name#abf157italic
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#abf157
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#fdcd5eitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#abf157italic
meta.decorator variable.other.object#abf157
keyword, punctuation.definition.keyword#976f81
keyword.control.new, keyword.operator.newbold
meta.selector#976f81
support#968662italic
support.function.magic, support.variable, variable.other.predefined#525fb8regular
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#976f81
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#ccc9c9
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#976f81
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#968662
constant.other.date, constant.other.timestamp#fdcd5e
variable.other.alias.yaml#abf157italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#976f81regular
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#968662italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fdcd5e
storage.modifier#976f81
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fee6a8
punctuation.definition.group.capture.regexp#976f81
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#c60049
punctuation.definition.character-class.regexp#968662
punctuation.definition.group.regexp#fdcd5e
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#c60049
meta.assertion.look-ahead.regexp#abf157
string#fee6a8
punctuation.definition.string.begin, punctuation.definition.string.end#b1bdf9
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#525fb8
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#8c7f63
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#ccc9c9
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#fdcd5eitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#ccc9c9normal
meta.selectionset.graphql variable#fee6a8
meta.selectionset.graphql meta.arguments variable#ccc9c9
entity.name.fragment.graphql, variable.fragment.graphql#968662
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#ccc9c9
source.shell variable.other#525fb8
support.constant#525fb8normal
meta.scope.prerequisites.makefile#fee6a8
meta.attribute-selector.scss#fee6a8
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#ccc9c9
meta.preprocessor.haskell#8c7f63
Tinted VSCode by Tinted Theming - VS Code Theme