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#FFCC3322
  • activityBar.activeBorder#FFCC33
  • activityBar.activeFocusBorder#FFCC33
  • activityBar.background#070503
  • activityBar.border#331A00
  • activityBar.foreground#FFB000
  • activityBar.inactiveForeground#664400
  • activityBarBadge.background#FFCC33
  • activityBarBadge.foreground#070503
  • badge.background#FFCC33
  • badge.foreground#070503
  • breadcrumb.activeSelectionForeground#FFCC33
  • breadcrumb.background#070503
  • breadcrumb.focusForeground#FFB000
  • breadcrumb.foreground#664400
  • breadcrumbPicker.background#331A00
  • button.background#FFCC33
  • button.border#FFCC33
  • button.foreground#070503
  • button.hoverBackground#FFCC33AA
  • button.secondaryBackground#664400
  • button.secondaryForeground#FFB000
  • button.secondaryHoverBackground#664400AA
  • dropdown.background#331A00
  • dropdown.border#331A00
  • dropdown.foreground#FFB000
  • dropdown.listBackground#331A00
  • editor.background#070503
  • editor.currentFindMatchBackground#FFAA00AA
  • editor.findMatchBackground#FFAA0055
  • editor.findMatchHighlightBackground#FFAA0033
  • editor.foldBackground#CC880022
  • editor.foreground#FFB000
  • editor.inactiveSelectionBackground#CC880033
  • editor.lineHighlightBackground#331A00
  • editor.rangeHighlightBackground#CC880022
  • editor.selectionBackground#CC8800
  • editor.selectionForeground#070503
  • editor.selectionHighlightBackground#CC880044
  • editor.wordHighlightBackground#FFCC3333
  • editor.wordHighlightStrongBackground#FFCC3355
  • editorBracketHighlight.foreground1#FFAA00
  • editorBracketHighlight.foreground2#FFCC33
  • editorBracketHighlight.foreground3#FFAA00
  • editorBracketHighlight.foreground4#FF8800
  • editorBracketHighlight.foreground5#FFAA00
  • editorBracketHighlight.foreground6#FF8800
  • editorBracketMatch.background#CC880055
  • editorBracketMatch.border#CC8800
  • editorCodeLens.foreground#664400
  • editorCursor.background#070503
  • editorCursor.foreground#FFCC33
  • editorError.background#FF880022
  • editorError.foreground#FF8800
  • editorGroup.background#070503
  • editorGroup.border#331A00
  • editorGroup.dropBackground#CC880044
  • editorGroupHeader.border#331A00
  • editorGroupHeader.noTabsBackground#070503
  • editorGroupHeader.tabsBackground#331A00
  • editorGroupHeader.tabsBorder#331A00
  • editorGutter.addedBackground#FFCC33
  • editorGutter.background#070503
  • editorGutter.deletedBackground#FF8800
  • editorGutter.foldingControlForeground#664400
  • editorGutter.modifiedBackground#FFAA00
  • editorHint.foreground#664400
  • editorHoverWidget.background#331A00
  • editorHoverWidget.border#331A00
  • editorHoverWidget.foreground#FFB000
  • editorHoverWidget.highlightForeground#FFCC33
  • editorHoverWidget.statusBarBackground#331A00
  • editorIndentGuide.activeBackground#664400
  • editorIndentGuide.background#331A00
  • editorInfo.background#FFAA0022
  • editorInfo.foreground#FFAA00
  • editorLineNumber.activeForeground#FFCC33
  • editorLineNumber.foreground#664400
  • editorOverviewRuler.addedForeground#FFCC33
  • editorOverviewRuler.background#070503
  • editorOverviewRuler.border#331A00
  • editorOverviewRuler.commonContentForeground#664400
  • editorOverviewRuler.currentContentForeground#FFCC33
  • editorOverviewRuler.deletedForeground#FF8800
  • editorOverviewRuler.errorForeground#FF8800
  • editorOverviewRuler.findMatchForeground#FFAA00AA
  • editorOverviewRuler.incomingContentForeground#FFAA00
  • editorOverviewRuler.infoForeground#FFAA00
  • editorOverviewRuler.modifiedForeground#FFAA00
  • editorOverviewRuler.rangeHighlightForeground#CC8800
  • editorOverviewRuler.selectionHighlightForeground#CC8800
  • editorOverviewRuler.warningForeground#FFAA00
  • editorOverviewRuler.wordHighlightForeground#FFCC33
  • editorOverviewRuler.wordHighlightStrongForeground#FFCC33
  • editorParameterHint.background#331A00
  • editorParameterHint.foreground#FFB000
  • editorRuler.foreground#331A00
  • editorSuggestWidget.background#331A00
  • editorSuggestWidget.border#331A00
  • editorSuggestWidget.focusHighlightForeground#FFCC33
  • editorSuggestWidget.foreground#FFB000
  • editorSuggestWidget.highlightForeground#FFCC33
  • editorSuggestWidget.selectedBackground#CC8800
  • editorSuggestWidget.selectedForeground#070503
  • editorSuggestWidget.selectedIconForeground#070503
  • editorWarning.background#FFAA0022
  • editorWarning.foreground#FFAA00
  • editorWhitespace.foreground#331A00
  • explorer.background#070503
  • explorer.foreground#FFB000
  • extensionBadge.remoteBackground#FFAA00
  • extensionBadge.remoteForeground#070503
  • extensionButton.prominentBackground#FFCC33
  • extensionButton.prominentForeground#070503
  • extensionButton.prominentHoverBackground#FFCC33AA
  • gitDecoration.conflictingResourceForeground#FF8800
  • gitDecoration.deletedResourceForeground#FF8800
  • gitDecoration.ignoredResourceForeground#664400
  • gitDecoration.modifiedResourceForeground#FFAA00
  • gitDecoration.stageDeletedResourceForeground#FF8800
  • gitDecoration.stageModifiedResourceForeground#FFAA00
  • gitDecoration.submoduleResourceForeground#FFAA00
  • gitDecoration.untrackedResourceForeground#FFCC33
  • input.background#331A00
  • input.border#331A00
  • input.foreground#FFB000
  • input.placeholderForeground#664400
  • inputOption.activeBackground#CC880077
  • inputOption.activeBorder#FFCC33
  • inputOption.activeForeground#FFB000
  • inputValidation.errorBackground#FF880022
  • inputValidation.errorBorder#FF8800
  • inputValidation.infoBackground#FFAA0022
  • inputValidation.infoBorder#FFAA00
  • inputValidation.warningBackground#FFAA0022
  • inputValidation.warningBorder#FFAA00
  • keybindingLabel.background#CC880044
  • keybindingLabel.border#CC8800
  • keybindingLabel.bottomBorder#CC8800
  • keybindingLabel.foreground#FFB000
  • list.activeSelectionBackground#CC8800
  • list.activeSelectionForeground#070503
  • list.activeSelectionIconForeground#070503
  • list.deemphasizedForeground#664400
  • list.dropBackground#CC880077
  • list.errorForeground#FF8800
  • list.focusBackground#CC8800
  • list.focusForeground#070503
  • list.focusHighlightForeground#FFCC33
  • list.highlightForeground#FFCC33
  • list.hoverBackground#CC880044
  • list.hoverForeground#FFB000
  • list.inactiveSelectionBackground#CC880077
  • list.inactiveSelectionForeground#FFB000
  • list.inactiveSelectionIconForeground#FFB000
  • list.invalidItemForeground#FF8800
  • list.warningForeground#FFAA00
  • menu.background#331A00
  • menu.border#331A00
  • menu.foreground#FFB000
  • menu.selectionBackground#CC8800
  • menu.selectionBorder#FFCC33
  • menu.selectionForeground#070503
  • menu.separatorBackground#331A00
  • menubar.selectionBackground#CC8800
  • menubar.selectionBorder#FFCC33
  • menubar.selectionForeground#070503
  • merge.border#331A00
  • merge.commonContentBackground#66440022
  • merge.commonHeaderBackground#66440044
  • merge.currentContentBackground#FFCC3322
  • merge.currentHeaderBackground#FFCC3344
  • merge.incomingContentBackground#FFAA0022
  • merge.incomingHeaderBackground#FFAA0044
  • notificationCenter.border#331A00
  • notificationCenterHeader.background#331A00
  • notificationCenterHeader.foreground#FFB000
  • notificationLink.foreground#FFCC33
  • notifications.background#331A00
  • notifications.border#331A00
  • notifications.foreground#FFB000
  • notificationsErrorIcon.foreground#FF8800
  • notificationsInfoIcon.foreground#FFAA00
  • notificationsWarningIcon.foreground#FFAA00
  • notificationToast.border#331A00
  • panel.background#070503
  • panel.border#331A00
  • panel.dropBorder#FFCC33
  • panelInput.border#331A00
  • panelSection.border#331A00
  • panelSection.dropBackground#CC880044
  • panelSectionHeader.background#331A00
  • panelSectionHeader.border#331A00
  • panelSectionHeader.foreground#FFB000
  • panelTitle.activeBorder#FFCC33
  • panelTitle.activeForeground#FFB000
  • panelTitle.inactiveForeground#664400
  • peekView.border#FFCC33
  • peekViewEditor.background#331A00
  • peekViewEditor.matchHighlightBackground#FFAA0044
  • peekViewResult.background#331A00
  • peekViewResult.fileForeground#FFB000
  • peekViewResult.lineForeground#664400
  • peekViewResult.matchHighlightBackground#FFAA0044
  • peekViewResult.selectionBackground#CC880077
  • peekViewResult.selectionForeground#FFB000
  • peekViewTitle.background#331A00
  • peekViewTitleDescription.foreground#664400
  • peekViewTitleLabel.foreground#FFB000
  • progressBar.background#FFCC33
  • quickInput.background#331A00
  • quickInput.foreground#FFB000
  • quickInputList.focusBackground#CC8800
  • quickInputList.focusForeground#070503
  • quickInputList.focusIconForeground#070503
  • quickInputTitle.background#331A00
  • scrollbar.shadow#070503AA
  • scrollbarSlider.activeBackground#CC8800
  • scrollbarSlider.background#CC880077
  • scrollbarSlider.hoverBackground#CC8800AA
  • selection.background#CC880077
  • settings.checkboxBackground#331A00
  • settings.checkboxBorder#331A00
  • settings.checkboxForeground#FFB000
  • settings.dropdownBackground#331A00
  • settings.dropdownBorder#331A00
  • settings.dropdownForeground#FFB000
  • settings.dropdownListBorder#331A00
  • settings.headerForeground#FFB000
  • settings.modifiedItemIndicator#FFCC33
  • settings.numberInputBackground#331A00
  • settings.numberInputBorder#331A00
  • settings.numberInputForeground#FFB000
  • settings.textInputBackground#331A00
  • settings.textInputBorder#331A00
  • settings.textInputForeground#FFB000
  • sideBar.background#070503
  • sideBar.border#331A00
  • sideBar.foreground#FFB000
  • sideBarSectionHeader.background#331A00
  • sideBarSectionHeader.border#331A00
  • sideBarSectionHeader.foreground#FFB000
  • sideBarTitle.foreground#FFB000
  • statusBar.background#070503
  • statusBar.border#331A00
  • statusBar.debuggingBackground#FF8800
  • statusBar.debuggingForeground#070503
  • statusBar.foreground#FFB000
  • statusBar.noFolderBackground#664400
  • statusBar.noFolderForeground#FFB000
  • statusBarItem.activeBackground#CC880077
  • statusBarItem.errorBackground#FF8800
  • statusBarItem.errorForeground#070503
  • statusBarItem.hoverBackground#CC880044
  • statusBarItem.prominentBackground#FFCC33
  • statusBarItem.prominentForeground#070503
  • statusBarItem.prominentHoverBackground#FFCC33AA
  • statusBarItem.warningBackground#FFAA00
  • statusBarItem.warningForeground#070503
  • symbolIcon.arrayForeground#FFAA00
  • symbolIcon.booleanForeground#FFAA00
  • symbolIcon.classForeground#FFAA00
  • symbolIcon.colorForeground#FFAA00
  • symbolIcon.constantForeground#FFAA00
  • symbolIcon.constructorForeground#FFCC33
  • symbolIcon.enumeratorForeground#FFAA00
  • symbolIcon.enumeratorMemberForeground#FFAA00
  • symbolIcon.eventForeground#FF8800
  • symbolIcon.fieldForeground#FFCC33
  • symbolIcon.fileForeground#FFB000
  • symbolIcon.folderForeground#FFCC33
  • symbolIcon.functionForeground#FFCC33
  • symbolIcon.interfaceForeground#FFAA00
  • symbolIcon.keyForeground#FF8800
  • symbolIcon.keywordForeground#FFCC33
  • symbolIcon.methodForeground#FFCC33
  • symbolIcon.moduleForeground#FFAA00
  • symbolIcon.namespaceForeground#FFAA00
  • symbolIcon.nullForeground#FF8800
  • symbolIcon.numberForeground#FF8800
  • symbolIcon.objectForeground#FFAA00
  • symbolIcon.operatorForeground#FFB000
  • symbolIcon.packageForeground#FFAA00
  • symbolIcon.propertyForeground#FFCC33
  • symbolIcon.referenceForeground#FF8800
  • symbolIcon.snippetForeground#FFAA00
  • symbolIcon.stringForeground#FFAA00
  • symbolIcon.structForeground#FFAA00
  • symbolIcon.textForeground#FFAA00
  • symbolIcon.typeParameterForeground#FFAA00
  • symbolIcon.unitForeground#FFAA00
  • symbolIcon.variableForeground#FFCC33
  • tab.activeBackground#070503
  • tab.activeBorder#FFCC33
  • tab.activeBorderTop#FFCC33
  • tab.activeForeground#FFB000
  • tab.border#331A00
  • tab.hoverBackground#CC880044
  • tab.hoverBorder#CC8800
  • tab.hoverForeground#FFB000
  • tab.inactiveBackground#331A00
  • tab.inactiveForeground#664400
  • tab.lastPinnedBorder#331A00
  • tab.unfocusedActiveForeground#FFB000
  • tab.unfocusedInactiveForeground#664400
  • tabBar.background#331A00
  • tabBar.border#331A00
  • terminal.ansiBlack#331A00
  • terminal.ansiBlue#FF8800
  • terminal.ansiBrightBlack#664400
  • terminal.ansiBrightBlue#FFCC33
  • terminal.ansiBrightCyan#FFCC33
  • terminal.ansiBrightGreen#FFCC33
  • terminal.ansiBrightMagenta#FFCC33
  • terminal.ansiBrightRed#FFCC33
  • terminal.ansiBrightWhite#FFF5CC
  • terminal.ansiBrightYellow#FFCC33
  • terminal.ansiCyan#FF8800
  • terminal.ansiGreen#FF8800
  • terminal.ansiMagenta#FF8800
  • terminal.ansiRed#FF8800
  • terminal.ansiWhite#FFB000
  • terminal.ansiYellow#FF8800
  • terminal.background#070503
  • terminal.border#331A00
  • terminal.foreground#FFB000
  • terminal.selectionBackground#CC880077
  • terminalCursor.background#070503
  • terminalCursor.foreground#FFCC33
  • titleBar.activeBackground#070503
  • titleBar.activeForeground#FFB000
  • titleBar.border#331A00
  • titleBar.inactiveBackground#331A00
  • titleBar.inactiveForeground#664400
  • toolbar.activeBackground#CC880077
  • toolbar.hoverBackground#CC880044
  • widget.border#331A00
  • widget.shadow#070503AA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, punctuation.definition.comment#664400italic
comment string.quoted, comment punctuation.definition.stringitalic
comment, string.unquoted#FFB000
string, string.template, constant.other.symbol, markup.raw#FFAA00
constant.numeric, constant.language, constant.character, number#FF8800
constant, support.constant#FFAA00
variable, variable.other, variable.parameter, identifier#FFB000
variable.other.property, variable.other.member#FFCC33
entity.name.function, support.function, meta.function-call, entity.name.function.go, entity.name.function.python#FFCC33bold
keyword, storage, keyword.control, keyword.operator#FFCC33bold
entity.name.type, support.class, support.type, entity.name.type.class.python, storage.type#FFAA00bold
entity.name.tag, support.type.property-name#FFAA00
punctuation, delimiter, meta.brace#FFB000
operator, keyword.operator#FFB000
markup.heading, entity.name.section#FFF5CCbold
markup.bold#FFCC33bold
markup.italic#FFAA00italic
markup.underline, markup.link#FFCC33underline
markup.deleted#FF8800
markup.inserted#FFCC33
invalid, invalid.deprecated#070503
markup.warning#070503
markup.success#070503
Amber Phosphor by Caffeinated Minds - VS Code Theme