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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#C4B5FF
meta.diff, meta.diff.header#7FC99B
markup.inserted#4BEA9A
markup.deleted#FF7A72
markup.changed#FFC866
invalid#FF7A72underline italic
invalid.deprecated#FAFFFBunderline italic
entity.name.filename#FFF06A
markup.error#FF7A72
markup.underlineunderline
markup.bold#FFC866bold
markup.heading#C4B5FFbold
markup.italic#FFF06Aitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#5FFFC0
markup.inline.raw, markup.raw.restructuredtext#4BEA9A
markup.underline.link, markup.underline.link.image#5FFFC0
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#FF8DB5
entity.name.directive.restructuredtext, markup.quote#FFF06Aitalic
meta.separator.markdown#7FC99B
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#4BEA9A
punctuation.definition.constant.restructuredtext#C4B5FF
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#C4B5FF
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#FAFFFB
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#FFF06A
entity.name.type.class, entity.name.class#5FFFC0normal
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#C4B5FFitalic
entity.other.inherited-class#5FFFC0italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7FC99B
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#FF8DB5
comment.block.documentation entity.name.type#5FFFC0italic
comment.block.documentation entity.name.type punctuation.definition.bracket#5FFFC0
comment.block.documentation variable#FFC866italic
constant, variable.other.constant#C4B5FF
constant.character.escape, constant.character.string.escape, constant.regexp#FF8DB5
entity.name.tag, support.class.component.jsx, support.class.component.tsx#FF8DB5
entity.other.attribute-name.parent-selector#FF8DB5
entity.other.attribute-name#4BEA9Aitalic
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#4BEA9A
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#4BEA9Aitalic
meta.decorator variable.other.object#4BEA9A
keyword, punctuation.definition.keyword#FF8DB5
keyword.control.new, keyword.operator.newbold
meta.selector#FF8DB5
support#5FFFC0italic
support.function.magic, support.variable, variable.other.predefined#C4B5FFregular
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#FF8DB5
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#FAFFFB
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#FF8DB5
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#5FFFC0
constant.other.date, constant.other.timestamp#FFC866
variable.other.alias.yaml#4BEA9Aitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#FF8DB5regular
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#5FFFC0italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFC866
storage.modifier#FF8DB5
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#FFF06A
punctuation.definition.group.capture.regexp#FF8DB5
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF7A72
punctuation.definition.character-class.regexp#5FFFC0
punctuation.definition.group.regexp#FFC866
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF7A72
meta.assertion.look-ahead.regexp#4BEA9A
string#FFF06A
punctuation.definition.string.begin, punctuation.definition.string.end#FFF58F
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8BFFE2
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#7FC99B
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#FAFFFB
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#FAFFFBnormal
meta.selectionset.graphql variable#FFF06A
meta.selectionset.graphql meta.arguments variable#FAFFFB
entity.name.fragment.graphql, variable.fragment.graphql#5FFFC0
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#FAFFFB
source.shell variable.other#C4B5FF
support.constant#C4B5FFnormal
meta.scope.prerequisites.makefile#FFF06A
meta.attribute-selector.scss#FFF06A
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#FAFFFB
meta.preprocessor.haskell#7FC99B
log.error#FF7A72bold
log.warning#FFF06Abold
Green Night Theme by Ender Bonnet - VS Code Theme