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#080705
  • activityBar.border#1c1a0c
  • activityBar.foreground#c07830
  • activityBar.inactiveForeground#403210
  • activityBarBadge.background#c87030
  • activityBarBadge.foreground#0f0e09
  • badge.background#3a9870
  • badge.foreground#0f0e09
  • breadcrumb.activeSelectionForeground#d4c090
  • breadcrumb.focusForeground#c07830
  • breadcrumb.foreground#5a4820
  • breadcrumbPicker.background#121008
  • button.background#3a9870
  • button.foreground#0f0e09
  • button.hoverBackground#50a888
  • button.secondaryBackground#2a2410
  • button.secondaryForeground#c07830
  • descriptionForeground#6a5828
  • dropdown.background#121008
  • dropdown.border#2a2410
  • dropdown.foreground#d4c090
  • editor.background#0f0e09
  • editor.findMatchBackground#504010
  • editor.findMatchHighlightBackground#302808
  • editor.foreground#d4c090
  • editor.inactiveSelectionBackground#182818
  • editor.lineHighlightBackground#161408
  • editor.rangeHighlightBackground#181408
  • editor.selectionBackground#2a3a2a
  • editor.selectionHighlightBackground#1e2e20
  • editor.wordHighlightBackground#1e3025
  • editor.wordHighlightStrongBackground#283c2e
  • editorBracketMatch.background#2a3a2a
  • editorBracketMatch.border#50a888
  • editorCursor.foreground#c87030
  • editorGroupHeader.tabsBackground#0a0906
  • editorGroupHeader.tabsBorder#1c1a0c
  • editorGutter.addedBackground#3a7848
  • editorGutter.background#0f0e09
  • editorGutter.deletedBackground#703020
  • editorGutter.modifiedBackground#907820
  • editorIndentGuide.activeBackground1#3e3c20
  • editorIndentGuide.background1#2a2818
  • editorLineNumber.activeForeground#a08038
  • editorLineNumber.foreground#584828
  • editorWhitespace.foreground#221e10
  • focusBorder#c87030
  • gitDecoration.addedResourceForeground#40a870
  • gitDecoration.conflictingResourceForeground#805840
  • gitDecoration.deletedResourceForeground#904030
  • gitDecoration.ignoredResourceForeground#3a3018
  • gitDecoration.modifiedResourceForeground#a08030
  • gitDecoration.untrackedResourceForeground#50a878
  • input.background#121008
  • input.border#2a2410
  • input.foreground#d4c090
  • input.placeholderForeground#403210
  • inputOption.activeBackground#2a2410
  • inputOption.activeBorder#c87030
  • list.activeSelectionBackground#2a2410
  • list.activeSelectionForeground#d4c090
  • list.focusBackground#2a2410
  • list.highlightForeground#50a888
  • list.hoverBackground#161408
  • list.hoverForeground#d4c090
  • list.inactiveSelectionBackground#1c1a0c
  • list.inactiveSelectionForeground#9a8860
  • notificationLink.foreground#50a888
  • notifications.background#121008
  • notifications.border#2a2410
  • notifications.foreground#d4c090
  • panel.background#0b0a07
  • panel.border#1c1a0c
  • panelTitle.activeBorder#c87030
  • panelTitle.activeForeground#c07830
  • panelTitle.inactiveForeground#403210
  • peekView.border#c87030
  • peekViewEditor.background#0d0c08
  • peekViewEditor.matchHighlightBackground#2a3a2a
  • peekViewResult.background#0b0a07
  • peekViewResult.fileForeground#c07830
  • peekViewResult.lineForeground#9a8860
  • peekViewResult.matchHighlightBackground#2a3a2a
  • peekViewResult.selectionBackground#2a2410
  • peekViewResult.selectionForeground#d4c090
  • peekViewTitle.background#121008
  • peekViewTitleDescription.foreground#6a5828
  • peekViewTitleLabel.foreground#d4c090
  • progressBar.background#50a888
  • scrollbarSlider.activeBackground#483c20ee
  • scrollbarSlider.background#2a2410aa
  • scrollbarSlider.hoverBackground#382e18cc
  • selection.background#2a3a2a
  • sideBar.background#0b0a07
  • sideBar.border#1c1a0c
  • sideBar.foreground#9a8860
  • sideBarSectionHeader.background#121008
  • sideBarSectionHeader.border#241e0c
  • sideBarSectionHeader.foreground#a87848
  • sideBarTitle.foreground#c07830
  • statusBar.background#080705
  • statusBar.border#1c1a0c
  • statusBar.debuggingBackground#503808
  • statusBar.foreground#c07830
  • statusBar.noFolderBackground#1e1408
  • statusBarItem.activeBackground#2a2410
  • statusBarItem.hoverBackground#1c1a0c
  • statusBarItem.remoteBackground#c87030
  • statusBarItem.remoteForeground#0f0e09
  • tab.activeBackground#0f0e09
  • tab.activeBorder#c87030
  • tab.activeForeground#d4c090
  • tab.border#1c1a0c
  • tab.hoverBackground#141208
  • tab.inactiveBackground#0b0a07
  • tab.inactiveForeground#5a4820
  • terminal.ansiBlack#1c1a0c
  • terminal.ansiBlue#506888
  • terminal.ansiBrightBlack#3a3018
  • terminal.ansiBrightBlue#7088a8
  • terminal.ansiBrightCyan#50b8a0
  • terminal.ansiBrightGreen#50b888
  • terminal.ansiBrightMagenta#a07858
  • terminal.ansiBrightRed#b05040
  • terminal.ansiBrightWhite#e0d0a0
  • terminal.ansiBrightYellow#c0a040
  • terminal.ansiCyan#3a9880
  • terminal.ansiGreen#3a9870
  • terminal.ansiMagenta#805840
  • terminal.ansiRed#904030
  • terminal.ansiWhite#b0a070
  • terminal.ansiYellow#a08030
  • terminal.background#0b0a07
  • terminal.foreground#d4c090
  • terminalCursor.foreground#c87030
  • textLink.activeForeground#68c0a0
  • textLink.foreground#50a888
  • titleBar.activeBackground#080705
  • titleBar.activeForeground#c07830
  • titleBar.border#1c1a0c
  • titleBar.inactiveBackground#0b0a07
  • titleBar.inactiveForeground#403210
  • widget.shadow#040403cc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a5a2citalic
string, string.quoted#c8a840
constant.character.escape, string.regexp#58b890
constant.numeric#b89838
constant.language#e07838bold
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#d06830bold
keyword.operator#7a6030
entity.name.function, meta.function-call entity.name.function, support.function#50a888
entity.name.class, entity.name.type, support.class, entity.other.inherited-class#48a878bold
variable, variable.other#d4c090
variable.language#e07838italic
variable.parameter#c8b878
variable.other.property, support.variable.property, meta.object-literal.key#9a8858
entity.name.tag, meta.tag#d06830
entity.other.attribute-name#8a7048
entity.other.attribute-name.class, entity.other.attribute-name.id#c8a840
support.type.property-name#50a888
support.constant.property-value#c8a840
keyword.control.import, keyword.control.from#d06830bold
punctuation.separator, punctuation.terminator, punctuation.accessor#4a3818
punctuation.definition.parameters, punctuation.definition.block, meta.brace#604e28
markup.heading, entity.name.section#e07838bold
markup.bold#c8a840bold
markup.italic#9a8858italic
markup.inline.raw, markup.fenced_code#50a888
markup.underline.link#58b890
invalid#c04030underline
invalid.deprecated#6a4828strikethrough
Atmospheres by SaladCrunch - VS Code Theme