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.background#000000
  • activityBar.border#ffffff
  • activityBar.foreground#d6deeb
  • activityBar.inactiveForeground#464e5799
  • activityBarBadge.background#00ffff
  • activityBarBadge.foreground#000000
  • breadcrumb.activeSelectionForeground#d6deeb
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#d6deeb
  • breadcrumb.foreground#464e5799
  • button.background#00ffff
  • button.foreground#000000
  • button.hoverBackground#00bfff
  • dropdown.background#000000
  • dropdown.border#ffffff
  • dropdown.foreground#d6deeb
  • editor.background#000000
  • editor.foreground#d6deeb
  • editor.lineHighlightBackground#ffffff1a
  • editor.selectionBackground#ffff0066
  • editor.selectionHighlightBackground#ffff0044
  • editorBracketMatch.background#ffff0033
  • editorBracketMatch.border#ffff00
  • editorCursor.foreground#80a4c2
  • editorError.foreground#ff5874
  • editorGroup.border#ffffff
  • editorGroupHeader.border#ffffff
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#ffffff
  • editorIndentGuide.activeBackground1#ffff00
  • editorIndentGuide.background1#ffffff33
  • editorLineNumber.activeForeground#d6deeb
  • editorLineNumber.foreground#464e57
  • editorWarning.foreground#ecc48d
  • editorWhitespace.foreground#464e5755
  • editorWidget.background#000000
  • editorWidget.border#ffff00
  • editorWidget.foreground#d6deeb
  • input.background#000000
  • input.border#ffffff
  • input.foreground#d6deeb
  • input.placeholderForeground#464e5799
  • list.activeSelectionBackground#ffff0033
  • list.activeSelectionForeground#d6deeb
  • list.focusBackground#ffff0033
  • list.focusForeground#d6deeb
  • list.hoverBackground#ffff0033
  • list.hoverForeground#d6deeb
  • list.inactiveSelectionBackground#ffff0033
  • list.inactiveSelectionForeground#d6deeb
  • menu.background#000000
  • menu.border#ffffff
  • menu.foreground#d6deeb
  • menu.selectionBackground#ffff0033
  • menu.selectionForeground#d6deeb
  • menubar.selectionBackground#ffff0033
  • menubar.selectionForeground#d6deeb
  • panel.background#000000
  • panel.border#ffffff
  • panelTitle.activeBorder#ffff00
  • panelTitle.activeForeground#d6deeb
  • panelTitle.inactiveForeground#464e5799
  • searchEditor.textInputBorder#ffff00
  • sideBar.background#000000
  • sideBar.border#ffffff
  • sideBar.foreground#d6deeb
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#ffffff
  • sideBarSectionHeader.foreground#d6deeb
  • sideBarTitle.foreground#d6deeb
  • statusBar.background#000000
  • statusBar.border#ffffff
  • statusBar.debuggingBackground#000000
  • statusBar.foreground#d6deeb
  • statusBar.noFolderBackground#000000
  • statusBarItem.hoverBackground#ffff0033
  • tab.activeBackground#000000
  • tab.activeBorder#00000000
  • tab.activeBorderTop#ffff00
  • tab.activeForeground#d6deeb
  • tab.border#666666
  • tab.hoverBackground#ffff0033
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#464e5799
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#ffffff33
  • tab.unfocusedHoverBackground#ffff0033
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#464e57
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#7fdbca
  • terminal.ansiBrightGreen#22da6f
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#ff5874
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ecc48d
  • terminal.ansiCyan#7fdbca
  • terminal.ansiGreen#22da6f
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#ff5874
  • terminal.ansiWhite#d6deeb
  • terminal.ansiYellow#ecc48d
  • terminal.background#000000
  • terminal.foreground#d6deeb
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#d6deeb
  • titleBar.border#ffffff
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#464e5799

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#00ff00italic
string#ffff00
constant.numeric#ff6b6b
constant.language#ff1493
constant.character, constant.other#ff1493
variable
keyword#00ffff
storage#00ffff
storage.type#00ffff
entity.name.class#ffff00underline bold
entity.other.inherited-class#00ff7fitalic underline bold
entity.name.function#00bfffbold
variable.parameter#ff6b6bitalic bold
entity.name.tag#ff1493bold
entity.name.tag.html.h1, entity.name.tag.html.h2, entity.name.tag.html.h3, entity.name.tag.html.h4, entity.name.tag.html.h5, entity.name.tag.html.h6#ffffffbold
entity.other.attribute-name#ffff00bold
entity.other.attribute-name.html.className, entity.other.attribute-name.jsx, support.other.attribute-name.jsx, meta.attribute.jsx#ffff00bold
support.function#00ff7fbold
support.constant#00ff7fbold
support.type, support.class#00ffffitalic bold
support.other.variable
invalid#ff0000bold
invalid.deprecated#ff00ffbold
Wise Owl Material Theme by WaseemAkhter - VS Code Theme