Skip to main content
CodingTheme

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.activeBackground#161616
  • activityBar.background#000000
  • activityBar.foreground#9f9f9f
  • activityBar.inactiveForeground#777777
  • activityBarBadge.background#8c5919
  • activityBarBadge.foreground#EEEEEE
  • badge.background#5d3b11
  • badge.foreground#EEEEEE
  • breadcrumb.activeSelectionForeground#EEEEEE
  • breadcrumb.background#222222
  • breadcrumb.focusForeground#EEEEEE
  • breadcrumb.foreground#9f9f9f
  • button.background#2666b2
  • button.foreground#EEEEEE
  • dropdown.background#102c4e
  • dropdown.border#194477
  • dropdown.listBackground#222222
  • editor.background#111111
  • editor.foreground#EEEEEE
  • editor.lineHighlightBackground#161616
  • editor.selectionBackground#444444
  • editorBracketMatch.background#777777
  • editorBracketMatch.border#00000000
  • editorGroupHeader.tabsBackground#111111
  • editorGroupHeader.tabsBorder#222222
  • editorHoverWidget.background#222222
  • editorHoverWidget.border#4e4e4e
  • editorHoverWidget.foreground#b2b2b2
  • editorIndentGuide.activeBackground#444444
  • editorIndentGuide.background#222222
  • editorLineNumber.activeForeground#777777
  • editorLineNumber.foreground#444444
  • editorPane.background#000000
  • editorRuler.foreground#444444
  • focusBorder#4e4e4e
  • input.background#3d270b
  • input.border#5d3b11
  • input.placeholderForeground#7d4f16
  • inputOption.activeBackground#7d4f16
  • inputOption.activeBorder#7d4f16
  • list.activeSelectionBackground#5d3b11
  • list.activeSelectionForeground#EEEEEE
  • list.focusBackground#5d3b11
  • list.focusForeground#EEEEEE
  • list.highlightForeground#BB7722
  • list.inactiveSelectionBackground#2d2d2d
  • menu.background#222222
  • menu.foreground#b2b2b2
  • menu.selectionBackground#8c5919
  • menu.selectionForeground#EEEEEE
  • menu.separatorBackground#777777
  • menubar.selectionBackground#5d3b11
  • menubar.selectionForeground#EEEEEE
  • panel.background#161616
  • panel.border#000000
  • panelTitle.activeBorder#3388EE
  • panelTitle.activeForeground#9f9f9f
  • quickInput.background#222222
  • quickInput.foreground#b2b2b2
  • sideBar.background#161616
  • sideBar.border#000000
  • sideBar.foreground#9f9f9f
  • sideBarSectionHeader.background#222222
  • sideBarSectionHeader.foreground#7fa5bf
  • sideBarTitle.foreground#3388EE
  • statusBar.background#222222
  • statusBar.debuggingBackground#372619
  • statusBar.debuggingForeground#a5724c
  • statusBar.foreground#777777
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#777777
  • statusBarItem.remoteBackground#0c223b
  • statusBarItem.remoteForeground#3388EE
  • tab.activeBackground#222222
  • tab.activeBorderTop#444444
  • tab.activeForeground#9f9f9f
  • tab.border#222222
  • tab.inactiveBackground#111111
  • tab.inactiveForeground#4e4e4e
  • tab.unfocusedActiveBackground#222222
  • tab.unfocusedActiveBorderTop#222222
  • tab.unfocusedActiveForeground#4e4e4e
  • tab.unfocusedInactiveBackground#111111
  • tab.unfocusedInactiveForeground#3b3b3b
  • textLink.foreground#3388EE
  • textPreformat.foreground#BB7722
  • titleBar.activeBackground#222222
  • titleBar.activeForeground#9f9f9f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, punctuation.definition.string.begin, punctuation.definition.string.end, markup.inline.raw.string#BB7722
constant.character.escape#775500
keyword.control, keyword.operator.new, keyword.other, keyword.operator.expression, string.regexp support.other.match.begin, string.regexp support.other.match.end#3388EEitalic
punctuation, keyword.operator.comparison, keyword.operator.relational, keyword.operator.logical, keyword.operator.or, keyword.operator.disjunction, string.regexp keyword.operator.lookahead, meta.brace#3388EE
constant.language, source.css support.constant#AADDFFitalic
entity.name.function, support.function, entity.name.tag, markup.heading, string.regexp keyword.operator.quantifier#AADDFF
meta.template.expression, string.unquoted.heredoc.php, punctuation.definition.variable.php, variable.other.php, meta.embedded.block.php, meta.interpolation, text.html.php, variable.other.php#EEEEEE
storage, keyword.other.namespace, keyword.operator.assignment, keyword.operator.increment, keyword.operator.decrement, punctuation.definition.bold, punctuation.definition.italic, punctuation.definition.underline, punctuation.definition.strikethrough, meta.brace.square, punctuation.definition.begin.bracket.square, punctuation.definition.end.bracket.square#BB7722
entity.name.type, entity.other.inherited-class, support.type, support.class, keyword.type#DD9966italic
keyword.operator.type, keyword.operator.optional, string.regexp constant.other.character-class, string.regexp punctuation.definition.character-class, string.regexp punctuation.character.set, string.regexp support.other.escape.special, string.regexp support.other.match.any#DD9966
constant.numeric, keyword.other.unit, variable.other.property, variable.other.constant.property, support.variable.property, meta.object-literal.key, entity.other.attribute-name, string.regexp constant.other.character-class.set, string.regexp constant.other.character-class.range, string.regexp constant.character.set, markup.bold, markup.italic, markup.underline, markup.strikethrough#EECCAA
markup.italicitalic
markup.boldbold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.headingbold
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Astronomy by DragWx - VS Code Theme