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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.comment, comment#5D6565italic
meta#0a0a0a—
entity.name.function, meta.class, meta.method, storage, variable, meta.decorator#B40864—
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#b89600—
meta.block, string, punctuation.definition.block, keyword.operator.logical#24948c—
meta.parameters, variable.parameter, variable.other.object.property, variable.other.property, punctuation.separator, punctuation.accessor, keyword.operator#0a0a0a—
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#B40864—
entity.other.attribute-name.html, meta.tag.other.unrecognized.html.derivative#b89600—
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#B40864—
support.function.misc#b89600—
entity.other.attribute-name.pseudo-class, variable.scss, variable.css, variable.less, variable.sass, variable.other, keyword.control.at-rule.media#24948c—
punctuation.definition.entity#0a0a0a—
support.type.object#B40864—
support.type.property-name, support.type.property-name.json, support.type.property-name.json.comments, string.json.comments#B40864—
support.type.property-name, support.type.property-name.json, support.type.property-name.json.comments, string.json.comments—none
markup.heading#B40864—
invalid, invalid.illegal, invalid.deprecated#F93319—