Skip to main content
Coding Theme

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.activeBackground#76C7A522
  • activityBar.activeBorder#76C7A5
  • activityBar.activeFocusBorder#76C7A5
  • activityBar.background#1A1A1A
  • activityBar.border#333333
  • activityBar.foreground#EDEDED
  • activityBar.inactiveForeground#8D8D8D
  • activityBarBadge.background#76C7A5
  • activityBarBadge.foreground#1A1A1A
  • badge.background#76C7A5
  • badge.foreground#1A1A1A
  • breadcrumb.activeSelectionForeground#76C7A5
  • breadcrumb.background#1A1A1A
  • breadcrumb.focusForeground#EDEDED
  • breadcrumb.foreground#8D8D8D
  • breadcrumbPicker.background#2A2A2A
  • button.background#76C7A5
  • button.border#76C7A5
  • button.foreground#1A1A1A
  • button.hoverBackground#76C7A5AA
  • button.secondaryBackground#8D8D8D
  • button.secondaryForeground#EDEDED
  • button.secondaryHoverBackground#8D8D8DAA
  • dropdown.background#2A2A2A
  • dropdown.border#333333
  • dropdown.foreground#EDEDED
  • dropdown.listBackground#2A2A2A
  • editor.background#1A1A1A
  • editor.currentFindMatchBackground#F4BE68AA
  • editor.findMatchBackground#F4BE6855
  • editor.findMatchHighlightBackground#F4BE6833
  • editor.foldBackground#3F5E5A22
  • editor.foreground#EDEDED
  • editor.inactiveSelectionBackground#3F5E5A33
  • editor.lineHighlightBackground#333333
  • editor.rangeHighlightBackground#3F5E5A22
  • editor.selectionBackground#3F5E5A77
  • editor.selectionHighlightBackground#3F5E5A44
  • editor.wordHighlightBackground#76C7A533
  • editor.wordHighlightStrongBackground#76C7A555
  • editorBracketHighlight.foreground1#F7A072
  • editorBracketHighlight.foreground2#76C7A5
  • editorBracketHighlight.foreground3#70AFFF
  • editorBracketHighlight.foreground4#D46A37
  • editorBracketHighlight.foreground5#F4BE68
  • editorBracketHighlight.foreground6#D1604D
  • editorBracketMatch.background#3F5E5A55
  • editorBracketMatch.border#3F5E5A
  • editorCodeLens.foreground#8D8D8D
  • editorCursor.background#1A1A1A
  • editorCursor.foreground#EDEDED
  • editorError.background#D1604D22
  • editorError.foreground#D1604D
  • editorGroup.background#1A1A1A
  • editorGroup.border#333333
  • editorGroup.dropBackground#3F5E5A44
  • editorGroupHeader.border#333333
  • editorGroupHeader.noTabsBackground#1A1A1A
  • editorGroupHeader.tabsBackground#2A2A2A
  • editorGroupHeader.tabsBorder#333333
  • editorGutter.addedBackground#76C7A5
  • editorGutter.background#1A1A1A
  • editorGutter.deletedBackground#D1604D
  • editorGutter.foldingControlForeground#8D8D8D
  • editorGutter.modifiedBackground#F4BE68
  • editorHint.foreground#8D8D8D
  • editorHoverWidget.background#2A2A2A
  • editorHoverWidget.border#333333
  • editorHoverWidget.foreground#EDEDED
  • editorHoverWidget.highlightForeground#76C7A5
  • editorHoverWidget.statusBarBackground#333333
  • editorIndentGuide.activeBackground#8D8D8D
  • editorIndentGuide.background#2E2E2E
  • editorInfo.background#70AFFF22
  • editorInfo.foreground#70AFFF
  • editorLineNumber.activeForeground#EDEDED
  • editorLineNumber.foreground#8D8D8D
  • editorOverviewRuler.addedForeground#76C7A5
  • editorOverviewRuler.background#1A1A1A
  • editorOverviewRuler.border#333333
  • editorOverviewRuler.commonContentForeground#8D8D8D
  • editorOverviewRuler.currentContentForeground#76C7A5
  • editorOverviewRuler.deletedForeground#D1604D
  • editorOverviewRuler.errorForeground#D1604D
  • editorOverviewRuler.findMatchForeground#F4BE68AA
  • editorOverviewRuler.incomingContentForeground#70AFFF
  • editorOverviewRuler.infoForeground#70AFFF
  • editorOverviewRuler.modifiedForeground#F4BE68
  • editorOverviewRuler.rangeHighlightForeground#3F5E5A
  • editorOverviewRuler.selectionHighlightForeground#3F5E5A
  • editorOverviewRuler.warningForeground#F4BE68
  • editorOverviewRuler.wordHighlightForeground#76C7A5
  • editorOverviewRuler.wordHighlightStrongForeground#76C7A5
  • editorParameterHint.background#2A2A2A
  • editorParameterHint.foreground#EDEDED
  • editorRuler.foreground#2E2E2E
  • editorSuggestWidget.background#2A2A2A
  • editorSuggestWidget.border#333333
  • editorSuggestWidget.focusHighlightForeground#76C7A5
  • editorSuggestWidget.foreground#EDEDED
  • editorSuggestWidget.highlightForeground#76C7A5
  • editorSuggestWidget.selectedBackground#3F5E5A
  • editorSuggestWidget.selectedForeground#EDEDED
  • editorSuggestWidget.selectedIconForeground#EDEDED
  • editorWarning.background#F4BE6822
  • editorWarning.foreground#F4BE68
  • editorWhitespace.foreground#2E2E2E
  • explorer.background#1A1A1A
  • explorer.foreground#EDEDED
  • extensionBadge.remoteBackground#70AFFF
  • extensionBadge.remoteForeground#1A1A1A
  • extensionButton.prominentBackground#76C7A5
  • extensionButton.prominentForeground#1A1A1A
  • extensionButton.prominentHoverBackground#76C7A5AA
  • gitDecoration.conflictingResourceForeground#D46A37
  • gitDecoration.deletedResourceForeground#D1604D
  • gitDecoration.ignoredResourceForeground#8D8D8D
  • gitDecoration.modifiedResourceForeground#F4BE68
  • gitDecoration.stageDeletedResourceForeground#D1604D
  • gitDecoration.stageModifiedResourceForeground#F4BE68
  • gitDecoration.submoduleResourceForeground#70AFFF
  • gitDecoration.untrackedResourceForeground#76C7A5
  • input.background#2A2A2A
  • input.border#333333
  • input.foreground#EDEDED
  • input.placeholderForeground#8D8D8D
  • inputOption.activeBackground#3F5E5A77
  • inputOption.activeBorder#76C7A5
  • inputOption.activeForeground#EDEDED
  • inputValidation.errorBackground#D1604D22
  • inputValidation.errorBorder#D1604D
  • inputValidation.infoBackground#70AFFF22
  • inputValidation.infoBorder#70AFFF
  • inputValidation.warningBackground#F4BE6822
  • inputValidation.warningBorder#F4BE68
  • keybindingLabel.background#3F5E5A44
  • keybindingLabel.border#3F5E5A
  • keybindingLabel.bottomBorder#3F5E5A
  • keybindingLabel.foreground#EDEDED
  • list.activeSelectionBackground#3F5E5A
  • list.activeSelectionForeground#EDEDED
  • list.activeSelectionIconForeground#EDEDED
  • list.deemphasizedForeground#8D8D8D
  • list.dropBackground#3F5E5A77
  • list.errorForeground#D1604D
  • list.focusBackground#3F5E5A
  • list.focusForeground#EDEDED
  • list.focusHighlightForeground#76C7A5
  • list.highlightForeground#76C7A5
  • list.hoverBackground#3F5E5A44
  • list.hoverForeground#EDEDED
  • list.inactiveSelectionBackground#3F5E5A77
  • list.inactiveSelectionForeground#EDEDED
  • list.inactiveSelectionIconForeground#EDEDED
  • list.invalidItemForeground#D1604D
  • list.warningForeground#F4BE68
  • menu.background#2A2A2A
  • menu.border#333333
  • menu.foreground#EDEDED
  • menu.selectionBackground#3F5E5A
  • menu.selectionBorder#76C7A5
  • menu.selectionForeground#EDEDED
  • menu.separatorBackground#333333
  • menubar.selectionBackground#3F5E5A
  • menubar.selectionBorder#76C7A5
  • menubar.selectionForeground#EDEDED
  • merge.border#333333
  • merge.commonContentBackground#8D8D8D22
  • merge.commonHeaderBackground#8D8D8D44
  • merge.currentContentBackground#76C7A522
  • merge.currentHeaderBackground#76C7A544
  • merge.incomingContentBackground#70AFFF22
  • merge.incomingHeaderBackground#70AFFF44
  • notificationCenter.border#333333
  • notificationCenterHeader.background#2A2A2A
  • notificationCenterHeader.foreground#EDEDED
  • notificationLink.foreground#76C7A5
  • notifications.background#2A2A2A
  • notifications.border#333333
  • notifications.foreground#EDEDED
  • notificationsErrorIcon.foreground#D1604D
  • notificationsInfoIcon.foreground#70AFFF
  • notificationsWarningIcon.foreground#F4BE68
  • notificationToast.border#333333
  • panel.background#1A1A1A
  • panel.border#333333
  • panel.dropBorder#76C7A5
  • panelInput.border#333333
  • panelSection.border#333333
  • panelSection.dropBackground#3F5E5A44
  • panelSectionHeader.background#2A2A2A
  • panelSectionHeader.border#333333
  • panelSectionHeader.foreground#EDEDED
  • panelTitle.activeBorder#76C7A5
  • panelTitle.activeForeground#EDEDED
  • panelTitle.inactiveForeground#8D8D8D
  • peekView.border#76C7A5
  • peekViewEditor.background#2A2A2A
  • peekViewEditor.matchHighlightBackground#F4BE6844
  • peekViewResult.background#2A2A2A
  • peekViewResult.fileForeground#EDEDED
  • peekViewResult.lineForeground#8D8D8D
  • peekViewResult.matchHighlightBackground#F4BE6844
  • peekViewResult.selectionBackground#3F5E5A77
  • peekViewResult.selectionForeground#EDEDED
  • peekViewTitle.background#333333
  • peekViewTitleDescription.foreground#8D8D8D
  • peekViewTitleLabel.foreground#EDEDED
  • progressBar.background#76C7A5
  • quickInput.background#2A2A2A
  • quickInput.foreground#EDEDED
  • quickInputList.focusBackground#3F5E5A
  • quickInputList.focusForeground#EDEDED
  • quickInputList.focusIconForeground#EDEDED
  • quickInputTitle.background#333333
  • scrollbar.shadow#000000AA
  • scrollbarSlider.activeBackground#3F5E5A
  • scrollbarSlider.background#3F5E5A77
  • scrollbarSlider.hoverBackground#3F5E5AAA
  • selection.background#3F5E5A77
  • settings.checkboxBackground#2A2A2A
  • settings.checkboxBorder#333333
  • settings.checkboxForeground#EDEDED
  • settings.dropdownBackground#2A2A2A
  • settings.dropdownBorder#333333
  • settings.dropdownForeground#EDEDED
  • settings.dropdownListBorder#333333
  • settings.headerForeground#EDEDED
  • settings.modifiedItemIndicator#76C7A5
  • settings.numberInputBackground#2A2A2A
  • settings.numberInputBorder#333333
  • settings.numberInputForeground#EDEDED
  • settings.textInputBackground#2A2A2A
  • settings.textInputBorder#333333
  • settings.textInputForeground#EDEDED
  • sideBar.background#1A1A1A
  • sideBar.border#333333
  • sideBar.foreground#EDEDED
  • sideBarSectionHeader.background#2A2A2A
  • sideBarSectionHeader.border#333333
  • sideBarSectionHeader.foreground#EDEDED
  • sideBarTitle.foreground#EDEDED
  • statusBar.background#1A1A1A
  • statusBar.border#333333
  • statusBar.debuggingBackground#D46A37
  • statusBar.debuggingForeground#EDEDED
  • statusBar.foreground#EDEDED
  • statusBar.noFolderBackground#8D8D8D
  • statusBar.noFolderForeground#EDEDED
  • statusBarItem.activeBackground#3F5E5A77
  • statusBarItem.errorBackground#D1604D
  • statusBarItem.errorForeground#EDEDED
  • statusBarItem.hoverBackground#3F5E5A44
  • statusBarItem.prominentBackground#76C7A5
  • statusBarItem.prominentForeground#1A1A1A
  • statusBarItem.prominentHoverBackground#76C7A5AA
  • statusBarItem.warningBackground#F4BE68
  • statusBarItem.warningForeground#1A1A1A
  • symbolIcon.arrayForeground#F7A072
  • symbolIcon.booleanForeground#70AFFF
  • symbolIcon.classForeground#70AFFF
  • symbolIcon.colorForeground#F7A072
  • symbolIcon.constantForeground#70AFFF
  • symbolIcon.constructorForeground#76C7A5
  • symbolIcon.enumeratorForeground#70AFFF
  • symbolIcon.enumeratorMemberForeground#70AFFF
  • symbolIcon.eventForeground#D46A37
  • symbolIcon.fieldForeground#76C7A5
  • symbolIcon.fileForeground#EDEDED
  • symbolIcon.folderForeground#76C7A5
  • symbolIcon.functionForeground#76C7A5
  • symbolIcon.interfaceForeground#70AFFF
  • symbolIcon.keyForeground#D46A37
  • symbolIcon.keywordForeground#D46A37
  • symbolIcon.methodForeground#76C7A5
  • symbolIcon.moduleForeground#70AFFF
  • symbolIcon.namespaceForeground#70AFFF
  • symbolIcon.nullForeground#D46A37
  • symbolIcon.numberForeground#70AFFF
  • symbolIcon.objectForeground#F7A072
  • symbolIcon.operatorForeground#D46A37
  • symbolIcon.packageForeground#70AFFF
  • symbolIcon.propertyForeground#76C7A5
  • symbolIcon.referenceForeground#D46A37
  • symbolIcon.snippetForeground#F7A072
  • symbolIcon.stringForeground#F7A072
  • symbolIcon.structForeground#70AFFF
  • symbolIcon.textForeground#F7A072
  • symbolIcon.typeParameterForeground#70AFFF
  • symbolIcon.unitForeground#70AFFF
  • symbolIcon.variableForeground#76C7A5
  • tab.activeBackground#1A1A1A
  • tab.activeBorder#76C7A5
  • tab.activeBorderTop#76C7A5
  • tab.activeForeground#EDEDED
  • tab.border#333333
  • tab.hoverBackground#3F5E5A44
  • tab.hoverBorder#3F5E5A
  • tab.hoverForeground#EDEDED
  • tab.inactiveBackground#2A2A2A
  • tab.inactiveForeground#8D8D8D
  • tab.lastPinnedBorder#333333
  • tab.unfocusedActiveForeground#EDEDED
  • tab.unfocusedInactiveForeground#8D8D8D
  • tabBar.background#2A2A2A
  • tabBar.border#333333
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#70AFFF
  • terminal.ansiBrightBlack#8D8D8D
  • terminal.ansiBrightBlue#70AFFF
  • terminal.ansiBrightCyan#F7A072
  • terminal.ansiBrightGreen#76C7A5
  • terminal.ansiBrightMagenta#D46A37
  • terminal.ansiBrightRed#D1604D
  • terminal.ansiBrightWhite#EDEDED
  • terminal.ansiBrightYellow#F4BE68
  • terminal.ansiCyan#F7A072
  • terminal.ansiGreen#76C7A5
  • terminal.ansiMagenta#D46A37
  • terminal.ansiRed#D1604D
  • terminal.ansiWhite#EDEDED
  • terminal.ansiYellow#F4BE68
  • terminal.background#1A1A1A
  • terminal.border#333333
  • terminal.foreground#EDEDED
  • terminal.selectionBackground#3F5E5A77
  • terminalCursor.background#1A1A1A
  • terminalCursor.foreground#EDEDED
  • titleBar.activeBackground#1A1A1A
  • titleBar.activeForeground#EDEDED
  • titleBar.border#333333
  • titleBar.inactiveBackground#2A2A2A
  • titleBar.inactiveForeground#8D8D8D
  • toolbar.activeBackground#3F5E5A77
  • toolbar.hoverBackground#3F5E5A44
  • widget.border#333333
  • widget.shadow#000000AA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8D8D8Ditalic
comment.block.documentation, comment.line.documentation, string.quoted.docstring#A8A8A8italic
string, constant.other.symbol#F7A072
constant.character.escape, constant.character.format.placeholder, punctuation.definition.template-expression, punctuation.definition.interpolation#F7A072
string.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp#F7A072
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined#EDEDED
constant, variable.other.constant, support.constant, variable.other.enummember#EDEDED
keyword, storage#D46A37
keyword.control, keyword.other.using, keyword.other.import, keyword.other.package#D46A37bold
keyword.operator#A8A8A8
punctuation.separator, punctuation.terminator, punctuation.definition.block#A8A8A8
entity.name.function, support.function, variable.function, meta.function-call#76C7A5
entity.name.function.member, meta.method-call, support.function.method#76C7A5
entity.name.type, entity.name.class, entity.name.interface, entity.name.struct, entity.name.enum, support.type, storage.type#70AFFF
entity.name.namespace, entity.name.module, entity.name.package, support.other.module#70AFFF
variable.other.readwrite, variable.other.object, variable.language.this, variable.language.self#EDEDED
variable.parameter, meta.function.parameters variable.other#EDEDED
variable.other.property, variable.other.member, variable.other.field, meta.property-name, support.type.property-name.json, meta.mapping.key.yaml string.unquoted.plain.out.yaml#EDEDED
meta.decorator, entity.name.function.decorator, storage.type.annotation, meta.declaration.annotation, punctuation.definition.annotation#D46A37
entity.name.function.preprocessor, entity.name.function.macro, meta.preprocessor, keyword.control.directive, meta.attribute.rust#D46A37
entity.name.tag, entity.name.tag.yaml, constant.other.anchor.yaml, variable.other.alias.yaml#D46A37
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.tsx#EDEDED
variable.other.normal.shell, variable.other.positional.shell, variable.other.bracket.shell#EDEDED
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust#D46A37italic
invalid, invalid.illegal#EDEDED
invalid.deprecated, entity.other.attribute-name.deprecated#F4BE68strikethrough
markup.heading#70AFFFbold
markup.bold#EDEDEDbold
markup.underline.link, string.other.link#76C7A5underline