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#151020
  • activityBar.foreground#d4c5e8
  • activityBar.inactiveForeground#6a5a8a
  • activityBarBadge.background#c97a8a
  • activityBarBadge.foreground#1a1525
  • badge.background#c97a8a
  • badge.foreground#1a1525
  • breadcrumb.activeSelectionForeground#e8d8f8
  • breadcrumb.focusForeground#d4c5e8
  • breadcrumb.foreground#8a7aa0
  • breadcrumbPicker.background#1d1828
  • button.background#6a5080
  • button.foreground#f0e8f8
  • button.hoverBackground#7a6090
  • dropdown.background#201a30
  • dropdown.border#352d50
  • dropdown.foreground#d4c5e8
  • editor.background#1a1525
  • editor.findMatchBackground#c97a5a55
  • editor.findMatchHighlightBackground#c97a5a33
  • editor.foreground#d4c5e8
  • editor.lineHighlightBackground#252035
  • editor.selectionBackground#5a4a7a55
  • editor.selectionHighlightBackground#5a4a7a33
  • editor.wordHighlightBackground#5a4a7a44
  • editor.wordHighlightStrongBackground#5a4a7a66
  • editorBracketMatch.background#5a4a7a44
  • editorBracketMatch.border#b89cd8
  • editorCursor.background#1a1525
  • editorCursor.foreground#e8a0c0
  • editorError.foreground#d87a7a
  • editorGroup.border#252035
  • editorGroupHeader.tabsBackground#151020
  • editorGutter.background#1a1525
  • editorIndentGuide.activeBackground#4a3d6a
  • editorIndentGuide.background#2d2840
  • editorInfo.foreground#7ab8d8
  • editorLineNumber.activeForeground#b89cd8
  • editorLineNumber.foreground#5a4a7a
  • editorWarning.foreground#d8b87a
  • editorWhitespace.foreground#3d3455
  • gitDecoration.addedResourceForeground#8ac0a0
  • gitDecoration.conflictingResourceForeground#c97aa0
  • gitDecoration.deletedResourceForeground#d87a7a
  • gitDecoration.ignoredResourceForeground#5a4a7a
  • gitDecoration.modifiedResourceForeground#d8b87a
  • gitDecoration.untrackedResourceForeground#7ac0c8
  • input.background#201a30
  • input.border#352d50
  • input.foreground#d4c5e8
  • input.placeholderForeground#6a5a8a
  • inputOption.activeBorder#c97a8a
  • list.activeSelectionBackground#352d50
  • list.activeSelectionForeground#e8d8f8
  • list.focusBackground#352d50
  • list.highlightForeground#e8a0c0
  • list.hoverBackground#252035
  • list.inactiveSelectionBackground#2a2440
  • minimap.background#1a1525
  • minimap.findMatchHighlight#c97a5a55
  • minimap.selectionHighlight#5a4a7a55
  • panel.background#171222
  • panel.border#252035
  • panelTitle.activeBorder#c97a8a
  • panelTitle.activeForeground#d4c5e8
  • panelTitle.inactiveForeground#8a7aa0
  • peekView.border#5a4a7a
  • peekViewEditor.background#1d1828
  • peekViewEditorGutter.background#1a1525
  • peekViewResult.background#171222
  • peekViewTitle.background#1d1828
  • progressBar.background#c97a8a
  • scrollbar.shadow#10101a
  • scrollbarSlider.activeBackground#5a4a7aaa
  • scrollbarSlider.background#5a4a7a55
  • scrollbarSlider.hoverBackground#5a4a7a88
  • sideBar.background#171222
  • sideBar.border#252035
  • sideBar.foreground#b8a8d0
  • sideBarSectionHeader.background#1d1828
  • sideBarSectionHeader.foreground#d4c5e8
  • sideBarTitle.foreground#d4c5e8
  • statusBar.background#151020
  • statusBar.border#252035
  • statusBar.debuggingBackground#8a5a6a
  • statusBar.debuggingForeground#e8d8f8
  • statusBar.foreground#b8a8d0
  • statusBar.noFolderBackground#1a1525
  • tab.activeBackground#1a1525
  • tab.activeBorder#c97a8a
  • tab.activeBorderTop#00000000
  • tab.activeForeground#e8d8f8
  • tab.border#252035
  • tab.hoverBackground#201a30
  • tab.inactiveBackground#151020
  • tab.inactiveForeground#8a7aa0
  • terminal.ansiBlack#2a2440
  • terminal.ansiBlue#7a9ad8
  • terminal.ansiBrightBlack#5a4a7a
  • terminal.ansiBrightBlue#9ab8e8
  • terminal.ansiBrightCyan#9ad8e0
  • terminal.ansiBrightGreen#a0d8b8
  • terminal.ansiBrightMagenta#e09ac0
  • terminal.ansiBrightRed#e89a9a
  • terminal.ansiBrightWhite#f0e8f8
  • terminal.ansiBrightYellow#e8d09a
  • terminal.ansiCyan#7ac0c8
  • terminal.ansiGreen#8ac0a0
  • terminal.ansiMagenta#c97aa0
  • terminal.ansiRed#d87a7a
  • terminal.ansiWhite#d4c5e8
  • terminal.ansiYellow#d8b87a
  • terminal.background#1a1525
  • terminal.foreground#d4c5e8
  • terminalCursor.background#1a1525
  • terminalCursor.foreground#e8a0c0
  • titleBar.activeBackground#151020
  • titleBar.activeForeground#d4c5e8
  • titleBar.inactiveBackground#131018
  • titleBar.inactiveForeground#8a7aa0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a5a8aitalic
string, string.quoted, string.template#8ac0a0—
constant.character.escape#7ac0c8—
constant.numeric#d8a07a—
constant.language#d8a07a—
constant.other#d8a07a—
keyword, storage.type, storage.modifier#c97aa0—
keyword.control#c97aa0—
keyword.operator#7ac0c8—
entity.name.function, meta.function-call, support.function#7a9ad8—
entity.name.class, entity.name.type.class, support.class#d8b87a—
entity.name.type, support.type#d8b87a—
variable, variable.other#d4c5e8—
variable.parameter#d8a07aitalic
variable.other.property, variable.other.object.property#d87a7a—
meta.object-literal.key#d87a7a—
entity.name.tag#d87a7a—
entity.other.attribute-name#d8b87aitalic
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#d8b87a—
support.type.property-name.css#7a9ad8—
support.constant.property-value.css#d8a07a—
punctuation#b8a8d0—
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array#b8a8d0—
markup.heading, entity.name.section.markdown#d87a7abold
markup.bold#d8b87abold
markup.italic#c97aa0italic
markup.underline.link#7a9ad8—
markup.inline.raw, markup.fenced_code#8ac0a0—
support.type.property-name.json#d87a7a—
entity.name.tag.yaml#d87a7a—
string.regexp#7ac0c8—
invalid, invalid.illegal#f0e8f8—
invalid.deprecated#f0e8f8—
Retronica by Adham - VS Code Theme