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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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