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#0f161c
  • activityBar.border#00000000
  • activityBar.foreground#4dd0e1
  • activityBar.inactiveForeground#455a64
  • editor.background#0f161c
  • editor.foreground#e0f7fa
  • editor.lineHighlightBackground#162029
  • editor.selectionBackground#1e2b38
  • editorCursor.foreground#00bcd4
  • editorGroupHeader.tabsBackground#0f161c
  • editorLineNumber.activeForeground#4dd0e1
  • editorLineNumber.foreground#37474f
  • focusBorder#00000000
  • gitDecoration.conflictingResourceForeground#c792ea
  • gitDecoration.deletedResourceForeground#f07178
  • gitDecoration.ignoredResourceForeground#455a64
  • gitDecoration.modifiedResourceForeground#ffcb6b
  • gitDecoration.untrackedResourceForeground#c3e88d
  • list.activeSelectionBackground#00bcd440
  • list.activeSelectionBorder#00000000
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.focusBackground#00bcd440
  • list.hoverBackground#00bcd410
  • list.inactiveSelectionBackground#00000000
  • menu.background#0f161c
  • menu.border#00000000
  • menu.foreground#e0f7fa
  • menu.selectionBackground#00bcd4
  • menu.selectionForeground#0f161c
  • notifications.background#0f161c
  • notifications.border#00bcd4
  • notifications.foreground#e0f7fa
  • panel.background#0f161c
  • panel.border#00000000
  • panelTitle.activeBackground#00bcd440
  • panelTitle.activeBorder#00000000
  • quickInput.background#162029
  • quickInput.list.focusBackground#00bcd4
  • sideBar.background#0f161c
  • sideBar.border#00000000
  • sideBar.foreground#80deea
  • sideBarSectionHeader.background#0f161c
  • statusBar.background#0f161c
  • statusBar.border#00000000
  • statusBar.foreground#80deea
  • tab.activeBackground#0f161c
  • tab.activeBorderBottom#00bcd4
  • tab.activeBorderTop#0f161c
  • tab.activeForeground#4dd0e1
  • tab.border#0f161c00
  • tab.inactiveBackground#0f161c
  • tab.inactiveForeground#546e7a
  • terminal.background#0f161c
  • titleBar.activeBackground#0f161c
  • titleBar.border#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#455a64italic
string, string.quoted, string.template#c3e88d—
constant.numeric#f06292—
constant.language#f06292—
constant.character#f06292—
constant.other#f06292—
variable#b2ebf2—
variable.other.readwrite#b2ebf2—
variable.parameter#e57373italic
variable.language#c792eaitalic
keyword#c792eabold
keyword.control#80cbc4italic
keyword.operator#80cbc4—
keyword.declaration#c792eabold
storage#c792eabold
storage.type#c792eabold
entity.name.class#4dd0e1—
entity.name.type#4dd0e1—
entity.name.function#82aaff—
entity.other.attribute-name#ffcb6bitalic
entity.name.tag#f07178—
support.function#82aaff—
support.constant#f06292—
support.type#4dd0e1—
support.class#4dd0e1—
support.variable#b2ebf2—
punctuation#80deea—
meta.brace#80deea—
meta.delimiter#80deea—
punctuation.definition.variable#b2ebf2—
punctuation.definition.string#c3e88d—
punctuation.definition.parameters#80deea—
punctuation.terminator#80deea—
punctuation.separator#80deea—
meta.function-call#82aaff—
meta.object-literal.key#b2ebf2—
source.json meta.structure.dictionary.key#4dd0e1—
source.css entity.name.tag#4dd0e1—
source.css entity.other.attribute-name.class#c3e88d—
source.css entity.other.attribute-name.id#82aaff—
source.css constant.numeric#f06292—
source.css keyword.other.unit#f06292—
text.html.basic entity.other.attribute-name#ffcb6bitalic
meta.tag.custom#ffcb6b—
markup.heading#4dd0e1bold
markup.bold#4dd0e1bold
markup.italic#4dd0e1italic
markup.underline#80deeaunderline
markup.quote#455a64italic
markup.raw#c3e88d—
markup.inline.raw#f06292—
variable.annotation#ffcb6b—
meta.decorator#ffcb6b—
variable.other.constant#f06292—
variable.other.enummember#f06292—
meta.object.member#b2ebf2—
variable.other.property#b2ebf2—
source.python variable.parameter.function.language.special.self#c792eaitalic
source.python constant.language#4dd0e1—
source.go storage.type#c792ea—
source.go entity.name.function#82aaff—
source.java storage.modifier#c792ea—
source.java entity.name.type.class#4dd0e1—
source.ts entity.name.type.interface#4dd0e1—
source.js variable.other.object#4dd0e1—
source.js variable.other.readwrite.alias#4dd0e1—
source.shell variable.other#b2ebf2—
source.shell keyword.operator#80deea—
punctuation.definition.tag.html#80deea—
punctuation.definition.tag.begin.html#80deea—
punctuation.definition.tag.end.html#80deea—
string.regexp#80deea—
constant.character.escape.regexp#80deea—
variable.group.regexp#c3e88d—
constant.other.character-class.range.regexp#f06292—
keyword.operator.quantifier.regexp#80deea—
support.type.property-name.json#4dd0e1—
meta.structure.dictionary.value.json string.quoted.double.json#c3e88d—
source.yaml entity.name.tag#4dd0e1—
text.xml entity.name.tag#f07178—
text.xml entity.other.attribute-name#ffcb6b—
Kai Zen Theme by MJ Studio - VS Code Theme