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.activeBorder#3ae73a
  • activityBar.background#120f0e
  • activityBar.border#1c1917
  • activityBar.dropBackground#235f1c80
  • activityBar.foreground#a8a29e
  • activityBarBadge.background#3ae73a
  • activityBarBadge.foreground#000
  • badge.background#3ae73a
  • badge.foreground#000
  • breadcrumb.background#000
  • breadcrumb.focusForeground#a8a29e
  • breadcrumb.foreground#78716c
  • breadcrumbPicker.background#1c1917
  • button.background#235f1c
  • button.foreground#d6d3d1
  • button.secondaryBackground#78716c66
  • button.secondaryForeground#d6d3d1
  • debugToolBar.background#1c1917
  • descriptionForeground#78716c02
  • diffEditor.insertedTextBackground#183114
  • diffEditor.removedTextBackground#3f0707
  • dropdown.background#0a0807
  • dropdown.border#292524
  • dropdown.foreground#a8a29e
  • editor.background#000
  • editor.findMatchBackground#7e9e8326
  • editor.findMatchBorder#3ae73a80
  • editor.findMatchHighlightBackground#7e9e831d
  • editor.findMatchHighlightBorder#3ae73a80
  • editor.findRangeHighlightBackground#7e9e8308
  • editor.foreground#a8a29e
  • editor.hoverHighlightBackground#183114c0
  • editor.lineHighlightBorder#78716c26
  • editor.selectionBackground#235f1cc0
  • editor.wordHighlightBackground#46b19133
  • editor.wordHighlightStrongBackground#46b19133
  • editorBracketHighlight.foreground1#037223
  • editorBracketHighlight.foreground2#2ba151
  • editorBracketHighlight.foreground3#73db8a
  • editorBracketHighlight.foreground4#6cc1a5
  • editorBracketHighlight.foreground5#95c8b1
  • editorBracketHighlight.unexpectedBracket.foreground#dc2626
  • editorBracketMatch.background#3ae73a33
  • editorBracketMatch.border#00000000
  • editorCodeLens.foreground#a8a29e90
  • editorCursor.foreground#3ae73a
  • editorError.foreground#dc2626
  • editorGroup.border#1c1917
  • editorGroup.dropBackground#235f1c80
  • editorGroup.emptyBackground#000
  • editorGroupHeader.noTabsBackground#000
  • editorGroupHeader.tabsBackground#0a0807
  • editorGutter.addedBackground#27c827
  • editorGutter.background#000
  • editorGutter.deletedBackground#7f1d1d
  • editorGutter.modifiedBackground#6cc1a5
  • editorHoverWidget.background#1c1917f3
  • editorHoverWidget.border#292524
  • editorIndentGuide.background#1c1917
  • editorInfo.foreground#6cc1a5
  • editorLightBulb.foreground#3ae73a
  • editorLightBulbAutoFix.foreground#6cc1a5
  • editorLineNumber.activeForeground#3ae73a
  • editorLineNumber.foreground#78716c80
  • editorLink.activeForeground#a8a29e
  • editorOverviewRuler.addedForeground#27c827
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.commonContentForeground#78716c
  • editorOverviewRuler.deletedForeground#7f1d1d
  • editorOverviewRuler.errorForeground#dc2626
  • editorOverviewRuler.findMatchForeground#7e9e8326
  • editorOverviewRuler.infoForeground#6cc1a5
  • editorOverviewRuler.modifiedForeground#6cc1a5
  • editorOverviewRuler.rangeHighlightForeground#7e9e8308
  • editorOverviewRuler.warningForeground#bfcd92
  • editorRuler.foreground#1c1917
  • editorStickyScroll.background#120f0e
  • editorStickyScrollHover.background#1c1917
  • editorSuggestWidget.background#1c1917
  • editorSuggestWidget.border#292524
  • editorSuggestWidget.foreground#a8a29e
  • editorSuggestWidget.highlightForeground#3ae73a
  • editorWarning.foreground#bfcd92
  • editorWhitespace.foreground#a8a29e26
  • editorWidget.background#1c1917
  • editorWidget.border#292524
  • editorWidget.foreground#a8a29e
  • errorForeground#dc2626
  • extensionButton.prominentBackground#235f1c
  • extensionButton.prominentForeground#d6d3d1
  • extensionIcon.starForeground#3ae73a
  • extensionIcon.verifiedForeground#2ba151
  • focusBorder#3ae73a
  • foreground#78716c
  • gitDecoration.conflictingResourceForeground#bfcd92
  • gitDecoration.deletedResourceForeground#7f1d1d
  • gitDecoration.ignoredResourceForeground#78716c9a
  • gitDecoration.modifiedResourceForeground#6cc1a5
  • gitDecoration.untrackedResourceForeground#27c827
  • icon.foreground#78716cda
  • input.background#0a0807
  • input.border#292524
  • input.foreground#a8a29e
  • inputValidation.errorBackground#dc262680
  • inputValidation.errorBorder#dc2626
  • inputValidation.errorForeground#000
  • inputValidation.infoBackground#6cc1a580
  • inputValidation.infoBorder#6cc1a5
  • inputValidation.infoForeground#000
  • inputValidation.warningBackground#bfcd9280
  • inputValidation.warningBorder#bfcd92
  • inputValidation.warningForeground#000
  • list.activeSelectionBackground#183114
  • list.activeSelectionForeground#d6d3d1
  • list.dropBackground#235f1c80
  • list.errorForeground#dc2626
  • list.focusForeground#a8a29e
  • list.highlightForeground#3ae73a
  • list.hoverBackground#18311454
  • list.hoverForeground#a8a29e
  • list.inactiveSelectionBackground#183114a9
  • list.inactiveSelectionForeground#a8a29e
  • list.warningForeground#bfcd92
  • minimap.background#000
  • minimap.findMatchHighlight#3ae73a
  • minimap.selectionHighlight#235f1cc0
  • notificationCenter.border#292524
  • notificationCenterHeader.background#1c1917
  • notificationCenterHeader.foreground#a8a29e
  • notifications.background#1c1917f3
  • notifications.border#292524
  • notifications.foreground#a8a29e
  • notificationsErrorIcon.foreground#dc2626
  • notificationsInfoIcon.foreground#6cc1a5
  • notificationsWarningIcon.foreground#bfcd92
  • notificationToast.border#292524
  • panel.border#1c1917
  • panelTitle.activeBorder#3ae73a
  • panelTitle.activeForeground#a8a29e
  • peekView.border#292524
  • peekViewEditor.background#1c1917c0
  • peekViewEditor.matchHighlightBackground#7e9e830b
  • peekViewEditorGutter.background#1c1917c0
  • peekViewResult.background#1c1917
  • peekViewResult.fileForeground#78716c
  • peekViewResult.lineForeground#a8a29e
  • peekViewResult.matchHighlightBackground#7e9e830f
  • peekViewResult.selectionBackground#235f1cc0
  • peekViewResult.selectionForeground#d6d3d1
  • peekViewTitle.background#1c1917
  • peekViewTitleDescription.foreground#78716c
  • peekViewTitleLabel.foreground#d6d3d1
  • pickerGroup.border#292524
  • pickerGroup.foreground#3ae73a
  • progressBar.background#3ae73a
  • sash.hoverBorder#3ae73a
  • scrollbar.shadow#000
  • selection.background#235f1cc0
  • settings.headerForeground#a8a29e
  • settings.modifiedItemIndicator#3ae73a
  • sideBar.background#0a0807
  • sideBar.border#1c1917
  • sideBar.foreground#78716c
  • sideBarSectionHeader.background#0a0807
  • sideBarSectionHeader.border#1c1917
  • sideBarSectionHeader.foreground#a8a29e
  • sideBarTitle.foreground#a8a29e
  • statusBar.background#1c1917
  • statusBar.border#292524
  • statusBar.debuggingBackground#3ae73a
  • statusBar.debuggingForeground#000
  • statusBar.focusBorder#00000000
  • statusBar.foreground#a8a29e
  • statusBar.noFolderBackground#1c1917
  • statusBar.noFolderBorder#292524
  • statusBarItem.prominentBackground#183114a9
  • statusBarItem.prominentHoverBackground#183114
  • tab.activeBorderTop#3ae73a
  • tab.activeForeground#d6d3d1
  • tab.border#0a0807
  • tab.inactiveBackground#120f0e
  • tab.inactiveForeground#78716c
  • tab.unfocusedActiveForeground#78716c
  • tab.unfocusedInactiveForeground#a8a29e80
  • terminal.ansiBlack#000
  • terminal.ansiBlue#55757f
  • terminal.ansiBrightBlack#120f0e
  • terminal.ansiBrightBlue#93a7af
  • terminal.ansiBrightCyan#9ad7d8
  • terminal.ansiBrightGreen#95c8b1
  • terminal.ansiBrightMagenta#fca5a5
  • terminal.ansiBrightRed#dc2626
  • terminal.ansiBrightWhite#f5f5f4
  • terminal.ansiBrightYellow#d9d385
  • terminal.ansiCyan#60a2a3
  • terminal.ansiGreen#57755d
  • terminal.ansiMagenta#ef4444
  • terminal.ansiRed#991b1b
  • terminal.ansiWhite#d6d3d1
  • terminal.ansiYellow#a09b4e
  • terminal.background#000
  • terminal.foreground#a8a29e
  • textLink.activeForeground#3ae73a
  • textLink.foreground#3ae73a
  • textPreformat.foreground#2ba151
  • titleBar.activeBackground#1c1917
  • titleBar.activeForeground#a8a29e
  • titleBar.border#292524
  • titleBar.inactiveBackground#1c1917
  • tree.indentGuidesStroke#1c1917

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text.html#2ba151
emphasisitalic
strongbold
header#3ae73a
*url*, *link*, *uri*underline
invalid#ef4444
punctuation, meta.embedded, source.js, source.ts, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx#037223
comment, punctuation.definition.comment, unused.comment, wildcard.comment#57534eitalic
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class, comment.block.documentation storage.type.class punctuation#bfcd92c0italic
comment.block.documentation variable, comment.block.documentation variable.other#037223italic
constant, constant.numeric, constant.language, support.constant, meta.preprocessor.numeric, keyword.other.unit#3ae73a
string, meta.preprocessor.string#3ae73a
constant.character, constant.regexp#bfcd92
punctuation.section.embedded, meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.interpolation.begin.bracket, punctuation.definition.interpolation.end.bracket, punctuation.definition.variable.makefile, string.interpolated punctuation.definition.string.begin, string.interpolated punctuation.definition.string.end#7e9e83
string.regexp#95c8b1
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, support.other.parenthesis.regexp#037223
punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#2ba151
keyword.operator.quantifier.regexp#2ba151
string.regexp keyword.other#037223
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#73db8a
entity.name.type.class, support.class, keyword.primitive-datatypes.swift, storage.type.attribute.swift, storage.type.objc, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, keyword.struct.go, keyword.interface.go, storage.type.c, keyword.type.cs, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.groovy, source.groovy storage.type, storage.type.php, storage.type.haskell, storage.type.ocaml, source.java storage.type, storage.type.core.rust, storage.class.std.rust, source.powershell entity.other.attribute-name, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#7e9e83
entity.name.type.interface, support.interface, support.type, meta.return-type, meta.return.type, meta.type.name, meta.cast, meta.type.annotation, keyword.primitive-datatypes.swift, storage.type.attribute.swift, storage.type.objc, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, keyword.struct.go, keyword.interface.go, storage.type.c, keyword.type.cs, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.groovy, source.groovy storage.type, storage.type.php, storage.type.haskell, storage.type.ocaml, source.java storage.type, storage.type.core.rust, storage.class.std.rust, source.powershell entity.other.attribute-name, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#7e9e83
variable.language.this, variable.language.super, variable.this, variable.language.special.self, variable.parameter.function.language.special.self, keyword.other.this, keyword.expressions-and-types.swift#73db8a
keyword, punctuation.definition.keyword#73db8a
keyword.operator#73db8a
keyword.operator.ternary#73db8a
variable.language, keyword.control.new, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python, meta.preprocessor, meta.diff.header, meta.selector#73db8a
keyword.control, keyword.control punctuation.definition.keyword#73db8a
keyword.import, keyword.package, keyword.control.directive, keyword.control.export, keyword.control.import, keyword.other.import, keyword.other.package, meta.import keyword.control, support.type.object.module#73db8a
storage.modifier.import.java, storage.modifier.package.java, variable.language.wildcard.java#7e9e83
entity.name.function, entity.name.method, entity.name.static.function-call, support.function, support.constant.handlebars, variable.function, keyword.operator.function.infix, meta.function-call.generic, meta.function-call.object, meta.function-call.static, meta.function.python, meta.function-call.php, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, entity.name.function.go#46b191
entity.name.variable.parameter, variable.parameter, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, meta.at-rule.function variable, meta.at-rule.mixin variable#2ba151
meta.decorator entity.name.function, storage.type.annotation, meta.decorator punctuation.decorator, meta.decorator variable.other.readwrite, meta.decorator variable.other.property, meta.decorator variable.other.object#7e9e83
meta.parameter.type.variable, support.variable, variable.name, variable.other, variable, string.constant.other.placeholder, meta.object-literal.key, meta.decorator.ts meta.object.member, constant.other.key.perl#2ba151
meta.object-binding-pattern-variable variable.object.property, meta.import variable.other.readwrite, meta.export variable.other.readwrite#037223
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#2ba151
meta.export.default variable.other.readwrite#2ba151
entity.name.function.target.makefile, entity.name.section.toml, variable.other.key.toml, entity.name.tag.yaml#95c8b1
constant.other.date, constant.other.timestamp#3ae73a
variable.other.alias.yaml#46b191
source.json meta.structure.dictionary.json support.type.property-name.json#95c8b1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#6cc1a5
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#73db8a
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#2ba151
entity.name.tag#46b191bold
tag.close entity.name.tag#2f7c64
entity.other.attribute-name, meta.tag.inline.any.html, meta.tag.sgml#2ba151
entity.other.attribute-name.id#bfcd92
punctuation.definition.entity.html#bfcd92
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#037223
entity.other.attribute-name.parent-selector#73db8a
meta.function-call.arguments#2ba151
meta.selectionset.graphql variable#3ae73a
meta.selectionset.graphql meta.arguments variable#2ba151
source.shell support.function.builtin#7e9e83
source.shell support.function.builtin#46b191
punctuation.definition.variable.shell, source.shell variable.other#7e9e83
string.interpolated.backtick.shell, string.interpolated.dollar.shell#95c8b1
meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string#2ba151
meta.scope.prerequisites#7e9e83
entity.name.function.target#3ae73abold
meta.function-parameters.lisp#46b191
markup.underlineunderline
markup.bold#bfcd92bold
markup.italicitalic
markup.heading, entity.name.section#3ae73abold
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#73db8aunderline
markup.underline.link, markup.underline.link.image#037223
markup.inline.raw, markup.raw.restructuredtext#95c8b1
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#95c8b1
entity.name.directive.restructuredtext, markup.quote#3ae73a
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext, markup.punctuation.quote.beginning, markup.punctuation.list.beginning#3ae73a
meta.separator.markdown#037223
punctuation.definition.constant.restructuredtext#3ae73a
markup.inserted#95c8b1
markup.deleted#ef4444
markup.changed#73db8a
source.go entity.name.import#3ae73a
source.go entity.name.type#2ba151
keyword.control.cucumber.table#46b191
metatag.php#46b191
support.function.git-rebase#95c8b1
constant.sha.git-rebase#3ae73a