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#0a0a0a
  • activityBar.border#0a0a0a60
  • activityBar.foreground#F1FBFA
  • activityBarBadge.background#F1FBFA
  • activityBarBadge.foreground#0a0a0a
  • badge.background#0a0a0a30
  • badge.foreground#F1FBFA
  • breadcrumb.activeSelectionForeground#FFD725
  • breadcrumb.background#0a0a0a
  • breadcrumb.focusForeground#F1FBFA
  • breadcrumb.foreground#5D6565
  • breadcrumbPicker.background#0a0a0a
  • button.background#5D656550
  • contrastBorder#5D656540
  • debugToolBar.background#0a0a0a
  • diffEditor.insertedTextBackground#4FD4CB4b
  • diffEditor.removedTextBackground#F933197b
  • dropdown.background#0a0a0a
  • dropdown.border#01fff210
  • editor.background#0a0a0a
  • editor.findMatchBackground#0a0a0a
  • editor.findMatchBorder#5D6565
  • editor.findMatchHighlightBackground#5D656593
  • editor.findMatchHighlightBorder#F1FBFA30
  • editor.foreground#F1FBFA
  • editor.lineHighlightBackground#0a0a0a50
  • editor.selectionBackground#F1FBFA30
  • editor.selectionHighlightBackground#5D65656b
  • editor.selectionHighlightBorder#F1FBFAf0
  • editorBracketMatch.background#0a0a0a
  • editorBracketMatch.border#F1FBFA30
  • editorCursor.foreground#B40864
  • editorError.foreground#F93319
  • editorGroup.border#0a0a0a30
  • editorGroupHeader.tabsBackground#0a0a0a
  • editorGutter.addedBackground#FFD725
  • editorGutter.deletedBackground#F93319
  • editorGutter.modifiedBackground#B40864
  • editorHoverWidget.background#0a0a0a
  • editorHoverWidget.border#F1FBFA10
  • editorIndentGuide.activeBackground1#0a0a0a
  • editorIndentGuide.background1#0a0a0a70
  • editorInfo.foreground#F1FBFA70
  • editorLineNumber.activeForeground#F1FBFA
  • editorLineNumber.foreground#5D6565c0
  • editorLink.activeForeground#F1FBFA
  • editorMarkerNavigation.background#F1FBFA05
  • editorOverviewRuler.border#0a0a0a
  • editorOverviewRuler.errorForeground#F933197b
  • editorOverviewRuler.findMatchForeground#5D656533
  • editorOverviewRuler.infoForeground#F1FBFA40
  • editorOverviewRuler.warningForeground#F933197b
  • editorRuler.foreground#0a0a0a
  • editorSuggestWidget.background#0a0a0a
  • editorSuggestWidget.border#F1FBFA10
  • editorSuggestWidget.foreground#F1FBFA
  • editorSuggestWidget.highlightForeground#B40864
  • editorSuggestWidget.selectedBackground#5D656520
  • editorWarning.foreground#F93319
  • editorWhitespace.foreground#F1FBFA40
  • editorWidget.background#0a0a0a
  • editorWidget.border#B4086400
  • editorWidget.resizeBorder#5D6565
  • extensionButton.prominentBackground#640E3C90
  • extensionButton.prominentHoverBackground#FFD725
  • focusBorder#F1FBFA00
  • gitDecoration.conflictingResourceForeground#F93319ee
  • gitDecoration.deletedResourceForeground#FFD725
  • gitDecoration.ignoredResourceForeground#5D6565
  • gitDecoration.modifiedResourceForeground#FFD725
  • gitDecoration.untrackedResourceForeground#F1FBFA
  • input.background#0a0a0a
  • input.border#F1FBFA10
  • input.foreground#F1FBFA
  • input.placeholderForeground#F1FBFA60
  • inputOption.activeBackground#F1FBFA30
  • inputOption.activeBorder#F1FBFA30
  • inputValidation.errorBorder#F9331950
  • inputValidation.infoBorder#F1FBFA50
  • inputValidation.warningBorder#B4086450
  • list.activeSelectionBackground#0a0a0a
  • list.activeSelectionForeground#4FD4CB
  • list.focusBackground#0a0a0a
  • list.focusForeground#F1FBFA
  • list.highlightForeground#5D6565
  • list.hoverBackground#0a0a0a
  • list.hoverForeground#F1FBFA
  • list.inactiveSelectionBackground#0a0a0a30
  • list.inactiveSelectionForeground#5D6565
  • list.warningForeground#F93319ee
  • listFilterWidget.background#0a0a0a30
  • listFilterWidget.noMatchesOutline#0a0a0a30
  • listFilterWidget.outline#0a0a0a30
  • menu.background#0a0a0af8
  • menu.border#5D656550
  • menu.foreground#F1FBFA
  • menu.selectionBackground#0a0a0a
  • menu.selectionBorder#0a0a0a30
  • menu.selectionForeground#F1FBFA
  • menu.separatorBackground#F1FBFA
  • menubar.selectionBackground#0a0a0a
  • menubar.selectionBorder#5D656550
  • menubar.selectionForeground#F1FBFA
  • minimap.background#0a0a0a
  • minimapGutter.addedBackground#FFD725
  • minimapGutter.deletedBackground#B40864
  • minimapGutter.modifiedBackground#640E3C
  • minimapSlider.activeBackground#640E3C94
  • minimapSlider.background#640E3C2a
  • minimapSlider.hoverBackground#640E3C69
  • notificationLink.foreground#5D6565
  • notifications.background#0a0a0a
  • notifications.foreground#F1FBFA
  • panel.background#0a0a0a
  • panel.border#5D656550
  • panelTitle.activeBorder#5D6565
  • panelTitle.activeForeground#F1FBFA
  • panelTitle.inactiveForeground#F1FBFA
  • peekView.border#0a0a0a30
  • peekViewEditor.background#F1FBFA05
  • peekViewEditor.matchHighlightBackground#5D656550
  • peekViewEditorGutter.background#F1FBFA05
  • peekViewResult.background#F1FBFA05
  • peekViewResult.matchHighlightBackground#5D656550
  • peekViewResult.selectionBackground#5D656570
  • peekViewTitle.background#F1FBFA05
  • peekViewTitleDescription.foreground#F1FBFA60
  • pickerGroup.foreground#5D6565
  • progressBar.background#5D6565
  • scrollbar.shadow#0a0a0a00
  • scrollbarSlider.activeBackground#5D6565cc
  • scrollbarSlider.background#5D6565bb
  • scrollbarSlider.hoverBackground#5D6565ee
  • selection.background#5D6565
  • settings.checkboxBackground#0a0a0a
  • settings.checkboxForeground#F1FBFA
  • settings.dropdownBackground#0a0a0a
  • settings.dropdownForeground#F1FBFA
  • settings.headerForeground#5D6565
  • settings.modifiedItemIndicator#5D6565
  • settings.numberInputBackground#0a0a0a
  • settings.numberInputForeground#F1FBFA
  • settings.textInputBackground#0a0a0a
  • settings.textInputForeground#F1FBFA
  • sideBar.background#0a0a0a
  • sideBar.border#5D656550
  • sideBar.foreground#F1FBFA
  • sideBarSectionHeader.background#0a0a0a
  • sideBarSectionHeader.border#5D656550
  • sideBarSectionHeader.foreground#F1FBFA
  • sideBarTitle.foreground#5D6565
  • statusBar.background#0a0a0a
  • statusBar.border#0a0a0a00
  • statusBar.debuggingBackground#E7288E
  • statusBar.debuggingForeground#F1FBFA
  • statusBar.foreground#F1FBFA
  • statusBar.noFolderBackground#0a0a0a
  • statusBarItem.hoverBackground#5D656520
  • statusBarItem.remoteBackground#E7288E
  • statusBarItem.remoteForeground#0a0a0a
  • tab.activeBackground#2F33337b
  • tab.activeBorder#FFD725
  • tab.activeForeground#F1FBFA
  • tab.activeModifiedBorder#2F3333
  • tab.border#0a0a0a
  • tab.inactiveBackground#0a0a0a
  • tab.inactiveForeground#F1FBFAaf
  • tab.unfocusedActiveBackground#5D656540
  • tab.unfocusedActiveBorder#5D6565
  • tab.unfocusedActiveForeground#F1FBFA
  • tab.unfocusedInactiveBackground#4dcccc10
  • tab.unfocusedInactiveForeground#F1FBFA7f
  • terminal.ansiBlack#0a0a0a
  • terminal.ansiBlue#4FD4CB
  • terminal.ansiBrightBlack#2F3333
  • terminal.ansiBrightBlue#F1FBFA
  • terminal.ansiBrightCyan#F1FBFA
  • terminal.ansiBrightGreen#E7288E
  • terminal.ansiBrightMagenta#E7288E
  • terminal.ansiBrightRed#F93319
  • terminal.ansiBrightWhite#F1FBFA
  • terminal.ansiBrightYellow#FFD725
  • terminal.ansiCyan#4FD4CB
  • terminal.ansiGreen#4FD4CB
  • terminal.ansiMagenta#E7288E
  • terminal.ansiRed#F93319
  • terminal.ansiWhite#F1FBFA
  • terminal.ansiYellow#FFD725
  • terminalCursor.background#0a0a0a
  • terminalCursor.foreground#B40864
  • textLink.activeForeground#F1FBFA
  • textLink.foreground#5D6565
  • titleBar.activeBackground#0a0a0a
  • titleBar.activeForeground#5D6565
  • titleBar.border#2F333300
  • titleBar.inactiveBackground#0a0a0a
  • titleBar.inactiveForeground#2F3333
  • tree.indentGuidesStroke#0a0a0a
  • widget.shadow#0a0a0a30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.comment, comment#5D6565italic
meta#F1FBFA—
entity.name.function, meta.class, meta.method, storage, variable, meta.decorator#E7288E—
variable.object.property, meta.function-call, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.switch, keyword.control.trycatch, keyword.control.return, keyword.control.throw, keyword.control.break, keyword.control.continue, keyword.control.goto, keyword.control.else, keyword.control.elseif, keyword.control.default, keyword.control.case, keyword.control.finally, keyword.control.export, keyword.control.import, keyword.control.from, variable.language.this, meta.import, constant#FFD725—
meta.block, string, punctuation.definition.block, keyword.operator.logical#4FD4CB—
meta.parameters, variable.parameter, variable.other.object.property, variable.other.property, punctuation.separator, punctuation.accessor, keyword.operator#F1FBFA—
meta.function-call, meta.parameters, string—italic
meta.decorator, entity.name.function, keyword.control, meta.type—bold
*url*, *link*, *uri*—underline
variable.other.object.property, variable.other.object—none
entity.name.tag.html#E7288E—
entity.other.attribute-name.html, meta.tag.other.unrecognized.html.derivative#FFD725—
entity.other.attribute-name.html, text.html.derivative, punctuation.definition.tag.begin, punctuation.definition.tag.end—italic
meta.tag.structure.div.start, meta.tag.structure.div.end, punctuation.definition.tag.begin, punctuation.definition.tag.end#5D6565italic
entity.name.tag.html, string.quoted.double.html, string.quoted.single.html—none
entity.other.attribute-name, entity.name.tag.input, entity.name.tag, support.constant.media#E7288E—
support.function.misc#FFD725—
entity.other.attribute-name.pseudo-class, variable.scss, variable.css, variable.less, variable.sass, variable.other, keyword.control.at-rule.media#4FD4CB—
punctuation.definition.entity#F1FBFA—
support.type.object#E7288E—
support.type.property-name, support.type.property-name.json, support.type.property-name.json.comments, string.json.comments#E7288E—
support.type.property-name, support.type.property-name.json, support.type.property-name.json.comments, string.json.comments—none
markup.heading#E7288E—
invalid, invalid.illegal, invalid.deprecated#F93319—