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#080f08
  • activityBar.border#182818
  • activityBar.foreground#a0c080
  • activityBar.inactiveForeground#3a5838
  • activityBarBadge.background#6aaa50
  • activityBarBadge.foreground#0e1a0f
  • badge.background#6aaa50
  • badge.foreground#0e1a0f
  • breadcrumb.activeSelectionForeground#c4d0b8
  • breadcrumb.focusForeground#a0c080
  • breadcrumb.foreground#4a6a48
  • breadcrumbPicker.background#101e10
  • button.background#6aaa50
  • button.foreground#0e1a0f
  • button.hoverBackground#7abf60
  • button.secondaryBackground#243824
  • button.secondaryForeground#a0c080
  • descriptionForeground#6a8a68
  • dropdown.background#101e10
  • dropdown.border#243824
  • dropdown.foreground#c4d0b8
  • editor.background#0e1a0f
  • editor.findMatchBackground#3a6030
  • editor.findMatchHighlightBackground#243824
  • editor.foreground#c4d0b8
  • editor.inactiveSelectionBackground#1a2c1a
  • editor.lineHighlightBackground#162016
  • editor.rangeHighlightBackground#182018
  • editor.selectionBackground#2a4028
  • editor.selectionHighlightBackground#1e3020
  • editor.wordHighlightBackground#243824
  • editor.wordHighlightStrongBackground#304a30
  • editorBracketMatch.background#2a4028
  • editorBracketMatch.border#6aaa60
  • editorCursor.foreground#7abf60
  • editorGroupHeader.tabsBackground#0a1208
  • editorGroupHeader.tabsBorder#182818
  • editorGutter.addedBackground#4a7a30
  • editorGutter.background#0e1a0f
  • editorGutter.deletedBackground#7a3a28
  • editorGutter.modifiedBackground#8a7a20
  • editorIndentGuide.activeBackground1#365636
  • editorIndentGuide.background1#263826
  • editorLineNumber.activeForeground#7aaa6a
  • editorLineNumber.foreground#456845
  • editorWhitespace.foreground#243824
  • focusBorder#6aaa50
  • gitDecoration.addedResourceForeground#70aa48
  • gitDecoration.conflictingResourceForeground#8a7070
  • gitDecoration.deletedResourceForeground#a05040
  • gitDecoration.ignoredResourceForeground#3a5838
  • gitDecoration.modifiedResourceForeground#a09040
  • gitDecoration.untrackedResourceForeground#7aaa58
  • input.background#101e10
  • input.border#243824
  • input.foreground#c4d0b8
  • input.placeholderForeground#3a5838
  • inputOption.activeBackground#243824
  • inputOption.activeBorder#6aaa50
  • list.activeSelectionBackground#243824
  • list.activeSelectionForeground#c4d0b8
  • list.focusBackground#243824
  • list.highlightForeground#7abf60
  • list.hoverBackground#162016
  • list.hoverForeground#c4d0b8
  • list.inactiveSelectionBackground#182818
  • list.inactiveSelectionForeground#8aaa80
  • notificationLink.foreground#7abf60
  • notifications.background#101e10
  • notifications.border#243824
  • notifications.foreground#c4d0b8
  • panel.background#0a1509
  • panel.border#182818
  • panelTitle.activeBorder#6aaa50
  • panelTitle.activeForeground#a0c080
  • panelTitle.inactiveForeground#3a5838
  • peekView.border#6aaa50
  • peekViewEditor.background#0c1809
  • peekViewEditor.matchHighlightBackground#2a4028
  • peekViewResult.background#0a1509
  • peekViewResult.fileForeground#a0c080
  • peekViewResult.lineForeground#8aaa80
  • peekViewResult.matchHighlightBackground#2a4028
  • peekViewResult.selectionBackground#243824
  • peekViewResult.selectionForeground#c4d0b8
  • peekViewTitle.background#101e10
  • peekViewTitleDescription.foreground#6a8a68
  • peekViewTitleLabel.foreground#c4d0b8
  • progressBar.background#6aaa50
  • scrollbarSlider.activeBackground#4a6048ee
  • scrollbarSlider.background#2a4028aa
  • scrollbarSlider.hoverBackground#3a5038cc
  • selection.background#2a4028
  • sideBar.background#0a1509
  • sideBar.border#182818
  • sideBar.foreground#8aaa80
  • sideBarSectionHeader.background#101e10
  • sideBarSectionHeader.border#1e301e
  • sideBarSectionHeader.foreground#8aaa70
  • sideBarTitle.foreground#a0c080
  • statusBar.background#080f08
  • statusBar.border#182818
  • statusBar.debuggingBackground#3a5a18
  • statusBar.foreground#a0c080
  • statusBar.noFolderBackground#1a3010
  • statusBarItem.activeBackground#243824
  • statusBarItem.hoverBackground#182818
  • statusBarItem.remoteBackground#6aaa50
  • statusBarItem.remoteForeground#0e1a0f
  • tab.activeBackground#0e1a0f
  • tab.activeBorder#6aaa50
  • tab.activeForeground#c4d0b8
  • tab.border#182818
  • tab.hoverBackground#141e14
  • tab.inactiveBackground#0a1509
  • tab.inactiveForeground#4a6a48
  • terminal.ansiBlack#182818
  • terminal.ansiBlue#5a7a9a
  • terminal.ansiBrightBlack#3a5838
  • terminal.ansiBrightBlue#7a9abf
  • terminal.ansiBrightCyan#6abfaf
  • terminal.ansiBrightGreen#8acf70
  • terminal.ansiBrightMagenta#aa90a0
  • terminal.ansiBrightRed#c06050
  • terminal.ansiBrightWhite#d4e0c8
  • terminal.ansiBrightYellow#c0b060
  • terminal.ansiCyan#4a9a8a
  • terminal.ansiGreen#6aaa50
  • terminal.ansiMagenta#8a7080
  • terminal.ansiRed#a05040
  • terminal.ansiWhite#b0c0a8
  • terminal.ansiYellow#a09040
  • terminal.background#0a1509
  • terminal.foreground#c4d0b8
  • terminalCursor.foreground#7abf60
  • textLink.activeForeground#8acf70
  • textLink.foreground#7abf60
  • titleBar.activeBackground#080f08
  • titleBar.activeForeground#a0c080
  • titleBar.border#182818
  • titleBar.inactiveBackground#0a1509
  • titleBar.inactiveForeground#3a5838
  • widget.shadow#040a04cc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4a7848italic
string, string.quoted#a8c858
constant.character.escape, string.regexp#88d068
constant.numeric#c0b048
constant.language#7abf60bold
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#7aba60bold
keyword.operator#4e7a4c
entity.name.function, meta.function-call entity.name.function, support.function#6aaa50
entity.name.class, entity.name.type, support.class, entity.other.inherited-class#50b898bold
variable, variable.other#c4d0b8
variable.language#7aba60italic
variable.parameter#b0c8a8
variable.other.property, support.variable.property, meta.object-literal.key#6a9a70
entity.name.tag, meta.tag#7aba60
entity.other.attribute-name#8aaa70
entity.other.attribute-name.class, entity.other.attribute-name.id#a8c858
support.type.property-name#6aaa50
support.constant.property-value#a8c858
keyword.control.import, keyword.control.from#7aba60bold
punctuation.separator, punctuation.terminator, punctuation.accessor#3a5838
punctuation.definition.parameters, punctuation.definition.block, meta.brace#4e7a50
markup.heading, entity.name.section#88d068bold
markup.bold#a8c858bold
markup.italic#6a9a70italic
markup.inline.raw, markup.fenced_code#6aaa50
markup.underline.link#88d068
invalid#c06050underline
invalid.deprecated#7a6050strikethrough
Atmospheres by SaladCrunch - VS Code Theme