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#F4C27D
  • activityBar.background#1A263B
  • activityBar.foreground#D9C9B6
  • activityBarBadge.background#F4C27D
  • activityBarBadge.foreground#0D1117
  • badge.background#F4C27D
  • badge.foreground#0D1117
  • button.background#8B5C42
  • button.foreground#E0E0E0
  • button.hoverBackground#A26E55
  • dropdown.background#1C283A
  • dropdown.border#2E3F57
  • dropdown.foreground#E0E0E0
  • editor.background#0D1117
  • editor.findMatchBackground#F4C27D66
  • editor.findMatchHighlightBackground#F4C27D33
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#1C283A
  • editor.lineHighlightBorder#2E3F57
  • editor.selectionBackground#3B5B7A66
  • editor.selectionHighlightBackground#3B5B7A33
  • editorBracketMatch.background#8B5C4240
  • editorBracketMatch.border#8B5C42
  • editorCursor.foreground#F4C27D
  • editorGroupHeader.tabsBackground#16202E
  • editorIndentGuide.activeBackground#F4C27D
  • editorIndentGuide.background#2E3F57
  • editorLineNumber.activeForeground#F4C27D
  • editorLineNumber.foreground#5A6A7A
  • editorWhitespace.foreground#5A6A7A
  • focusBorder#F4C27D
  • gitDecoration.conflictingResourceForeground#c286b2
  • gitDecoration.deletedResourceForeground#D96C6C
  • gitDecoration.modifiedResourceForeground#7ABFC7
  • gitDecoration.untrackedResourceForeground#A3C99D
  • input.background#1C283A
  • input.border#2E3F57
  • input.foreground#E0E0E0
  • input.placeholderForeground#5A6A7A
  • inputOption.activeBorder#F4C27D
  • list.activeSelectionBackground#3B5B7A
  • list.activeSelectionForeground#F4C27D
  • list.focusBackground#3B5B7A
  • list.highlightForeground#F4C27D
  • list.hoverBackground#2E3F57
  • minimap.background#0D1117
  • minimapSlider.activeBackground#5A6A7A
  • minimapSlider.background#2E3F57
  • minimapSlider.hoverBackground#3B5B7A
  • panel.background#16202E
  • panel.border#1A263B
  • panelTitle.activeBorder#F4C27D
  • panelTitle.activeForeground#F4C27D
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#5A6A7A
  • scrollbarSlider.background#2E3F57
  • scrollbarSlider.hoverBackground#3B5B7A
  • sideBar.background#16202E
  • sideBar.foreground#C8B7A6
  • sideBarSectionHeader.background#1C283A
  • sideBarSectionHeader.foreground#D9C9B6
  • sideBarTitle.foreground#F4C27D
  • statusBar.background#1A263B
  • statusBar.debuggingBackground#8B5C42
  • statusBar.foreground#F4C27D
  • statusBar.noFolderBackground#2C3E50
  • statusBarItem.hoverBackground#2E3F57
  • tab.activeBackground#16202E
  • tab.activeBorder#F4C27D
  • tab.activeForeground#F4C27D
  • tab.border#1A263B
  • tab.inactiveBackground#0D1117
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#5B96C6
  • terminal.ansiBrightBlue#85b9e5
  • terminal.ansiBrightCyan#a0d9e2
  • terminal.ansiBrightGreen#c0e5b5
  • terminal.ansiBrightMagenta#e5abd5
  • terminal.ansiBrightRed#f08a8a
  • terminal.ansiBrightYellow#ffd599
  • terminal.ansiCyan#7ABFC7
  • terminal.ansiGreen#A3C99D
  • terminal.ansiMagenta#c286b2
  • terminal.ansiRed#D96C6C
  • terminal.ansiYellow#F4C27D
  • terminal.background#0D1117
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#1A263B
  • titleBar.activeForeground#F4C27D
  • titleBar.inactiveBackground#16202E
  • titleBar.inactiveForeground#A89F94

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7ABFC7italic
string, string.quoted, string.template#c286b2
keyword, storage.type, storage.modifier#F4C27Dbold
keyword.operator, punctuation.accessor#5B96C6
variable, variable.other#D9C9B6
variable.parameter#5A6A7Aitalic
entity.name.function, support.function#A3C99D
meta.function-call#85b9e5
entity.name.class, entity.name.type.class, support.class#8B5C42bold
entity.name.type, support.type#5B96C6
entity.name.type.interface#7ABFC7italic
constant.numeric#D96C6C
constant, constant.language, constant.character#F4C27D
constant.language.boolean#F4C27Dbold
variable.other.property, support.variable.property#D9C9B6
meta.object-literal.key#D9C9B6
entity.name.tag, punctuation.definition.tag#8B5C42
entity.other.attribute-name#c286b2italic
punctuation, meta.brace#7A7A7A
string.regexp#5A6A7A
constant.character.escape#D96C6C
meta.decorator, punctuation.decorator#F4C27D
invalid, invalid.illegal#D96C6Cstrikethrough
markup.heading, entity.name.section#F4C27Dbold
markup.bold#F4C27Dbold
markup.italic#c286b2italic
markup.underline.link#5B96C6
markup.inline.raw, markup.fenced_code#A3C99D
support.type.property-name.json#F4C27D
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7ABFC7
support.type.property-name.css#F4C27D
support.constant.property-value.css#A3C99D
themesmith by CyberBoost - VS Code Theme