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#3d2d27
  • activityBar.border#3d2d27
  • activityBar.dropBackground#3d2d27
  • activityBar.foreground#b1c1d7
  • activityBarBadge.background#6d859c
  • activityBarBadge.foreground#b1c1d7
  • badge.background#96a8bf
  • badge.foreground#3d2d27
  • button.background#6d859c80
  • button.foreground#b1c1d7
  • button.hoverBackground#6d859c60
  • button.secondaryBackground#3d2d2780
  • button.secondaryForeground#b1c1d7
  • button.secondaryHoverBackground#a16b3860
  • debugToolBar.background#3d2d27
  • diffEditor.insertedTextBackground#d3923f30
  • diffEditor.removedTextBackground#a16b3830
  • dropdown.background#3d2d27
  • dropdown.border#3d2d27
  • dropdown.foreground#b1c1d7
  • editor.background#3d2d27
  • editor.findMatchBackground#96a8bf70
  • editor.findMatchHighlightBackground#d3923f30
  • editor.findRangeHighlightBackground#96a8bf70
  • editor.foreground#b1c1d7
  • editor.hoverHighlightBackground#6d859c50
  • editor.lineHighlightBackground#3d2d2760
  • editor.lineHighlightBorder#3d2d2700
  • editor.selectionBackground#6d859c40
  • editor.selectionHighlightBackground#96a8bf20
  • editorBracketHighlight.foreground1#b1c1d7
  • editorBracketHighlight.foreground2#96a8bf
  • editorBracketHighlight.foreground3#6d859c
  • editorBracketHighlight.foreground4#a16b38
  • editorBracketHighlight.foreground5#d3923f
  • editorBracketHighlight.foreground6#b1c1d7
  • editorBracketMatch.background#a16b3880
  • editorBracketMatch.border#3d2d2700
  • editorCodeLens.foreground#96a8bf90
  • editorCursor.foreground#b1c1d7
  • editorError.foreground#a16b38
  • editorGroup.background#3d2d27
  • editorGroup.border#3d2d27
  • editorGroup.dropBackground#3d2d2760
  • editorGroupHeader.noTabsBackground#3d2d27
  • editorGroupHeader.tabsBackground#3d2d27
  • editorGroupHeader.tabsBorder#3d2d27
  • editorGutter.addedBackground#d3923f
  • editorGutter.background#3d2d2700
  • editorGutter.deletedBackground#a16b38
  • editorGutter.modifiedBackground#96a8bf
  • editorHoverWidget.background#3d2d27
  • editorHoverWidget.border#3d2d27
  • editorIndentGuide.activeBackground#96a8bf50
  • editorIndentGuide.background#96a8bf20
  • editorInfo.foreground#6d859c
  • editorLineNumber.activeForeground#b1c1d7
  • editorLineNumber.foreground#495d65
  • editorLink.activeForeground#b1c1d7
  • editorOverviewRuler.addedForeground#96a8bf
  • editorOverviewRuler.border#3d2d2700
  • editorOverviewRuler.commonContentForeground#a16b38
  • editorOverviewRuler.currentContentForeground#6d859c
  • editorOverviewRuler.deletedForeground#96a8bf
  • editorOverviewRuler.errorForeground#a16b38
  • editorOverviewRuler.findMatchForeground#96a8bf
  • editorOverviewRuler.incomingContentForeground#6d859c
  • editorOverviewRuler.infoForeground#96a8bf
  • editorOverviewRuler.modifiedForeground#96a8bf
  • editorOverviewRuler.rangeHighlightForeground#96a8bf
  • editorOverviewRuler.selectionHighlightForeground#495d65
  • editorOverviewRuler.warningForeground#d3923f
  • editorOverviewRuler.wordHighlightForeground#495d65
  • editorOverviewRuler.wordHighlightStrongForeground#495d65
  • editorRuler.foreground#96a8bf40
  • editorSuggestWidget.background#3d2d27
  • editorSuggestWidget.border#3d2d27
  • editorSuggestWidget.foreground#b1c1d7
  • editorSuggestWidget.highlightForeground#6d859c
  • editorSuggestWidget.selectedBackground#3d2d2760
  • editorWarning.foreground#d3923f
  • editorWhitespace.foreground#96a8bf20
  • editorWidget.background#3d2d27
  • editorWidget.border#3d2d27
  • errorForeground#a16b38
  • extensionButton.prominentBackground#d3923f80
  • extensionButton.prominentHoverBackground#d3923f30
  • focusBorder#3d2d27
  • foreground#b1c1d7
  • gitDecoration.conflictingResourceForeground#a16b38
  • gitDecoration.deletedResourceForeground#a16b38
  • gitDecoration.ignoredResourceForeground#495d65
  • gitDecoration.modifiedResourceForeground#d3923f
  • gitDecoration.untrackedResourceForeground#d3923f
  • input.background#b1c1d705
  • input.border#3d2d27
  • input.foreground#b1c1d7
  • input.placeholderForeground#b1c1d760
  • inputOption.activeBorder#b1c1d760
  • inputValidation.errorBackground#a16b3880
  • inputValidation.errorBorder#a16b38
  • inputValidation.infoBackground#6d859c80
  • inputValidation.infoBorder#96a8bf
  • inputValidation.warningBackground#d3923f80
  • inputValidation.warningBorder#b1c1d7
  • list.activeSelectionBackground#3d2d2780
  • list.activeSelectionForeground#96a8bf
  • list.dropBackground#3d2d27
  • list.focusBackground#3d2d27
  • list.focusForeground#b1c1d7
  • list.highlightForeground#6d859c
  • list.hoverBackground#3d2d2780
  • list.hoverForeground#b1c1d7
  • list.inactiveSelectionBackground#3d2d2780
  • list.inactiveSelectionForeground#6d859c
  • menu.separatorBackground#3d2d27
  • merge.border#3d2d2700
  • merge.currentContentBackground#6d859c20
  • merge.currentHeaderBackground#6d859c40
  • merge.incomingContentBackground#6d859c20
  • merge.incomingHeaderBackground#6d859c40
  • notification.background#3d2d27
  • notification.buttonBackground#495d65
  • notification.buttonForeground#b1c1d7
  • notification.buttonHoverBackground#495d6550
  • notification.errorBackground#a16b38
  • notification.errorForeground#3d2d27
  • notification.foreground#b1c1d7
  • notification.infoBackground#96a8bf
  • notification.infoForeground#3d2d27
  • notification.warningBackground#b1c1d7
  • notification.warningForeground#3d2d27
  • notificationsErrorIcon.foreground#a16b38
  • notificationsInfoIcon.foreground#96a8bf
  • notificationsWarningIcon.foreground#b1c1d7
  • panel.border#3d2d27
  • panelTitle.activeForeground#b1c1d7
  • peekView.border#3d2d27
  • peekViewEditor.background#3d2d2750
  • peekViewEditorGutter.background#3d2d2750
  • peekViewResult.background#3d2d2750
  • peekViewResult.fileForeground#b1c1d7
  • peekViewResult.matchHighlightBackground#96a8bf30
  • peekViewResult.selectionBackground#96a8bf30
  • peekViewResult.selectionForeground#96a8bf30
  • peekViewTitle.background#3d2d2750
  • peekViewTitleDescription.foreground#96a8bf
  • peekViewTitleLabel.foreground#b1c1d7
  • progressBar.background#6d859c
  • scrollbar.shadow#3d2d27
  • scrollbarSlider.activeBackground#6d859c
  • scrollbarSlider.background#474a4b99
  • scrollbarSlider.hoverBackground#495d65
  • selection.background#6d859c80
  • sideBar.background#3d2d27
  • sideBar.border#3d2d27
  • sideBar.foreground#b1c1d7
  • sideBarSectionHeader.background#3d2d2700
  • sideBarSectionHeader.foreground#b1c1d7
  • sideBarTitle.foreground#b1c1d7
  • statusBar.background#3d2d27
  • statusBar.border#3d2d27
  • statusBar.debuggingBackground#d3923f
  • statusBar.debuggingBorder#3d2d2700
  • statusBar.debuggingForeground#3d2d27
  • statusBar.foreground#b1c1d7
  • statusBar.noFolderBackground#3d2d27
  • statusBar.noFolderBorder#3d2d2700
  • statusBar.prominentBackground#6d859c
  • statusBar.prominentHoverBackground#6d859c70
  • symbolIcon.arrayForeground#96a8bf
  • symbolIcon.booleanForeground#96a8bf
  • symbolIcon.classForeground#b1c1d7
  • symbolIcon.colorForeground#b1c1d7
  • symbolIcon.constantForeground#96a8bf
  • symbolIcon.constructorForeground#96a8bf
  • symbolIcon.enumeratorForeground#96a8bf
  • symbolIcon.enumeratorMemberForeground#96a8bf
  • symbolIcon.eventForeground#b1c1d7
  • symbolIcon.fieldForeground#b1c1d7
  • symbolIcon.fileForeground#b1c1d7
  • symbolIcon.folderForeground#b1c1d7
  • symbolIcon.functionForeground#d3923f
  • symbolIcon.interfaceForeground#b1c1d7
  • symbolIcon.keyForeground#d3923f
  • symbolIcon.keywordForeground#a16b38
  • symbolIcon.methodForeground#d3923f
  • symbolIcon.moduleForeground#96a8bf
  • symbolIcon.namespaceForeground#96a8bf
  • symbolIcon.nullForeground#96a8bf
  • symbolIcon.numberForeground#96a8bf
  • symbolIcon.objectForeground#96a8bf
  • symbolIcon.operatorForeground#d3923f
  • symbolIcon.packageForeground#96a8bf
  • symbolIcon.propertyForeground#96a8bf
  • symbolIcon.referenceForeground#96a8bf
  • symbolIcon.snippetForeground#b1c1d7
  • symbolIcon.stringForeground#d3923f
  • symbolIcon.structForeground#b1c1d7
  • symbolIcon.textForeground#b1c1d7
  • symbolIcon.typeParameterForeground#96a8bf
  • symbolIcon.unitForeground#b1c1d7
  • symbolIcon.variableForeground#96a8bf
  • tab.activeBackground#474a4b
  • tab.activeBorder#6d859c
  • tab.activeForeground#b1c1d7
  • tab.border#3d2d2700
  • tab.inactiveBackground#3d2d27
  • tab.inactiveForeground#96a8bf
  • tab.unfocusedActiveBorder#3d2d2700
  • tab.unfocusedActiveForeground#96a8bf
  • tab.unfocusedInactiveForeground#a16b38
  • terminal.ansiBlack#3d2d27
  • terminal.ansiBlue#6d859c
  • terminal.ansiBrightBlack#a16b38
  • terminal.ansiBrightBlue#96a8bf
  • terminal.ansiBrightCyan#96a8bf
  • terminal.ansiBrightGreen#d3923f
  • terminal.ansiBrightMagenta#96a8bf
  • terminal.ansiBrightRed#a16b38
  • terminal.ansiBrightWhite#b1c1d7
  • terminal.ansiBrightYellow#b1c1d7
  • terminal.ansiCyan#6d859c
  • terminal.ansiGreen#d3923f
  • terminal.ansiMagenta#a16b38
  • terminal.ansiRed#a16b38
  • terminal.ansiWhite#96a8bf
  • terminal.ansiYellow#d3923f
  • terminal.background#3d2d27
  • terminal.foreground#b1c1d7
  • textLink.activeForeground#6d859c
  • textLink.foreground#96a8bf
  • titleBar.activeBackground#3d2d27
  • titleBar.activeForeground#b1c1d7
  • titleBar.inactiveBackground#3d2d27
  • widget.shadow#3d2d2730

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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