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#ff8c00
  • activityBar.background#242437
  • activityBar.foreground#c5c5ff
  • activityBarBadge.background#ff8c00
  • activityBarBadge.foreground#1e1e2f
  • badge.background#ff8c00
  • badge.foreground#1e1e2f
  • button.background#ff8c00
  • button.foreground#1e1e2f
  • button.hoverBackground#ffa040
  • dropdown.background#242437
  • dropdown.border#555577
  • dropdown.foreground#e0e0ff
  • editor.background#1e1e2f
  • editor.findMatchBackground#ff8c00
  • editor.findMatchHighlightBackground#ffa040
  • editor.foreground#e0e0ff
  • editor.lineHighlightBackground#2d2d4d
  • editor.lineHighlightBorder#ff8c00
  • editor.selectionBackground#3b3b66
  • editor.selectionHighlightBackground#4b4b88
  • editorBracketMatch.background#4b4b88
  • editorBracketMatch.border#ff8c00
  • editorCursor.foreground#ff8c00
  • editorGroupHeader.tabsBackground#1e1e2f
  • editorIndentGuide.activeBackground#ff8c00
  • editorIndentGuide.background#444466
  • editorLineNumber.activeForeground#ff8c00
  • editorLineNumber.foreground#555577
  • editorWhitespace.foreground#555577
  • focusBorder#ff8c00
  • gitDecoration.conflictingResourceForeground#c678dd
  • gitDecoration.deletedResourceForeground#e06c75
  • gitDecoration.modifiedResourceForeground#e5c07b
  • gitDecoration.untrackedResourceForeground#99c794
  • input.background#242437
  • input.border#555577
  • input.foreground#e0e0ff
  • input.placeholderForeground#777799
  • inputOption.activeBorder#ff8c00
  • list.activeSelectionBackground#3b3b66
  • list.activeSelectionForeground#ff8c00
  • list.focusBackground#3b3b66
  • list.highlightForeground#ff8c00
  • list.hoverBackground#2d2d4d
  • minimap.background#1e1e2f
  • minimapSlider.activeBackground#666688aa
  • minimapSlider.background#44446666
  • minimapSlider.hoverBackground#55557799
  • panel.background#1e1e2f
  • panel.border#2a2a44
  • panelTitle.activeBorder#ff8c00
  • panelTitle.activeForeground#ff8c00
  • panelTitle.inactiveForeground#a0a0c0
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#666688aa
  • scrollbarSlider.background#44446666
  • scrollbarSlider.hoverBackground#55557799
  • sideBar.background#1e1e2f
  • sideBar.foreground#c5c5ff
  • sideBarSectionHeader.background#242437
  • sideBarSectionHeader.foreground#ff8c00
  • sideBarTitle.foreground#d0d0ff
  • statusBar.background#2a2a44
  • statusBar.debuggingBackground#6a5acd
  • statusBar.foreground#ff8c00
  • statusBar.noFolderBackground#2a2a44
  • statusBarItem.hoverBackground#3b3b66
  • tab.activeBackground#242437
  • tab.activeBorder#ff8c00
  • tab.activeForeground#ff8c00
  • tab.border#2a2a44
  • tab.inactiveBackground#1e1e2f
  • tab.inactiveForeground#a0a0c0
  • terminal.ansiBlue#6a5acd
  • terminal.ansiBrightBlue#7aa9ff
  • terminal.ansiBrightCyan#8affc0
  • terminal.ansiBrightGreen#b8e890
  • terminal.ansiBrightMagenta#d38eff
  • terminal.ansiBrightRed#ff7b88
  • terminal.ansiBrightYellow#ffd87b
  • terminal.ansiCyan#66cdaa
  • terminal.ansiGreen#99c794
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#e06c75
  • terminal.ansiYellow#e5c07b
  • terminal.background#1e1e2f
  • terminal.foreground#e0e0ff
  • titleBar.activeBackground#242437
  • titleBar.activeForeground#ff8c00
  • titleBar.inactiveBackground#1e1e2f
  • titleBar.inactiveForeground#a0a0c0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555577italic
string, string.quoted, string.template#99c794
keyword, storage.type, storage.modifier#c678ddbold
keyword.operator, punctuation.accessor#ff8c00
variable, variable.other#ff8c00
variable.parameter#ff8c00italic
entity.name.function, support.function#61afef
meta.function-call#61afef
entity.name.class, entity.name.type.class, support.class#e5c07bbold
entity.name.type, support.type#c678dd
entity.name.type.interface#c678dditalic
constant.numeric#ff8c00
constant, constant.language, constant.character#ff8c00
constant.language.boolean#ff8c00bold
variable.other.property, support.variable.property#e5c07b
meta.object-literal.key#e5c07b
entity.name.tag, punctuation.definition.tag#ff8c00
entity.other.attribute-name#ff8c00italic
punctuation, meta.brace#a0a0c0
string.regexp#98c379
constant.character.escape#e06c75
meta.decorator, punctuation.decorator#61afef
invalid, invalid.illegal#ff5f5fstrikethrough
markup.heading, entity.name.section#ff8c00bold
markup.bold#ff8c00bold
markup.italic#ff8c00italic
markup.underline.link#61afef
markup.inline.raw, markup.fenced_code#c678dd
support.type.property-name.json#c678dd
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff8c00
support.type.property-name.css#99c794
support.constant.property-value.css#ff8c00
themesmith by CyberBoost - VS Code Theme