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#1B1E2A
  • activityBarBadge.background#5C6BC0
  • activityBarBadge.foreground#c0d5ff
  • diffEditor.insertedTextBackground#4CAF50
  • dropdown.background#1B1E2A
  • editor.background#202336
  • editor.foreground#B3BAC1
  • editor.lineHighlightBackground#7280861a
  • editor.selectionBackground#5C6BC056
  • editor.wordHighlightBackground#2a4a88cb
  • editorCursor.foreground#a2c1fd
  • editorGroup.border#53687C
  • editorGroupHeader.tabsBackground#2a2f44
  • editorGutter.addedBackground#73DF8E
  • editorGutter.modifiedBackground#E7DA5F
  • editorIndentGuide.background1#B3BAC11A
  • editorLineNumber.activeForeground#c0d5ff
  • editorLineNumber.foreground#4d5d81
  • editorSuggestWidget.background#1B1E2A
  • editorWhitespace.foreground#4d5d81
  • editorWidget.background#1B1E2A
  • foreground#B3BAC1
  • gitDecoration.ignoredResourceForeground#53687C
  • gitDecoration.modifiedResourceForeground#E7DA5F
  • gitDecoration.untrackedResourceForeground#73DF8E
  • input.background#1B1E2A
  • input.border#232C3E
  • input.foreground#B3BAC1
  • input.placeholderForeground#53687C
  • list.activeSelectionBackground#5C6BC0
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#53687C
  • list.hoverBackground#1B1E2A
  • list.inactiveSelectionBackground#394150
  • list.inactiveSelectionForeground#D8DEE9
  • panel.background#282C3E
  • panel.border#232634
  • pickerGroup.foreground#FFEB3B
  • scrollbar.shadow#11141A
  • scrollbarSlider.activeBackground#ffffff22
  • scrollbarSlider.background#ffffff11
  • scrollbarSlider.hoverBackground#ffffff22
  • sideBar.background#282C3E
  • sideBarSectionHeader.background#1B1E2A
  • sideBarTitle.foreground#83acff
  • statusBar.background#2C3048
  • statusBar.border#232634
  • statusBar.foreground#B3BAC1
  • statusBar.noFolderBackground#2C3048
  • tab.activeBackground#2C3048
  • tab.activeBorder#7b8efa
  • tab.activeForeground#99a7f8
  • tab.border#232633
  • tab.inactiveBackground#262a3f
  • tab.inactiveForeground#c0d5ff
  • tab.unfocusedInactiveForeground#B3BAC1
  • terminal.background#14182c
  • terminal.foreground#a9b6fd
  • titleBar.activeBackground#14182c
  • titleBar.activeForeground#c0d5ff
  • titleBar.inactiveBackground#14182c
  • titleBar.inactiveForeground#c0d5ff
  • widget.shadow#11141AB3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#97a7c8ff
comment#80778B
string#E7DA5F
entity.name.function.js, entity.name.function.method.js, entity.name.accessor.js, entity.name.class.js#73DF8E
support.class.builtin.js, entity.name.type.class.js#FF659C
variable.parameter.js, constant.other.object.key.js, variable.other.readwrite.js, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js, meta.object-literal.key.js, meta.array.literal.js, meta.brace.round.js, punctuation.definition.block.js, meta.objectliteral.js#26BDFF
constant.language.boolean.false.js, constant.language.boolean.true.js#7A7FFD
support.variable.dom.js#73DF8E
support.type.property-name.css#26BDFF
entity.other.attribute-name.id.css#E7DA5F
constant.other.color.rgb-value.hex.css#7A7FFD
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#7A7FFD
support.function#E7DA5F
support.constant#FF659C
support.type, support.class#26BDFF
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#E7DA5F
none#faf8f7
variable, meta.selector.css#73DF8E
entity.name.function, meta.require, support.function.any-method#26BDFF
support.class, entity.name.class, entity.name.type.class#FF659C
keyword.other.special-method#26BDFF
storage#FF659C
constant.numeric, none#7A7FFD
constant#E7DA5F
invalid.deprecated#faf8f7
meta.diff, meta.diff.header#655c2d
markup.deleted#FF659C
markup.inserted#73DF8E
markup.changed#E7DA5F
entity.name.filename.find-in-files#E7DA5F
token.info-token#26BDFF
token.warn-token#E7DA5F
token.error-token#FF659C
token.debug-token#7A7FFD
entity.name.section.markdown#FF659C
punctuation.definition.heading.markdown#73DF8E
punctuation.definition.list.begin.markdown#7A7FFD
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.underline.markdown#faf8f7
markup.inline.raw.markdown#73DF8E
markup.inline.raw.string.markdown#5BFC83
punctuation.definition.raw.markdown#E7DA5F
punctuation.definition.metadata.markdown#E7DA5F
markup.underline.link.markdown, markup.underline.link.image.markdown#7A7FFD
string.other.link.title.markdown, string.other.link.description.markdown#E7DA5F
markup.quote.markdown#E7DA5F
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#E7DA5F
beginning.punctuation.definition.list.markdown#7A7FFD
markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#FF659C
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#73DF8E
source.yaml string#E7DA5F
source.yaml entity.name.tag#26BDFF
source.yaml keyword.other.anchor#FF659C
source.yaml keyword.other.alias#E7DA5F
source.yaml constant.numeric#7A7FFD
source.yaml keyword.other.true-or-false#7A7FFD
source.yaml constant.language.null#80778B
text.xml entity#26BDFF
text.xml string#E7DA5F
text.xml punctuation#E7DA5F
text.xml text#E7DA5F
text.xml meta.tag.preprocessor.xml#73DF8E
text.xml entity.other.attribute-name.xml#FF659C
source.groovy keyword#FF659C
source.groovy string#E7DA5F
source.groovy variable.other#26BDFF
source.scala keyword#FF659C
source.scala string#E7DA5F
source.scala variable.other#26BDFF
source.rust keyword#FF659C
source.rust string#E7DA5F
source.rust entity.name.function#26BDFF
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#faf8f7
entity.other.attribute-name, entity.other.attribute-name.class.css, string.quoted.double.json#73DF8E
meta.tag.other, entity.name.tag.style, entity.name.tag.script, meta.tag.block.script, source.js.embedded punctuation.definition.tag.html, source.css.embedded punctuation.definition.tag.html#FF659C
support.type.property-name.css#26BDFF
entity.other.attribute-name.id.css#E7DA5F
constant.other.color.rgb-value.hex.css#7A7FFD
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#7A7FFD
keyword#FF659C
variable, meta.selector.css#faf8f7
entity.name.function, meta.require, support.function.any-method#faf8f7
support.class, entity.name.class, entity.name.type.class#faf8f7
keyword.other.special-method#faf8f7
storage#FF659C
keyword.other.php#FF659C
variable.other.php#faf8f7
support.function.php#faf8f7
support.class.php#faf8f7
support.class.php#faf8f7
entity.name.tag#FF659C
punctuation.separator.key-value.html, punctuation.separator.key-value.js#FF659C