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#120c05
  • activityBar.border#2a1c0c
  • activityBar.foreground#c8a870
  • activityBar.inactiveForeground#6a4a2a
  • activityBarBadge.background#d4693a
  • activityBarBadge.foreground#1c1209
  • badge.background#c4783a
  • badge.foreground#1c1209
  • breadcrumb.activeSelectionForeground#d4c4a8
  • breadcrumb.focusForeground#c8a870
  • breadcrumb.foreground#7a5a3a
  • breadcrumbPicker.background#1e1409
  • button.background#c4783a
  • button.foreground#1c1209
  • button.hoverBackground#d4884a
  • button.secondaryBackground#3a2810
  • button.secondaryForeground#c8a870
  • descriptionForeground#9a7a58
  • dropdown.background#1e1409
  • dropdown.border#3a2810
  • dropdown.foreground#d4c4a8
  • editor.background#1c1209
  • editor.findMatchBackground#7a4a1a
  • editor.findMatchHighlightBackground#4a2e10
  • editor.foreground#d4c4a8
  • editor.inactiveSelectionBackground#31200f
  • editor.lineHighlightBackground#261a0e
  • editor.rangeHighlightBackground#2a1e0d
  • editor.selectionBackground#4a2e1a
  • editor.selectionHighlightBackground#3a2210
  • editor.wordHighlightBackground#3d2b14
  • editor.wordHighlightStrongBackground#553a18
  • editorBracketMatch.background#4a2e14
  • editorBracketMatch.border#c4783a
  • editorCursor.foreground#d4813a
  • editorGroupHeader.tabsBackground#140e07
  • editorGroupHeader.tabsBorder#2a1c0c
  • editorGutter.addedBackground#5a7a30
  • editorGutter.background#1c1209
  • editorGutter.deletedBackground#8a3020
  • editorGutter.modifiedBackground#b87a20
  • editorIndentGuide.activeBackground1#5a4028
  • editorIndentGuide.background1#3a2818
  • editorLineNumber.activeForeground#c08050
  • editorLineNumber.foreground#6a4a30
  • editorWhitespace.foreground#3a2a18
  • focusBorder#c4783a
  • gitDecoration.addedResourceForeground#8aaa50
  • gitDecoration.conflictingResourceForeground#b07060
  • gitDecoration.deletedResourceForeground#c0503a
  • gitDecoration.ignoredResourceForeground#5a4030
  • gitDecoration.modifiedResourceForeground#c4963a
  • gitDecoration.untrackedResourceForeground#7a9a60
  • input.background#1e1409
  • input.border#3a2810
  • input.foreground#d4c4a8
  • input.placeholderForeground#6a4a2a
  • inputOption.activeBackground#3a2810
  • inputOption.activeBorder#c4783a
  • list.activeSelectionBackground#3a2810
  • list.activeSelectionForeground#d4c4a8
  • list.focusBackground#3a2810
  • list.highlightForeground#d4813a
  • list.hoverBackground#261a0e
  • list.hoverForeground#d4c4a8
  • list.inactiveSelectionBackground#2a1c0c
  • list.inactiveSelectionForeground#b0987a
  • notificationLink.foreground#d4813a
  • notifications.background#1e1409
  • notifications.border#3a2810
  • notifications.foreground#d4c4a8
  • panel.background#160e06
  • panel.border#2a1c0c
  • panelTitle.activeBorder#c4783a
  • panelTitle.activeForeground#c8a870
  • panelTitle.inactiveForeground#6a4a2a
  • peekView.border#c4783a
  • peekViewEditor.background#1a1008
  • peekViewEditor.matchHighlightBackground#4a2e14
  • peekViewResult.background#160e06
  • peekViewResult.fileForeground#c8a870
  • peekViewResult.lineForeground#b0987a
  • peekViewResult.matchHighlightBackground#4a2e14
  • peekViewResult.selectionBackground#3a2810
  • peekViewResult.selectionForeground#d4c4a8
  • peekViewTitle.background#1e1409
  • peekViewTitleDescription.foreground#9a7a58
  • peekViewTitleLabel.foreground#d4c4a8
  • progressBar.background#c4783a
  • scrollbarSlider.activeBackground#5a4828ee
  • scrollbarSlider.background#3a2810aa
  • scrollbarSlider.hoverBackground#4a3818cc
  • selection.background#4a2e1a
  • sideBar.background#160e06
  • sideBar.border#2a1c0c
  • sideBar.foreground#b0987a
  • sideBarSectionHeader.background#1e1409
  • sideBarSectionHeader.border#2e1e0e
  • sideBarSectionHeader.foreground#c0906a
  • sideBarTitle.foreground#c8a870
  • statusBar.background#120c05
  • statusBar.border#2a1c0c
  • statusBar.debuggingBackground#7a3a10
  • statusBar.foreground#c8a870
  • statusBar.noFolderBackground#3a1a0a
  • statusBarItem.activeBackground#3a2810
  • statusBarItem.hoverBackground#2a1c0c
  • statusBarItem.remoteBackground#c4783a
  • statusBarItem.remoteForeground#1c1209
  • tab.activeBackground#1c1209
  • tab.activeBorder#c4783a
  • tab.activeForeground#d4c4a8
  • tab.border#2a1c0c
  • tab.hoverBackground#231610
  • tab.inactiveBackground#160e06
  • tab.inactiveForeground#7a5a3a
  • terminal.ansiBlack#2a1c0c
  • terminal.ansiBlue#7a8ab0
  • terminal.ansiBrightBlack#5a4030
  • terminal.ansiBrightBlue#9aaccf
  • terminal.ansiBrightCyan#7abfaf
  • terminal.ansiBrightGreen#9abf50
  • terminal.ansiBrightMagenta#d09080
  • terminal.ansiBrightRed#e06040
  • terminal.ansiBrightWhite#e8d8b8
  • terminal.ansiBrightYellow#d4b050
  • terminal.ansiCyan#5a9a8a
  • terminal.ansiGreen#7a9a40
  • terminal.ansiMagenta#b07060
  • terminal.ansiRed#c0503a
  • terminal.ansiWhite#c8b898
  • terminal.ansiYellow#c4963a
  • terminal.background#160e06
  • terminal.foreground#d4c4a8
  • terminalCursor.foreground#d4813a
  • textLink.activeForeground#e4914a
  • textLink.foreground#d4813a
  • titleBar.activeBackground#120c05
  • titleBar.activeForeground#c8a870
  • titleBar.border#2a1c0c
  • titleBar.inactiveBackground#160e06
  • titleBar.inactiveForeground#6a4a2a
  • widget.shadow#0c0804cc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a5a3citalic
string, string.quoted#d4a850
constant.character.escape, string.regexp#e8c060
constant.numeric#c8a040
constant.language#e07840bold
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#e87040bold
keyword.operator#a07050
entity.name.function, meta.function-call entity.name.function, support.function#d4813a
entity.name.class, entity.name.type, support.class, entity.other.inherited-class#c89870bold
variable, variable.other#d4c4a8
variable.language#e87040italic
variable.parameter#c8b090
variable.other.property, support.variable.property, meta.object-literal.key#b89868
entity.name.tag, meta.tag#e87040
entity.other.attribute-name#c49060
entity.other.attribute-name.class, entity.other.attribute-name.id#d4a850
support.type.property-name#d4813a
support.constant.property-value#d4a850
keyword.control.import, keyword.control.from#e87040bold
punctuation.separator, punctuation.terminator, punctuation.accessor#7a5a3a
punctuation.definition.parameters, punctuation.definition.block, meta.brace#9a7858
markup.heading, entity.name.section#d4813abold
markup.bold#d4a850bold
markup.italic#b89868italic
markup.inline.raw, markup.fenced_code#d4813a
markup.underline.link#e87040
invalid#e05030underline
invalid.deprecated#a05838strikethrough
Atmospheres by SaladCrunch - VS Code Theme