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.background#272427
  • activityBar.border#3c2729
  • activityBar.dropBackground#272427
  • activityBar.foreground#fbbea3
  • activityBarBadge.background#7c6966
  • activityBarBadge.foreground#fbbea3
  • badge.background#f19681
  • badge.foreground#272427
  • button.background#7c696680
  • button.foreground#fbbea3
  • button.hoverBackground#7c696660
  • button.secondaryBackground#3c272980
  • button.secondaryForeground#fbbea3
  • button.secondaryHoverBackground#7c696660
  • debugToolBar.background#272427
  • diffEditor.insertedTextBackground#ffc25530
  • diffEditor.removedTextBackground#fd503330
  • dropdown.background#272427
  • dropdown.border#3c2729
  • dropdown.foreground#fbbea3
  • editor.background#272427
  • editor.findMatchBackground#b09f9c70
  • editor.findMatchHighlightBackground#ff853330
  • editor.findRangeHighlightBackground#b09f9c70
  • editor.foreground#fbbea3
  • editor.hoverHighlightBackground#7c696650
  • editor.lineHighlightBackground#3c272960
  • editor.lineHighlightBorder#3c272900
  • editor.selectionBackground#7c696640
  • editor.selectionHighlightBackground#b09f9c20
  • editorBracketHighlight.foreground1#fbbea3
  • editorBracketHighlight.foreground2#7c6966
  • editorBracketHighlight.foreground3#7c6966
  • editorBracketHighlight.foreground4#b7665c
  • editorBracketHighlight.foreground5#ff8533
  • editorBracketHighlight.foreground6#ffc255
  • editorBracketMatch.background#7c696680
  • editorBracketMatch.border#27242700
  • editorCodeLens.foreground#b09f9c90
  • editorCursor.foreground#fbbea3
  • editorError.foreground#ff2322
  • editorGroup.background#3c2729
  • editorGroup.border#3c2729
  • editorGroup.dropBackground#3c272960
  • editorGroupHeader.noTabsBackground#3c2729
  • editorGroupHeader.tabsBackground#272427
  • editorGroupHeader.tabsBorder#3c2729
  • editorGutter.addedBackground#ffc255
  • editorGutter.background#27242700
  • editorGutter.deletedBackground#fd5033
  • editorGutter.modifiedBackground#b09f9c
  • editorHoverWidget.background#272427
  • editorHoverWidget.border#3c2729
  • editorIndentGuide.activeBackground#b09f9c50
  • editorIndentGuide.background#b09f9c20
  • editorInfo.foreground#7c6966
  • editorLineNumber.activeForeground#ffc255
  • editorLineNumber.foreground#7c6966
  • editorLink.activeForeground#fbbea3
  • editorOverviewRuler.addedForeground#b09f9c
  • editorOverviewRuler.border#27242700
  • editorOverviewRuler.commonContentForeground#7c6966
  • editorOverviewRuler.currentContentForeground#7c6966
  • editorOverviewRuler.deletedForeground#b09f9c
  • editorOverviewRuler.errorForeground#fd5033
  • editorOverviewRuler.findMatchForeground#b09f9c
  • editorOverviewRuler.incomingContentForeground#7c6966
  • editorOverviewRuler.infoForeground#f19681
  • editorOverviewRuler.modifiedForeground#b09f9c
  • editorOverviewRuler.rangeHighlightForeground#b09f9c
  • editorOverviewRuler.selectionHighlightForeground#7c6966
  • editorOverviewRuler.warningForeground#ff8533
  • editorOverviewRuler.wordHighlightForeground#7c6966
  • editorOverviewRuler.wordHighlightStrongForeground#7c6966
  • editorRuler.foreground#b09f9c40
  • editorSuggestWidget.background#272427
  • editorSuggestWidget.border#3c2729
  • editorSuggestWidget.foreground#fbbea3
  • editorSuggestWidget.highlightForeground#7c6966
  • editorSuggestWidget.selectedBackground#3c272960
  • editorWarning.foreground#ff8533
  • editorWhitespace.foreground#b09f9c20
  • editorWidget.background#272427
  • editorWidget.border#3c2729
  • errorForeground#fd5033
  • extensionButton.prominentBackground#ffc25580
  • extensionButton.prominentHoverBackground#ffc25530
  • focusBorder#3c2729
  • foreground#fbbea3
  • gitDecoration.conflictingResourceForeground#b7665c
  • gitDecoration.deletedResourceForeground#ff2322
  • gitDecoration.ignoredResourceForeground#7c6966
  • gitDecoration.modifiedResourceForeground#ff8533
  • gitDecoration.untrackedResourceForeground#b7665c
  • input.background#fbbea305
  • input.border#3c2729
  • input.foreground#fbbea3
  • input.placeholderForeground#fbbea360
  • inputOption.activeBorder#fbbea360
  • inputValidation.errorBackground#ff232280
  • inputValidation.errorBorder#fd5033
  • inputValidation.infoBackground#7c696680
  • inputValidation.infoBorder#b09f9c
  • inputValidation.warningBackground#ff853380
  • inputValidation.warningBorder#ffc255
  • list.activeSelectionBackground#3c272980
  • list.activeSelectionForeground#b09f9c
  • list.dropBackground#3c2729
  • list.focusBackground#3c2729
  • list.focusForeground#fbbea3
  • list.highlightForeground#7c6966
  • list.hoverBackground#3c272980
  • list.hoverForeground#fbbea3
  • list.inactiveSelectionBackground#3c272980
  • list.inactiveSelectionForeground#7c6966
  • menu.separatorBackground#3c2729
  • merge.border#27242700
  • merge.currentContentBackground#7c696620
  • merge.currentHeaderBackground#7c696640
  • merge.incomingContentBackground#7c696620
  • merge.incomingHeaderBackground#7c696640
  • notification.background#272427
  • notification.buttonBackground#7c6966
  • notification.buttonForeground#fbbea3
  • notification.buttonHoverBackground#7c696650
  • notification.errorBackground#fd5033
  • notification.errorForeground#272427
  • notification.foreground#fbbea3
  • notification.infoBackground#b09f9c
  • notification.infoForeground#272427
  • notification.warningBackground#ffc255
  • notification.warningForeground#272427
  • notificationsErrorIcon.foreground#fd5033
  • notificationsInfoIcon.foreground#b09f9c
  • notificationsWarningIcon.foreground#ffc255
  • panel.border#3c2729
  • panelTitle.activeForeground#fbbea3
  • peekView.border#3c2729
  • peekViewEditor.background#3c272950
  • peekViewEditor.matchHighlightBackground
  • peekViewEditorGutter.background#3c272950
  • peekViewResult.background#3c272950
  • peekViewResult.fileForeground#fbbea3
  • peekViewResult.matchHighlightBackground#b09f9c30
  • peekViewResult.selectionBackground#b09f9c30
  • peekViewResult.selectionForeground#b09f9c30
  • peekViewTitle.background#3c272950
  • peekViewTitleDescription.foreground#b09f9c
  • peekViewTitleLabel.foreground#fbbea3
  • progressBar.background#7c6966
  • scrollbar.shadow#272427
  • scrollbarSlider.activeBackground#7c6966
  • scrollbarSlider.background#50494599
  • scrollbarSlider.hoverBackground#7c6966
  • selection.background#7c696680
  • sideBar.background#272427
  • sideBar.border#3c2729
  • sideBar.foreground#fbbea3
  • sideBarSectionHeader.background#27242700
  • sideBarSectionHeader.foreground#fbbea3
  • sideBarTitle.foreground#fbbea3
  • statusBar.background#272427
  • statusBar.border#3c2729
  • statusBar.debuggingBackground#ff8533
  • statusBar.debuggingBorder#27242700
  • statusBar.debuggingForeground#272427
  • statusBar.foreground#fbbea3
  • statusBar.noFolderBackground#272427
  • statusBar.noFolderBorder#27242700
  • statusBar.prominentBackground#7c6966
  • statusBar.prominentHoverBackground#7c696670
  • symbolIcon.arrayForeground#b09f9c
  • symbolIcon.booleanForeground#f19681
  • symbolIcon.classForeground#ffc255
  • symbolIcon.colorForeground#fbbea3
  • symbolIcon.constantForeground#b09f9c
  • symbolIcon.constructorForeground#f19681
  • symbolIcon.enumeratorForeground#f19681
  • symbolIcon.enumeratorMemberForeground#b09f9c
  • symbolIcon.eventForeground#ffc255
  • symbolIcon.fieldForeground#fbbea3
  • symbolIcon.fileForeground#fbbea3
  • symbolIcon.folderForeground#fbbea3
  • symbolIcon.functionForeground#ffc255
  • symbolIcon.interfaceForeground#ffc255
  • symbolIcon.keyForeground#ffc255
  • symbolIcon.keywordForeground#fd5033
  • symbolIcon.methodForeground#ffc255
  • symbolIcon.moduleForeground#f19681
  • symbolIcon.namespaceForeground#f19681
  • symbolIcon.nullForeground#b09f9c
  • symbolIcon.numberForeground#f19681
  • symbolIcon.objectForeground#f19681
  • symbolIcon.operatorForeground#ff8533
  • symbolIcon.packageForeground#f19681
  • symbolIcon.propertyForeground#b09f9c
  • symbolIcon.referenceForeground#b09f9c
  • symbolIcon.snippetForeground#fbbea3
  • symbolIcon.stringForeground#ffc255
  • symbolIcon.structForeground#ffc255
  • symbolIcon.textForeground#fbbea3
  • symbolIcon.typeParameterForeground#b09f9c
  • symbolIcon.unitForeground#fbbea3
  • symbolIcon.variableForeground#b09f9c
  • tab.activeBackground#3c2729
  • tab.activeBorder#7c6966
  • tab.activeForeground#fbbea3
  • tab.border#27242700
  • tab.inactiveBackground#272427
  • tab.inactiveForeground#b09f9c
  • tab.unfocusedActiveBorder#27242700
  • tab.unfocusedActiveForeground#b09f9c
  • tab.unfocusedInactiveForeground#7c6966
  • terminal.ansiBlack#3c2729
  • terminal.ansiBlue#7c6966
  • terminal.ansiBrightBlack#7c6966
  • terminal.ansiBrightBlue#b09f9c
  • terminal.ansiBrightCyan#b09f9c
  • terminal.ansiBrightGreen#ffc255
  • terminal.ansiBrightMagenta#f19681
  • terminal.ansiBrightRed#fd5033
  • terminal.ansiBrightWhite#fbbea3
  • terminal.ansiBrightYellow#ffc255
  • terminal.ansiCyan#7c6966
  • terminal.ansiGreen#b7665c
  • terminal.ansiMagenta#b7665c
  • terminal.ansiRed#ff2322
  • terminal.ansiWhite#b09f9c
  • terminal.ansiYellow#ff8533
  • terminal.background#272427
  • terminal.foreground#fbbea3
  • textLink.activeForeground#7c6966
  • textLink.foreground#b09f9c
  • titleBar.activeBackground#272427
  • titleBar.activeForeground#fbbea3
  • titleBar.inactiveBackground#272427
  • widget.shadow#27242730

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#f19681
#fbbea3
emphasisitalic
strongbold
header#7c6966
comment, punctuation.definition.comment#7c6966italic
constant, support.constant, variable.arguments#f19681
constant.rgb-value#fbbea3
entity.name.selector#b09f9c
entity.other.attribute-name#ffc255
entity.name.tag, punctuation.tag#b09f9c
invalid, invalid.illegal#ff2322
invalid.deprecated#b7665c
meta.selector#b09f9c
meta.preprocessor#ff8533
meta.preprocessor.string#ffc255
meta.preprocessor.numeric#ffc255
meta.header.diff#ff8533
storage#fd5033
storage.modifier#ff8533
string#ffc255
string.tag#ffc255
string.value#ffc255
string.regexp#ff8533
string.escape#fd5033
string.quasi#b09f9c
string.entity#ffc255
object#fbbea3
module.node#b09f9c
support.type.property-name#7c6966
keyword#fd5033
keyword.control#fd5033
meta.block#f19681
keyword.control.module#b09f9c
keyword.control.less#ff8533
keyword.operator#b09f9c
keyword.operator.new#ff8533
keyword.other.unit#ffc255
metatag.php#ff8533
support.function.git-rebase#7c6966
constant.sha.git-rebase#ffc255
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, variable.class#ffc255
variable.this, support.variable#f19681
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type#ffc255
storage.type.function, entity.function, entity.name.function.static#b09f9c
entity.name.function.function-call#b09f9c
support.function.builtin#ff8533
entity.name.method, entity.name.method.function-call, entity.name.static.function-call#7c6966
brace#fbbea3
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder#b09f9c
prototype#f19681
storage.type.class#fd5033
punctuation#b09f9c
punctuation.quoted#fbbea3
punctuation.quasi#fd5033
*url*, *link*, *uri*underline
meta.function.python, entity.name.function.python#b09f9c
storage.type.function.python, storage.modifier.declaration, storage.type.class.python#fd5033
meta.function-call.generic#b09f9c
meta.function-call.arguments#fbbea3
entity.name.function.decorator#ffc255bold
constant.other.capsbold
keyword.operator.logical#fd5033
punctuation.definition.logical-expression#ff8533
string.inperpolated.dollar.shell#ff8533
string.interpolated.dollar.shell, string.interpolated.backtick.shell#b09f9c
keyword.control.directive#b09f9c
support.function.C99#ffc255
meta.function.cs, entity.name.function.cs, entity.name.type.namespace.cs#ffc255
keyword.other.using.cs, entity.name.variable.field.cs, entity.name.variable.local.cs, variable.other.readwrite.cs#b09f9c
keyword.other.this.cs, keyword.other.base.cs#f19681
meta.scope.prerequisites#ffc255
entity.name.function.target#ffc255bold
storage.modifier.import.java, storage.modifier.package.java#b09f9c
keyword.other.import.java, keyword.other.package.java#b09f9c
storage.type.java#ffc255
storage.type.annotation#b09f9cbold
keyword.other.documentation.javadoc#b09f9c
comment.block.javadoc variable.parameter.java#ffc255bold
source.java variable.other.object, source.java variable.other.definition.java#fbbea3
meta.function-parameters.lisp#ffc255
markup.underlineunderline
string.other.link.title.markdown#7c6966underline
markup.underline.link#f19681
markup.bold#ff8533bold
markup.heading#ff8533bold
markup.italicitalic
markup.inserted#ffc255
markup.deleted#fd5033
markup.changed#ff8533
markup.punctuation.quote.beginning#b7665c
markup.punctuation.list.beginning#b09f9c
markup.inline.raw, markup.fenced_code.block#b09f9c
string.quoted.double.json#b09f9c
source.json meta.structure.dictionary.json support.type.property-name.json#ffc255
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b09f9c
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#f19681
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#ffc255
entity.other.attribute-name.css#ff8533
source.css meta.selector#fbbea3
support.type.property-name.css#ff8533
entity.other.attribute-name.class#ffc255
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc#fd5033
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss#fd5033
entity.name.tag.cssnormal
punctuation.definition.tag#b09f9c
text.html entity.name.tag, text.html punctuation.tag#b09f9cbold
source.js variable.language#ff8533
source.ts variable.language#ff8533
source.go storage.type#ffc255
source.go entity.name.import#ffc255
source.go keyword.package, source.go keyword.import#b09f9c
source.go keyword.interface, source.go keyword.struct#b09f9c
source.go entity.name.type#fbbea3
source.go entity.name.function#f19681
keyword.control.cucumber.table#b09f9c
source.reason string.double, source.reason string.regexp#ffc255
source.reason keyword.control.less#b09f9c
source.reason entity.name.function#b09f9c
source.reason support.property-value, source.reason entity.name.filename#ff8533
source.powershell variable.other.member.powershell#ff8533
source.powershell support.function.powershell#ffc255
source.powershell support.function.attribute.powershell#b09f9c
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell#ff8533
FOREST-FLY by AndreaCombette - VS Code Theme