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#0a080f
  • activityBar.border#1e1828
  • activityBar.foreground#9878c0
  • activityBar.inactiveForeground#2e2248
  • activityBarBadge.background#a080d0
  • activityBarBadge.foreground#110e16
  • badge.background#7050a0
  • badge.foreground#110e16
  • breadcrumb.activeSelectionForeground#d8d0e8
  • breadcrumb.focusForeground#9878c0
  • breadcrumb.foreground#4a3868
  • breadcrumbPicker.background#131018
  • button.background#7050a0
  • button.foreground#110e16
  • button.hoverBackground#8060b8
  • button.secondaryBackground#2c2040
  • button.secondaryForeground#9878c0
  • descriptionForeground#5a4878
  • dropdown.background#131018
  • dropdown.border#2c2040
  • dropdown.foreground#d8d0e8
  • editor.background#110e16
  • editor.findMatchBackground#5a3070
  • editor.findMatchHighlightBackground#381e50
  • editor.foreground#d8d0e8
  • editor.inactiveSelectionBackground#221838
  • editor.lineHighlightBackground#17121e
  • editor.rangeHighlightBackground#1a1428
  • editor.selectionBackground#3a2858
  • editor.selectionHighlightBackground#2a1e46
  • editor.wordHighlightBackground#2e2250
  • editor.wordHighlightStrongBackground#402e68
  • editorBracketMatch.background#3a2858
  • editorBracketMatch.border#a080d0
  • editorCursor.foreground#a080d0
  • editorGroupHeader.tabsBackground#0c0a10
  • editorGroupHeader.tabsBorder#1e1828
  • editorGutter.addedBackground#406040
  • editorGutter.background#110e16
  • editorGutter.deletedBackground#703040
  • editorGutter.modifiedBackground#806090
  • editorIndentGuide.activeBackground1#3e3050
  • editorIndentGuide.background1#2a2038
  • editorLineNumber.activeForeground#8868a8
  • editorLineNumber.foreground#503868
  • editorWhitespace.foreground#241a30
  • focusBorder#a080d0
  • gitDecoration.addedResourceForeground#60a870
  • gitDecoration.conflictingResourceForeground#c06080
  • gitDecoration.deletedResourceForeground#a04060
  • gitDecoration.ignoredResourceForeground#3a2a50
  • gitDecoration.modifiedResourceForeground#9080a0
  • gitDecoration.untrackedResourceForeground#70a880
  • input.background#131018
  • input.border#2c2040
  • input.foreground#d8d0e8
  • input.placeholderForeground#2e2248
  • inputOption.activeBackground#2c2040
  • inputOption.activeBorder#a080d0
  • list.activeSelectionBackground#2c2040
  • list.activeSelectionForeground#d8d0e8
  • list.focusBackground#2c2040
  • list.highlightForeground#a080d0
  • list.hoverBackground#17121e
  • list.hoverForeground#d8d0e8
  • list.inactiveSelectionBackground#1e1828
  • list.inactiveSelectionForeground#8878a8
  • notificationLink.foreground#a080d0
  • notifications.background#131018
  • notifications.border#2c2040
  • notifications.foreground#d8d0e8
  • panel.background#0d0b12
  • panel.border#1e1828
  • panelTitle.activeBorder#a080d0
  • panelTitle.activeForeground#9878c0
  • panelTitle.inactiveForeground#2e2248
  • peekView.border#a080d0
  • peekViewEditor.background#0f0c14
  • peekViewEditor.matchHighlightBackground#3a2858
  • peekViewResult.background#0d0b12
  • peekViewResult.fileForeground#9878c0
  • peekViewResult.lineForeground#8878a8
  • peekViewResult.matchHighlightBackground#3a2858
  • peekViewResult.selectionBackground#2c2040
  • peekViewResult.selectionForeground#d8d0e8
  • peekViewTitle.background#131018
  • peekViewTitleDescription.foreground#5a4878
  • peekViewTitleLabel.foreground#d8d0e8
  • progressBar.background#a080d0
  • scrollbarSlider.activeBackground#483860ee
  • scrollbarSlider.background#2c2040aa
  • scrollbarSlider.hoverBackground#382c50cc
  • selection.background#3a2858
  • sideBar.background#0d0b12
  • sideBar.border#1e1828
  • sideBar.foreground#8878a8
  • sideBarSectionHeader.background#131018
  • sideBarSectionHeader.border#261e34
  • sideBarSectionHeader.foreground#8870b0
  • sideBarTitle.foreground#9878c0
  • statusBar.background#0a080f
  • statusBar.border#1e1828
  • statusBar.debuggingBackground#402858
  • statusBar.foreground#9878c0
  • statusBar.noFolderBackground#1c1230
  • statusBarItem.activeBackground#2c2040
  • statusBarItem.hoverBackground#1e1828
  • statusBarItem.remoteBackground#a080d0
  • statusBarItem.remoteForeground#110e16
  • tab.activeBackground#110e16
  • tab.activeBorder#a080d0
  • tab.activeForeground#d8d0e8
  • tab.border#1e1828
  • tab.hoverBackground#15111c
  • tab.inactiveBackground#0d0b12
  • tab.inactiveForeground#4a3868
  • terminal.ansiBlack#1e1828
  • terminal.ansiBlue#5060a0
  • terminal.ansiBrightBlack#3a2a50
  • terminal.ansiBrightBlue#7080c0
  • terminal.ansiBrightCyan#70a0c0
  • terminal.ansiBrightGreen#70a880
  • terminal.ansiBrightMagenta#a880c0
  • terminal.ansiBrightRed#c06080
  • terminal.ansiBrightWhite#e8e0f8
  • terminal.ansiBrightYellow#b0a0c0
  • terminal.ansiCyan#5080a0
  • terminal.ansiGreen#508860
  • terminal.ansiMagenta#8860a0
  • terminal.ansiRed#a04060
  • terminal.ansiWhite#b0a8c8
  • terminal.ansiYellow#9080a0
  • terminal.background#0d0b12
  • terminal.foreground#d8d0e8
  • terminalCursor.foreground#a080d0
  • textLink.activeForeground#b898e0
  • textLink.foreground#a080d0
  • titleBar.activeBackground#0a080f
  • titleBar.activeForeground#9878c0
  • titleBar.border#1e1828
  • titleBar.inactiveBackground#0d0b12
  • titleBar.inactiveForeground#2e2248
  • widget.shadow#060408cc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#624878italic
string, string.quoted#c890d0
constant.character.escape, string.regexp#b098e0
constant.numeric#9888c8
constant.language#a080d0bold
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#d070a0bold
keyword.operator#6a5080
entity.name.function, meta.function-call entity.name.function, support.function#a080d0
entity.name.class, entity.name.type, support.class, entity.other.inherited-class#9080c0bold
variable, variable.other#d8d0e8
variable.language#b098e0italic
variable.parameter#c8c0d8
variable.other.property, support.variable.property, meta.object-literal.key#9080b0
entity.name.tag, meta.tag#d070a0
entity.other.attribute-name#9870a8
entity.other.attribute-name.class, entity.other.attribute-name.id#c890d0
support.type.property-name#a080d0
support.constant.property-value#c890d0
keyword.control.import, keyword.control.from#d070a0bold
punctuation.separator, punctuation.terminator, punctuation.accessor#3e2e58
punctuation.definition.parameters, punctuation.definition.block, meta.brace#524068
markup.heading, entity.name.section#b098e0bold
markup.bold#c890d0bold
markup.italic#9080b0italic
markup.inline.raw, markup.fenced_code#a080d0
markup.underline.link#b098e0
invalid#d04070underline
invalid.deprecated#604060strikethrough
Atmospheres by SaladCrunch - VS Code Theme