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#faf9f7
  • activityBar.foreground#b87a00
  • activityBarBadge.background#b87a00
  • activityBarBadge.foreground#ffffff
  • badge.background#fff3d4
  • badge.foreground#b87a00
  • breadcrumb.background#faf9f7
  • breadcrumb.foreground#6e7681
  • button.background#b87a00
  • button.foreground#ffffff
  • button.hoverBackground#a06b00
  • checkbox.background#fff3d4
  • checkbox.border#d0d0d0
  • checkbox.foreground#b87a00
  • debugConsole.errorForeground#cf222e
  • debugConsole.infoForeground#0969da
  • debugConsole.sourceForeground#6e7681
  • debugConsole.warningForeground#b87a00
  • debugIcon.breakpointCurrentStackframeForeground#b87a00
  • debugIcon.breakpointForeground#cf222e
  • debugIcon.breakpointStackframeForeground#0969da
  • debugIcon.continueForeground#0969da
  • debugIcon.disconnectForeground#6e7681
  • debugIcon.pauseForeground#b87a00
  • debugIcon.restartForeground#1a7f37
  • debugIcon.stepBackForeground#0969da
  • debugIcon.stepIntoForeground#0969da
  • debugIcon.stepOutForeground#0969da
  • debugIcon.stepOverForeground#0969da
  • debugIcon.stopForeground#cf222e
  • debugToolBar.background#f0f0f0
  • diffEditor.border#d0d0d0
  • diffEditor.insertedLineBackground#1a7f3722
  • diffEditor.insertedTextBackground#1a7f3733
  • diffEditor.removedLineBackground#cf222e22
  • diffEditor.removedTextBackground#cf222e33
  • dropdown.background#ffffff
  • dropdown.border#d0d0d0
  • dropdown.foreground#24292f
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#b87a0033
  • editor.findMatchHighlightBackground#b87a0022
  • editor.foreground#24292f
  • editor.inactiveSelectionBackground#b87a0022
  • editor.lineHighlightBackground#fff3d4
  • editor.selectionBackground#b87a0044
  • editor.selectionHighlightBackground#b87a0022
  • editor.wordHighlightBackground#b87a0022
  • editor.wordHighlightStrongBackground#b87a0033
  • editorBracketMatch.background#b87a0033
  • editorBracketMatch.border#b87a00
  • editorCursor.foreground#b87a00
  • editorGutter.addedBackground#1a7f37
  • editorGutter.background#ffffff
  • editorGutter.deletedBackground#cf222e
  • editorGutter.modifiedBackground#0969da
  • editorIndentGuide.activeBackground#c0c0c0
  • editorIndentGuide.background#e0e0e0
  • editorLineNumber.activeForeground#b87a00
  • editorLineNumber.foreground#8c959f
  • editorOverviewRuler.border#ffffff
  • editorRuler.foreground#e0e0e0
  • editorSuggestWidget.background#f0f0f0
  • editorSuggestWidget.border#d0d0d0
  • editorSuggestWidget.foreground#24292f
  • editorSuggestWidget.highlightForeground#b87a00
  • editorSuggestWidget.selectedBackground#fff3d4
  • editorWidget.background#f0f0f0
  • editorWidget.border#d0d0d0
  • extensionButton.prominentBackground#b87a00
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#a06b00
  • focusBorder#b87a00
  • foreground#24292f
  • gitDecoration.addedResourceForeground#1a7f37
  • gitDecoration.conflictingResourceForeground#cf222e
  • gitDecoration.deletedResourceForeground#cf222e
  • gitDecoration.ignoredResourceForeground#8c959f
  • gitDecoration.modifiedResourceForeground#0969da
  • gitDecoration.renamedResourceForeground#0969da
  • gitDecoration.untrackedResourceForeground#1a7f37
  • icon.foreground#24292f
  • input.background#ffffff
  • input.border#d0d0d0
  • input.foreground#24292f
  • input.placeholderForeground#8c959f
  • inputValidation.errorBackground#cf222e22
  • inputValidation.errorBorder#cf222e
  • inputValidation.infoBackground#0969da22
  • inputValidation.infoBorder#0969da
  • inputValidation.warningBackground#b87a0022
  • inputValidation.warningBorder#b87a00
  • list.activeSelectionBackground#fff3d4
  • list.activeSelectionForeground#b87a00
  • list.errorForeground#cf222e
  • list.focusBackground#fff3d4
  • list.focusForeground#24292f
  • list.hoverBackground#f0f0f0
  • list.hoverForeground#24292f
  • list.inactiveSelectionBackground#f0f0f0
  • list.inactiveSelectionForeground#24292f
  • list.warningForeground#b87a00
  • menu.background#ffffff
  • menu.foreground#24292f
  • menu.selectionBackground#fff3d4
  • menu.selectionForeground#b87a00
  • menubar.selectionBackground#fff3d4
  • menubar.selectionForeground#b87a00
  • minimap.background#faf9f7
  • minimap.selectionHighlight#b87a0044
  • minimapSlider.activeBackground#b87a0033
  • minimapSlider.background#b87a0011
  • minimapSlider.hoverBackground#b87a0022
  • notebook.cellBorderColor#d0d0d0
  • notebook.cellEditorBackground#ffffff
  • notebook.cellInsertionIndicator#b87a00
  • notebook.cellSelectionBackground#b87a0022
  • notebook.focusedCellBorder#b87a00
  • notebook.inactiveFocusedCellBorder#d0d0d0
  • notebook.outputContainerBackgroundColor#ffffff
  • notebook.outputContainerBorderColor#d0d0d0
  • notificationCenter.border#d0d0d0
  • notificationCenterHeader.background#f0f0f0
  • notificationCenterHeader.foreground#24292f
  • notifications.background#ffffff
  • notifications.foreground#24292f
  • notificationsErrorIcon.foreground#cf222e
  • notificationsInfoIcon.foreground#0969da
  • notificationsWarningIcon.foreground#b87a00
  • notificationToast.border#d0d0d0
  • panel.background#faf9f7
  • panel.border#d0d0d0
  • panelTitle.activeBorder#b87a00
  • panelTitle.activeForeground#b87a00
  • panelTitle.inactiveForeground#6e7681
  • peekView.border#b87a00
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#b87a0033
  • peekViewResult.background#ffffff
  • peekViewResult.matchHighlightBackground#b87a00
  • peekViewResult.selectionBackground#fff3d4
  • peekViewTitle.background#f0f0f0
  • peekViewTitleDescription.foreground#6e7681
  • peekViewTitleLabel.foreground#24292f
  • pickerGroup.border#d0d0d0
  • pickerGroup.foreground#b87a00
  • progressBar.background#b87a00
  • quickInput.background#ffffff
  • quickInput.foreground#24292f
  • quickInputList.focusBackground#fff3d4
  • quickInputList.focusForeground#b87a00
  • scm.background#faf9f7
  • scm.providerHeaderBorder#d0d0d0
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#00000033
  • scrollbarSlider.background#00000011
  • scrollbarSlider.hoverBackground#00000022
  • searchEditor.findMatchBackground#b87a0033
  • sideBar.background#faf9f7
  • sideBar.foreground#24292f
  • sideBarSectionHeader.background#faf9f7
  • sideBarSectionHeader.foreground#24292f
  • sideBarTitle.foreground#24292f
  • statusBar.background#f0f0f0
  • statusBar.debuggingBackground#b87a00
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#6e7681
  • statusBar.noFolderBackground#f0f0f0
  • statusBar.noFolderForeground#6e7681
  • statusBarItem.activeBackground#d0d0d0
  • statusBarItem.hoverBackground#e0e0e0
  • statusBarItem.prominentBackground#f0f0f0
  • statusBarItem.prominentHoverBackground#e0e0e0
  • symbolIcon.classForeground#1a7f37
  • symbolIcon.colorForeground#0969da
  • symbolIcon.constantForeground#0969da
  • symbolIcon.enumeratorForeground#b87a00
  • symbolIcon.eventForeground#cf222e
  • symbolIcon.fieldForeground#24292f
  • symbolIcon.fileForeground#24292f
  • symbolIcon.functionForeground#8250df
  • symbolIcon.interfaceForeground#0969da
  • symbolIcon.keywordForeground#cf222e
  • symbolIcon.methodForeground#8250df
  • symbolIcon.moduleForeground#24292f
  • symbolIcon.namespaceForeground#24292f
  • symbolIcon.nullForeground#cf222e
  • symbolIcon.numberForeground#0969da
  • symbolIcon.objectForeground#bf8700
  • symbolIcon.operatorForeground#24292f
  • symbolIcon.packageForeground#24292f
  • symbolIcon.propertyForeground#24292f
  • symbolIcon.referenceForeground#24292f
  • symbolIcon.snippetForeground#24292f
  • symbolIcon.stringForeground#1a7f37
  • symbolIcon.structForeground#bf8700
  • symbolIcon.textForeground#24292f
  • symbolIcon.typeParameterForeground#bf8700
  • symbolIcon.unitForeground#0969da
  • symbolIcon.variableForeground#24292f
  • tab.activeBackground#ffffff
  • tab.activeBackgroundCenter#ffffff
  • tab.activeForeground#b87a00
  • tab.border#ffffff
  • tab.hoverBackground#fff3d4
  • tab.hoverForeground#24292f
  • tab.inactiveBackground#faf9f7
  • tab.inactiveForeground#6e7681
  • tab.lastPinnedBorder#d0d0d0
  • tab.unfocusedActiveBackground#ffffff
  • tab.unfocusedActiveForeground#6e7681
  • tab.unfocusedHoverBackground#fff3d4
  • tab.unfocusedHoverForeground#24292f
  • terminal.ansiBlack#24292f
  • terminal.ansiBlue#0969da
  • terminal.ansiBrightBlack#6e7681
  • terminal.ansiBrightBlue#58a6ff
  • terminal.ansiBrightCyan#76e3ea
  • terminal.ansiBrightGreen#3fb950
  • terminal.ansiBrightMagenta#a371f7
  • terminal.ansiBrightOrange#bf8700
  • terminal.ansiBrightRed#f85149
  • terminal.ansiBrightWhite#f0f6fc
  • terminal.ansiBrightYellow#bf8700
  • terminal.ansiCyan#0969da
  • terminal.ansiGreen#1a7f37
  • terminal.ansiMagenta#8250df
  • terminal.ansiRed#cf222e
  • terminal.ansiWhite#24292f
  • terminal.ansiYellow#bf8700
  • terminal.background#ffffff
  • terminal.foreground#24292f
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#b87a00
  • textBlockQuote.background#fff3d4
  • textBlockQuote.border#b87a00
  • textCodeBlock.background#fff3d4
  • textLink.activeForeground#b87a00
  • textLink.foreground#0969da
  • textPreformat.foreground#24292f
  • textSeparator.foreground#d0d0d0
  • titleBar.activeBackground#faf9f7
  • titleBar.activeForeground#24292f
  • titleBar.border#d0d0d0
  • titleBar.inactiveBackground#faf9f7
  • titleBar.inactiveForeground#8c959f
  • tree.indentGuidesStroke#e0e0e0
  • tree.tableColumnsBorder#d0d0d0
  • tree.tableOddRowsBackground#faf9f7
  • widget.background#ffffff
  • widget.border#d0d0d0
  • window.activeBorder#d0d0d0
  • window.inactiveBorder#faf9f7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#8c959fitalic
constant, constant.character, constant.language, constant.numeric, constant.other#0969da
entity, entity.name, entity.name.class, entity.name.function, entity.name.method, entity.name.namespace, entity.name.tag, entity.name.type#b87a00
invalid, invalid.illegal, invalid.deprecated#cf222e
keyword, keyword.control, keyword.operator, keyword.other#cf222e
markup, markup.bold, markup.heading, markup.italic, markup.list, markup.quote, markup.raw, markup.underline#24292f
meta, meta.block, meta.function, meta.function-call, meta.property-name, meta.return-type, meta.selector#24292f
storage, storage.type#cf222e
string, string.html, string.markdown, string.quoted, string.unquoted#1a7f37
support, support.class, support.constant, support.function, support.type#0969da
variable#24292f
variable.other#24292f
variable.parameter#bf8700
entity.name.function, entity.name.type#b87a00
constant.numeric, constant.language#0969da
string#1a7f37
keyword, storage.type, punctuation#cf222e
entity.name.decorator#8250df
entity.name.tag#b87a00
entity.other.attribute-name#0969da