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#ffffff
  • activityBar.foreground#ff8c00
  • activityBarBadge.background#ff8c00
  • activityBarBadge.foreground#ffffff
  • badge.background#ff8c00
  • badge.foreground#ffffff
  • button.background#ff8c00
  • button.foreground#ffffff
  • button.hoverBackground#ffb347
  • dropdown.background#ffffff
  • dropdown.border#cccccc
  • dropdown.foreground#2d2d2d
  • editor.background#fdfdfd
  • editor.findMatchBackground#ff8c0044
  • editor.findMatchHighlightBackground#ff8c0022
  • editor.foreground#2d2d2d
  • editor.lineHighlightBackground#ff8c0010
  • editor.lineHighlightBorder#ff8c0020
  • editor.selectionBackground#00e5ff30
  • editor.selectionHighlightBackground#00e5ff20
  • editorBracketMatch.background#00e5ff33
  • editorBracketMatch.border#00e5ff
  • editorCursor.foreground#00e5ff
  • editorGroupHeader.tabsBackground#f0f0f0
  • editorIndentGuide.activeBackground#a0a0a0
  • editorIndentGuide.background#d0d0d0
  • editorLineNumber.activeForeground#ff8c00
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#b0b0b0
  • focusBorder#00e5ff
  • gitDecoration.conflictingResourceForeground#ffb347
  • gitDecoration.deletedResourceForeground#ff5555
  • gitDecoration.modifiedResourceForeground#ff8c00
  • gitDecoration.untrackedResourceForeground#009900
  • input.background#ffffff
  • input.border#cccccc
  • input.foreground#2d2d2d
  • input.placeholderForeground#a0a0a0
  • inputOption.activeBorder#ff8c00
  • list.activeSelectionBackground#ff8c0040
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#ff8c0040
  • list.highlightForeground#00e5ff
  • list.hoverBackground#ff8c0066
  • minimap.background#f5f5f5
  • minimapSlider.activeBackground#ff8c0066
  • minimapSlider.background#ff8c0022
  • minimapSlider.hoverBackground#ff8c0044
  • panel.background#f5f5f5
  • panel.border#cccccc
  • panelTitle.activeBorder#ff8c00
  • panelTitle.activeForeground#ff8c00
  • panelTitle.inactiveForeground#888888
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#00e5ff88
  • scrollbarSlider.background#cccccc44
  • scrollbarSlider.hoverBackground#cccccc88
  • sideBar.background#f5f5f5
  • sideBar.foreground#2d2d2d
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.foreground#ff8c00
  • sideBarTitle.foreground#ff8c00
  • statusBar.background#e0e0e0
  • statusBar.debuggingBackground#00e5ff
  • statusBar.foreground#ff8c00
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.hoverBackground#d0d0d0
  • tab.activeBackground#ffffff
  • tab.activeBorder#ff8c00
  • tab.activeForeground#ff8c00
  • tab.border#cccccc
  • tab.inactiveBackground#f0f0f0
  • tab.inactiveForeground#888888
  • terminal.ansiBlue#0066ff
  • terminal.ansiBrightBlue#3399ff
  • terminal.ansiBrightCyan#33ffff
  • terminal.ansiBrightGreen#33cc33
  • terminal.ansiBrightMagenta#ff66ff
  • terminal.ansiBrightRed#ff7777
  • terminal.ansiBrightYellow#ffcc66
  • terminal.ansiCyan#00e5ff
  • terminal.ansiGreen#009900
  • terminal.ansiMagenta#ff00ff
  • terminal.ansiRed#ff5555
  • terminal.ansiYellow#ffb347
  • terminal.background#ffffff
  • terminal.foreground#2d2d2d
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#ff8c00
  • titleBar.inactiveBackground#f0f0f0
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8e8e8eitalic
string, string.quoted, string.template#00e5ff
keyword, storage.type, storage.modifier#ff8c00bold
keyword.operator, punctuation.accessor#00e5ff
variable, variable.other#2d2d2d
variable.parameter#ffb347italic
entity.name.function, support.function#00e5ff
meta.function-call#ff8c00
entity.name.class, entity.name.type.class, support.class#ff8c00bold
entity.name.type, support.type#00e5ff
entity.name.type.interface#ff8c00italic
constant.numeric#ff5555
constant, constant.language, constant.character#ffb347
constant.language.boolean#ff5555bold
variable.other.property, support.variable.property#00e5ff
meta.object-literal.key#ff8c00
entity.name.tag, punctuation.definition.tag#ff8c00
entity.other.attribute-name#ffb347italic
punctuation, meta.brace#999999
string.regexp#ff5555
constant.character.escape#ff00ff
meta.decorator, punctuation.decorator#ffb347
invalid, invalid.illegal#ff5555strikethrough
markup.heading, entity.name.section#ff8c00bold
markup.bold#ffb347bold
markup.italic#ffb347italic
markup.underline.link#00e5ff
markup.inline.raw, markup.fenced_code#009900
support.type.property-name.json#ff8c00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffb347
support.type.property-name.css#00e5ff
support.constant.property-value.css#ffb347
themesmith by CyberBoost - VS Code Theme