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#070710
  • activityBar.border#181530
  • activityBar.foreground#c8a060
  • activityBar.inactiveForeground#3a3460
  • activityBarBadge.background#d4a030
  • activityBarBadge.foreground#0d0d1a
  • badge.background#a07820
  • badge.foreground#0d0d1a
  • breadcrumb.activeSelectionForeground#e8d8b0
  • breadcrumb.focusForeground#c8a060
  • breadcrumb.foreground#504870
  • breadcrumbPicker.background#0e0e1e
  • button.background#a07820
  • button.foreground#0d0d1a
  • button.hoverBackground#c09030
  • button.secondaryBackground#28203c
  • button.secondaryForeground#c8a060
  • descriptionForeground#6a5880
  • dropdown.background#0e0e1e
  • dropdown.border#28203c
  • dropdown.foreground#e8d8b0
  • editor.background#0d0d1a
  • editor.findMatchBackground#6a5020
  • editor.findMatchHighlightBackground#3a2c10
  • editor.foreground#e8d8b0
  • editor.inactiveSelectionBackground#201c3c
  • editor.lineHighlightBackground#131325
  • editor.rangeHighlightBackground#181530
  • editor.selectionBackground#3a3060
  • editor.selectionHighlightBackground#28224a
  • editor.wordHighlightBackground#2a2550
  • editor.wordHighlightStrongBackground#382e68
  • editorBracketMatch.background#3a3060
  • editorBracketMatch.border#d4a030
  • editorCursor.foreground#d4a030
  • editorGroupHeader.tabsBackground#080812
  • editorGroupHeader.tabsBorder#181530
  • editorGutter.addedBackground#3a6830
  • editorGutter.background#0d0d1a
  • editorGutter.deletedBackground#702820
  • editorGutter.modifiedBackground#a07820
  • editorIndentGuide.activeBackground1#383258
  • editorIndentGuide.background1#252040
  • editorLineNumber.activeForeground#9080a8
  • editorLineNumber.foreground#4a4470
  • editorWhitespace.foreground#201c38
  • focusBorder#d4a030
  • gitDecoration.addedResourceForeground#70a840
  • gitDecoration.conflictingResourceForeground#8860a0
  • gitDecoration.deletedResourceForeground#a04030
  • gitDecoration.ignoredResourceForeground#3a3460
  • gitDecoration.modifiedResourceForeground#c89020
  • gitDecoration.untrackedResourceForeground#60a050
  • input.background#0e0e1e
  • input.border#28203c
  • input.foreground#e8d8b0
  • input.placeholderForeground#3a3460
  • inputOption.activeBackground#28203c
  • inputOption.activeBorder#d4a030
  • list.activeSelectionBackground#28203c
  • list.activeSelectionForeground#e8d8b0
  • list.focusBackground#28203c
  • list.highlightForeground#d4a030
  • list.hoverBackground#131325
  • list.hoverForeground#e8d8b0
  • list.inactiveSelectionBackground#181530
  • list.inactiveSelectionForeground#9888c0
  • notificationLink.foreground#d4a030
  • notifications.background#0e0e1e
  • notifications.border#28203c
  • notifications.foreground#e8d8b0
  • panel.background#090914
  • panel.border#181530
  • panelTitle.activeBorder#d4a030
  • panelTitle.activeForeground#c8a060
  • panelTitle.inactiveForeground#3a3460
  • peekView.border#d4a030
  • peekViewEditor.background#0b0b16
  • peekViewEditor.matchHighlightBackground#3a3060
  • peekViewResult.background#090914
  • peekViewResult.fileForeground#c8a060
  • peekViewResult.lineForeground#9888c0
  • peekViewResult.matchHighlightBackground#3a3060
  • peekViewResult.selectionBackground#28203c
  • peekViewResult.selectionForeground#e8d8b0
  • peekViewTitle.background#0e0e1e
  • peekViewTitleDescription.foreground#6a5880
  • peekViewTitleLabel.foreground#e8d8b0
  • progressBar.background#d4a030
  • scrollbarSlider.activeBackground#403460ee
  • scrollbarSlider.background#28203caa
  • scrollbarSlider.hoverBackground#342a50cc
  • selection.background#3a3060
  • sideBar.background#090914
  • sideBar.border#181530
  • sideBar.foreground#9888c0
  • sideBarSectionHeader.background#0e0e1e
  • sideBarSectionHeader.border#20203a
  • sideBarSectionHeader.foreground#b08860
  • sideBarTitle.foreground#c8a060
  • statusBar.background#070710
  • statusBar.border#181530
  • statusBar.debuggingBackground#4a3810
  • statusBar.foreground#c8a060
  • statusBar.noFolderBackground#1a1430
  • statusBarItem.activeBackground#28203c
  • statusBarItem.hoverBackground#181530
  • statusBarItem.remoteBackground#d4a030
  • statusBarItem.remoteForeground#0d0d1a
  • tab.activeBackground#0d0d1a
  • tab.activeBorder#d4a030
  • tab.activeForeground#e8d8b0
  • tab.border#181530
  • tab.hoverBackground#111120
  • tab.inactiveBackground#090914
  • tab.inactiveForeground#504870
  • terminal.ansiBlack#181530
  • terminal.ansiBlue#5060a0
  • terminal.ansiBrightBlack#3a3460
  • terminal.ansiBrightBlue#7080c0
  • terminal.ansiBrightCyan#60a8a8
  • terminal.ansiBrightGreen#80a850
  • terminal.ansiBrightMagenta#a880c0
  • terminal.ansiBrightRed#c05040
  • terminal.ansiBrightWhite#f0e0c0
  • terminal.ansiBrightYellow#e0b030
  • terminal.ansiCyan#408888
  • terminal.ansiGreen#608840
  • terminal.ansiMagenta#8860a0
  • terminal.ansiRed#a04030
  • terminal.ansiWhite#c0b090
  • terminal.ansiYellow#c89020
  • terminal.background#090914
  • terminal.foreground#e8d8b0
  • terminalCursor.foreground#d4a030
  • textLink.activeForeground#e8b840
  • textLink.foreground#d4a030
  • titleBar.activeBackground#070710
  • titleBar.activeForeground#c8a060
  • titleBar.border#181530
  • titleBar.inactiveBackground#090914
  • titleBar.inactiveForeground#3a3460
  • widget.shadow#040408cc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a5480italic
string, string.quoted#d4a840
constant.character.escape, string.regexp#e8c050
constant.numeric#c89830
constant.language#e0a030bold
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#b090d0bold
keyword.operator#6a5888
entity.name.function, meta.function-call entity.name.function, support.function#d4a030
entity.name.class, entity.name.type, support.class, entity.other.inherited-class#a890c8bold
variable, variable.other#e8d8b0
variable.language#e0a030italic
variable.parameter#d8c898
variable.other.property, support.variable.property, meta.object-literal.key#b8a070
entity.name.tag, meta.tag#b090d0
entity.other.attribute-name#9878b8
entity.other.attribute-name.class, entity.other.attribute-name.id#d4a840
support.type.property-name#d4a030
support.constant.property-value#d4a840
keyword.control.import, keyword.control.from#b090d0bold
punctuation.separator, punctuation.terminator, punctuation.accessor#484070
punctuation.definition.parameters, punctuation.definition.block, meta.brace#5a5080
markup.heading, entity.name.section#e0a030bold
markup.bold#d4a840bold
markup.italic#b8a070italic
markup.inline.raw, markup.fenced_code#d4a030
markup.underline.link#e0a030
invalid#d04030underline
invalid.deprecated#704858strikethrough
Atmospheres by SaladCrunch - VS Code Theme