Skip to main content
Coding Theme

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#1a1816
  • activityBar.border#302b28
  • activityBar.foreground#e8834a
  • activityBar.inactiveForeground#7a7068
  • activityBarBadge.background#e8834a
  • activityBarBadge.foreground#1e1b18
  • aichat.conversationBorder#ff6b9d
  • aichat.requestBackground#ff6b9d10
  • aichat.responseBackground#1e1b18
  • badge.background#e8834a
  • badge.foreground#1e1b18
  • breadcrumb.activeSelectionForeground#e2d9d0
  • breadcrumb.background#1e1b18
  • breadcrumb.focusForeground#e8834a
  • breadcrumb.foreground#948779
  • breadcrumbPicker.background#262320
  • button.background#e8834a
  • button.foreground#1e1b18
  • button.hoverBackground#cf6a3c
  • button.secondaryBackground#403a35
  • button.secondaryForeground#e2d9d0
  • button.secondaryHoverBackground#4d4540
  • chat.avatarBackground#ff6b9d30
  • chat.avatarForeground#ff6b9d
  • chat.requestBorder#ff6b9d
  • chat.slashCommandBackground#ff6b9d20
  • chat.slashCommandForeground#ff6b9d
  • descriptionForeground#948779
  • diffEditor.insertedTextBackground#a3b38c20
  • diffEditor.removedTextBackground#d35d4c20
  • dropdown.background#262320
  • dropdown.border#403a35
  • dropdown.foreground#e2d9d0
  • editor.background#1e1b18
  • editor.findMatchBackground#e8834a50
  • editor.findMatchHighlightBackground#e8834a30
  • editor.foreground#e2d9d0
  • editor.lineHighlightBackground#28241f
  • editor.selectionBackground#e8834a40
  • editor.selectionHighlightBackground#e8834a25
  • editor.wordHighlightBackground#e8834a30
  • editor.wordHighlightStrongBackground#e8834a40
  • editorBracketMatch.background#e8834a30
  • editorBracketMatch.border#e8834a
  • editorCursor.foreground#e8834a
  • editorGroupHeader.tabsBackground#1a1816
  • editorGroupHeader.tabsBorder#302b28
  • editorGutter.addedBackground#a3b38c
  • editorGutter.deletedBackground#d35d4c
  • editorGutter.modifiedBackground#d4a656
  • editorHoverWidget.background#262320
  • editorHoverWidget.border#403a35
  • editorIndentGuide.activeBackground#4d4540
  • editorIndentGuide.background#332e29
  • editorLineNumber.activeForeground#948779
  • editorLineNumber.foreground#635850
  • editorOverviewRuler.addedForeground#a3b38c
  • editorOverviewRuler.deletedForeground#d35d4c
  • editorOverviewRuler.modifiedForeground#d4a656
  • editorSuggestWidget.background#262320
  • editorSuggestWidget.border#403a35
  • editorSuggestWidget.foreground#e2d9d0
  • editorSuggestWidget.highlightForeground#e8834a
  • editorSuggestWidget.selectedBackground#e8834a30
  • editorWhitespace.foreground#403a35
  • editorWidget.background#262320
  • editorWidget.border#403a35
  • errorForeground#d35d4c
  • focusBorder#e8834a80
  • foreground#e2d9d0
  • gitDecoration.addedResourceForeground#a3b38c
  • gitDecoration.conflictingResourceForeground#e8834a
  • gitDecoration.deletedResourceForeground#d35d4c
  • gitDecoration.ignoredResourceForeground#635850
  • gitDecoration.modifiedResourceForeground#d4a656
  • gitDecoration.untrackedResourceForeground#7eb8a8
  • icon.foreground#948779
  • inlineChat.border#ff6b9d
  • inlineChat.shadow#ff6b9d40
  • inlineChatInput.background#262320
  • inlineChatInput.border#ff6b9d80
  • inlineChatInput.focusBorder#ff6b9d
  • input.background#262320
  • input.border#403a35
  • input.foreground#e2d9d0
  • input.placeholderForeground#7a7068
  • inputOption.activeBackground#e8834a30
  • inputOption.activeBorder#e8834a
  • list.activeSelectionBackground#e8834a30
  • list.activeSelectionForeground#e8834a
  • list.focusBackground#e8834a25
  • list.highlightForeground#e8834a
  • list.hoverBackground#28241f
  • list.inactiveSelectionBackground#332e29
  • list.inactiveSelectionForeground#e2d9d0
  • minimap.background#1e1b18
  • minimap.findMatchHighlight#e8834a
  • minimap.selectionHighlight#e8834a50
  • notificationCenterHeader.background#262320
  • notifications.background#262320
  • notifications.border#403a35
  • notificationsErrorIcon.foreground#d35d4c
  • notificationsInfoIcon.foreground#7a9ec2
  • notificationsWarningIcon.foreground#d4a656
  • panel.background#1e1b18
  • panel.border#302b28
  • panelTitle.activeBorder#e8834a
  • panelTitle.activeForeground#e8834a
  • panelTitle.inactiveForeground#7a7068
  • peekView.border#e8834a
  • peekViewEditor.background#22201c
  • peekViewEditor.matchHighlightBackground#e8834a40
  • peekViewResult.background#1e1b18
  • peekViewResult.fileForeground#e2d9d0
  • peekViewResult.lineForeground#948779
  • peekViewResult.matchHighlightBackground#e8834a40
  • peekViewResult.selectionBackground#e8834a30
  • peekViewResult.selectionForeground#e8834a
  • peekViewTitle.background#262320
  • peekViewTitleDescription.foreground#948779
  • peekViewTitleLabel.foreground#e8834a
  • progressBar.background#e8834a
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#635850
  • scrollbarSlider.background#403a3580
  • scrollbarSlider.hoverBackground#4d454090
  • selection.background#e8834a50
  • sideBar.background#22201c
  • sideBar.border#302b28
  • sideBar.foreground#ccc0b4
  • sideBarSectionHeader.background#28241f
  • sideBarSectionHeader.foreground#d4a656
  • sideBarTitle.foreground#e8834a
  • statusBar.background#181614
  • statusBar.border#302b28
  • statusBar.debuggingBackground#cf6a3c
  • statusBar.debuggingForeground#1e1b18
  • statusBar.foreground#948779
  • statusBar.noFolderBackground#1e1b18
  • statusBarItem.activeBackground#e8834a40
  • statusBarItem.hoverBackground#e8834a30
  • statusBarItem.remoteBackground#e8834a
  • statusBarItem.remoteForeground#1e1b18
  • tab.activeBackground#1e1b18
  • tab.activeBorderTop#e8834a
  • tab.activeForeground#e8834a
  • tab.border#302b28
  • tab.inactiveBackground#1a1816
  • tab.inactiveForeground#948779
  • terminal.ansiBlack#302b28
  • terminal.ansiBlue#7a9ec2
  • terminal.ansiBrightBlack#635850
  • terminal.ansiBrightBlue#9bb8d8
  • terminal.ansiBrightCyan#98d0c0
  • terminal.ansiBrightGreen#b8c9a0
  • terminal.ansiBrightMagenta#daa090
  • terminal.ansiBrightRed#e8834a
  • terminal.ansiBrightWhite#f0e8e0
  • terminal.ansiBrightYellow#e8c078
  • terminal.ansiCyan#7eb8a8
  • terminal.ansiGreen#a3b38c
  • terminal.ansiMagenta#c9856a
  • terminal.ansiRed#d35d4c
  • terminal.ansiWhite#e2d9d0
  • terminal.ansiYellow#d4a656
  • terminal.background#1e1b18
  • terminal.foreground#e2d9d0
  • terminalCursor.foreground#e8834a
  • titleBar.activeBackground#181614
  • titleBar.activeForeground#ccc0b4
  • titleBar.border#302b28
  • titleBar.inactiveBackground#181614
  • titleBar.inactiveForeground#7a7068
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b5d52italic
keyword, storage.type, storage.modifier#e8834a
keyword.control, keyword.operator.new, keyword.operator.expression#cf6a3c
keyword.operator, punctuation.accessor#c4b8ac
string, string.quoted#a3b38c
string.template, punctuation.definition.string.template#a3b38c
punctuation.definition.template-expression, punctuation.section.embedded#e8834a
constant.numeric#daa090
constant.language, constant.character, constant.other#daa090
constant.language.boolean#e8834a
entity.name.function, support.function, meta.function-call#d4a656
variable.parameter, meta.parameter#c9856a
entity.name.class, entity.name.type, support.class, support.type#c9856a
entity.name.type.interface#c9856aitalic
variable, variable.other#e0d6cc
variable.other.property, variable.other.object.property#c4b8ac
variable.language.this, variable.language.self, variable.language.super#e8834aitalic
entity.name.tag, punctuation.definition.tag#cf6a3c
entity.other.attribute-name#d4a656
support.class.component#c9856a
support.type.property-name.css#7a9ec2
support.constant.property-value.css#a3b38c
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#d4a656
string.regexp#7eb8a8
constant.character.escape#7eb8a8
support.type.property-name.json#c9856a
markup.heading, entity.name.section.markdown#e8834abold
markup.bold#d4a656bold
markup.italic#c9856aitalic
markup.underline.link#7a9ec2
markup.inline.raw, markup.fenced_code#a3b38c
punctuation.definition.list.begin.markdown#e8834a
punctuation.definition, punctuation.separator, punctuation.terminator#8a7e72
punctuation.section, meta.brace#8a7e72
invalid, invalid.illegal#d35d4c
invalid.deprecated#d35d4cstrikethrough
meta.decorator, punctuation.decorator#d4a656
keyword.control.import, keyword.control.export, keyword.control.from#cf6a3c
entity.name.type.module#a3b38c
Ember Glow by camfleety - VS Code Theme