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#1c1c1c
  • activityBar.border#303030
  • activityBar.foreground#eeeeee
  • activityBarBadge.background#ffd700
  • activityBarBadge.foreground#1c1c1c
  • breadcrumb.activeSelectionForeground#ffd700
  • breadcrumb.focusForeground#eeeeee
  • breadcrumb.foreground#767676
  • button.background#ffd700
  • button.foreground#1c1c1c
  • button.hoverBackground#ffdf33
  • diffEditor.insertedTextBackground#afd75f22
  • diffEditor.removedTextBackground#ff5f5f22
  • dropdown.background#262626
  • dropdown.border#444444
  • dropdown.foreground#eeeeee
  • editor.background#1c1c1c
  • editor.findMatchBackground#ffd70066
  • editor.findMatchHighlightBackground#ffd70033
  • editor.foreground#eeeeee
  • editor.lineHighlightBackground#262626
  • editor.selectionBackground#444444
  • editorBracketMatch.background#44444488
  • editorBracketMatch.border#eeeeee
  • editorCursor.foreground#ffd700
  • editorGroup.border#444444
  • editorGroupHeader.tabsBackground#1c1c1c
  • editorIndentGuide.activeBackground1#444444
  • editorIndentGuide.background1#303030
  • editorLineNumber.activeForeground#ffd700
  • editorLineNumber.foreground#767676
  • editorSuggestWidget.background#262626
  • editorSuggestWidget.border#444444
  • editorSuggestWidget.highlightForeground#ffd700
  • editorSuggestWidget.selectedBackground#444444
  • editorWhitespace.foreground#444444
  • editorWidget.background#262626
  • editorWidget.border#444444
  • focusBorder#ffd70066
  • gitDecoration.conflictingResourceForeground#d78700
  • gitDecoration.deletedResourceForeground#ff5f5f
  • gitDecoration.ignoredResourceForeground#767676
  • gitDecoration.modifiedResourceForeground#ffd700
  • gitDecoration.untrackedResourceForeground#afd75f
  • input.background#262626
  • input.border#444444
  • input.foreground#eeeeee
  • input.placeholderForeground#767676
  • inputOption.activeBorder#ffd700
  • list.activeSelectionBackground#444444
  • list.activeSelectionForeground#eeeeee
  • list.focusBackground#303030
  • list.highlightForeground#ffd700
  • list.hoverBackground#262626
  • list.inactiveSelectionBackground#303030
  • minimap.findMatchHighlight#ffd70066
  • minimap.selectionHighlight#44444466
  • notificationCenter.border#303030
  • notifications.background#262626
  • notifications.foreground#eeeeee
  • panel.background#1c1c1c
  • panel.border#303030
  • panelTitle.activeBorder#ffd700
  • panelTitle.activeForeground#eeeeee
  • panelTitle.inactiveForeground#767676
  • peekView.border#ffd700
  • peekViewEditor.background#262626
  • peekViewEditor.matchHighlightBackground#ffd70044
  • peekViewResult.background#1c1c1c
  • peekViewTitle.background#262626
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#444444cc
  • scrollbarSlider.background#44444466
  • scrollbarSlider.hoverBackground#44444499
  • sideBar.background#1c1c1c
  • sideBar.border#303030
  • sideBar.foreground#eeeeee
  • sideBarSectionHeader.background#262626
  • sideBarSectionHeader.foreground#eeeeee
  • sideBarTitle.foreground#ffd700
  • statusBar.background#303030
  • statusBar.border#444444
  • statusBar.debuggingBackground#d78700
  • statusBar.debuggingForeground#1c1c1c
  • statusBar.foreground#eeeeee
  • statusBar.noFolderBackground#303030
  • tab.activeBackground#1c1c1c
  • tab.activeBorderTop#ffd700
  • tab.activeForeground#ffd700
  • tab.border#1c1c1c
  • tab.inactiveBackground#303030
  • tab.inactiveForeground#767676
  • terminal.ansiBlack#1c1c1c
  • terminal.ansiBlue#87afd7
  • terminal.ansiBrightBlack#767676
  • terminal.ansiBrightBlue#87afd7
  • terminal.ansiBrightCyan#87afd7
  • terminal.ansiBrightGreen#afd75f
  • terminal.ansiBrightMagenta#af87d7
  • terminal.ansiBrightRed#ff5f5f
  • terminal.ansiBrightWhite#eeeeee
  • terminal.ansiBrightYellow#ffd700
  • terminal.ansiCyan#87afd7
  • terminal.ansiGreen#afd75f
  • terminal.ansiMagenta#af87d7
  • terminal.ansiRed#ff5f5f
  • terminal.ansiWhite#eeeeee
  • terminal.ansiYellow#ffd700
  • terminal.background#1c1c1c
  • terminal.foreground#eeeeee
  • titleBar.activeBackground#1c1c1c
  • titleBar.activeForeground#eeeeee
  • titleBar.inactiveBackground#1c1c1c
  • titleBar.inactiveForeground#767676

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#d78700
string, string.quoted, string.template#afd75f
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type, storage.modifier#ffd700
storage.type.class, storage.type.struct, storage.type.enum, storage.type.interface, storage.type.type#ffd700
entity.name.function, meta.function-call, support.function, meta.function-call entity.name.function#87afd7
entity.name.type, support.type, support.class, entity.name.class, entity.other.inherited-class#767676
constant.numeric, constant.language, constant.character#eeeeee
variable, variable.other, variable.parameter#eeeeee
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison#eeeeee
meta.preprocessor, keyword.control.directive, keyword.control.import, keyword.control.from, keyword.other.import#bcbcbc
punctuation, meta.brace, punctuation.definition.tag#eeeeee
entity.name.tag#ffd700
entity.other.attribute-name#eeeeee
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#87afd7
entity.name.tag.css#ffd700
heading.1.markdown, heading.2.markdown, heading.3.markdown, heading.4.markdown, heading.5.markdown, heading.6.markdown, markup.heading, punctuation.definition.heading.markdown#ffd700bold
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#afd75f
markup.underline.link.markdown, string.other.link.title.markdown#87afd7
markup.bold#eeeeeebold
markup.italic#eeeeeeitalic
meta.decorator, entity.name.function.decorator, punctuation.definition.decorator#767676
constant.character.escape#ffd700
storage.modifier.lifetime.rust, entity.name.function.macro.rust, entity.name.type.macro.rust#767676
invalid, invalid.illegal#ff5f5fbold
keyword.todo, comment storage.type#ffd700bold
markup.inserted#afd75f
markup.deleted#ff5f5f
markup.changed#ffd700
support.type.property-name.json#87afd7
entity.name.tag.yaml#87afd7
keyword.key.toml, support.type.property-name.toml#87afd7
Gruber Ocean by ruscito - VS Code Theme