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#0d1117
  • activityBar.foreground#f0a500
  • activityBarBadge.background#f0a500
  • activityBarBadge.foreground#0d1117
  • badge.background#1a2332
  • badge.foreground#f0a500
  • breadcrumb.background#0d1117
  • breadcrumb.foreground#8b949e
  • button.background#f0a500
  • button.foreground#0d1117
  • button.hoverBackground#d4940a
  • checkbox.background#1a2332
  • checkbox.border#30363d
  • checkbox.foreground#f0a500
  • debugConsole.errorForeground#ff7b72
  • debugConsole.infoForeground#79c0ff
  • debugConsole.sourceForeground#8b949e
  • debugConsole.warningForeground#f0a500
  • debugIcon.breakpointCurrentStackframeForeground#f0a500
  • debugIcon.breakpointForeground#ff7b72
  • debugIcon.breakpointStackframeForeground#79c0ff
  • debugIcon.continueForeground#79c0ff
  • debugIcon.disconnectForeground#8b949e
  • debugIcon.pauseForeground#f0a500
  • debugIcon.restartForeground#7ee787
  • debugIcon.stepBackForeground#79c0ff
  • debugIcon.stepIntoForeground#79c0ff
  • debugIcon.stepOutForeground#79c0ff
  • debugIcon.stepOverForeground#79c0ff
  • debugIcon.stopForeground#ff7b72
  • debugToolBar.background#161b22
  • diffEditor.border#30363d
  • diffEditor.insertedLineBackground#23863622
  • diffEditor.insertedTextBackground#23863633
  • diffEditor.removedLineBackground#da363322
  • diffEditor.removedTextBackground#da363333
  • dropdown.background#1a2332
  • dropdown.border#30363d
  • dropdown.foreground#c9d1d9
  • dropdown.listBackground#161b22
  • editor.background#0d1117
  • editor.findMatchBackground#f0a50033
  • editor.findMatchHighlightBackground#f0a50022
  • editor.foreground#c9d1d9
  • editor.inactiveSelectionBackground#f0a50022
  • editor.lineHighlightBackground#1a2332
  • editor.selectionBackground#f0a50044
  • editor.selectionHighlightBackground#f0a50022
  • editor.wordHighlightBackground#f0a50022
  • editor.wordHighlightStrongBackground#f0a50033
  • editorBracketMatch.background#f0a50033
  • editorBracketMatch.border#f0a500
  • editorCursor.foreground#f0a500
  • editorGutter.addedBackground#7ee787
  • editorGutter.background#0d1117
  • editorGutter.deletedBackground#ff7b72
  • editorGutter.modifiedBackground#79c0ff
  • editorIndentGuide.activeBackground#30363d
  • editorIndentGuide.background#21262d
  • editorLineNumber.activeForeground#f0a500
  • editorLineNumber.foreground#484f58
  • editorOverviewRuler.border#0d1117
  • editorRuler.foreground#21262d
  • editorSuggestWidget.background#161b22
  • editorSuggestWidget.border#30363d
  • editorSuggestWidget.foreground#c9d1d9
  • editorSuggestWidget.highlightForeground#f0a500
  • editorSuggestWidget.selectedBackground#1a2332
  • editorWidget.background#161b22
  • editorWidget.border#30363d
  • extensionButton.prominentBackground#f0a500
  • extensionButton.prominentForeground#0d1117
  • extensionButton.prominentHoverBackground#d4940a
  • focusBorder#f0a500
  • foreground#c9d1d9
  • gitDecoration.addedResourceForeground#7ee787
  • gitDecoration.conflictingResourceForeground#ff7b72
  • gitDecoration.deletedResourceForeground#ff7b72
  • gitDecoration.ignoredResourceForeground#484f58
  • gitDecoration.modifiedResourceForeground#79c0ff
  • gitDecoration.renamedResourceForeground#79c0ff
  • gitDecoration.untrackedResourceForeground#7ee787
  • icon.foreground#c9d1d9
  • input.background#1a2332
  • input.border#30363d
  • input.foreground#c9d1d9
  • input.placeholderForeground#484f58
  • inputValidation.errorBackground#da363333
  • inputValidation.errorBorder#ff7b72
  • inputValidation.infoBackground#79c0ff22
  • inputValidation.infoBorder#79c0ff
  • inputValidation.warningBackground#f0a50022
  • inputValidation.warningBorder#f0a500
  • list.activeSelectionBackground#1a2332
  • list.activeSelectionForeground#f0a500
  • list.errorForeground#ff7b72
  • list.focusBackground#1a2332
  • list.focusForeground#c9d1d9
  • list.hoverBackground#21262d
  • list.hoverForeground#c9d1d9
  • list.inactiveSelectionBackground#161b22
  • list.inactiveSelectionForeground#c9d1d9
  • list.warningForeground#f0a500
  • menu.background#161b22
  • menu.foreground#c9d1d9
  • menu.selectionBackground#1a2332
  • menu.selectionForeground#f0a500
  • menubar.selectionBackground#1a2332
  • menubar.selectionForeground#f0a500
  • minimap.background#0d1117
  • minimap.selectionHighlight#f0a50044
  • minimapSlider.activeBackground#f0a50033
  • minimapSlider.background#f0a50011
  • minimapSlider.hoverBackground#f0a50022
  • notebook.cellBorderColor#30363d
  • notebook.cellEditorBackground#0d1117
  • notebook.cellInsertionIndicator#f0a500
  • notebook.cellSelectionBackground#f0a50022
  • notebook.focusedCellBorder#f0a500
  • notebook.inactiveFocusedCellBorder#30363d
  • notebook.outputContainerBackgroundColor#0d1117
  • notebook.outputContainerBorderColor#30363d
  • notificationCenter.border#30363d
  • notificationCenterHeader.background#161b22
  • notificationCenterHeader.foreground#c9d1d9
  • notifications.background#161b22
  • notifications.foreground#c9d1d9
  • notificationsErrorIcon.foreground#ff7b72
  • notificationsInfoIcon.foreground#79c0ff
  • notificationsWarningIcon.foreground#f0a500
  • notificationToast.border#30363d
  • panel.background#0d1117
  • panel.border#30363d
  • panelTitle.activeBorder#f0a500
  • panelTitle.activeForeground#f0a500
  • panelTitle.inactiveForeground#8b949e
  • peekView.border#f0a500
  • peekViewEditor.background#0d1117
  • peekViewEditor.matchHighlightBackground#f0a50033
  • peekViewResult.background#0d1117
  • peekViewResult.matchHighlightBackground#f0a500
  • peekViewResult.selectionBackground#1a2332
  • peekViewTitle.background#161b22
  • peekViewTitleDescription.foreground#8b949e
  • peekViewTitleLabel.foreground#c9d1d9
  • pickerGroup.border#30363d
  • pickerGroup.foreground#f0a500
  • progressBar.background#f0a500
  • quickInput.background#161b22
  • quickInput.foreground#c9d1d9
  • quickInputList.focusBackground#1a2332
  • quickInputList.focusForeground#f0a500
  • scm.background#0d1117
  • scm.providerHeaderBorder#30363d
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#484f5877
  • scrollbarSlider.background#484f5833
  • scrollbarSlider.hoverBackground#484f5855
  • searchEditor.findMatchBackground#f0a50033
  • sideBar.background#0d1117
  • sideBar.foreground#c9d1d9
  • sideBarSectionHeader.background#0d1117
  • sideBarSectionHeader.foreground#c9d1d9
  • sideBarTitle.foreground#c9d1d9
  • statusBar.background#161b22
  • statusBar.debuggingBackground#f0a500
  • statusBar.debuggingForeground#0d1117
  • statusBar.foreground#8b949e
  • statusBar.noFolderBackground#161b22
  • statusBar.noFolderForeground#8b949e
  • statusBarItem.activeBackground#30363d
  • statusBarItem.hoverBackground#21262d
  • statusBarItem.prominentBackground#161b22
  • statusBarItem.prominentHoverBackground#21262d
  • symbolIcon.classForeground#7ee787
  • symbolIcon.colorForeground#79c0ff
  • symbolIcon.constantForeground#79c0ff
  • symbolIcon.enumeratorForeground#f0a500
  • symbolIcon.eventForeground#ff7b72
  • symbolIcon.fieldForeground#c9d1d9
  • symbolIcon.fileForeground#c9d1d9
  • symbolIcon.functionForeground#d2a8ff
  • symbolIcon.interfaceForeground#79c0ff
  • symbolIcon.keywordForeground#ff7b72
  • symbolIcon.methodForeground#d2a8ff
  • symbolIcon.moduleForeground#c9d1d9
  • symbolIcon.namespaceForeground#c9d1d9
  • symbolIcon.nullForeground#ff7b72
  • symbolIcon.numberForeground#79c0ff
  • symbolIcon.objectForeground#ffa657
  • symbolIcon.operatorForeground#c9d1d9
  • symbolIcon.packageForeground#c9d1d9
  • symbolIcon.propertyForeground#c9d1d9
  • symbolIcon.referenceForeground#c9d1d9
  • symbolIcon.snippetForeground#c9d1d9
  • symbolIcon.stringForeground#7ee787
  • symbolIcon.structForeground#ffa657
  • symbolIcon.textForeground#c9d1d9
  • symbolIcon.typeParameterForeground#ffa657
  • symbolIcon.unitForeground#79c0ff
  • symbolIcon.variableForeground#c9d1d9
  • tab.activeBackground#0d1117
  • tab.activeBackgroundCenter#0d1117
  • tab.activeForeground#f0a500
  • tab.border#0d1117
  • tab.hoverBackground#1a2332
  • tab.hoverForeground#c9d1d9
  • tab.inactiveBackground#0d1117
  • tab.inactiveForeground#8b949e
  • tab.lastPinnedBorder#30363d
  • tab.unfocusedActiveBackground#0d1117
  • tab.unfocusedActiveForeground#8b949e
  • tab.unfocusedHoverBackground#1a2332
  • tab.unfocusedHoverForeground#c9d1d9
  • terminal.ansiBlack#0d1117
  • terminal.ansiBlue#79c0ff
  • terminal.ansiBrightBlack#484f58
  • terminal.ansiBrightBlue#79c0ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#56d364
  • terminal.ansiBrightMagenta#bc8cff
  • terminal.ansiBrightOrange#ffa657
  • terminal.ansiBrightRed#ffa198
  • terminal.ansiBrightWhite#f0f6fc
  • terminal.ansiBrightYellow#f0a500
  • terminal.ansiCyan#79c0ff
  • terminal.ansiGreen#7ee787
  • terminal.ansiMagenta#d2a8ff
  • terminal.ansiRed#ff7b72
  • terminal.ansiWhite#c9d1d9
  • terminal.ansiYellow#f0a500
  • terminal.background#0d1117
  • terminal.foreground#c9d1d9
  • terminalCursor.background#0d1117
  • terminalCursor.foreground#f0a500
  • textBlockQuote.background#1a2332
  • textBlockQuote.border#f0a500
  • textCodeBlock.background#1a2332
  • textLink.activeForeground#f0a500
  • textLink.foreground#79c0ff
  • textPreformat.foreground#c9d1d9
  • textSeparator.foreground#30363d
  • titleBar.activeBackground#0d1117
  • titleBar.activeForeground#c9d1d9
  • titleBar.border#30363d
  • titleBar.inactiveBackground#0d1117
  • titleBar.inactiveForeground#484f58
  • tree.indentGuidesStroke#21262d
  • tree.tableColumnsBorder#30363d
  • tree.tableOddRowsBackground#0d1117
  • widget.background#161b22
  • widget.border#30363d
  • window.activeBorder#30363d
  • window.inactiveBorder#0d1117

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#484f58italic
constant, constant.character, constant.language, constant.numeric, constant.other#79c0ff
entity, entity.name, entity.name.class, entity.name.function, entity.name.method, entity.name.namespace, entity.name.tag, entity.name.type#f0a500
invalid, invalid.illegal, invalid.deprecated#ff7b72
keyword, keyword.control, keyword.operator, keyword.other#ff7b72
markup, markup.bold, markup.heading, markup.italic, markup.list, markup.quote, markup.raw, markup.underline#c9d1d9
meta, meta.block, meta.function, meta.function-call, meta.property-name, meta.return-type, meta.selector#c9d1d9
storage, storage.type#ff7b72
string, string.html, string.markdown, string.quoted, string.unquoted#7ee787
support, support.class, support.constant, support.function, support.type#79c0ff
variable#c9d1d9
variable.other#c9d1d9
variable.parameter#ffa657
entity.name.function, entity.name.type#f0a500
constant.numeric, constant.language#79c0ff
string#7ee787
keyword, storage.type, punctuation#ff7b72
entity.name.decorator#d2a8ff
entity.name.tag#f0a500
entity.other.attribute-name#79c0ff
Chiubaca Aura by Alex Chiu - VS Code Theme