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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.comment, comment#5D6565italic
meta#141414—
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#141414—
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#141414—
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—