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#C4B5FF10
  • activityBar.activeBorder#FF8DB580
  • activityBar.background#1A201D
  • activityBar.foreground#fafefb
  • activityBar.inactiveForeground#91b79f
  • activityBarBadge.background#f498b8
  • activityBarBadge.foreground#fafefb
  • badge.background#2D3831
  • badge.foreground#fafefb
  • breadcrumb.activeSelectionForeground#fafefb
  • breadcrumb.background#171C19
  • breadcrumb.focusForeground#fafefb
  • breadcrumb.foreground#91b79f
  • breadcrumbPicker.background#0C0F0E
  • button.background#2D3831
  • button.foreground#fafefb
  • button.secondaryBackground#171C19
  • button.secondaryForeground#fafefb
  • button.secondaryHoverBackground#1A201D
  • debugToolBar.background#121614
  • diffEditor.insertedTextBackground#4BEA9A20
  • diffEditor.removedTextBackground#FF7A7250
  • dropdown.background#1A201D
  • dropdown.border#0C0F0E
  • dropdown.foreground#fafefb
  • editor.background#121614
  • editor.findMatchBackground#FFC86680
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#22292699
  • editor.foldBackground#12161480
  • editor.foreground#fafefb
  • editor.hoverHighlightBackground#5FFFC050
  • editor.lineHighlightBorder#2D3831
  • editor.rangeHighlightBackground#C4B5FF15
  • editor.selectionBackground#2D3831
  • editor.selectionHighlightBackground#222926
  • editor.snippetFinalTabstopHighlightBackground#171C19
  • editor.snippetFinalTabstopHighlightBorder#5fd69a
  • editor.snippetTabstopHighlightBackground#171C19
  • editor.snippetTabstopHighlightBorder#91b79f
  • editor.wordHighlightBackground#5FFFC050
  • editor.wordHighlightStrongBackground#4BEA9A50
  • editorBracketHighlight.foreground1#fafefb
  • editorBracketHighlight.foreground2#f498b8
  • editorBracketHighlight.foreground3#6fefbd
  • editorBracketHighlight.foreground4#5fd69a
  • editorBracketHighlight.foreground5#c8bcf8
  • editorBracketHighlight.foreground6#FFC866
  • editorBracketHighlight.unexpectedBracket.foreground#f18680
  • editorCodeLens.foreground#91b79f
  • editorError.foreground#f18680
  • editorGroup.border#c8bcf8
  • editorGroup.dropBackground#22292670
  • editorGroupHeader.tabsBackground#0C0F0E
  • editorGutter.addedBackground#4BEA9A80
  • editorGutter.deletedBackground#FF7A7280
  • editorGutter.modifiedBackground#5FFFC080
  • editorHoverWidget.background#171C19
  • editorHoverWidget.border#91b79f
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF2A
  • editorLineNumber.activeForeground#fafefb
  • editorLineNumber.foreground#91b79f
  • editorLink.activeForeground#6fefbd
  • editorMarkerNavigation.background#121614
  • editorOverviewRuler.addedForeground#4BEA9A80
  • editorOverviewRuler.border#0C0F0E
  • editorOverviewRuler.currentContentForeground#5fd69a
  • editorOverviewRuler.deletedForeground#FF7A7280
  • editorOverviewRuler.errorForeground#FF7A7280
  • editorOverviewRuler.incomingContentForeground#c8bcf8
  • editorOverviewRuler.infoForeground#5FFFC080
  • editorOverviewRuler.modifiedForeground#5FFFC080
  • editorOverviewRuler.selectionHighlightForeground#FFC866
  • editorOverviewRuler.warningForeground#FFC86680
  • editorOverviewRuler.wordHighlightForeground#6fefbd
  • editorOverviewRuler.wordHighlightStrongForeground#5fd69a
  • editorRuler.foreground#FFFFFF2A
  • editorSuggestWidget.background#121614
  • editorSuggestWidget.foreground#fafefb
  • editorSuggestWidget.selectedBackground#2D3831
  • editorWarning.foreground#6fefbd
  • editorWhitespace.foreground#FFFFFF2A
  • editorWidget.background#121614
  • errorForeground#f18680
  • extensionButton.prominentBackground#4BEA9A90
  • extensionButton.prominentForeground#fafefb
  • extensionButton.prominentHoverBackground#4BEA9A60
  • focusBorder#91b79f
  • foreground#fafefb
  • gitDecoration.conflictingResourceForeground#FFC866
  • gitDecoration.deletedResourceForeground#f18680
  • gitDecoration.ignoredResourceForeground#91b79f
  • gitDecoration.modifiedResourceForeground#6fefbd
  • gitDecoration.untrackedResourceForeground#5fd69a
  • inlineChat.regionHighlight#1A201D
  • input.background#171C19
  • input.border#0C0F0E
  • input.foreground#fafefb
  • input.placeholderForeground#91b79f
  • inputOption.activeBorder#c8bcf8
  • inputValidation.errorBorder#f18680
  • inputValidation.infoBorder#f498b8
  • inputValidation.warningBorder#FFC866
  • list.activeSelectionBackground#2D3831
  • list.activeSelectionForeground#fafefb
  • list.dropBackground#2D3831
  • list.errorForeground#f18680
  • list.focusBackground#22292699
  • list.highlightForeground#6fefbd
  • list.hoverBackground#22292699
  • list.inactiveSelectionBackground#22292699
  • list.warningForeground#FFC866
  • listFilterWidget.background#1A201D
  • listFilterWidget.noMatchesOutline#f18680
  • listFilterWidget.outline#222926
  • merge.currentHeaderBackground#4BEA9A90
  • merge.incomingHeaderBackground#C4B5FF90
  • panel.background#171C19
  • panel.border#c8bcf8
  • panelTitle.activeBorder#f498b8
  • panelTitle.activeForeground#fafefb
  • panelTitle.inactiveForeground#91b79f
  • peekView.border#2D3831
  • peekViewEditor.background#171C19
  • peekViewEditor.matchHighlightBackground#FFF06A80
  • peekViewResult.background#121614
  • peekViewResult.fileForeground#fafefb
  • peekViewResult.lineForeground#fafefb
  • peekViewResult.matchHighlightBackground#FFF06A80
  • peekViewResult.selectionBackground#2D3831
  • peekViewResult.selectionForeground#fafefb
  • peekViewTitle.background#0C0F0E
  • peekViewTitleDescription.foreground#91b79f
  • peekViewTitleLabel.foreground#fafefb
  • pickerGroup.border#c8bcf8
  • pickerGroup.foreground#6fefbd
  • progressBar.background#f498b8
  • selection.background#c8bcf8
  • settings.checkboxBackground#121614
  • settings.checkboxBorder#0C0F0E
  • settings.checkboxForeground#fafefb
  • settings.dropdownBackground#121614
  • settings.dropdownBorder#0C0F0E
  • settings.dropdownForeground#fafefb
  • settings.headerForeground#fafefb
  • settings.modifiedItemIndicator#FFC866
  • settings.numberInputBackground#121614
  • settings.numberInputBorder#0C0F0E
  • settings.numberInputForeground#fafefb
  • settings.textInputBackground#121614
  • settings.textInputBorder#0C0F0E
  • settings.textInputForeground#fafefb
  • sideBar.background#171C19
  • sideBarSectionHeader.background#121614
  • sideBarSectionHeader.border#0C0F0E
  • sideBarTitle.foreground#fafefb
  • statusBar.background#0C0F0E
  • statusBar.debuggingBackground#f18680
  • statusBar.debuggingForeground#0C0F0E
  • statusBar.foreground#fafefb
  • statusBar.noFolderBackground#0C0F0E
  • statusBar.noFolderForeground#fafefb
  • statusBarItem.prominentBackground#f18680
  • statusBarItem.prominentHoverBackground#FFC866
  • statusBarItem.remoteBackground#c8bcf8
  • statusBarItem.remoteForeground#171C19
  • tab.activeBackground#171C19
  • tab.activeBorderTop#FF8DB580
  • tab.activeForeground#fafefb
  • tab.border#0C0F0E
  • tab.inactiveBackground#121614
  • tab.inactiveForeground#91b79f
  • terminal.ansiBlack#303030
  • terminal.ansiBlue#c8bcf8
  • terminal.ansiBrightBlack#91b79f
  • terminal.ansiBrightBlue#d8cffa
  • terminal.ansiBrightCyan#97f3dc
  • terminal.ansiBrightGreen#7cf0c5
  • terminal.ansiBrightMagenta#f6b2ca
  • terminal.ansiBrightRed#f4a39d
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f4ec9a
  • terminal.ansiCyan#6fefbd
  • terminal.ansiGreen#5fd69a
  • terminal.ansiMagenta#f498b8
  • terminal.ansiRed#f18680
  • terminal.ansiWhite#fafefb
  • terminal.ansiYellow#f0e479
  • terminal.background#171C19
  • terminal.foreground#fafefb
  • titleBar.activeBackground#121614
  • titleBar.activeForeground#fafefb
  • titleBar.inactiveBackground#0C0F0E
  • titleBar.inactiveForeground#91b79f
  • walkThrough.embeddedEditorBackground#121614

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#c8bcf8
meta.diff, meta.diff.header#91b79f
markup.inserted#5fd69a
markup.deleted#f18680
markup.changed#FFC866
invalid#f18680underline italic
invalid.deprecated#fafefbunderline italic
entity.name.filename#f0e479
markup.error#f18680
markup.underlineunderline
markup.bold#FFC866bold
markup.heading#c8bcf8bold
markup.italic#f0e479italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#6fefbd
markup.inline.raw, markup.raw.restructuredtext#5fd69a
markup.underline.link, markup.underline.link.image#6fefbd
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#f498b8
entity.name.directive.restructuredtext, markup.quote#f0e479italic
meta.separator.markdown#91b79f
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#5fd69a
punctuation.definition.constant.restructuredtext#c8bcf8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#c8bcf8
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#fafefb
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#f0e479
entity.name.type.class, entity.name.class#6fefbdnormal
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#c8bcf8italic
entity.other.inherited-class#6fefbditalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#91b79f
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#f498b8
comment.block.documentation entity.name.type#6fefbditalic
comment.block.documentation entity.name.type punctuation.definition.bracket#6fefbd
comment.block.documentation variable#FFC866italic
constant, variable.other.constant#c8bcf8
constant.character.escape, constant.character.string.escape, constant.regexp#f498b8
entity.name.tag, support.class.component.jsx, support.class.component.tsx#f498b8
entity.other.attribute-name.parent-selector#f498b8
entity.other.attribute-name#5fd69aitalic
entity.name.function, 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#5fd69a
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#FFC866italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#5fd69aitalic
meta.decorator variable.other.object#5fd69a
keyword, punctuation.definition.keyword#f498b8
keyword.control.new, keyword.operator.newbold
meta.selector#f498b8
support#6fefbditalic
support.function.magic, support.variable, variable.other.predefined#c8bcf8regular
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#f498b8
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, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#fafefb
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#f498b8
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#6fefbd
constant.other.date, constant.other.timestamp#FFC866
variable.other.alias.yaml#5fd69aitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#f498b8regular
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, storage.type.dart, storage.type.kotlin, storage.type.scala, storage.type.elixir, storage.type.hcl, storage.type.prisma#6fefbditalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFC866
storage.modifier#f498b8
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#f0e479
punctuation.definition.group.capture.regexp#f498b8
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f18680
punctuation.definition.character-class.regexp#6fefbd
punctuation.definition.group.regexp#FFC866
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f18680
meta.assertion.look-ahead.regexp#5fd69a
string#f0e479
punctuation.definition.string.begin, punctuation.definition.string.end#f4ec9a
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#97f3dc
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#91b79f
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#fafefb
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#FFC866italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#fafefbnormal
meta.selectionset.graphql variable#f0e479
meta.selectionset.graphql meta.arguments variable#fafefb
entity.name.fragment.graphql, variable.fragment.graphql#6fefbd
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.section.embedded.begin.vue, punctuation.section.embedded.end.vue, punctuation.section.embedded.begin.svelte, punctuation.section.embedded.end.svelte, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#fafefb
source.shell variable.other#c8bcf8
support.constant#c8bcf8normal
meta.scope.prerequisites.makefile#f0e479
meta.attribute-selector.scss#f0e479
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#fafefb
meta.preprocessor.haskell#91b79f
log.error#f18680bold
log.warning#f0e479bold
Green Night Theme by Ender Bonnet - VS Code Theme