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.org—bold
markup.italic.org—italic
markup.underline.org—underline
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