Skip to main content
Coding Theme

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.background#212026
  • activityBar.foreground#cbc1d5
  • activityBarBadge.background#222226
  • activityBarBadge.foreground#cbc1d5
  • contrastBorder#292b2e
  • debugToolBar.background#0a0814
  • dropdown.background#212026
  • dropdown.border#5d4d7a
  • dropdown.foreground#cbc1d5
  • editor.background#292b2e
  • editor.foreground#cbc1d5
  • editor.lineHighlightBackground#212026
  • editor.selectionBackground#5d4d7a
  • editorBracketMatch.background#5d4d7a
  • editorBracketMatch.border#686868
  • editorCursor.foreground#e3dedd
  • editorGroupHeader.noTabsBackground#212026
  • editorGroupHeader.tabsBackground#212026
  • editorLineNumber.foreground#5d4d7a
  • focusBorder#5d4d7a
  • list.activeSelectionBackground#100a14
  • list.activeSelectionForeground#b2b2b2
  • list.dropBackground#100a14
  • list.focusBackground#100a14
  • list.highlightForeground#686868
  • list.hoverBackground#100a14
  • list.inactiveSelectionBackground#100a14
  • panel.background#212026
  • sideBar.background#212026
  • sideBarSectionHeader.background#212026
  • sideBarTitle.foreground#cbc1d5
  • statusBar.background#212026
  • statusBar.debuggingBackground#5d4d7a
  • statusBar.foreground#cbc1d5
  • statusBar.noFolderBackground#212026
  • statusBarItem.activeBackground#827591
  • statusBarItem.hoverBackground#827591
  • statusBarItem.prominentBackground#827591
  • statusBarItem.prominentHoverBackground#827591
  • tab.activeBackground#5d4d7a
  • tab.activeForeground#cbc1d5
  • tab.border#5d4d7a
  • tab.inactiveBackground#212026
  • tab.inactiveForeground#a094a2
  • terminal.ansiBlack#b2b2b2
  • terminal.ansiBlue#3a81c3
  • terminal.ansiBrightBlack#b2b2b2
  • terminal.ansiBrightBlue#d7dfff
  • terminal.ansiBrightCyan#28def0
  • terminal.ansiBrightGreen#86dc2f
  • terminal.ansiBrightMagenta#a31db1
  • terminal.ansiBrightRed#f2241f
  • terminal.ansiBrightWhite#b2b2b2
  • terminal.ansiBrightYellow#b1951d
  • terminal.ansiCyan#21b8c7
  • terminal.ansiGreen#67b11d
  • terminal.ansiMagenta#800080
  • terminal.ansiRed#ba2f59
  • terminal.ansiWhite#b2b2b2
  • terminal.ansiYellow#b1951d
  • titleBar.activeBackground#212026
  • widget.shadow#5d4d7a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.heading.1.org, heading.1#4f97d7bold
markup.heading.2.org, heading.2#2d9574bold
markup.heading.3.org, heading.3#67b11d
markup.heading.4.org, heading.4#b1951d
markup.heading.5.org, heading.5#4f97d7
markup.heading.6.org, heading.6#2d9574
punctuation.definition.heading.org#4f97d7bold
keyword.other.todo.org#dc752fbold
constant.other.priority.org#dc752fbold
entity.name.tag.org#9f8766bold
constant.other.progress.org#a45bad
punctuation.definition.list.begin.org#4f97d7
constant.language.checkbox.org#7590dbbold
entity.name.tag.description.term.org#c56ec3italic
punctuation.separator.key-value.org#9f8766bold
constant.numeric.list-counter.org#a45bad
entity.name.function.org#9f8766bold
string.unquoted.org#bc6ec5
markup.bold.orgbold
markup.italic.orgitalic
markup.underline.orgunderline
markup.strikethrough.org#dc322fstrikethrough
markup.inline.raw.org#28def0
markup.underline.link.org#4f97d7underline
#6688cc
comment#2aa1ae
string#2d9574
constant.numeric#a45bad
constant.language#a45bad
constant.character, constant.other#a45bad
variable#7590db
keyword#4f97d7
storage#4f97d7
storage.type#ce537aitalic
entity.name.class, entity.name.type#4f97d7bold
entity.other.inherited-class#bc6ec5italic underline
entity.name.function#bc6ec5
variable.parameter#7590db
entity.name.tag#4f97d7
punctuation.definition.tag#2aa1ae
entity.other.attribute-name#bc6ec5
support.function#bc6ec5bold
support.constant#a45bad
support.type, support.class#ce537aitalic
invalid#e0211d
meta.diff, meta.diff.header#E0EDDDitalic
markup.deleted#dc322f
markup.changed#cb4b16
markup.inserted#219186
markup.quote#22aa44
markup.bold, markup.italic#22aa44
markup.inline.raw#9966b8
markup.heading.setext#ddbb88
source.java storage.modifier.import, source.java storage.modifier.package, source.java entity.name.type.class, source.java storage.type, source.java meta.definition.class.implemented.interfaces, source.java entity.other.inherited-class#ce537a
meta.method.body.java, meta.function-call.java#cbc1d5ff
source.java keyword.operator.assignment, source.java keyword.operator.arithmetic, source.java storage.type.function.arrow.java, source.java punctuation.definition.parameters.begin.bracket.round, source.java punctuation.definition.parameters.end.bracket.round#cbc1d5ff
source.java begin.bracket.curly, source.java end.bracket.curly#4f97d7
source.java entity.name.function meta#ce537a
source.java keyword.other.documentation.javadoc.java#9966b8
source.cpp keyword.control.directive#9966b8
source.cpp storage.type, source.cpp storage.modifier#4f97d7
source.clojure meta.symbol#cbc1d5ff
source.clojure entity.global, source.clojure meta.definition.global#ce537a
source.clojure constant.keyword#9966b8
source.clojure meta.symbol meta.expression, source.clojure meta.vector#ce537a
Spacemacs Theme + by Idears - VS Code Theme