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#241914
  • activityBar.border#3d2d27
  • activityBar.dropBackground#241914
  • activityBar.foreground#d6dfee
  • activityBarBadge.background#5d768f
  • activityBarBadge.foreground#d6dfee
  • badge.background#96a8bf
  • badge.foreground#241914
  • button.background#5d768f80
  • button.foreground#d6dfee
  • button.hoverBackground#5d768f60
  • button.secondaryBackground#3d2d2780
  • button.secondaryForeground#d6dfee
  • button.secondaryHoverBackground#767a7e60
  • debugToolBar.background#241914
  • diffEditor.insertedTextBackground#d3923f30
  • diffEditor.removedTextBackground#d0850d30
  • dropdown.background#241914
  • dropdown.border#3d2d27
  • dropdown.foreground#d6dfee
  • editor.background#241914
  • editor.findMatchBackground#8294a770
  • editor.findMatchHighlightBackground#d0850d30
  • editor.findRangeHighlightBackground#8294a770
  • editor.foreground#d6dfee
  • editor.hoverHighlightBackground#767a7e50
  • editor.lineHighlightBackground#3d2d2760
  • editor.lineHighlightBorder#3d2d2700
  • editor.selectionBackground#767a7e40
  • editor.selectionHighlightBackground#8294a720
  • editorBracketHighlight.foreground1#d6dfee
  • editorBracketHighlight.foreground2#767a7e
  • editorBracketHighlight.foreground3#5d768f
  • editorBracketHighlight.foreground4#767a7e
  • editorBracketHighlight.foreground5#d0850d
  • editorBracketHighlight.foreground6#d3923f
  • editorBracketMatch.background#767a7e80
  • editorBracketMatch.border#24191400
  • editorCodeLens.foreground#8294a790
  • editorCursor.foreground#d6dfee
  • editorError.foreground#975f0e
  • editorGroup.background#3d2d27
  • editorGroup.border#3d2d27
  • editorGroup.dropBackground#3d2d2760
  • editorGroupHeader.noTabsBackground#3d2d27
  • editorGroupHeader.tabsBackground#241914
  • editorGroupHeader.tabsBorder#3d2d27
  • editorGutter.addedBackground#d3923f
  • editorGutter.background#24191400
  • editorGutter.deletedBackground#d0850d
  • editorGutter.modifiedBackground#8294a7
  • editorHoverWidget.background#241914
  • editorHoverWidget.border#3d2d27
  • editorIndentGuide.activeBackground#8294a750
  • editorIndentGuide.background#8294a720
  • editorInfo.foreground#5d768f
  • editorLineNumber.activeForeground#d3923f
  • editorLineNumber.foreground#605d5a
  • editorLink.activeForeground#d6dfee
  • editorOverviewRuler.addedForeground#8294a7
  • editorOverviewRuler.border#24191400
  • editorOverviewRuler.commonContentForeground#767a7e
  • editorOverviewRuler.currentContentForeground#5d768f
  • editorOverviewRuler.deletedForeground#8294a7
  • editorOverviewRuler.errorForeground#d0850d
  • editorOverviewRuler.findMatchForeground#96a8bf
  • editorOverviewRuler.incomingContentForeground#767a7e
  • editorOverviewRuler.infoForeground#96a8bf
  • editorOverviewRuler.modifiedForeground#8294a7
  • editorOverviewRuler.rangeHighlightForeground#96a8bf
  • editorOverviewRuler.selectionHighlightForeground#605d5a
  • editorOverviewRuler.warningForeground#d0850d
  • editorOverviewRuler.wordHighlightForeground#605d5a
  • editorOverviewRuler.wordHighlightStrongForeground#605d5a
  • editorRuler.foreground#8294a740
  • editorSuggestWidget.background#241914
  • editorSuggestWidget.border#3d2d27
  • editorSuggestWidget.foreground#d6dfee
  • editorSuggestWidget.highlightForeground#767a7e
  • editorSuggestWidget.selectedBackground#3d2d2760
  • editorWarning.foreground#d0850d
  • editorWhitespace.foreground#8294a720
  • editorWidget.background#241914
  • editorWidget.border#3d2d27
  • errorForeground#d0850d
  • extensionButton.prominentBackground#d3923f80
  • extensionButton.prominentHoverBackground#d3923f30
  • focusBorder#3d2d27
  • foreground#d6dfee
  • gitDecoration.conflictingResourceForeground#767a7e
  • gitDecoration.deletedResourceForeground#975f0e
  • gitDecoration.ignoredResourceForeground#656a6b
  • gitDecoration.modifiedResourceForeground#d0850d
  • gitDecoration.untrackedResourceForeground#b5761a
  • input.background#d6dfee05
  • input.border#3d2d27
  • input.foreground#d6dfee
  • input.placeholderForeground#d6dfee60
  • inputOption.activeBorder#d6dfee60
  • inputValidation.errorBackground#975f0e80
  • inputValidation.errorBorder#d0850d
  • inputValidation.infoBackground#5d768f80
  • inputValidation.infoBorder#8294a7
  • inputValidation.warningBackground#d0850d80
  • inputValidation.warningBorder#d3923f
  • list.activeSelectionBackground#3d2d2780
  • list.activeSelectionForeground#8294a7
  • list.dropBackground#3d2d27
  • list.focusBackground#3d2d27
  • list.focusForeground#d6dfee
  • list.highlightForeground#767a7e
  • list.hoverBackground#3d2d2780
  • list.hoverForeground#b1c1d7
  • list.inactiveSelectionBackground#3d2d2780
  • list.inactiveSelectionForeground#767a7e
  • menu.separatorBackground#3d2d27
  • merge.border#24191400
  • merge.currentContentBackground#5d768f20
  • merge.currentHeaderBackground#5d768f40
  • merge.incomingContentBackground#767a7e20
  • merge.incomingHeaderBackground#767a7e40
  • notification.background#241914
  • notification.buttonBackground#605d5a
  • notification.buttonForeground#d6dfee
  • notification.buttonHoverBackground#605d5a50
  • notification.errorBackground#d0850d
  • notification.errorForeground#241914
  • notification.foreground#d6dfee
  • notification.infoBackground#8294a7
  • notification.infoForeground#241914
  • notification.warningBackground#d3923f
  • notification.warningForeground#241914
  • notificationsErrorIcon.foreground#d0850d
  • notificationsInfoIcon.foreground#8294a7
  • notificationsWarningIcon.foreground#d3923f
  • panel.border#3d2d27
  • panelTitle.activeForeground#d6dfee
  • peekView.border#3d2d27
  • peekViewEditor.background#3d2d2750
  • peekViewEditor.matchHighlightBackground
  • peekViewEditorGutter.background#3d2d2750
  • peekViewResult.background#3d2d2750
  • peekViewResult.fileForeground#d6dfee
  • peekViewResult.matchHighlightBackground#8294a730
  • peekViewResult.selectionBackground#8294a730
  • peekViewResult.selectionForeground#8294a730
  • peekViewTitle.background#3d2d2750
  • peekViewTitleDescription.foreground#96a8bf
  • peekViewTitleLabel.foreground#d6dfee
  • progressBar.background#767a7e
  • scrollbar.shadow#241914
  • scrollbarSlider.activeBackground#767a7e
  • scrollbarSlider.background#50494599
  • scrollbarSlider.hoverBackground#605d5a
  • selection.background#767a7e80
  • sideBar.background#241914
  • sideBar.border#3d2d27
  • sideBar.foreground#b1c1d7
  • sideBarSectionHeader.background#24191400
  • sideBarSectionHeader.foreground#d6dfee
  • sideBarTitle.foreground#d6dfee
  • statusBar.background#241914
  • statusBar.border#3d2d27
  • statusBar.debuggingBackground#d0850d
  • statusBar.debuggingBorder#24191400
  • statusBar.debuggingForeground#241914
  • statusBar.foreground#d6dfee
  • statusBar.noFolderBackground#241914
  • statusBar.noFolderBorder#24191400
  • statusBar.prominentBackground#767a7e
  • statusBar.prominentHoverBackground#767a7e70
  • symbolIcon.arrayForeground#8294a7
  • symbolIcon.booleanForeground#96a8bf
  • symbolIcon.classForeground#d3923f
  • symbolIcon.colorForeground#d6dfee
  • symbolIcon.constantForeground#8294a7
  • symbolIcon.constructorForeground#96a8bf
  • symbolIcon.enumeratorForeground#96a8bf
  • symbolIcon.enumeratorMemberForeground#8294a7
  • symbolIcon.eventForeground#d3923f
  • symbolIcon.fieldForeground#d6dfee
  • symbolIcon.fileForeground#d6dfee
  • symbolIcon.folderForeground#d6dfee
  • symbolIcon.functionForeground#d3923f
  • symbolIcon.interfaceForeground#d3923f
  • symbolIcon.keyForeground#d3923f
  • symbolIcon.keywordForeground#d0850d
  • symbolIcon.methodForeground#d3923f
  • symbolIcon.moduleForeground#96a8bf
  • symbolIcon.namespaceForeground#96a8bf
  • symbolIcon.nullForeground#8294a7
  • symbolIcon.numberForeground#96a8bf
  • symbolIcon.objectForeground#96a8bf
  • symbolIcon.operatorForeground#d0850d
  • symbolIcon.packageForeground#96a8bf
  • symbolIcon.propertyForeground#8294a7
  • symbolIcon.referenceForeground#8294a7
  • symbolIcon.snippetForeground#d6dfee
  • symbolIcon.stringForeground#d3923f
  • symbolIcon.structForeground#d3923f
  • symbolIcon.textForeground#d6dfee
  • symbolIcon.typeParameterForeground#8294a7
  • symbolIcon.unitForeground#d6dfee
  • symbolIcon.variableForeground#8294a7
  • tab.activeBackground#3d2d27
  • tab.activeBorder#767a7e
  • tab.activeForeground#d6dfee
  • tab.border#24191400
  • tab.inactiveBackground#241914
  • tab.inactiveForeground#8294a7
  • tab.unfocusedActiveBorder#24191400
  • tab.unfocusedActiveForeground#8294a7
  • tab.unfocusedInactiveForeground#767a7e
  • terminal.ansiBlack#3d2d27
  • terminal.ansiBlue#5d768f
  • terminal.ansiBrightBlack#767a7e
  • terminal.ansiBrightBlue#8294a7
  • terminal.ansiBrightCyan#8294a7
  • terminal.ansiBrightGreen#d3923f
  • terminal.ansiBrightMagenta#96a8bf
  • terminal.ansiBrightRed#d0850d
  • terminal.ansiBrightWhite#d6dfee
  • terminal.ansiBrightYellow#d3923f
  • terminal.ansiCyan#767a7e
  • terminal.ansiGreen#b5761a
  • terminal.ansiMagenta#767a7e
  • terminal.ansiRed#975f0e
  • terminal.ansiWhite#8294a7
  • terminal.ansiYellow#d0850d
  • terminal.background#241914
  • terminal.foreground#d6dfee
  • textLink.activeForeground#5d768f
  • textLink.foreground#8294a7
  • titleBar.activeBackground#241914
  • titleBar.activeForeground#d6dfee
  • titleBar.inactiveBackground#241914
  • widget.shadow#24191430

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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