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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.comment, comment#5D6565italic
meta#E2F6F5—
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#E2F6F5—
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#E2F6F5—
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—
Cygma by romanenko - VS Code Theme