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#04060c
  • activityBar.border#0e1828
  • activityBar.foreground#3898d0
  • activityBar.inactiveForeground#121e30
  • activityBarBadge.background#c02030
  • activityBarBadge.foreground#f0e8e0
  • badge.background#8a1020
  • badge.foreground#f0e8e0
  • breadcrumb.activeSelectionForeground#d4ccc0
  • breadcrumb.focusForeground#3898d0
  • breadcrumb.foreground#1e2e44
  • breadcrumbPicker.background#090e1a
  • button.background#8a1020
  • button.foreground#f0e8e0
  • button.hoverBackground#b01828
  • button.secondaryBackground#180c18
  • button.secondaryForeground#3898d0
  • descriptionForeground#305878
  • dropdown.background#090e1a
  • dropdown.border#180c18
  • dropdown.foreground#d4ccc0
  • editor.background#080c12
  • editor.findMatchBackground#5a1808
  • editor.findMatchHighlightBackground#3c1006
  • editor.foreground#d4ccc0
  • editor.inactiveSelectionBackground#160608
  • editor.lineHighlightBackground#0f1520
  • editor.rangeHighlightBackground#0e1520
  • editor.selectionBackground#2a0c10
  • editor.selectionHighlightBackground#1c0808
  • editor.wordHighlightBackground#220a0c
  • editor.wordHighlightStrongBackground#2e0c10
  • editorBracketMatch.background#2a0c10
  • editorBracketMatch.border#60b8e8
  • editorCursor.foreground#60b8e8
  • editorGroupHeader.tabsBackground#050810
  • editorGroupHeader.tabsBorder#0e1828
  • editorGutter.addedBackground#206840
  • editorGutter.background#080c12
  • editorGutter.deletedBackground#980c18
  • editorGutter.modifiedBackground#286898
  • editorIndentGuide.activeBackground1#2c4060
  • editorIndentGuide.background1#1e2e48
  • editorLineNumber.activeForeground#508098
  • editorLineNumber.foreground#304860
  • editorWhitespace.foreground#141c28
  • focusBorder#60b8e8
  • gitDecoration.addedResourceForeground#30b878
  • gitDecoration.conflictingResourceForeground#e83040
  • gitDecoration.deletedResourceForeground#c82030
  • gitDecoration.ignoredResourceForeground#1e2e44
  • gitDecoration.modifiedResourceForeground#2888d0
  • gitDecoration.untrackedResourceForeground#48d898
  • input.background#090e1a
  • input.border#180c18
  • input.foreground#d4ccc0
  • input.placeholderForeground#121e30
  • inputOption.activeBackground#180c18
  • inputOption.activeBorder#60b8e8
  • list.activeSelectionBackground#180c18
  • list.activeSelectionForeground#d4ccc0
  • list.focusBackground#180c18
  • list.highlightForeground#60b8e8
  • list.hoverBackground#0f1520
  • list.hoverForeground#d4ccc0
  • list.inactiveSelectionBackground#0e1828
  • list.inactiveSelectionForeground#4878a8
  • notificationLink.foreground#60b8e8
  • notifications.background#090e1a
  • notifications.border#180c18
  • notifications.foreground#d4ccc0
  • panel.background#060910
  • panel.border#0e1828
  • panelTitle.activeBorder#60b8e8
  • panelTitle.activeForeground#3898d0
  • panelTitle.inactiveForeground#121e30
  • peekView.border#60b8e8
  • peekViewEditor.background#060a10
  • peekViewEditor.matchHighlightBackground#2a0c10
  • peekViewResult.background#060910
  • peekViewResult.fileForeground#3898d0
  • peekViewResult.lineForeground#4878a8
  • peekViewResult.matchHighlightBackground#2a0c10
  • peekViewResult.selectionBackground#180c18
  • peekViewResult.selectionForeground#d4ccc0
  • peekViewTitle.background#090e1a
  • peekViewTitleDescription.foreground#305878
  • peekViewTitleLabel.foreground#d4ccc0
  • progressBar.background#c02030
  • scrollbarSlider.activeBackground#301428ee
  • scrollbarSlider.background#180c18aa
  • scrollbarSlider.hoverBackground#241020cc
  • selection.background#2a0c10
  • sideBar.background#060910
  • sideBar.border#0e1828
  • sideBar.foreground#4878a8
  • sideBarSectionHeader.background#090e1a
  • sideBarSectionHeader.border#121e30
  • sideBarSectionHeader.foreground#2878b8
  • sideBarTitle.foreground#3898d0
  • statusBar.background#04060c
  • statusBar.border#0e1828
  • statusBar.debuggingBackground#6a0810
  • statusBar.foreground#3898d0
  • statusBar.noFolderBackground#140810
  • statusBarItem.activeBackground#180c18
  • statusBarItem.hoverBackground#0e1828
  • statusBarItem.remoteBackground#c02030
  • statusBarItem.remoteForeground#f0e8e0
  • tab.activeBackground#080c12
  • tab.activeBorder#60b8e8
  • tab.activeForeground#d4ccc0
  • tab.border#0e1828
  • tab.hoverBackground#0c1220
  • tab.inactiveBackground#060910
  • tab.inactiveForeground#1e2e44
  • terminal.ansiBlack#0e1828
  • terminal.ansiBlue#2868c0
  • terminal.ansiBrightBlack#1e2e44
  • terminal.ansiBrightBlue#4888e0
  • terminal.ansiBrightCyan#38b8e0
  • terminal.ansiBrightGreen#30b878
  • terminal.ansiBrightMagenta#a06890
  • terminal.ansiBrightRed#e83040
  • terminal.ansiBrightWhite#ece8e0
  • terminal.ansiBrightYellow#e0a830
  • terminal.ansiCyan#1898c0
  • terminal.ansiGreen#208858
  • terminal.ansiMagenta#804870
  • terminal.ansiRed#c82030
  • terminal.ansiWhite#8898a8
  • terminal.ansiYellow#c08820
  • terminal.background#060910
  • terminal.foreground#d4ccc0
  • terminalCursor.foreground#60b8e8
  • textLink.activeForeground#88d0f8
  • textLink.foreground#60b8e8
  • titleBar.activeBackground#04060c
  • titleBar.activeForeground#3898d0
  • titleBar.border#0e1828
  • titleBar.inactiveBackground#060910
  • titleBar.inactiveForeground#121e30
  • widget.shadow#020408cc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3a5870italic
string, string.quoted#d0a828
constant.character.escape, string.regexp#e8c040
constant.numeric#e0a830
constant.language#e03040bold
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#c82030bold
keyword.operator#486878
entity.name.function, meta.function-call entity.name.function, support.function#3898d0
entity.name.class, entity.name.type, support.class, entity.other.inherited-class#5ab0e8bold
variable, variable.other#d4ccc0
variable.language#60b8e8italic
variable.parameter#bcc0b8
variable.other.property, support.variable.property, meta.object-literal.key#6898b8
entity.name.tag, meta.tag#c82030
entity.other.attribute-name#4878a0
entity.other.attribute-name.class, entity.other.attribute-name.id#d0a828
support.type.property-name#3898d0
support.constant.property-value#d0a828
keyword.control.import, keyword.control.from#c82030bold
punctuation.separator, punctuation.terminator, punctuation.accessor#1e2e44
punctuation.definition.parameters, punctuation.definition.block, meta.brace#305878
markup.heading, entity.name.section#60b8e8bold
markup.bold#d0a828bold
markup.italic#6898b8italic
markup.inline.raw, markup.fenced_code#3898d0
markup.underline.link#60b8e8
invalid#ff1828underline
invalid.deprecated#5a1020strikethrough
Atmospheres by SaladCrunch - VS Code Theme