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#080f18
  • activityBar.border#182030
  • activityBar.foreground#68c8e8
  • activityBar.inactiveForeground#1a2c40
  • activityBarBadge.background#f8c840
  • activityBarBadge.foreground#0e1a2a
  • badge.background#2870b8
  • badge.foreground#e8f8ff
  • breadcrumb.activeSelectionForeground#d8eef8
  • breadcrumb.focusForeground#68c8e8
  • breadcrumb.foreground#304858
  • breadcrumbPicker.background#0e1a28
  • button.background#2870b8
  • button.foreground#e8f8ff
  • button.hoverBackground#3888d8
  • button.secondaryBackground#1e2c3c
  • button.secondaryForeground#68c8e8
  • descriptionForeground#305878
  • dropdown.background#0e1a28
  • dropdown.border#1e2c3c
  • dropdown.foreground#d8eef8
  • editor.background#0e1a2a
  • editor.findMatchBackground#c04878
  • editor.findMatchHighlightBackground#8a2850
  • editor.foreground#d8eef8
  • editor.inactiveSelectionBackground#0e2c40
  • editor.lineHighlightBackground#142030
  • editor.rangeHighlightBackground#121e30
  • editor.selectionBackground#1a4a6a
  • editor.selectionHighlightBackground#123850
  • editor.wordHighlightBackground#183858
  • editor.wordHighlightStrongBackground#204870
  • editorBracketMatch.background#1a4a6a
  • editorBracketMatch.border#f8c840
  • editorCursor.foreground#f8c840
  • editorGroupHeader.tabsBackground#090e1c
  • editorGroupHeader.tabsBorder#182030
  • editorGutter.addedBackground#3a9858
  • editorGutter.background#0e1a2a
  • editorGutter.deletedBackground#c04878
  • editorGutter.modifiedBackground#f8c840
  • editorIndentGuide.activeBackground1#384e60
  • editorIndentGuide.background1#263848
  • editorLineNumber.activeForeground#6090b8
  • editorLineNumber.foreground#3a5068
  • editorWhitespace.foreground#182838
  • focusBorder#f8c840
  • gitDecoration.addedResourceForeground#3a9858
  • gitDecoration.conflictingResourceForeground#9858b8
  • gitDecoration.deletedResourceForeground#c04878
  • gitDecoration.ignoredResourceForeground#2a3a50
  • gitDecoration.modifiedResourceForeground#f8c840
  • gitDecoration.untrackedResourceForeground#58c878
  • input.background#0e1a28
  • input.border#1e2c3c
  • input.foreground#d8eef8
  • input.placeholderForeground#1a2c40
  • inputOption.activeBackground#1e2c3c
  • inputOption.activeBorder#f8c840
  • list.activeSelectionBackground#1e2c3c
  • list.activeSelectionForeground#d8eef8
  • list.focusBackground#1e2c3c
  • list.highlightForeground#f8c840
  • list.hoverBackground#142030
  • list.hoverForeground#d8eef8
  • list.inactiveSelectionBackground#182030
  • list.inactiveSelectionForeground#6898c0
  • notificationLink.foreground#f8c840
  • notifications.background#0e1a28
  • notifications.border#1e2c3c
  • notifications.foreground#d8eef8
  • panel.background#0a1520
  • panel.border#182030
  • panelTitle.activeBorder#f8c840
  • panelTitle.activeForeground#68c8e8
  • panelTitle.inactiveForeground#1a2c40
  • peekView.border#f8c840
  • peekViewEditor.background#0c1824
  • peekViewEditor.matchHighlightBackground#1a4a6a
  • peekViewResult.background#0a1520
  • peekViewResult.fileForeground#68c8e8
  • peekViewResult.lineForeground#6898c0
  • peekViewResult.matchHighlightBackground#1a4a6a
  • peekViewResult.selectionBackground#1e2c3c
  • peekViewResult.selectionForeground#d8eef8
  • peekViewTitle.background#0e1a28
  • peekViewTitleDescription.foreground#305878
  • peekViewTitleLabel.foreground#d8eef8
  • progressBar.background#f8c840
  • scrollbarSlider.activeBackground#344c64ee
  • scrollbarSlider.background#1e2c3caa
  • scrollbarSlider.hoverBackground#283c50cc
  • selection.background#1a4a6a
  • sideBar.background#0a1520
  • sideBar.border#182030
  • sideBar.foreground#6898c0
  • sideBarSectionHeader.background#0e1a28
  • sideBarSectionHeader.border#1e2c3c
  • sideBarSectionHeader.foreground#50b0d8
  • sideBarTitle.foreground#68c8e8
  • statusBar.background#080f18
  • statusBar.border#182030
  • statusBar.debuggingBackground#6a2048
  • statusBar.foreground#68c8e8
  • statusBar.noFolderBackground#1a1030
  • statusBarItem.activeBackground#1e2c3c
  • statusBarItem.hoverBackground#182030
  • statusBarItem.remoteBackground#f8c840
  • statusBarItem.remoteForeground#0e1a2a
  • tab.activeBackground#0e1a2a
  • tab.activeBorder#f8c840
  • tab.activeForeground#d8eef8
  • tab.border#182030
  • tab.hoverBackground#121e2c
  • tab.inactiveBackground#0a1520
  • tab.inactiveForeground#304858
  • terminal.ansiBlack#182030
  • terminal.ansiBlue#2870b8
  • terminal.ansiBrightBlack#2a3a50
  • terminal.ansiBrightBlue#58a0e8
  • terminal.ansiBrightCyan#68d8f8
  • terminal.ansiBrightGreen#58c878
  • terminal.ansiBrightMagenta#c888e8
  • terminal.ansiBrightRed#f06898
  • terminal.ansiBrightWhite#e8f8ff
  • terminal.ansiBrightYellow#ffe870
  • terminal.ansiCyan#38b8d8
  • terminal.ansiGreen#3a9858
  • terminal.ansiMagenta#9858b8
  • terminal.ansiRed#c04878
  • terminal.ansiWhite#a0c0d8
  • terminal.ansiYellow#f8c840
  • terminal.background#0a1520
  • terminal.foreground#d8eef8
  • terminalCursor.foreground#f8c840
  • textLink.activeForeground#ffd860
  • textLink.foreground#f8c840
  • titleBar.activeBackground#080f18
  • titleBar.activeForeground#68c8e8
  • titleBar.border#182030
  • titleBar.inactiveBackground#0a1520
  • titleBar.inactiveForeground#1a2c40
  • widget.shadow#040810cc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4a6888italic
string, string.quoted#e87898
constant.character.escape, string.regexp#f8c840
constant.numeric#78d8a8
constant.language#58c878bold
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#f06898bold
keyword.operator#4878a0
entity.name.function, meta.function-call entity.name.function, support.function#68c8e8
entity.name.class, entity.name.type, support.class, entity.other.inherited-class#58a0e8bold
variable, variable.other#d8eef8
variable.language#f8c840italic
variable.parameter#b8d8f0
variable.other.property, support.variable.property, meta.object-literal.key#78b8d8
entity.name.tag, meta.tag#f06898
entity.other.attribute-name#78a8c8
entity.other.attribute-name.class, entity.other.attribute-name.id#e87898
support.type.property-name#68c8e8
support.constant.property-value#e87898
keyword.control.import, keyword.control.from#f06898bold
punctuation.separator, punctuation.terminator, punctuation.accessor#304858
punctuation.definition.parameters, punctuation.definition.block, meta.brace#305878
markup.heading, entity.name.section#f8c840bold
markup.bold#e87898bold
markup.italic#78b8d8italic
markup.inline.raw, markup.fenced_code#68c8e8
markup.underline.link#f8c840
invalid#ff4888underline
invalid.deprecated#604068strikethrough
Atmospheres by SaladCrunch - VS Code Theme