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—
emphasis—italic
strong—bold
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.caps—bold
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.underline—underline
string.other.link.title.markdown#767a7eunderline
markup.underline.link#855d44—
markup.bold#975f0ebold
markup.heading#975f0ebold
markup.italic—italic
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.css—normal
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—