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#D1913C
  • activityBar.background#151B22
  • activityBar.foreground#D1913C
  • activityBarBadge.background#D1913C
  • activityBarBadge.foreground#CDB79E
  • badge.background#D1913C
  • badge.foreground#CDB79E
  • button.background#202830
  • button.foreground#CDB79E
  • button.hoverBackground#2A2F36
  • dropdown.background#151B22
  • dropdown.border#202830
  • dropdown.foreground#CDB79E
  • editor.background#0F141A
  • editor.findMatchBackground#D1913C40
  • editor.findMatchHighlightBackground#D1913C20
  • editor.foreground#CDB79E
  • editor.lineHighlightBackground#28303A40
  • editor.lineHighlightBorder#28303A80
  • editor.selectionBackground#34567880
  • editor.selectionHighlightBackground#34567840
  • editorBracketMatch.background#34567840
  • editorBracketMatch.border#345678
  • editorCursor.foreground#D1913C
  • editorGroupHeader.tabsBackground#0F141A
  • editorIndentGuide.activeBackground#2A2F36AA
  • editorIndentGuide.background#2A2F3666
  • editorLineNumber.activeForeground#D1913C
  • editorLineNumber.foreground#5A5A5A
  • editorWhitespace.foreground#2A2F36
  • focusBorder#D1913C
  • gitDecoration.conflictingResourceForeground#E6B86A
  • gitDecoration.deletedResourceForeground#D1913C
  • gitDecoration.modifiedResourceForeground#345678
  • gitDecoration.untrackedResourceForeground#9ACD32
  • input.background#151B22
  • input.border#202830
  • input.foreground#CDB79E
  • input.placeholderForeground#5A5A5A
  • inputOption.activeBorder#D1913C
  • list.activeSelectionBackground#202830
  • list.activeSelectionForeground#CDB79E
  • list.focusBackground#202830
  • list.highlightForeground#D1913C
  • list.hoverBackground#151B2266
  • minimap.background#0F141A
  • minimapSlider.activeBackground#34567866
  • minimapSlider.background#34567822
  • minimapSlider.hoverBackground#34567844
  • panel.background#0F141A
  • panel.border#202830
  • panelTitle.activeBorder#D1913C
  • panelTitle.activeForeground#D1913C
  • panelTitle.inactiveForeground#9AA5B4
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#34567888
  • scrollbarSlider.background#2A2F3666
  • scrollbarSlider.hoverBackground#2A2F36AA
  • sideBar.background#151B22
  • sideBar.foreground#CDB79E
  • sideBarSectionHeader.background#151B22
  • sideBarSectionHeader.foreground#D1913C
  • sideBarTitle.foreground#D1913C
  • statusBar.background#202830
  • statusBar.debuggingBackground#D1913C
  • statusBar.foreground#CDB79E
  • statusBar.noFolderBackground#151B22
  • statusBarItem.hoverBackground#2A2F36
  • tab.activeBackground#202830
  • tab.activeBorder#D1913C
  • tab.activeForeground#CDB79E
  • tab.border#0F141A
  • tab.inactiveBackground#151B22
  • tab.inactiveForeground#9AA5B4
  • terminal.ansiBlue#345678
  • terminal.ansiBrightBlue#6A9FD8
  • terminal.ansiBrightCyan#7FFFD4
  • terminal.ansiBrightGreen#9ACD32
  • terminal.ansiBrightMagenta#C776C5
  • terminal.ansiBrightRed#FF8844
  • terminal.ansiBrightYellow#FFD580
  • terminal.ansiCyan#5C9EA0
  • terminal.ansiGreen#7A9A5B
  • terminal.ansiMagenta#A15C9A
  • terminal.ansiRed#D1913C
  • terminal.ansiYellow#E6B86A
  • terminal.background#0F141A
  • terminal.foreground#CDB79E
  • titleBar.activeBackground#151B22
  • titleBar.activeForeground#CDB79E
  • titleBar.inactiveBackground#0F141A
  • titleBar.inactiveForeground#9AA5B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6E5F53italic
string, string.quoted, string.template#E6B86A—
keyword, storage.type, storage.modifier#D1913Cbold
keyword.operator, punctuation.accessor#9AA5B4—
variable, variable.other#CDB79E—
variable.parameter#9ACD32italic
entity.name.function, support.function#345678—
meta.function-call#6A9FD8—
entity.name.class, entity.name.type.class, support.class#D1913Cbold
entity.name.type, support.type#5C9EA0—
entity.name.type.interface#5C9EA0italic
constant.numeric#9ACD32—
constant, constant.language, constant.character#9ACD32—
constant.language.boolean#D1913Cbold
variable.other.property, support.variable.property#CDB79E—
meta.object-literal.key#345678—
entity.name.tag, punctuation.definition.tag#D1913C—
entity.other.attribute-name#5C9EA0italic
punctuation, meta.brace#9AA5B4—
string.regexp#9ACD32—
constant.character.escape#5C9EA0—
meta.decorator, punctuation.decorator#D1913C—
invalid, invalid.illegal#FF5F5Fstrikethrough
markup.heading, entity.name.section#D1913Cbold
markup.bold#D1913Cbold
markup.italic#5C9EA0italic
markup.underline.link#345678—
markup.inline.raw, markup.fenced_code#9ACD32—
support.type.property-name.json#345678—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D1913C—
support.type.property-name.css#345678—
support.constant.property-value.css#5C9EA0—
themesmith by CyberBoost - VS Code Theme