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.activeBorder#E382BC
  • activityBar.background#090A0F
  • activityBar.border#090A0F
  • activityBar.dropBackground#E75A5A80
  • activityBar.foreground#555B77
  • activityBarBadge.background#70E3EB
  • activityBarBadge.foreground#090A0F
  • badge.background#70E3EB
  • badge.foreground#090A0F
  • breadcrumb.activeSelectionForeground#E382BC
  • breadcrumb.background#090A0F
  • breadcrumb.focusForeground#8E95B4
  • breadcrumb.foreground#3F445A
  • breadcrumbPicker.background#090A0F
  • button.background#090A0F
  • button.foreground#ffffff
  • button.hoverBackground#2C303F
  • debugConsole.errorForeground#E75A5A
  • debugConsole.infoForeground#70E3EB
  • debugConsole.warningForeground#FEE17C
  • debugToolBar.background#090A0F
  • diffEditor.insertedTextBackground#70E3EB20
  • diffEditor.removedTextBackground#E382BC20
  • dropdown.background#212431
  • dropdown.border#212431
  • editor.background#090A0F
  • editor.findMatchBackground#090A0F00
  • editor.findMatchBorder#E382BC
  • editor.findMatchHighlight#E382BC
  • editor.findMatchHighlightBackground#090A0F00
  • editor.findMatchHighlightBorder#6B7394
  • editor.findRangeHighlightBackground#FEE17C30
  • editor.foreground#8E95B4
  • editor.lineHighlightBackground#21243150
  • editor.lineHighlightBorder#21243100
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#212431
  • editor.selectionHighlightBackground#FEE17C50
  • editor.wordHighlightBackground#E382BC30
  • editor.wordHighlightStrongBackground#A9EFA330
  • editorBracketMatch.background#090A0F
  • editorBracketMatch.border#70E3EB70
  • editorCursor.foreground#FEE17C
  • editorError.foreground#E75A5A
  • editorGroup.border#090A0F
  • editorGroup.dropBackground#E75A5A80
  • editorGroup.focusedEmptyBorder#E75A5A
  • editorGroupHeader.tabsBackground#090A0F
  • editorGutter.addedBackground#A9EFA360
  • editorGutter.deletedBackground#E75A5A60
  • editorGutter.modifiedBackground#4C71F660
  • editorHoverWidget.background#212431
  • editorHoverWidget.border#212431
  • editorIndentGuide.activeBackground#35394B
  • editorIndentGuide.background#212431
  • editorInfo.foreground#4C71F6
  • editorLineNumber.activeForeground#FEE17C
  • editorLineNumber.foreground#35394B
  • editorLink.activeForeground#8E95B4
  • editorMarkerNavigation.background#8E95B405
  • editorOverviewRuler.border#090A0F
  • editorOverviewRuler.errorForeground#E75A5A
  • editorOverviewRuler.findMatchForeground#E382BC
  • editorOverviewRuler.infoForeground#4C71F6
  • editorOverviewRuler.warningForeground#FEE17C
  • editorSuggestWidget.background#212431
  • editorSuggestWidget.border#212431
  • editorSuggestWidget.foreground#8E95B4
  • editorSuggestWidget.highlightForeground#70E3EB
  • editorSuggestWidget.selectedBackground#2C303F
  • editorWarning.foreground#FEE17C
  • editorWhitespace.foreground#212431
  • editorWidget.background#212431
  • editorWidget.border#FEE17C
  • editorWidget.resizeBorder#FEE17C
  • extensionBadge.remoteBackground#35394B
  • extensionBadge.remoteForeground#8E95B4
  • extensionButton.prominentBackground#FEE17C
  • extensionButton.prominentForeground#090A0F
  • extensionButton.prominentHoverBackground#FEE17C
  • focusBorder#090A0F00
  • foreground#FFFFFF
  • gitDecoration.conflictingResourceForeground#FEE17C
  • gitDecoration.deletedResourceForeground#E75A5A
  • gitDecoration.ignoredResourceForeground#2C303F
  • gitDecoration.modifiedResourceForeground#4C71F6
  • gitDecoration.untrackedResourceForeground#A9EFA3
  • input.background#090A0F
  • input.border#212431
  • input.foreground#E382BC
  • input.placeholderForeground#35394B
  • inputOption.activeBorder#E75A5A
  • inputValidation.errorBorder#E75A5A50
  • inputValidation.infoBorder#4C71F650
  • inputValidation.warningBorder#FEE17C50
  • list.activeSelectionBackground#090A0F00
  • list.activeSelectionForeground#70E3EB
  • list.dropBackground#2C303F
  • list.focusBackground#212431
  • list.focusForeground#FFFFFF
  • list.highlightForeground#70E3EB
  • list.hoverBackground#090A0F00
  • list.hoverForeground#8E95B4
  • list.inactiveSelectionBackground#21243150
  • list.inactiveSelectionForeground#70E3EB
  • listFilterWidget.background#A18EEF
  • listFilterWidget.noMatchesOutline#A18EEF
  • listFilterWidget.outline#A18EEF
  • menu.background#212431
  • menu.foreground#8E95B4
  • menu.selectionBackground#2C303F
  • menu.selectionBorder#212431
  • menu.selectionForeground#8E95B4
  • menu.separatorBackground#35394B
  • menubar.selectionBackground#212431
  • menubar.selectionBorder#212431
  • menubar.selectionForeground#8E95B4
  • notebook.focusedCellBorder#E75A5A
  • notebook.inactiveFocusedCellBorder#E75A5A80
  • panel.background#090A0F
  • panel.border#090A0F
  • panel.dropBackground#2C303F
  • panelTitle.activeBorder#FEE17C
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#3F445A
  • peekView.border#212431
  • peekViewEditor.background#090A0F
  • peekViewEditor.matchHighlightBackground#E382BC50
  • peekViewEditorGutter.background#090A0F
  • peekViewResult.background#090A0F
  • peekViewResult.matchHighlightBackground#E382BC50
  • peekViewResult.selectionBackground#212431
  • peekViewTitle.background#212431
  • peekViewTitleDescription.foreground#8E95B4
  • pickerGroup.border#FFFFFF1a
  • pickerGroup.foreground#FEE17C
  • progressBar.background#FEE17C
  • quickInput.background#090A0F
  • quickInput.foreground#3F445A
  • scrollbar.shadow#090A0F00
  • scrollbarSlider.activeBackground#3F445A
  • scrollbarSlider.background#3F445A50
  • scrollbarSlider.hoverBackground#2C303F
  • selection.background#69A7D350
  • settings.checkboxBackground#090A0F
  • settings.checkboxForeground#8E95B4
  • settings.dropdownBackground#090A0F
  • settings.dropdownForeground#8E95B4
  • settings.headerForeground#70E3EB
  • settings.modifiedItemIndicator#E382BC
  • settings.numberInputBackground#090A0F
  • settings.numberInputForeground#8E95B4
  • settings.textInputBackground#090A0F
  • settings.textInputForeground#8E95B4
  • sideBar.background#090A0F
  • sideBar.border#2C303F50
  • sideBar.foreground#555B77
  • sideBarSectionHeader.background#090A0F
  • sideBarSectionHeader.border#090A0F
  • sideBarTitle.foreground#3F445A
  • statusBar.background#090A0F
  • statusBar.border#090A0F
  • statusBar.debuggingBackground#5654BC
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#3F445A
  • statusBar.noFolderBackground#090A0F
  • statusBarItem.activeBackground#E75A5A80
  • statusBarItem.hoverBackground#21243150
  • statusBarItem.remoteBackground#FEE17C
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#090A0F
  • tab.activeBorder#090A0F
  • tab.activeBorderTop#70E3EB
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#E382BC
  • tab.border#090A0F
  • tab.inactiveBackground#090A0F
  • tab.inactiveForeground#3F445A
  • tab.inactiveModifiedBorder#555B77
  • tab.unfocusedActiveBorder#3F445A
  • tab.unfocusedActiveForeground#8E95B4
  • tab.unfocusedActiveModifiedBorder#b84848
  • tab.unfocusedInactiveModifiedBorder#8a3636
  • terminal.ansiBlack#35394B
  • terminal.ansiBlue#4C71F6
  • terminal.ansiBrightBlack#35394B
  • terminal.ansiBrightBlue#4C71F6
  • terminal.ansiBrightCyan#70E3EB
  • terminal.ansiBrightGreen#A9EFA3
  • terminal.ansiBrightMagenta#5654BC
  • terminal.ansiBrightRed#E75A5A
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FEE17C
  • terminal.ansiCyan#70E3EB
  • terminal.ansiGreen#A9EFA3
  • terminal.ansiMagenta#5654BC
  • terminal.ansiRed#E75A5A
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FEE17C
  • terminalCursor.background#000000
  • terminalCursor.foreground#FEE17C
  • textLink.activeForeground#FEE17C
  • textLink.foreground#70E3EB
  • titleBar.activeBackground#090A0F
  • titleBar.activeForeground#8E95B4
  • titleBar.border#090A0F
  • titleBar.inactiveBackground#090A0F
  • titleBar.inactiveForeground#3F445A
  • tree.indentGuidesStroke#212431
  • widget.shadow#090A0F00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#FFFFFF
string#A9EFA3
punctuation, constant.other.symbol#E382BC
constant.character.escape, text.html constant.character.entity.named#8E95B4
constant.language.boolean#E382BC
constant.numeric#E19235
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#8E95B4
keyword, modifier, variable.language.this, support.type.object, constant.language#E75A5A
entity.name.function, support.function#A18EEF
storage.type, storage.modifier, storage.control#70E3EB
support.module, support.node#70E3EBitalic
support.type, constant.other.key#E382BC
entity.name.type, entity.other.inherited-class, entity.other#E382BC
comment#3F445Aitalic
comment punctuation.definition.comment, string.quoted.docstring#3F445Aitalic
punctuation#E382BC
entity.name, entity.name.type.class, support.type, support.class, meta.use#A18EEF
variable.object.property, meta.field.declaration entity.name.function#E75A5A
meta.definition.method entity.name.function#E75A5A
meta.function entity.name.function#FEE17C
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#E75A5A
meta.embedded, source.groovy.embedded, meta.template.expression#FFFFFF
entity.name.tag.yaml#70E3EB
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#70E3EB
constant.language.json#E75A5A
entity.other.attribute-name.class#FEE17C
entity.other.attribute-name.id#E19235
source.css entity.name.tag#FEE17C
support.type.property-name.css#69A7D3
meta.tag, punctuation.definition.tag#E75A5A
entity.name.tag#70E3EB
entity.other.attribute-name#70E3EB
punctuation.definition.entity.html#8E95B4
markup.heading#E75A5A
text.html.markdown meta.link.inline, meta.link.reference#70E3EB
text.html.markdown beginning.punctuation.definition.list#E75A5A
markup.italic#70E3EBitalic
markup.bold#70E3EBbold
markup.bold markup.italic, markup.italic markup.bold#70E3EBitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#A9EFA3
markup.inline.raw.string.markdown#A9EFA3
keyword.other.definition.ini#70E3EB
entity.name.section.group-title.ini#E75A5A
source.cs meta.class.identifier storage.type#A18EEF
source.cs meta.method.identifier entity.name.function#E75A5A
source.cs meta.method-call meta.method, source.cs entity.name.function#A18EEF
source.cs storage.type#E382BC
source.cs meta.method.return-type#E382BC
source.cs meta.preprocessor#3F445A
source.cs entity.name.type.namespace#FFFFFF
meta.jsx.children, SXNested#FFFFFF
support.class.component#FEE17C
source.cpp meta.block variable.other#FFFFFF
source.python meta.member.access.python#70E3EB
source.python meta.function-call.python, meta.function-call.arguments#A18EEF
meta.block#70E3EB
entity.name.function.call#FEE17C
source.php support.other.namespace, source.php meta.use support.class#FFFFFF
constant.keyword#E75A5Aitalic
entity.name.function#FEE17C
Global settings#FFFFFF
Noxis by Valentino Cossar - VS Code Theme