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#000505CC
  • activityBar.border#5200FFFF
  • activityBar.foreground#7200FFFF
  • activityBarBadge.background#40ff0077
  • activityBarBadge.foreground#BFF
  • button.background#00FF7A77
  • button.foreground#BFF
  • button.hoverBackground#FFAA00EE
  • descriptionForeground#33FF33EE
  • dropdown.background#00000077
  • dropdown.border#5200FFFF
  • dropdown.foreground#BFF
  • editor.background#001020
  • editor.lineHighlightBackground#004
  • editor.lineHighlightBorder#5858FFDD
  • editor.selectionBackground#00FF0044
  • editor.selectionForeground#DDDDFFFF
  • editor.selectionHighlightBackground#000
  • editor.selectionHighlightBorder#22ffffff
  • editorBracketMatch.background#02009611
  • editorBracketMatch.border#40ff00fa
  • editorCursor.foreground#00FF77FF
  • editorHoverWidget.background#000000EE
  • editorHoverWidget.border#5200FFFF
  • editorIndentGuide.background#006fff55
  • editorLineNumber.activeForeground#FF9944FF
  • editorLineNumber.foreground#BB5555DD
  • editorLink.activeForeground#07F
  • editorSuggestWidget.background#000000FA
  • editorSuggestWidget.border#5200FFFF
  • errorForeground#FF0050EE
  • focusBorder#5200FFFF
  • foreground#BFF
  • input.background#001005FF
  • input.border#5200FFFF
  • input.foreground#BFF
  • list.activeSelectionBackground#002
  • list.activeSelectionForeground#0088ff
  • list.dropBackground#037
  • list.focusBackground#070
  • list.focusForeground#BFF
  • list.hoverBackground#00449944
  • list.hoverForeground#FF5500ff
  • list.inactiveFocusBackground#000F1FBB
  • list.inactiveSelectionBackground#000F1FCC
  • list.inactiveSelectionForeground#0088ff
  • panel.background#001015aa
  • panel.border#5200FFFF
  • panel.dropBackground#001015aa
  • panelTitle.activeForeground#0088ff
  • panelTitle.inactiveForeground#0088ff44
  • scrollbar.shadow#00AAFFCC
  • scrollbarSlider.activeBackground#0088ff
  • scrollbarSlider.background#00103d99
  • scrollbarSlider.hoverBackground#FF5500ff
  • selection.background#FFAA00EE
  • sideBar.background#000505FF
  • sideBar.border#5200FFFF
  • sideBar.foreground#BFF
  • sideBarSectionHeader.background#5800FFCC
  • sideBarSectionHeader.foreground#FFDD00CC
  • sideBarTitle.foreground#FFFF00FF
  • statusBar.background#001a6533
  • statusBar.border#5200FFFF
  • statusBar.foreground#9FF
  • statusBarItem.hoverBackground#00449977
  • tab.activeBackground#000525EE
  • tab.activeBorder#5200FFFF
  • tab.activeForeground#0088ff
  • tab.border#5200FFFF
  • tab.hoverBackground#00155544
  • tab.hoverBorder#5200FFFF
  • tab.inactiveBackground#000515aa
  • tab.inactiveForeground#0088ff44
  • terminal.border#5200FFFF
  • textBlockQuote.border#5200FFFF
  • titleBar.activeBackground#001555aa
  • titleBar.activeForeground#0088ff
  • titleBar.border#5200FFFF
  • titleBar.inactiveBackground#00155544
  • titleBar.inactiveForeground#0088ff44
  • widget.shadow#00AAFFCC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source#f8f8ff
markup.quote#6495ed
markup.inserted, markup.changed#006400
markup.underlineunderline
emphasis, markup.italicitalic
strong, markup.boldbold
header, markup.heading#4682b4
invalid, markup.deleted#8b0000underline
comment, comment.block, punctuation.definition.comment, punctuation.definition.comment.line#2f4f4fitalic
comment.line.double-slash#1f3f3fbold
comment.line.shebang#b8860bbold
punctuation.definition, punctuation.terminator.statement#1e90ff
punctuation.definition.tag, punctuation.definition.entity, punctuation.separator.key-value#ff7f50bold
punctuation.definition.heading#483d8bbold
punctuation.section.embedded#ee82eebold
keyword#b0c4de
keyword.operator#1e90ffbold
keyword.control#87cefabold
keyword.other#00bfffbold
keyword.operator.logical, keyword.operator.pipe, keyword.operator.list, keyword.operator.dereference, keyword.operator.comparison, keyword.operator.bitwise, keyword.operator.assignment, keyword.operator.arithmetic#00ffffbold
variable, variable.other#daa520bold
variable.other.property#7cfc00bold
variable.language#ff8c00bold
variable.language.this#dc143cbold italic
variable.interpolation#cdab53bold italic
entity.name.function, entity.name.section#8a2be2bold
storage.type.function, meta.require, support.function#9370dbbold
meta.class, storage.type.class, entity.name.class, support.class#9400d3bold
storage#ff4500bold
storage.type, storage.modifier#ff6347bold
string, entity.other.inherited-class#c0c0c0
string.tag#778899
string.value#a9a9a9
string.regexp#7cfc00
string.unquoted#add8e6italic
constant#cd5c5cbold
constant.numeric#c71585bold
constant.regexp#ff00ff
constant.character.escape#ee82ee
constant.other.placeholder, constant.other.symbol#ff1493bold
entity.name.tag#ffa07a
entity.other.attribute-name#ff1493
entity.other.attribute-name.id#dc143c
entity.name.function.declaration, entity.name.function.definition, entity.name.function.method#8a2be2bold underline
meta.selector#f08080
meta.preprocessor#7fffd4
meta.preprocessor.string#c0c0c0
meta.preprocessor.numeric#c71585
meta.brace.curly#44FF77bold
meta.block#87ceeb
meta.function, meta.function-call#6495ed
meta.parens#8fbc8fbold
markup.quote#87cefa
markup.underlineunderline
markup.boldbold
markup.heading#4169e1bold
markup.italicitalic
markup.inserted#556b2f
markup.deleted#8b0000
markup.changed#7cfc00
support.type#adff2fbold
support.type.property-name#9cdcfe
support.type.sys-types#ffa500bold
source#f8f8ff
markup.quote#6495ed
markup.inserted, markup.changed#006400
markup.underlineunderline
emphasis, markup.italicitalic
strong, markup.boldbold
header, markup.heading#4682b4
invalid, markup.deleted#8b0000underline
comment, comment.block, punctuation.definition.comment, punctuation.definition.comment.line#2f4f4fitalic
comment.line.double-slash#1f3f3fbold
comment.line.shebang#b8860bbold
punctuation.definition, punctuation.terminator.statement#1e90ff
punctuation.definition.tag, punctuation.definition.entity, punctuation.separator.key-value#ff7f50bold
punctuation.definition.heading#483d8bbold
punctuation.section.embedded#ee82eebold
keyword#b0c4de
keyword.operator#1e90ffbold
keyword.control#87cefabold
keyword.other#00bfffbold
keyword.operator.logical, keyword.operator.pipe, keyword.operator.list, keyword.operator.dereference, keyword.operator.comparison, keyword.operator.bitwise, keyword.operator.assignment, keyword.operator.arithmetic#00ffffbold
variable, variable.other#daa520bold
variable.other.property#7cfc00bold
variable.language#ff8c00bold
variable.language.this#dc143cbold italic
variable.interpolation#cdab53bold italic
entity.name.function, entity.name.section#8a2be2bold
storage.type.function, meta.require, support.function#9370dbbold
meta.class, storage.type.class, entity.name.class, support.class#9400d3bold
storage#ff4500bold
storage.type, storage.modifier#ff6347bold
string, entity.other.inherited-class#c0c0c0
string.tag#778899
string.value#a9a9a9
string.regexp#7cfc00
string.unquoted#add8e6italic
constant#cd5c5cbold
constant.numeric#c71585bold
constant.regexp#ff00ff
constant.character.escape#ee82ee
constant.other.placeholder, constant.other.symbol#ff1493bold
entity.name.tag#ffa07a
entity.other.attribute-name#ff1493
entity.other.attribute-name.id#dc143c
entity.name.function.declaration, entity.name.function.definition, entity.name.function.method#8a2be2bold underline
meta.selector#f08080
meta.preprocessor#7fffd4
meta.preprocessor.string#c0c0c0
meta.preprocessor.numeric#c71585
meta.brace.curly#44FF77bold
meta.block#87ceeb
meta.function, meta.function-call#6495ed
meta.parens#8fbc8fbold
markup.quote#87cefa
markup.underlineunderline
markup.boldbold
markup.heading#4169e1bold
markup.italicitalic
markup.inserted#556b2f
markup.deleted#8b0000
markup.changed#7cfc00
support.type#adff2fbold
support.type.property-name#9cdcfe
support.type.sys-types#ffa500bold
keyword.other.line-continuation.c#a0FFa0
keyword.operator.heredoc.shell, keyword.control.heredoc-token.shell, keyword.operator.redirect.shell#FF00FFbold
variable.other.special.shell, variable.other.loop.shell, variable.other.positional.shell#FF7700bold
variable.language.makefile, variable.other.bracket.shell, variable.other.normal.shell#1DFF00bold
meta.compound.c, meta.scope.function-call.makefile, string.interpolated.dollar.shell#ff00ffbold
entity.name.function.target.makefile#FFFE24bold underline
meta.scope.prerequisites.makefile#68ffd9bold italic
punctuation.definition.variable.makefile#FF0098bold italic
comment.block.jdoc.c#00CC7777underline italic
comment.block.dochead.c#00CC7777bold underline italic
comment.block.link.c#DD777755underline italic
comment.block.bold.c#554488ccbold italic
comment.block.underline.c#554488ccunderline italic
comment.block.seperator.c#4400FFeebold
comment.block.token.c#990044bold underline
constant.return.success.c#30FF30bold
constant.return.failure.c#FF0044bold
constant.return.error.c#FF0000bold
entity.name.constant.preprocessor.c#EEEEEEbold
meta.preprocessor.directive.c#CCCCFFbold
keyword.operator.ternary.c#FFCF00bold
keyword.other.preprocessor.c#AAFAFF
string.quoted.other.lt-gt.include.c, string.quoted.double.include.c#BF40FFbold italic
entity.name.function.preprocessor.c, entity.name.class#33FF33BBbold
entity.name.type.cpp#ff00ffeebold
entity.name.type.inherited.cpp#7700fffbbold italic
entity.name.type.declaration.c, entity.name.type.typedef.c#FF2020bold
keyword.operator.increment-decrement.c#0FFFFFbold
meta.scope.group.shell, meta.block.special.c, meta.namespace-block.cpp#7F77FF
meta.preprocessor.macro.c#7C7C7Cbold
string.macro.stringify.c#777777bold
entity.name.tag.open.jsx, entity.name.tag.close.jsx, support.class.component.open.jsx, support.class.component.close.jsx#FF0050
punctuation.definition.tag.jsx#FFF000
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx#FF00FFbold
JSXNested#AFFCbold
JSXAttrs, entity.other.attribute-name.jsx#AAAbold
keyword.control.module.js#00ffffbold
string.quoted.module.js#CC5500underline
keyword.operator.new.js#FF33ffbold
text.html.php#AFF
string.quoted.double.html#667italic

Shiki preview

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

Loading...

Dark Pixel - join the bright side of dark. - Coding Theme