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.activeBorder#BD8C68
  • activityBar.background#0C222F
  • activityBar.foreground#EAE1D7
  • activityBar.inactiveForeground#BFBBB6
  • activityBarBadge.background#BD8C68
  • activityBarBadge.foreground#0B1720
  • badge.background#BD8C68
  • badge.foreground#0B1720
  • breadcrumb.activeSelectionForeground#BD8C68
  • breadcrumb.focusForeground#E8DDC7
  • breadcrumb.foreground#BFBBB6
  • breadcrumbPicker.background#0C222F
  • button.background#163f54
  • button.foreground#EAE1D7
  • button.hoverBackground#335260
  • descriptionForeground#BFBBB6
  • diffEditor.insertedTextBackground#82C4A225
  • diffEditor.removedTextBackground#E3877C25
  • dropdown.background#0C222F
  • dropdown.border#163f54
  • dropdown.foreground#EAE1D7
  • editor.background#0B1720
  • editor.findMatchBackground#6A4A0080
  • editor.findMatchHighlightBackground#6A4A0040
  • editor.foreground#EAE1D7
  • editor.hoverHighlightBackground#163f5440
  • editor.inactiveSelectionBackground#0D2F4260
  • editor.lineHighlightBackground#0C222F80
  • editor.lineHighlightBorder#0C222F00
  • editor.selectionBackground#0D2F42
  • editor.selectionHighlightBackground#0D2F4280
  • editor.wordHighlightBackground#163f5440
  • editor.wordHighlightStrongBackground#163f5460
  • editorBracketMatch.background#163f5440
  • editorBracketMatch.border#163f54
  • editorCursor.background#0B1720
  • editorCursor.foreground#BD8C68
  • editorError.foreground#E3877C
  • editorGroup.border#0D2F42
  • editorGroupHeader.noTabsBackground#0B1720
  • editorGroupHeader.tabsBackground#0C222F
  • editorGutter.addedBackground#82C4A2
  • editorGutter.background#0B1720
  • editorGutter.deletedBackground#E3877C
  • editorGutter.modifiedBackground#DEC577
  • editorHint.foreground#BFBBB6
  • editorIndentGuide.activeBackground1#163f54
  • editorIndentGuide.background1#0D2F42
  • editorInfo.foreground#A6DFFF
  • editorLineNumber.activeForeground#BD8C68
  • editorLineNumber.foreground#835A49
  • editorRuler.foreground#0D2F42
  • editorWarning.foreground#DEC577
  • editorWhitespace.foreground#335260
  • errorForeground#E3877C
  • focusBorder#BD8C68
  • foreground#EAE1D7
  • gitDecoration.conflictingResourceForeground#FFD9BB
  • gitDecoration.deletedResourceForeground#E3877C
  • gitDecoration.ignoredResourceForeground#335260
  • gitDecoration.modifiedResourceForeground#DEC577
  • gitDecoration.untrackedResourceForeground#82C4A2
  • input.background#0C222F
  • input.border#163f54
  • input.foreground#EAE1D7
  • input.placeholderForeground#BFBBB6
  • inputOption.activeBorder#BD8C68
  • list.activeSelectionBackground#163f54
  • list.activeSelectionForeground#EAE1D7
  • list.focusBackground#163f54
  • list.highlightForeground#BD8C68
  • list.hoverBackground#0D2F4280
  • list.inactiveSelectionBackground#0D2F42
  • list.inactiveSelectionForeground#EAE1D7
  • menu.background#0C222F
  • menu.foreground#EAE1D7
  • menu.selectionBackground#163f54
  • menu.selectionForeground#EAE1D7
  • menu.separatorBackground#0D2F42
  • notificationCenter.border#163f54
  • notificationLink.foreground#9DC2C5
  • notifications.background#0C222F
  • notifications.foreground#EAE1D7
  • panel.background#0B1720
  • panel.border#0D2F42
  • panelTitle.activeBorder#BD8C68
  • panelTitle.activeForeground#E8DDC7
  • panelTitle.inactiveForeground#BFBBB6
  • peekView.border#BD8C68
  • peekViewEditor.background#0C222F
  • peekViewResult.background#0C222F
  • peekViewTitle.background#0D2F42
  • progressBar.background#BD8C68
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#163f54
  • scrollbarSlider.background#163f5450
  • scrollbarSlider.hoverBackground#163f5480
  • selection.background#163f5480
  • sideBar.background#0C222F
  • sideBar.border#0B1720
  • sideBar.foreground#EAE1D7
  • sideBarSectionHeader.background#0D2F42
  • sideBarSectionHeader.foreground#E8DDC7
  • sideBarTitle.foreground#E8DDC7
  • statusBar.background#0C222F
  • statusBar.border#0B1720
  • statusBar.debuggingBackground#A83732
  • statusBar.debuggingForeground#EAE1D7
  • statusBar.foreground#E8DDC7
  • statusBar.noFolderBackground#0C222F
  • statusBarItem.hoverBackground#0D2F42
  • statusBarItem.prominentBackground#163f54
  • statusBarItem.prominentHoverBackground#335260
  • tab.activeBackground#0B1720
  • tab.activeBorderTop#BD8C68
  • tab.activeForeground#EAE1D7
  • tab.border#0B1720
  • tab.hoverBackground#0D2F42
  • tab.inactiveBackground#0C222F
  • tab.inactiveForeground#BFBBB6
  • terminal.ansiBlack#0C222F
  • terminal.ansiBlue#A6DFFF
  • terminal.ansiBrightBlack#335260
  • terminal.ansiBrightBlue#A0C2D4
  • terminal.ansiBrightCyan#BCD9DB
  • terminal.ansiBrightGreen#AFCCA6
  • terminal.ansiBrightMagenta#AAADDA
  • terminal.ansiBrightRed#E99C93
  • terminal.ansiBrightWhite#F7F3EE
  • terminal.ansiBrightYellow#E8CB8C
  • terminal.ansiCyan#9DC2C5
  • terminal.ansiGreen#82C4A2
  • terminal.ansiMagenta#838CCF
  • terminal.ansiRed#E3877C
  • terminal.ansiWhite#EAE1D7
  • terminal.ansiYellow#DEC577
  • terminal.background#0B1720
  • terminal.foreground#EAE1D7
  • titleBar.activeBackground#0C222F
  • titleBar.activeForeground#E8DDC7
  • titleBar.inactiveBackground#0B1720
  • titleBar.inactiveForeground#BFBBB6
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#BFBBB6italic
string, string.quoted, punctuation.definition.string#82C4A2
constant.character.escape, string.regexp#a17069
constant.numeric, constant.language.boolean, constant.language#DEC577
constant, variable.other.constant, support.constant#FFD9BB
keyword, keyword.control, storage, storage.type, storage.modifier#E3877C
keyword.operator, punctuation.separator, punctuation.terminator#BFBBB6
entity.name.function, support.function, meta.function-call, variable.function#A6DFFF
variable.parameter#a17069
entity.name.type, entity.name.class, entity.name.namespace, support.type, support.class#838CCF
variable, variable.other#EAE1D7
variable.other.property, variable.other.member, meta.object-literal.key, support.type.property-name#a17069
entity.name.tag, meta.tag#E3877C
entity.other.attribute-name#DEC577
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css#E3877C
support.type.property-name.css#A6DFFF
support.constant.property-value.css, constant.other.color.rgb-value#82C4A2
markup.heading, entity.name.section#838CCFbold
punctuation.definition.heading.markdown#335260
markup.bold#E3877Cbold
punctuation.definition.bold.markdown#335260
markup.italic#E8CB8Citalic
punctuation.definition.italic.markdown#335260
punctuation.definition.list.begin.markdown, markup.list#BD8C68
markup.underline.link, string.other.link#9DC2C5
markup.quote#BFBBB6italic
markup.inline.raw, markup.raw.inline#a17069
markup.inserted#82C4A2
markup.deleted#E3877C
invalid, invalid.illegal, invalid.deprecated#E3877Citalic