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#04060a
  • activityBar.border#0a0e16
  • activityBar.foreground#42f4c8
  • activityBar.inactiveForeground#5878a0
  • activityBarBadge.background#ff2d6f
  • activityBarBadge.foreground#ffffff
  • badge.background#ff2d6f
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#42f4c8
  • breadcrumb.focusForeground#b8c4d8
  • breadcrumb.foreground#6878a8
  • breadcrumbPicker.background#080c14
  • button.background#42f4c8
  • button.foreground#04060a
  • button.hoverBackground#5cfcd8
  • button.secondaryBackground#1a2238
  • button.secondaryForeground#b8c4d8
  • descriptionForeground#7381ab
  • dropdown.background#080c14
  • dropdown.border#141c30
  • dropdown.foreground#b8c4d8
  • editor.background#05070c
  • editor.findMatchBackground#ff2d6f30
  • editor.findMatchHighlightBackground#ff2d6f18
  • editor.foreground#b8c4d8
  • editor.inactiveSelectionBackground#42f4c812
  • editor.lineHighlightBackground#0c101a50
  • editor.selectionBackground#42f4c825
  • editor.wordHighlightBackground#b48eff18
  • editorBracketMatch.background#b48eff18
  • editorBracketMatch.border#b48eff44
  • editorCursor.foreground#42f4c8
  • editorGroupHeader.tabsBackground#04060a
  • editorGroupHeader.tabsBorder#0a0e16
  • editorGutter.addedBackground#42f4c866
  • editorGutter.deletedBackground#ff2d6f66
  • editorGutter.modifiedBackground#b48eff66
  • editorIndentGuide.activeBackground1#1a2238
  • editorIndentGuide.background1#0e1420
  • editorLineNumber.activeForeground#42f4c8
  • editorLineNumber.foreground#778498
  • editorOverviewRuler.border#0a0e16
  • editorWhitespace.foreground#121828
  • errorForeground#ff3860
  • focusBorder#42f4c844
  • foreground#b8c4d8
  • gitDecoration.addedResourceForeground#42f4c8
  • gitDecoration.conflictingResourceForeground#f0e050
  • gitDecoration.deletedResourceForeground#ff3860
  • gitDecoration.ignoredResourceForeground#666d7d
  • gitDecoration.modifiedResourceForeground#b48eff
  • gitDecoration.untrackedResourceForeground#5c8aff
  • input.background#080c14
  • input.border#141c30
  • input.foreground#b8c4d8
  • input.placeholderForeground#676e84
  • inputOption.activeBorder#42f4c8
  • list.activeSelectionBackground#42f4c818
  • list.activeSelectionForeground#e0e8f0
  • list.focusBackground#42f4c815
  • list.highlightForeground#42f4c8
  • list.hoverBackground#0a0e18
  • list.inactiveSelectionBackground#42f4c80c
  • minimap.findMatchHighlight#ff2d6f40
  • minimap.selectionHighlight#42f4c830
  • notifications.background#080c14
  • notifications.border#141c30
  • notifications.foreground#b8c4d8
  • panel.background#05070c
  • panel.border#0e1420
  • panelTitle.activeBorder#42f4c8
  • panelTitle.activeForeground#b8c4d8
  • panelTitle.inactiveForeground#6878a8
  • peekView.border#b48eff44
  • peekViewEditor.background#06080e
  • peekViewResult.background#06080e
  • peekViewTitle.background#080c14
  • scrollbar.shadow#00000060
  • scrollbarSlider.activeBackground#42f4c838
  • scrollbarSlider.background#42f4c812
  • scrollbarSlider.hoverBackground#42f4c825
  • selection.background#42f4c830
  • sideBar.background#06080e
  • sideBar.border#0a0e16
  • sideBar.foreground#b8c4d8
  • sideBarSectionHeader.background#080c14
  • sideBarSectionHeader.foreground#6070a0
  • sideBarTitle.foreground#42f4c8
  • statusBar.background#04060a
  • statusBar.border#0a0e16
  • statusBar.debuggingBackground#ff2d6f
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#42f4c8aa
  • statusBar.noFolderBackground#04060a
  • statusBarItem.hoverBackground#42f4c818
  • statusBarItem.remoteBackground#b48eff
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#080c16
  • tab.activeBorderTop#42f4c8
  • tab.activeForeground#e0e8f0
  • tab.border#0a0e16
  • tab.hoverBackground#0c1020
  • tab.inactiveBackground#04060a
  • tab.inactiveForeground#6070a0
  • terminal.ansiBlack#0e1420
  • terminal.ansiBlue#5c8aff
  • terminal.ansiBrightBlack#2e3850
  • terminal.ansiBrightBlue#80a8ff
  • terminal.ansiBrightCyan#6afce0
  • terminal.ansiBrightGreen#6afce0
  • terminal.ansiBrightMagenta#d0aaff
  • terminal.ansiBrightRed#ff5c80
  • terminal.ansiBrightWhite#e0e8f0
  • terminal.ansiBrightYellow#f8f070
  • terminal.ansiCyan#42f4c8
  • terminal.ansiGreen#42f4c8
  • terminal.ansiMagenta#b48eff
  • terminal.ansiRed#ff3860
  • terminal.ansiWhite#b8c4d8
  • terminal.ansiYellow#f0e050
  • terminal.background#04060a
  • terminal.foreground#b8c4d8
  • terminalCursor.foreground#42f4c8
  • titleBar.activeBackground#04060a
  • titleBar.activeForeground#42f4c8
  • titleBar.inactiveBackground#04060a
  • titleBar.inactiveForeground#5070a0
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7f8695italic
string, string.quoted#42f4c8—
constant.numeric#f0e050—
constant.language, constant.other#ff6e9c—
keyword, storage.type, storage.modifier#ff2d6f—
keyword.control, keyword.operator.logical#ff5c80—
keyword.operator#8090b0—
entity.name.function, support.function, meta.function-call#5c8aff—
entity.name.type, entity.name.class, support.class, support.type#b48eff—
entity.name.type.interface#42f4c8—
variable, variable.other#b8c4d8—
variable.parameter#d0a0ff—
variable.other.property, variable.other.object.property#8090b0—
entity.name.tag#ff2d6f—
entity.other.attribute-name#b48effitalic
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#42f4c8—
support.type.property-name.css#5c8aff—
variable.scss, variable.css#d0a0ff—
string.regexp#ff3860—
constant.character.escape#42f4c8—
punctuation#79879d—
support.type.property-name.json#8090b0—
markup.heading, entity.name.section.markdown#42f4c8bold
markup.bold#e0e8f0bold
markup.italic#d0a0ffitalic
markup.underline.link#5c8aff—
markup.inline.raw, markup.fenced_code#42f4c8—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ff2d6f—
variable.other.php#d0a0ff—
entity.name.tag.yaml#8090b0—
variable.language.this, variable.language.self#ff6e9citalic
Syn Themes — Syn-Agentic Cyberpunk Glass Design Presets by jenninexus - VS Code Theme