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#5c6bc0
  • activityBar.background#151515
  • activityBar.border#15151560
  • activityBar.foreground#eeffff
  • activityBarBadge.background#5c6bc0
  • activityBarBadge.foreground#2a2a2a
  • badge.background#3a242430
  • badge.foreground#545454
  • breadcrumb.activeSelectionForeground#5c6bc0
  • breadcrumb.background#151515
  • breadcrumb.focusForeground#eeffff
  • breadcrumb.foreground#616161
  • breadcrumbPicker.background#151515
  • button.background#61616150
  • button.foreground#ffffff
  • debugConsole.errorForeground#f07178
  • debugConsole.infoForeground#89ddff
  • debugConsole.warningForeground#ffcb6b
  • debugToolBar.background#151515
  • diffEditor.insertedTextBackground#89ddff20
  • diffEditor.removedTextBackground#ff9cac20
  • dropdown.background#151515
  • dropdown.border#ffffff10
  • editor.background#151515
  • editor.findMatchBackground#2a2a2a
  • editor.findMatchBorder#5c6bc0
  • editor.findMatchHighlightBackground#2a2a2a50
  • editor.findMatchHighlightBorder#ffffff04
  • editor.findRangeHighlightBackground#ffcb6b30
  • editor.foreground#eeffff
  • editor.lineHighlightBackground#2a2a2a70
  • editor.lineHighlightBorder#2a2a2a00
  • editor.rangeHighlightBackground#29c7ee0d
  • editor.selectionBackground#61616150
  • editor.selectionHighlightBackground#ffcc0020
  • editor.wordHighlightBackground#ff9cac30
  • editor.wordHighlightStrongBackground#c3e88d30
  • editorBracketMatch.background#151515
  • editorBracketMatch.border#ffcc0050
  • editorCursor.foreground#ffcc00
  • editorError.foreground#f0717870
  • editorGroup.border#2a2a2a30
  • editorGroup.dropBackground#f0717880
  • editorGroup.focusedEmptyBorder#f07178
  • editorGroupHeader.tabsBackground#151515
  • editorGutter.addedBackground#c3e88d60
  • editorGutter.deletedBackground#f0717860
  • editorGutter.modifiedBackground#82aaff60
  • editorHoverWidget.background#151515
  • editorHoverWidget.border#ffffff10
  • editorIndentGuide.activeBackground#424242
  • editorIndentGuide.background#42424270
  • editorInfo.foreground#82aaff70
  • editorLineNumber.activeForeground#616161
  • editorLineNumber.foreground#424242
  • editorLink.activeForeground#eeffff
  • editorMarkerNavigation.background#eeffff05
  • editorOverviewRuler.border#151515
  • editorOverviewRuler.errorForeground#f0717840
  • editorOverviewRuler.findMatchForeground#80cbc4
  • editorOverviewRuler.infoForeground#82aaff40
  • editorOverviewRuler.warningForeground#ffcb6b40
  • editorRuler.foreground#424242
  • editorSuggestWidget.background#151515
  • editorSuggestWidget.border#ffffff10
  • editorSuggestWidget.foreground#eeffff
  • editorSuggestWidget.highlightForeground#5c6bc0
  • editorSuggestWidget.selectedBackground#2a2a2a50
  • editorWarning.foreground#ffcb6b70
  • editorWhitespace.foreground#eeffff40
  • editorWidget.background#151515
  • editorWidget.border#5c6bc0
  • editorWidget.resizeBorder#5c6bc0
  • extensionBadge.remoteForeground#eeffff
  • extensionButton.prominentBackground#c3e88d90
  • extensionButton.prominentForeground#2a2a2a
  • extensionButton.prominentHoverBackground#c3e88d
  • focusBorder#ffffff00
  • foreground#eeffff
  • gitDecoration.conflictingResourceForeground#ffcb6b90
  • gitDecoration.deletedResourceForeground#f0717890
  • gitDecoration.ignoredResourceForeground#61616190
  • gitDecoration.modifiedResourceForeground#82aaff90
  • gitDecoration.untrackedResourceForeground#c3e88d90
  • input.background#2b2b2b
  • input.border#ffffff10
  • input.foreground#eeffff
  • input.placeholderForeground#eeffff60
  • inputOption.activeBackground#eeffff30
  • inputOption.activeBorder#eeffff30
  • inputValidation.errorBorder#f07178
  • inputValidation.infoBorder#82aaff
  • inputValidation.warningBorder#ffcb6b
  • list.activeSelectionBackground#151515
  • list.activeSelectionForeground#5c6bc0
  • list.dropBackground#f0717880
  • list.focusBackground#eeffff20
  • list.focusForeground#eeffff
  • list.highlightForeground#5c6bc0
  • list.hoverBackground#151515
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#2a2a2a30
  • list.inactiveSelectionForeground#5c6bc0
  • listFilterWidget.background#2a2a2a30
  • listFilterWidget.noMatchesOutline#2a2a2a30
  • listFilterWidget.outline#2a2a2a30
  • menu.background#151515
  • menu.foreground#eeffff
  • menu.selectionBackground#2a2a2a50
  • menu.selectionBorder#2a2a2a30
  • menu.selectionForeground#5c6bc0
  • menu.separatorBackground#eeffff
  • menubar.selectionBackground#2a2a2a30
  • menubar.selectionBorder#2a2a2a30
  • menubar.selectionForeground#5c6bc0
  • notificationLink.foreground#5c6bc0
  • notifications.background#151515
  • notifications.foreground#eeffff
  • panel.background#151515
  • panel.border#15151560
  • panelTitle.activeBorder#5c6bc0
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#eeffff
  • peekView.border#2a2a2a30
  • peekViewEditor.background#2a2a2a05
  • peekViewEditor.matchHighlightBackground#61616150
  • peekViewEditorGutter.background#2a2a2a05
  • peekViewResult.background#eeffff05
  • peekViewResult.matchHighlightBackground#61616150
  • peekViewResult.selectionBackground#61616170
  • peekViewTitle.background#eeffff05
  • peekViewTitleDescription.foreground#eeffff60
  • pickerGroup.border#ffffff1a
  • pickerGroup.foreground#5c6bc0
  • progressBar.background#5c6bc0
  • quickInput.background#151515
  • quickInput.foreground#616161
  • scrollbar.shadow#2a2a2a30
  • scrollbarSlider.activeBackground#5c6bc050
  • scrollbarSlider.background#eeffff20
  • scrollbarSlider.hoverBackground#eeffff10
  • selection.background#5c6bc040
  • settings.checkboxBackground#151515
  • settings.checkboxForeground#eeffff
  • settings.dropdownBackground#151515
  • settings.dropdownForeground#eeffff
  • settings.headerForeground#5c6bc0
  • settings.modifiedItemIndicator#5c6bc0
  • settings.numberInputBackground#151515
  • settings.numberInputForeground#eeffff
  • settings.textInputBackground#151515
  • settings.textInputForeground#eeffff
  • sideBar.background#151515
  • sideBar.border#15151560
  • sideBar.foreground#616161
  • sideBarSectionHeader.background#151515
  • sideBarSectionHeader.border#15151560
  • sideBarTitle.foreground#eeffff
  • statusBar.background#151515
  • statusBar.border#15151560
  • statusBar.debuggingBackground#c792ea
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#616161
  • statusBar.noFolderBackground#151515
  • statusBarItem.activeBackground#f0717880
  • statusBarItem.hoverBackground#54545420
  • statusBarItem.remoteBackground#5c6bc0
  • statusBarItem.remoteForeground#2a2a2a
  • tab.activeBackground#151515
  • tab.activeBorder#5c6bc0
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#616161
  • tab.border#151515
  • tab.inactiveBackground#151515
  • tab.inactiveForeground#616161
  • tab.inactiveModifiedBorder#904348
  • tab.unfocusedActiveBorder#545454
  • tab.unfocusedActiveForeground#eeffff
  • tab.unfocusedActiveModifiedBorder#c05a60
  • tab.unfocusedInactiveModifiedBorder#904348
  • terminal.ansiBlack#2a2a2a
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#545454
  • terminal.ansiBrightBlue#62cdff
  • terminal.ansiBrightCyan#89ddff
  • terminal.ansiBrightGreen#c3e88d
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcb6b
  • terminal.ansiCyan#89ddff
  • terminal.ansiGreen#c3e88d
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#f07178
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffcb6b
  • terminalCursor.background#2a2a2a
  • terminalCursor.foreground#ffcb6b
  • textLink.activeForeground#eeffff
  • textLink.foreground#5c6bc0
  • titleBar.activeBackground#151515
  • titleBar.activeForeground#eeffff
  • titleBar.border#15151560
  • titleBar.inactiveBackground#151515
  • titleBar.inactiveForeground#616161
  • tree.indentGuidesStroke#424242
  • widget.shadow#2a2a2a30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string#ffe389
punctuation, constant.other.symbol#dadada
constant.character.escape, text.html constant.character.entity.named#ffeef2
constant.language.boolean#FF9CAC
constant.numeric#F78C6C
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#ff9666italic
keyword.other#ff954f
keyword, modifier, variable.language.this, support.type.object, constant.language#ff954f
entity.name.function, support.function#F07178
storage.type, storage.modifier, storage.control#C792EA
support.module, support.node#F07178italic
support.type, constant.other.key#FFCB6B
entity.name.type, entity.other.inherited-class, entity.other#FFCB6B
comment#545454italic
comment punctuation.definition.comment, string.quoted.docstring#545454italic
punctuation#f3f3f39f
entity.name, entity.name.type.class, support.type, support.class, meta.use#49a7ff
variable.object.property, meta.field.declaration entity.name.function#f0bd71
meta.definition.method entity.name.function#F07178
meta.function entity.name.function#59fce1
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#ffffff
meta.embedded, source.groovy.embedded, meta.template.expression#fff0ee
entity.name.tag.yaml#F07178
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#F07178
constant.language.json#89DDFF
entity.other.attribute-name.class#FFCB6B
entity.other.attribute-name.id#F78C6C
source.css entity.name.tag#FFCB6B
support.type.property-name.css#B2CCD6
meta.tag, punctuation.definition.tag#e4e4e4
entity.name.tag#F07178
entity.other.attribute-name#C792EA
punctuation.definition.entity.html#EEFFFF
markup.heading#89DDFF
text.html.markdown meta.link.inline, meta.link.reference#F07178
text.html.markdown beginning.punctuation.definition.list#e0e0e0
markup.italic#F07178italic
markup.bold#F07178bold
markup.bold markup.italic, markup.italic markup.bold#F07178italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#C3E88D
markup.inline.raw.string.markdown#C3E88D
keyword.other.definition.ini#ff7315
entity.name.section.group-title.ini#89DDFF
source.cs meta.class.identifier storage.type#FFCB6B
source.cs meta.method.identifier entity.name.function#F07178
source.cs meta.method-call meta.method, source.cs entity.name.function#F07178
source.cs storage.type#FFCB6B
source.cs meta.method.return-type#FFCB6B
source.cs meta.preprocessor#545454
source.cs entity.name.type.namespace#EEFFFF
meta.jsx.children, SXNested#EEFFFF
support.class.component#FFCB6B
source.cpp meta.block variable.other#EEFFFF
source.python meta.member.access.python#F07178
source.python meta.function-call.python, meta.function-call.arguments#F07178
meta.block#F07178
entity.name.function.call#F07178
source.php support.other.namespace, source.php meta.use support.class#EEFFFF
constant.keyword#fa27e8italic
entity.name.function#F07178
keyword.control#ff66f2italic
markup.quote#ff66f2italic
markup.fenced_code.block#eefdff90
punctuation.definition.quote#ffe389
meta.structure.dictionary.json support.type.property-name.json#C792EA
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFCB6B
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F78C6C
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F07178
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#916B53
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#82AAFF
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF9CAC
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C792EA
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C3E88D
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6