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.activeBorder#0078d4
  • activityBar.background#313335
  • activityBar.border#464646
  • activityBar.foreground#C5C5C5
  • activityBar.inactiveForeground#ffffff80
  • activityBarBadge.background#313335
  • activityBarBadge.foreground#ffffff
  • breadcrumb.background#313335
  • checkbox.border#6B6B6B
  • dropdown.border#646464
  • dropdown.foreground#BBBBBB
  • dropdown.listBackground#646464
  • editor.background#2B2B2B
  • editor.inactiveSelectionBackground#3a3d4167
  • editor.lineHighlightBackground#323232
  • editor.selectionBackground#264F78
  • editorBracketHighlight.foreground1#D5B778
  • editorBracketHighlight.foreground2#6897BB
  • editorBracketHighlight.foreground3#C77DBB
  • editorBracketHighlight.foreground4#8888C6
  • editorBracketHighlight.foreground5#BBB529
  • editorBracketHighlight.foreground6#FA6675
  • editorBracketHighlight.unexpectedBracket.foreground#FA6675
  • editorBracketPairGuide.foreground1#e4b550ff
  • editorBracketPairGuide.foreground2#85c4fbff
  • editorBracketPairGuide.foreground3#ee60d6ff
  • editorBracketPairGuide.foreground4#7070d8ff
  • editorBracketPairGuide.foreground5#ede722ff
  • editorBracketPairGuide.foreground6#fa283dff
  • editorCodeLens.foreground#565c63
  • editorGroup.border#505050
  • editorGroupHeader.tabsBackground#27292A
  • editorGroupHeader.tabsBorder#505050
  • editorGutter.background#313335
  • editorIndentGuide.activeBackground1#555555
  • editorIndentGuide.background1#373737
  • editorLineNumber.activeForeground#A4A3A3
  • editorLineNumber.foreground#606366
  • editorRuler.foreground#464646
  • editorSuggestWidget.background#3C3F41
  • editorWidget.background#313335
  • editorWidget.border#464646
  • input.background#45494A
  • input.border#646464
  • input.foreground#BBBBBB
  • list.activeSelectionForeground#ADADAD
  • list.dropBackground#474B4D
  • list.hoverBackground#313335
  • list.inactiveSelectionBackground#0D293E
  • menu.background#3C3F41
  • menu.border#505050
  • menu.foreground#ADADAD
  • menu.separatorBackground#505050
  • notifications.background#1E1F22
  • notifications.border#ffffff15
  • notifications.foreground#BCBEC4
  • panel.background#313335
  • panel.border#4B4B4B
  • panelTitle.activeBorder#4A7A88
  • panelTitle.activeForeground#D3D3D3
  • panelTitle.inactiveForeground#b4b4b4
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#6e768187
  • scrollbarSlider.background#6e768133
  • scrollbarSlider.hoverBackground#6e768145
  • settings.headerForeground#BBBBBB
  • sideBar.background#27292A
  • sideBar.border#464646
  • sideBar.foreground#A7A7A7
  • sideBarSectionHeader.background#3C3F41
  • sideBarSectionHeader.border#505050
  • sideBarSectionHeader.foreground#A7A7A7
  • sideBarTitle.foreground#A7A7A7
  • statusBar.background#313335
  • statusBar.border#4B4B4B
  • statusBar.debuggingBackground#864d30
  • statusBar.debuggingBorder#4B4B4B
  • statusBar.debuggingForeground#cccccc
  • statusBar.foreground#BBBBBB
  • statusBar.noFolderBackground#313335
  • statusBar.noFolderBorder#4B4B4B
  • tab.activeBackground#4E5254
  • tab.activeBorder#4095AC
  • tab.border#555555
  • tab.hoverBackground#606466
  • tab.inactiveBackground#3C3F41
  • tab.inactiveForeground#BBBBBB
  • tab.unfocusedActiveForeground#BBBBBB
  • tab.unfocusedHoverBackground#606466
  • tab.unfocusedInactiveForeground#BBBBBB
  • terminal.background#252526
  • terminal.foreground#BBBBBB
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#BCBEC4
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#1E1F22
  • titleBar.inactiveForeground#8b949e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7A7E85
string.quoted.docstring#629755italic
string, meta.embedded.assembly#6A8759
keyword.control, keyword.operator.logical#CC7832
constant.language, constant.numeric, variable.other.enummember, constant.character.escape#CC7832
constant.numeric#6897BB
support.class, support.type, entity.name.type, entity.name.namespace, storage.type#8888C6
storage.type.function, storage.type.class#CC7832
variable, meta.definition.variable.name, support.variable#BCBEC4
invalid#FA6675
constant.character.escape, constant.character.character-class.regexp, constant.other.character-class.regexp#D5B778
meta.selector.css, entity.other.attribute-name.css#D5B778
variable.argument.css, punctuation.definition.tag, entity.name.tag, support.function.misc, meta.function.variable.css, meta.property-value.css support.function, meta.selector.css, entity.other.attribute-name.css#D5B778
keyword.other.unit, punctuation.separator.key-value.html, meta.tag.attributes keyword.operator.assignment#6AAB73
entity.other.attribute-name, support.type.property-name.css#BABABA
meta.tag.custom entity.name.tag.html#2fbaa3
comment.block.javadoc#5F826B
source.js entity.name.function#66A6FF
variable#BCBEC4
support.type.property-name.json#C77DBB
support.function.latex, keyword.control.latex, support.function.be.latex, keyword.control.preamble.latex, keyword.control.layout.latex#8888C6italic
constant.other.reference.label.latex, markup.underline.link.latex, variable.parameter.definition.label.latex#ffa3eea8italic
keyword.control.label.latex, support.function.general.tex, keyword.control.ref.latex#a6a6c7ff
meta.function.environment.general.latex#bbbbbbc3
entity.name.section.latex#BBBBBBbold
support.function.section.latex, markup.heading.latex#66A6FFbold
variable.parameter.function.latex, support.function.environment.latex#7a7e85
support.class.math.block.environment.latex constant.other.math.tex, support.class.math.block.environment.latex constant.other.general.math.tex, support.class.math.block.tex constant.other.math.tex, support.class.math.block.tex constant.other.general.math.tex#62975596
support.class.math.block.environment.latex, support.class.math.block.tex#629755ff
variable.parameter.latex, string.other.option.latex#6AAB73
entity.name.label.latex#BBB529italic
markup.raw.latex, string.other.verbatim.latex#FA6675italic
markup.italic.textit.latexitalic
markup.bold.textbf.latexbold
log.error#d30000ffbold
log.warning#d77a00ffbold
log.info#ffffffffbold
log.debug#0000d7ffbold
log.date#7A7E85italic
source.python storage.type.function.python, source.python storage.type.class.python#CC7832
source.python support.function.magic.python#B200B2
source.python variable.parameter.function.language.special, source.python variable.language.special.self.python#94558D
source.python meta.function.decorator support.type, source.python meta.function.decorator entity.name.function.decorator #BBB529
meta.typehint.comment.python, comment.typehint#FF0000
source.python variable.parameter.function-call.python#AA4926
source.python support.function.builtin.python#8888C6
punctuation.separator.annotation.result.python#7A7E85
Colour theme Dark by AAperghis - VS Code Theme