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#180e0e
  • activityBar.border#00000000
  • activityBar.foreground#ffab00
  • activityBar.inactiveForeground#5d4037
  • editor.background#180e0e
  • editor.foreground#ffe0b2
  • editor.lineHighlightBackground#261515
  • editor.selectionBackground#3e1e1e
  • editorCursor.foreground#ff3d00
  • editorGroupHeader.tabsBackground#180e0e
  • editorLineNumber.activeForeground#ffab00
  • editorLineNumber.foreground#5d4037
  • focusBorder#00000000
  • gitDecoration.conflictingResourceForeground#ff6e40
  • gitDecoration.deletedResourceForeground#ff5252
  • gitDecoration.ignoredResourceForeground#5d4037
  • gitDecoration.modifiedResourceForeground#ffab00
  • gitDecoration.untrackedResourceForeground#c3e88d
  • list.activeSelectionBackground#ff3d0040
  • list.activeSelectionBorder#00000000
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.focusBackground#ff3d0040
  • list.hoverBackground#ff3d0010
  • list.inactiveSelectionBackground#00000000
  • menu.background#180e0e
  • menu.border#00000000
  • menu.foreground#ffe0b2
  • menu.selectionBackground#ff3d00
  • menu.selectionForeground#180e0e
  • notifications.background#180e0e
  • notifications.border#ff3d00
  • notifications.foreground#ffe0b2
  • panel.background#180e0e
  • panel.border#00000000
  • panelTitle.activeBackground#ff3d0040
  • panelTitle.activeBorder#00000000
  • quickInput.background#261515
  • quickInput.list.focusBackground#ff3d00
  • sideBar.background#180e0e
  • sideBar.border#00000000
  • sideBar.foreground#ffcc80
  • sideBarSectionHeader.background#180e0e
  • statusBar.background#180e0e
  • statusBar.border#00000000
  • statusBar.foreground#ffcc80
  • tab.activeBackground#180e0e
  • tab.activeBorderBottom#ff3d00
  • tab.activeBorderTop#180e0e
  • tab.activeForeground#ff3d00
  • tab.border#180e0e00
  • tab.inactiveBackground#180e0e
  • tab.inactiveForeground#8d6e63
  • terminal.background#180e0e
  • titleBar.activeBackground#180e0e
  • titleBar.border#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5d4037italic
string, string.quoted, string.template#c3e88d—
constant.numeric#ff9100—
constant.language#ff9100—
constant.character#ff9100—
constant.other#ff9100—
variable#ffe0b2—
variable.other.readwrite#ffe0b2—
variable.parameter#ffcc80italic
variable.language#ff3d00italic
keyword#ff3d00bold
keyword.control#ff6e40italic
keyword.operator#ff6e40—
keyword.declaration#ff3d00bold
storage#ff3d00bold
storage.type#ff3d00bold
entity.name.class#ff6e40—
entity.name.type#ff6e40—
entity.name.function#ffab00—
entity.other.attribute-name#ffab00italic
entity.name.tag#ff5252—
support.function#ffab00—
support.constant#ff9100—
support.type#ff6e40—
support.class#ff6e40—
support.variable#ffe0b2—
punctuation#ffcc80—
meta.brace#ffcc80—
meta.delimiter#ffcc80—
punctuation.definition.variable#ffe0b2—
punctuation.definition.string#c3e88d—
punctuation.definition.parameters#ffcc80—
punctuation.terminator#ffcc80—
punctuation.separator#ffcc80—
meta.function-call#ffab00—
meta.object-literal.key#ffe0b2—
source.json meta.structure.dictionary.key#ff6e40—
source.css entity.name.tag#ff6e40—
source.css entity.other.attribute-name.class#c3e88d—
source.css entity.other.attribute-name.id#ffab00—
source.css constant.numeric#ff9100—
source.css keyword.other.unit#ff9100—
text.html.basic entity.other.attribute-name#ffab00italic
meta.tag.custom#ffab00—
markup.heading#ff3d00bold
markup.bold#ff3d00bold
markup.italic#ff3d00italic
markup.underline#ffcc80underline
markup.quote#5d4037italic
markup.raw#c3e88d—
markup.inline.raw#ff9100—
variable.annotation#ffcc80—
meta.decorator#ff5252—
variable.other.constant#ff9100—
variable.other.enummember#ff9100—
meta.object.member#ffe0b2—
variable.other.property#ffe0b2—
source.python variable.parameter.function.language.special.self#ff3d00italic
source.python constant.language#ff6e40—
source.go storage.type#ff3d00—
source.go entity.name.function#ffab00—
source.java storage.modifier#ff3d00—
source.java entity.name.type.class#ff6e40—
source.ts entity.name.type.interface#ff6e40—
source.js variable.other.object#ff6e40—
source.js variable.other.readwrite.alias#ff6e40—
source.shell variable.other#ffe0b2—
source.shell keyword.operator#ffcc80—
punctuation.definition.tag.html#ffcc80—
punctuation.definition.tag.begin.html#ffcc80—
punctuation.definition.tag.end.html#ffcc80—
string.regexp#ffcc80—
constant.character.escape.regexp#ffcc80—
variable.group.regexp#c3e88d—
constant.other.character-class.range.regexp#ff9100—
keyword.operator.quantifier.regexp#ffcc80—
support.type.property-name.json#ff6e40—
meta.structure.dictionary.value.json string.quoted.double.json#c3e88d—
source.yaml entity.name.tag#ff6e40—
text.xml entity.name.tag#ff5252—
text.xml entity.other.attribute-name#ffab00—
Kai Zen Theme by MJ Studio - VS Code Theme