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#0d0f1a
  • activityBar.border#12152a
  • activityBar.foreground#a0c8f8
  • activityBar.inactiveForeground#2c3155
  • activityBarBadge.background#f0a8c8
  • activityBarBadge.foreground#0d0f1a
  • badge.background#f0a8c8
  • badge.foreground#0d0f1a
  • breadcrumb.activeSelectionForeground#ccd6f6
  • breadcrumb.focusForeground#ccd6f6
  • breadcrumb.foreground#4a5580
  • breadcrumbPicker.background#12152a
  • button.background#70d8a8
  • button.foreground#0d0f1a
  • button.hoverBackground#90e8c0
  • button.secondaryBackground#222744
  • button.secondaryForeground#ccd6f6
  • button.secondaryHoverBackground#2c3155
  • charts.blue#a0c8f8
  • charts.foreground#ccd6f6
  • charts.green#70d8a8
  • charts.lines#2a3060
  • charts.orange#f5c080
  • charts.purple#c8a8f8
  • charts.red#f09898
  • charts.yellow#f0d890
  • debugIcon.breakpointCurrentStackframeForeground#f0d890
  • debugIcon.breakpointForeground#f09898
  • debugIcon.startForeground#70d8a8
  • debugToolBar.background#12152a
  • descriptionForeground#6475a8
  • diffEditor.insertedLineBackground#70d8a810
  • diffEditor.insertedTextBackground#70d8a815
  • diffEditor.removedLineBackground#f0989810
  • diffEditor.removedTextBackground#f0989815
  • dropdown.background#12152a
  • dropdown.border#2a3060
  • dropdown.foreground#ccd6f6
  • editor.background#0d0f1a
  • editor.findMatchBackground#f0d89040
  • editor.findMatchHighlightBackground#f0d89020
  • editor.foreground#ccd6f6
  • editor.lineHighlightBackground#1a1e3580
  • editor.rangeHighlightBackground#a0c8f810
  • editor.selectionBackground#70d8a830
  • editor.selectionHighlightBackground#70d8a818
  • editor.wordHighlightBackground#a0c8f820
  • editor.wordHighlightStrongBackground#a0c8f840
  • editorBracketHighlight.foreground1#a0c8f8
  • editorBracketHighlight.foreground2#f0a8c8
  • editorBracketHighlight.foreground3#70d8a8
  • editorBracketHighlight.foreground4#f0d890
  • editorBracketHighlight.foreground5#c8a8f8
  • editorBracketHighlight.foreground6#90ddd0
  • editorBracketMatch.background#70d8a820
  • editorBracketMatch.border#70d8a880
  • editorCursor.foreground#70d8a8
  • editorError.foreground#f09898
  • editorGroupHeader.tabsBackground#12152a
  • editorGroupHeader.tabsBorder#12152a
  • editorGutter.addedBackground#4a9870
  • editorGutter.background#0d0f1a
  • editorGutter.deletedBackground#f09898
  • editorGutter.modifiedBackground#6898d0
  • editorHint.foreground#70d8a8
  • editorIndentGuide.activeBackground1#2a3060
  • editorIndentGuide.background1#1a1e35
  • editorInfo.foreground#a0c8f8
  • editorLineNumber.activeForeground#6475a8
  • editorLineNumber.foreground#2c3155
  • editorOverviewRuler.addedForeground#4a9870
  • editorOverviewRuler.border#0d0f1a
  • editorOverviewRuler.deletedForeground#f09898
  • editorOverviewRuler.errorForeground#f09898
  • editorOverviewRuler.findMatchForeground#f0d890
  • editorOverviewRuler.modifiedForeground#6898d0
  • editorOverviewRuler.selectionHighlightForeground#70d8a8
  • editorOverviewRuler.warningForeground#f0d890
  • editorWarning.foreground#f0d890
  • editorWhitespace.foreground#2a3060
  • errorForeground#f09898
  • focusBorder#70d8a860
  • foreground#ccd6f6
  • gitDecoration.addedResourceForeground#70d8a8
  • gitDecoration.conflictingResourceForeground#f0a8c8
  • gitDecoration.deletedResourceForeground#f09898
  • gitDecoration.ignoredResourceForeground#2c3155
  • gitDecoration.modifiedResourceForeground#a0c8f8
  • gitDecoration.stageAddedResourceForeground#70d8a8
  • gitDecoration.stageDeletedResourceForeground#f09898
  • gitDecoration.stageModifiedResourceForeground#a0c8f8
  • gitDecoration.untrackedResourceForeground#f0d890
  • icon.foreground#6475a8
  • input.background#12152a
  • input.border#2a3060
  • input.foreground#ccd6f6
  • input.placeholderForeground#4a5580
  • inputOption.activeBackground#70d8a820
  • inputOption.activeBorder#70d8a8
  • inputOption.activeForeground#70d8a8
  • inputValidation.errorBackground#f0989820
  • inputValidation.errorBorder#f09898
  • inputValidation.infoBackground#a0c8f820
  • inputValidation.infoBorder#a0c8f8
  • inputValidation.warningBackground#f0d89020
  • inputValidation.warningBorder#f0d890
  • list.activeSelectionBackground#222744
  • list.activeSelectionForeground#ccd6f6
  • list.errorForeground#f09898
  • list.focusBackground#222744
  • list.highlightForeground#70d8a8
  • list.hoverBackground#1a1e3580
  • list.inactiveSelectionBackground#1a1e35
  • list.warningForeground#f0d890
  • menu.background#12152a
  • menu.foreground#ccd6f6
  • menu.selectionBackground#222744
  • menu.selectionForeground#ccd6f6
  • menu.separatorBackground#2a3060
  • menubar.selectionBackground#1a1e35
  • menubar.selectionForeground#ccd6f6
  • notificationLink.foreground#a0c8f8
  • notifications.background#12152a
  • notifications.border#2a3060
  • notifications.foreground#ccd6f6
  • panel.background#0d0f1a
  • panel.border#1a1e35
  • panelTitle.activeBorder#70d8a8
  • panelTitle.activeForeground#ccd6f6
  • panelTitle.inactiveForeground#4a5580
  • peekView.border#a0c8f8
  • peekViewEditor.background#12152a
  • peekViewEditor.matchHighlightBackground#f0d89030
  • peekViewResult.background#0d0f1a
  • peekViewResult.fileForeground#ccd6f6
  • peekViewResult.lineForeground#6475a8
  • peekViewResult.matchHighlightBackground#f0d89030
  • peekViewResult.selectionBackground#1a1e35
  • peekViewResult.selectionForeground#ccd6f6
  • peekViewTitle.background#0d0f1a
  • peekViewTitleDescription.foreground#6475a8
  • peekViewTitleLabel.foreground#ccd6f6
  • progressBar.background#70d8a8
  • scrollbar.shadow#0d0f1a
  • scrollbarSlider.activeBackground#70d8a840
  • scrollbarSlider.background#2a306060
  • scrollbarSlider.hoverBackground#2a306090
  • selection.background#70d8a830
  • sideBar.background#12152a
  • sideBar.border#1a1e35
  • sideBar.foreground#ccd6f6
  • sideBarSectionHeader.background#12152a
  • sideBarSectionHeader.border#1a1e35
  • sideBarSectionHeader.foreground#4a5580
  • sideBarTitle.foreground#4a5580
  • statusBar.background#0d0f1a
  • statusBar.border#1a1e35
  • statusBar.debuggingBackground#c07890
  • statusBar.debuggingForeground#ccd6f6
  • statusBar.foreground#4a5580
  • statusBar.noFolderBackground#0d0f1a
  • statusBarItem.hoverBackground#1a1e35
  • statusBarItem.remoteBackground#6898d0
  • statusBarItem.remoteForeground#0d0f1a
  • tab.activeBackground#0d0f1a
  • tab.activeBorder#70d8a8
  • tab.activeForeground#ccd6f6
  • tab.border#12152a
  • tab.hoverBackground#1a1e35
  • tab.inactiveBackground#12152a
  • tab.inactiveForeground#4a5580
  • terminal.ansiBlack#12152a
  • terminal.ansiBlue#a0c8f8
  • terminal.ansiBrightBlack#4a5580
  • terminal.ansiBrightBlue#b8d8f8
  • terminal.ansiBrightCyan#a8e8e0
  • terminal.ansiBrightGreen#90e8c0
  • terminal.ansiBrightMagenta#f8c0d8
  • terminal.ansiBrightRed#f8b0b0
  • terminal.ansiBrightWhite#e8eeff
  • terminal.ansiBrightYellow#f8e8a8
  • terminal.ansiCyan#90ddd0
  • terminal.ansiGreen#70d8a8
  • terminal.ansiMagenta#f0a8c8
  • terminal.ansiRed#f09898
  • terminal.ansiWhite#ccd6f6
  • terminal.ansiYellow#f0d890
  • terminal.background#0d0f1a
  • terminal.foreground#ccd6f6
  • terminal.selectionBackground#70d8a830
  • terminalCursor.foreground#70d8a8
  • textLink.activeForeground#b8d8f8
  • textLink.foreground#a0c8f8
  • titleBar.activeBackground#0d0f1a
  • titleBar.activeForeground#6475a8
  • titleBar.border#12152a
  • titleBar.inactiveBackground#0d0f1a
  • titleBar.inactiveForeground#2c3155
  • widget.shadow#0d0f1a80

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4a5580italic
string, string.quoted, string.template#f0d890
constant.character.escape, string.regexp#f5c080
constant.numeric#f0a8c8
constant.language#f0a8c8italic
keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, keyword.operator.in, keyword.operator.of, storage, storage.type#a0c8f8
keyword.operator, punctuation.separator#6475a8
entity.name.function, meta.function-call.generic, support.function#70d8a8
variable.parameter#90ddd0italic
entity.name.class, entity.name.type, entity.other.inherited-class, support.class#c8a8f8
entity.name.type.alias, entity.name.type.interface, meta.type.annotation, support.type#90ddd0
meta.decorator, punctuation.decorator, entity.name.function.decorator#f5c080
variable, variable.other#ccd6f6
variable.other.object.property, meta.object-literal.key, support.variable.property#8892b0
variable.other.constant, variable.other.enummember#f0a8c8
entity.name.namespace, entity.name.module, variable.other.module#a0c8f8
keyword.control.import, keyword.control.export#a0c8f8
variable.other.readwrite.alias#ccd6f6
entity.name.tag#f0a8c8
entity.other.attribute-name#90ddd0
string.quoted.double.html, string.quoted.single.html#f0d890
punctuation.definition.tag, meta.tag.sgml#4a5580
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#70d8a8
support.type.property-name.css#a0c8f8
support.constant.property-value.css, constant.other.color.rgb-value.css#f0d890
keyword.other.unit.css#f0a8c8
keyword.control.at-rule#c8a8f8
support.type.property-name.json#a0c8f8
string.quoted.double.json#f0d890
constant.language.json#f0a8c8italic
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#a0c8f8bold
markup.bold#f0d890bold
markup.italic#f0a8c8italic
markup.inline.raw, markup.fenced_code.block#70d8a8
string.other.link.title.markdown#c8a8f8
markup.underline.link.markdown#90ddd0
markup.quote#4a5580italic
punctuation.definition.list.begin.markdown#70d8a8
punctuation.definition.block, punctuation.section, meta.brace#6475a8
invalid#f09898underline
markup.inserted#70d8a8
markup.deleted#f09898
markup.changed#a0c8f8
Aurora Drift Theme by neon moon - VS Code Theme