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#efeae9
  • activityBar.foreground#655370
  • activityBarBadge.background#e7e5eb
  • activityBarBadge.foreground#655370
  • contrastBorder#fbf8ef
  • debugToolBar.background#d2ceda
  • dropdown.background#efeae9
  • dropdown.border#b3b9be
  • dropdown.foreground#655370
  • editor.background#fbf8ef
  • editor.foreground#655370
  • editor.lineHighlightBackground#efeae9
  • editor.selectionBackground#d3d3e7
  • editorBracketMatch.background#d3d3e7
  • editorBracketMatch.border#a094a2
  • editorCursor.foreground#100a14
  • editorGroupHeader.noTabsBackground#efeae9
  • editorGroupHeader.tabsBackground#efeae9
  • editorLineNumber.foreground#d3d3e7
  • focusBorder#b3b9be
  • list.activeSelectionBackground#d2ceda
  • list.activeSelectionForeground#655370
  • list.dropBackground#d2ceda
  • list.focusBackground#d2ceda
  • list.highlightForeground#a094a2
  • list.hoverBackground#d2ceda
  • list.inactiveSelectionBackground#d2ceda
  • panel.background#efeae9
  • sideBar.background#efeae9
  • sideBarSectionHeader.background#efeae9
  • sideBarTitle.foreground#655370
  • statusBar.background#efeae9
  • statusBar.debuggingBackground#d3d3e7
  • statusBar.foreground#655370
  • statusBar.noFolderBackground#efeae9
  • statusBarItem.activeBackground#9380b2
  • statusBarItem.hoverBackground#9380b2
  • statusBarItem.prominentBackground#9380b2
  • statusBarItem.prominentHoverBackground#9380b2
  • tab.activeBackground#d3d3e7
  • tab.activeForeground#655370
  • tab.border#b3b9be
  • tab.inactiveBackground#efeae9
  • tab.inactiveForeground#a094a2
  • terminal.ansiBlack#5f5f87
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#5f5f87
  • terminal.ansiBrightBlue#af5fd7
  • terminal.ansiBrightCyan#008080
  • terminal.ansiBrightGreen#00af00
  • terminal.ansiBrightMagenta#800080
  • terminal.ansiBrightRed#d70008
  • terminal.ansiBrightWhite#5f5f87
  • terminal.ansiBrightYellow#875f00
  • terminal.ansiCyan#008080
  • terminal.ansiGreen#5faf00
  • terminal.ansiMagenta#800080
  • terminal.ansiRed#af005f
  • terminal.ansiWhite#5f5f87
  • terminal.ansiYellow#875f00
  • titleBar.activeBackground#efeae9
  • widget.shadow#b3b9be

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.heading.1.org, heading.1#3a81c3bold
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#3a81c3—
markup.heading.6.org, heading.6#2d9574—
punctuation.definition.heading.org#3a81c3bold
keyword.other.todo.org#dc752fbold
constant.other.priority.org#dc752fbold
entity.name.tag.org#da8b55bold
constant.other.progress.org#4e3163—
punctuation.definition.list.begin.org#3a81c3—
constant.language.checkbox.org#715ab1bold
entity.name.tag.description.term.org#6c4173italic
punctuation.separator.key-value.org#da8b55bold
constant.numeric.list-counter.org#4e3163—
entity.name.function.org#da8b55bold
string.unquoted.org#6c3163—
markup.bold.org—bold
markup.italic.org—italic
markup.underline.org—underline
markup.strikethrough.org#e0211dstrikethrough
markup.inline.raw.org#21b8c7—
markup.underline.link.org#3a81c3underline
—#655370—
comment#a49da5—
string#2d9574—
constant.numeric#4e3163—
constant.language#4e3163—
constant.character, constant.other#4e3163—
variable#715ab1
keyword#3a81c3—
storage#3a81c3
storage.type#ba2f59italic
entity.name.class, entity.name.type#3a81c3bold
entity.other.inherited-class#6c3163italic underline
entity.name.function#6c3163
variable.parameter#715ab1
entity.name.tag#3a81c3
punctuation.definition.tag#2aa1ae—
entity.other.attribute-name#6c3163
support.function#6c3163bold
support.constant#4e3163
support.type, support.class#ba2f59italic
invalid#e0211d—
meta.diff, meta.diff.header#E0EDDDitalic
markup.deleted#e0211d—
markup.changed#dc752f—
markup.inserted#2d9574—
markup.quote#67b11d—
markup.bold, markup.italic#67b11d—
markup.inline.raw#a31db1—
markup.heading.setext#da8b55—
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#ba2f59
meta.method.body.java, meta.function-call.java#655370—
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#655370—
source.java begin.bracket.curly, source.java end.bracket.curly#3a81c3—
source.java entity.name.function meta#ba2f59—
source.java keyword.other.documentation.javadoc.java#a31db1—
source.cpp keyword.control.directive#a31db1—
source.cpp storage.type, source.cpp storage.modifier#3a81c3—
source.clojure meta.symbol#655370—
source.clojure entity.global, source.clojure meta.definition.global#ba2f59—
source.clojure constant.keyword#a31db1—
source.clojure meta.symbol meta.expression, source.clojure meta.vector#ba2f59—
Spacemacs Theme + by Idears - VS Code Theme