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#25201f
  • activityBar.activeBorder#DAF8D4
  • activityBar.activeFocusBorder#ff0000
  • activityBar.background#0e0c0b
  • activityBar.foreground#f7f6f5
  • activityBar.inactiveForeground#717574
  • activityBarBadge.background#DAF8D4
  • activityBarBadge.foreground#000000
  • badge.background#DAF8D4
  • badge.foreground#0a0909
  • breadcrumb.activeSelectionForeground#f7f6f5
  • breadcrumb.background#25201f
  • breadcrumb.focusForeground#f7f6f5
  • breadcrumb.foreground#a9a9a9
  • breadcrumbPicker.background#0e0c0b
  • button.background#DAF8D4
  • button.foreground#202020
  • contrastBorder#060606
  • debugToolBar.background#0e0c0b
  • diffEditor.border#DAF8D4
  • diffEditor.diagonalFill#FF757550
  • diffEditor.insertedTextBackground#DAF8D470
  • diffEditor.removedTextBackground#FF757550
  • dropdown.background#0b100a
  • dropdown.border#000000
  • dropdown.foreground#f7f6f5
  • editor.background#161312
  • editor.findMatchBackground#AFD8FF80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#DAF8D475
  • editor.foldBackground#0e0c0b
  • editor.foreground#f7f6f5
  • editor.hoverHighlightBackground#FF757550
  • editor.lineHighlightBorder#DAF8D40c
  • editor.rangeHighlightBackground#DAF8D415
  • editor.selectionBackground#DAF8D441
  • editor.selectionHighlightBackground#DAF8D475
  • editor.snippetFinalTabstopHighlightBackground#0e0c0b
  • editor.snippetFinalTabstopHighlightBorder#DAF8D4
  • editor.snippetTabstopHighlightBackground#0e0c0b
  • editor.snippetTabstopHighlightBorder#BBB9B6
  • editor.wordHighlightBackground#FF757550
  • editor.wordHighlightStrongBackground#DAF8D457
  • editorCodeLens.foreground#BBB9B6
  • editorError.foreground#FF7575
  • editorGroup.border#000000
  • editorGroup.dropBackground#0e0c0b70
  • editorGroupHeader.tabsBackground#0e0c0b
  • editorGutter.addedBackground#DAF8D4
  • editorGutter.background#0e0c0b
  • editorGutter.deletedBackground#FF7575
  • editorGutter.modifiedBackground#AFD8FF
  • editorHoverWidget.background#25201f
  • editorHoverWidget.border#000000
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1a
  • editorLineNumber.foreground#7b7a7c
  • editorLink.activeForeground#9cb0c5
  • editorMarkerNavigation.background#0e0c0b
  • editorOverviewRuler.addedForeground#DAF8D4
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.currentContentForeground#f7f6f5
  • editorOverviewRuler.deletedForeground#FF7575
  • editorOverviewRuler.errorForeground#6d2222
  • editorOverviewRuler.incomingContentForeground#AFD8FF
  • editorOverviewRuler.infoForeground#AFD8FF
  • editorOverviewRuler.modifiedForeground#F3E9D2
  • editorOverviewRuler.selectionHighlightForeground#f7f6f5
  • editorOverviewRuler.warningForeground#FFB794
  • editorOverviewRuler.wordHighlightForeground#f7f6f5
  • editorOverviewRuler.wordHighlightStrongForeground#FFFFFF
  • editorRuler.foreground#ffffff1a
  • editorSuggestWidget.background#0e0c0b
  • editorSuggestWidget.foreground#f7f6f5
  • editorSuggestWidget.selectedBackground#DAF8D45d
  • editorWarning.foreground#FFB794
  • editorWhitespace.foreground#ffffff83
  • editorWidget.background#0e0c0b
  • errorForeground#FF7575
  • extensionButton.prominentBackground#DAF8D490
  • extensionButton.prominentForeground#f7f6f5
  • extensionButton.prominentHoverBackground#DAF8D460
  • focusBorder#040404
  • foreground#f7f6f5
  • gitDecoration.addedResourceForeground#DAF8D4
  • gitDecoration.conflictingResourceForeground#FFB794
  • gitDecoration.deletedResourceForeground#FF7575
  • gitDecoration.ignoredResourceForeground#BBB9B6
  • gitDecoration.modifiedResourceForeground#AFD8FF
  • gitDecoration.renamedResourceForeground#9b9da0
  • gitDecoration.untrackedResourceForeground#ac9576
  • input.background#25201f
  • input.border#000000
  • input.foreground#f7f6f5
  • input.placeholderForeground#959297
  • inputOption.activeBorder#000000
  • inputValidation.errorBorder#FF7575
  • inputValidation.infoBorder#AFD8FF
  • inputValidation.warningBorder#FFB794
  • list.activeSelectionBackground#DAF8D488
  • list.activeSelectionForeground#f7f6f5
  • list.dropBackground#DAF8D4
  • list.errorForeground#FF7575
  • list.focusBackground#DAF8D45e
  • list.highlightForeground#F3E9D2
  • list.hoverBackground#DAF8D436
  • list.inactiveSelectionBackground#DAF8D45b
  • list.warningForeground#FFB794
  • listFilterWidget.background#0e0c0b
  • listFilterWidget.noMatchesOutline#FF7575
  • listFilterWidget.outline#DAF8D4
  • merge.currentHeaderBackground#DAF8D490
  • merge.incomingHeaderBackground#9cb0c590
  • panel.background#0e0c0b
  • panel.border#FFB794
  • panelTitle.activeBorder#DAF8D4
  • panelTitle.activeForeground#f7f6f5
  • panelTitle.inactiveForeground#BBB9B6
  • peekView.border#DAF8D4
  • peekViewEditor.background#0e0c0b
  • peekViewEditor.matchHighlightBackground#DAF8D42d
  • peekViewResult.background#132013
  • peekViewResult.fileForeground#f7f6f5
  • peekViewResult.lineForeground#f7f6f5
  • peekViewResult.matchHighlightBackground#DAF8D42d
  • peekViewResult.selectionBackground#DAF8D4
  • peekViewResult.selectionForeground#f7f6f5
  • peekViewTitle.background#0e0c0b
  • peekViewTitleDescription.foreground#BBB9B6
  • peekViewTitleLabel.foreground#f7f6f5
  • pickerGroup.border#AFD8FF
  • pickerGroup.foreground#ac9576
  • progressBar.background#DAF8D4
  • selection.background#DAF8D462
  • settings.checkboxBackground#25201f
  • settings.checkboxBorder#000000
  • settings.checkboxForeground#f7f6f5
  • settings.dropdownBackground#25201f
  • settings.dropdownBorder#000000
  • settings.dropdownForeground#f7f6f5
  • settings.headerForeground#f7f6f5
  • settings.modifiedItemIndicator#DAF8D4
  • settings.numberInputBackground#25201f
  • settings.numberInputBorder#000000
  • settings.numberInputForeground#f7f6f5
  • settings.textInputBackground#25201f
  • settings.textInputBorder#000000
  • settings.textInputForeground#f7f6f5
  • sideBar.background#161312
  • sideBarSectionHeader.background#25201f
  • sideBarSectionHeader.border#000000
  • sideBarTitle.foreground#f7f6f5
  • statusBar.background#DAF8D4
  • statusBar.debuggingBackground#DAF8D4
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#AEAEAE
  • statusBar.noFolderForeground#f7f6f5
  • statusBarItem.errorForeground#6d2222
  • statusBarItem.hoverBackground#ffffff36
  • statusBarItem.prominentBackground#DAF8D4
  • statusBarItem.prominentHoverBackground#ffffff36
  • statusBarItem.remoteBackground#FFB794
  • statusBarItem.remoteForeground#000000
  • statusBarItem.warningBackground#FFB794
  • tab.activeBackground#25201f
  • tab.activeBorderTop#DAF8D4
  • tab.activeForeground#f7f6f5
  • tab.border#000000
  • tab.hoverBackground#25201f
  • tab.hoverForeground#f7f6f5
  • tab.inactiveBackground#0e0c0b
  • tab.inactiveForeground#BBB9B6
  • terminal.ansiBlack#292929
  • terminal.ansiBlue#7bbfff
  • terminal.ansiBrightBlack#BBB9B6
  • terminal.ansiBrightBlue#AFD8FF
  • terminal.ansiBrightCyan#a5d2d4
  • terminal.ansiBrightGreen#DAF8D4
  • terminal.ansiBrightMagenta#c096e7
  • terminal.ansiBrightRed#ff7575
  • terminal.ansiBrightWhite#c9c7c6
  • terminal.ansiBrightYellow#ffeabb
  • terminal.ansiCyan#76a9ac
  • terminal.ansiGreen#88a881
  • terminal.ansiMagenta#9b7ab9
  • terminal.ansiRed#FF7575
  • terminal.ansiWhite#f7f6f5
  • terminal.ansiYellow#FFB794
  • terminal.background#161312
  • terminal.foreground#f7f6f5
  • textLink.activeForeground#6c7b8b
  • textLink.foreground#AFD8FF
  • titleBar.activeBackground#0e0c0b
  • titleBar.activeForeground#f7f6f5
  • titleBar.inactiveBackground#25201f
  • titleBar.inactiveForeground#BBB9B6
  • walkThrough.embeddedEditorBackground#0e0c0b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#FFFFFF
meta.diff, meta.diff.header#BBB9B6
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#bbdeee
emphasisitalic
strongbold
invalid#FF7575strikethrough
invalid.deprecated#f7f6f5underline italic
header#bbdeee
source.ini, source.ignore, source#d6d6d6
markup.inserted#AFD8FF
markup.deleted#FF7575
markup.changed#DAF8D4
markup.error#FF7575
markup.underlineunderline
markup.bold#AFD8FFbold
markup.heading#DAF8D4bold
markup.italic#F3E9D2italic
markup.inline.raw, markup.raw.restructuredtext#FF869C
markup.underline.link, markup.underline.link.image, markup.quote#F3E9D2
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#F3E9D2
meta.separator.markdown#BAB9B7
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#FF869C
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#AFD8FF
entity.name.filename#F3E9D2
entity.name.directive.restructuredtext#FF869Citalic
entity.name.class, entity.name.type.class, entity.other.inherited-class, entity.name.fragment.graphql, variable.fragment.graphql#98CFD3
entity.name.tag#FF869C
entity.other.attribute-name.parent-selector#DAF8D4
entity.other.attribute-name, meta.object-literal.key.js#FF869C
source.css, entity.other.attribute-name.class.css, entity.name.variable.parameter, meta.selector.css, 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#dfdfdf
support, entity.name.type, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#FFB794
keyword.other.important.css#B2F0CB
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#DAF8D4
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#AFD8FF
entity.other.attribute-name, meta.object-literal.key.js#DAF8D4
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#F3E9D2
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#F3E9D2
storage.modifier#F3E9D2
punctuation.definition.constant.restructuredtext#F3E9D2
storage.type.generic.java#F3E9D2
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#F3E9D2
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7e7472
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#b19f9b
constant#AFD8FF
constant.other.color, constant.other.key.perl#AFD8FF
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#FFB794
constant.other.date, constant.other.timestamp#AFD8FF
constant.language.empty-list.haskell, constant.other.symbol.hashkey, constant.other.symbol.hashkey.ruby#f7f6f5
keyword.operator.other.powershell, keyword.other.statement-separator.powershell#EEF4ED
keyword.operator.dereference.java, keyword.operator.navigation.groovy#f7f6f5
keyword.operator#FFFFFF
keyword.other.unit#d8e0e7
keyword.control, keyword.other.template, keyword.other.substitution#F3E9D2
keyword.expressions-and-types.swift, keyword.other.this, variable.language.this#F3E9D2
keyword.control.import, keyword.control.from, keyword.control.export#F3E9D2
meta.attribute-selector.scss#F3E9D2
storage.modifier.async, keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.comparison, keyword.operator.relational, keyword.operator.logical, keyword.operator.ternary#F3E9D2
keyword.control.at-rule.apply.tailwind#FFB794bold
meta.selector#DAF8D4
meta.at-rule.apply.tailwind#DAF8D4
keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.powershell entity.other.attribute-name#EEF4ED
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F3E9D2
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#F3E9D2
punctuation.definition.keyword.css#F3E9D2bold
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F3E9D2
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded#F3E9D2
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.brace.square, 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#F3E9D2
#F3E9D2
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#F3E9D2
meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, 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#F3E9D2
punctuation.definition.directive.restructuredtext#F3E9D2
punctuation.separator.inheritance.php#F3E9D2
variable.parameter#FFB794
variable.other.alias.yaml#EEF4EDunderline
variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special, variable.other.constant#EEF4ED
support.variable.property, variable.object.property, variable.other.object.property#FFB794
variable.other.object, variable.other.constant.object#FF869C
meta.array.literal variable.other.readwrite, variable.parameter.handlebars#F3E9D2
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#FFB794
meta.selectionset.graphql meta.arguments variable#FF869C
variable.graphql#EEF4ED
support.variable.property, keyword.operation.graphql#EEF4ED
source.shell variable.other#FF869C
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#ACFFCD
support.function.magic, support.variable, variable.other.predefined#FFB794
support.function, support.type.property-name#bbdeee
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F3E9D2
punctuation.definition.group.capture.regexp#c79494
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#DAF8D4
punctuation.definition.character-class.regexp#AFD8FF
punctuation.definition.group.regexp#FF869C
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#F3E9D2
meta.assertion.look-ahead.regexp#DAF8D4
meta.scope.prerequisites.makefile#c79494
source.json meta.structure.dictionary.json support.type.property-name.json#DAF8D4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFB794
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F3E9D2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF869C
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#bbdeee
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFB794
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C7C6C9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#AEAEAE
token.info-token#AFD8FF
token.warn-token#FFB794
token.error-token#F44747
token.debug-token#FF869C