Skip to main content
Coding Theme

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#020a2a
  • activityBar.border#ffb224
  • activityBar.foreground#ffb224
  • activityBarBadge.background#82AAFF
  • activityBarBadge.foreground#ffffff
  • editor.background#020a2a
  • editor.foreground#e0e0e0
  • editorBracketHighlight.foreground1#82AAFF
  • editorBracketHighlight.foreground2#82AAFF
  • editorBracketHighlight.foreground3#82AAFF
  • editorBracketHighlight.foreground4#82AAFF
  • editorBracketHighlight.unexpectedBracket.foreground#FF5370
  • editorBracketMatch.border#82AAFF
  • editorGroupHeader.tabsBackground#020a2a
  • editorGroupHeader.tabsBorder#ffb224
  • menu.background#020a2a
  • menu.foreground#e0e0e0
  • menu.selectionBackground#040d31
  • menu.selectionForeground#ffb224
  • menu.separatorBackground#ffb224
  • menubar.selectionBackground#040d31
  • menubar.selectionBorder#ffb22480
  • menubar.selectionForeground#ffb224
  • panel.background#020a2a
  • panel.border#ffb224
  • panelTitle.activeForeground#ffb224
  • panelTitle.inactiveForeground#ffb22480
  • sideBar.background#040d31
  • sideBar.border#ffb224
  • sideBarSectionHeader.background#020a2a
  • sideBarSectionHeader.foreground#ffb224
  • sideBarTitle.foreground#ffb224
  • statusBar.background#020a2a
  • statusBar.border#ffb22480
  • statusBar.debuggingBackground#cc3300
  • statusBar.foreground#e0e0e0
  • statusBar.noFolderBackground#020a2a
  • tab.activeBackground#020a2a
  • tab.activeForeground#ffb224
  • tab.inactiveBackground#040d31
  • tab.inactiveForeground#ffb224
  • titleBar.activeBackground#040d31
  • titleBar.activeForeground#ffb224
  • titleBar.border#ffb224
  • titleBar.inactiveBackground#040d31
  • titleBar.inactiveForeground#ffb224

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6C7986italic
variable, string constant.other.placeholder#82AAFF
keyword, storage.type, storage.modifier#89DDFF
keyword.control, constant.other.color, punctuation, meta.tag#82AAFF
entity.name.function, meta.function-call, variable.function, support.function#ffb224
string, constant.other.symbol#C3E88D
constant.numeric, constant.language#FFD580
entity.name, support.type, support.class#ffb224
tag.decorator.js#89DDFFitalic
yosoygroottheme by Edwin Valdez - VS Code Theme