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#1B211E
  • activityBar.border#2E3D37
  • activityBar.foreground#DFE8E2
  • activityBar.inactiveForeground#879A91
  • button.background#6CA4E8
  • button.foreground#151A18
  • button.hoverBackground#82B2EE
  • descriptionForeground#B0BFB7
  • dropdown.background#1B211E
  • dropdown.border#2E3D37
  • dropdown.foreground#DFE8E2
  • editor.background#151A18
  • editor.foreground#DFE8E2
  • editor.inactiveSelectionBackground#24302B66
  • editor.lineHighlightBackground#1E2824
  • editor.selectionBackground#24302B
  • editor.selectionHighlightBackground#24302B99
  • editor.wordHighlightBackground#24302B88
  • editor.wordHighlightStrongBackground#34504B88
  • editorBracketMatch.background#24302B66
  • editorBracketMatch.border#6CA4E8
  • editorCursor.foreground#6CA4E8
  • editorError.foreground#DB6D7A
  • editorGutter.addedBackground#66C7AB
  • editorGutter.background#151A18
  • editorGutter.deletedBackground#DB6D7A
  • editorGutter.modifiedBackground#6CA4E8
  • editorHint.foreground#66C7AB
  • editorIndentGuide.activeBackground1#34504B
  • editorIndentGuide.background1#24302B
  • editorInfo.foreground#6CA4E8
  • editorLineNumber.activeForeground#B0BFB7
  • editorLineNumber.foreground#6E8379
  • editorWarning.foreground#55BFA8
  • editorWhitespace.foreground#2E3D37
  • errorForeground#DB6D7A
  • focusBorder#34504B
  • foreground#DFE8E2
  • icon.foreground#B0BFB7
  • input.background#1B211E
  • input.border#2E3D37
  • input.foreground#DFE8E2
  • input.placeholderForeground#879A91
  • list.activeSelectionBackground#24302B
  • list.hoverBackground#1E2824
  • list.inactiveSelectionBackground#24302B66
  • panel.background#151A18
  • panel.border#2E3D37
  • panelTitle.activeForeground#DFE8E2
  • panelTitle.inactiveForeground#879A91
  • sideBar.background#1B211E
  • sideBar.border#2E3D37
  • sideBar.foreground#B0BFB7
  • sideBarSectionHeader.background#1B211E
  • sideBarSectionHeader.foreground#DFE8E2
  • statusBar.background#1B211E
  • statusBar.debuggingBackground#6CA4E8
  • statusBar.debuggingForeground#151A18
  • statusBar.foreground#B0BFB7
  • statusBar.noFolderBackground#1B211E
  • statusBarItem.hoverBackground#24302B
  • tab.activeBackground#151A18
  • tab.activeBorderTop#6CA4E8
  • tab.activeForeground#DFE8E2
  • tab.border#2E3D37
  • tab.inactiveBackground#1B211E
  • tab.inactiveForeground#879A91
  • terminal.ansiBlack#1B211E
  • terminal.ansiBlue#6CA4E8
  • terminal.ansiBrightBlack#6E8379
  • terminal.ansiBrightBlue#6CA4E8
  • terminal.ansiBrightCyan#66C7AB
  • terminal.ansiBrightGreen#66C7AB
  • terminal.ansiBrightMagenta#B395DE
  • terminal.ansiBrightRed#DB6D7A
  • terminal.ansiBrightWhite#DFE8E2
  • terminal.ansiBrightYellow#55BFA8
  • terminal.ansiCyan#66C7AB
  • terminal.ansiGreen#8BC27E
  • terminal.ansiMagenta#B395DE
  • terminal.ansiRed#DB6D7A
  • terminal.ansiWhite#B0BFB7
  • terminal.ansiYellow#55BFA8
  • terminal.background#151A18
  • terminal.foreground#DFE8E2
  • titleBar.activeBackground#1B211E
  • titleBar.activeForeground#DFE8E2
  • titleBar.border#2E3D37
  • titleBar.inactiveBackground#1B211E
  • titleBar.inactiveForeground#879A91

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6E8379
keyword, storage, storage.modifier#6CA4E8
keyword.operator, punctuation, meta.brace, meta.delimiter#B0BFB7
string, string.quoted, string.template#8BC27E
constant.numeric, constant.language, constant.character, constant.other#B395DE
invalid, invalid.illegal, invalid.deprecated#DB6D7A
entity.name.function, support.function, meta.function-call, variable.function#66C7AB
entity.name.type, entity.name.class, support.type, support.class, storage.type#55BFA8
variable, meta.definition.variable.name, support.variable, variable.other.readwrite#DFE8E2
variable.parameter, meta.function.parameters#B0BFB7
variable.language.this, variable.language.self#55BFA8
markup.heading, markup.heading entity.name#6CA4E8bold
markup.bold, markup.italic, markup.underline, markup.strikethrough#B0BFB7
markup.link, markup.underline.link, markup.inline.raw#66C7AB
markup.fenced_code#DFE8E2
markup.inserted, punctuation.definition.inserted#66C7AB
markup.deleted, punctuation.definition.deleted#DB6D7A
markup.changed#55BFA8
meta.diff.header#B0BFB7
entity.name.tag, punctuation.definition.tag#6CA4E8
entity.other.attribute-name#B0BFB7
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector#55BFA8
support.type.property-name.css, support.type.property-name, variable.css, variable.scss, variable.other.less#DFE8E2
variable.css, variable.argument.css#6CA4E8
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double, meta.object-literal.key, meta.object-literal.key entity.name.function#6CA4E8
meta.structure.dictionary.value.json string.quoted.double#8BC27E
constant.numeric.json, constant.language.json#B395DE
punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json#B0BFB7
entity.name.tag.yaml#6CA4E8
string.quoted.single.yaml, string.quoted.double.yaml, string.unquoted.plain.out.yaml#8BC27E
constant.language.boolean.yaml, constant.language.null.yaml#B395DE
constant.numeric.yaml#B395DE
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#B395DE
punctuation.definition.block.sequence.item.yaml#B0BFB7
punctuation.definition.document.begin.yaml, punctuation.definition.document.end.yaml#6E8379
markup.heading.atx.1.markdown, heading.1.markdown#6CA4E8bold
markup.heading.atx.2.markdown, heading.2.markdown#66C7ABbold
markup.heading.atx.3.markdown, markup.heading.atx.4.markdown, markup.heading.atx.5.markdown, markup.heading.atx.6.markdown#B0BFB7bold
markup.bold.markdown#DFE8E2bold
markup.italic.markdown#B0BFB7italic
markup.inline.raw.string.markdown, code.markdown#66C7AB
markup.fenced_code.block.markdown#DFE8E2
fenced_code.block.language.markdown#55BFA8
markup.quote.markdown#6E8379
punctuation.definition.list.begin.markdown#6CA4E8
meta.link.inline.markdown, string.other.link.title.markdown#66C7AB
markup.underline.link.markdown, markup.underline.link.image.markdown#6CA4E8
string.other.link.description.markdown#B0BFB7
meta.separator.markdown#2E3D37
meta.type.annotation, meta.return-type#55BFA8
support.type.primitive, support.type.builtin#55BFA8
entity.name.type.module, entity.name.namespace, entity.name.type.interface#55BFA8
variable.other.constant#B395DE
variable.other.object.property, meta.property.object#6CA4E8
meta.decorator, punctuation.decorator#B395DE
keyword.control.import, keyword.control.export, keyword.control.from#6CA4E8
storage.type.function.arrow#6CA4E8
punctuation.accessor, punctuation.separator.key-value#B0BFB7
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#6CA4E8
variable.language.special.self.python, variable.parameter.function.language.special.cls.python#55BFA8
support.function.magic.python, entity.name.function.magic.python#66C7AB
entity.name.function.decorator.python, meta.function.decorator.python#B395DE
keyword.operator.logical.python#6CA4E8
support.type.python#55BFA8
variable.other.constant.python#B395DE
punctuation.definition.interpolation.begin.python, punctuation.definition.interpolation.end.python#6CA4E8
entity.name.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust#B395DE
meta.macro.rust, support.macro.rust, entity.name.function.macro.rust#66C7AB
meta.attribute.rust, punctuation.definition.attribute.rust#B395DE
entity.name.type.alias.rust, entity.name.type.trait.rust#55BFA8
storage.modifier.unsafe.rust, keyword.other.unsafe.rust#DB6D7A
meta.path.rust#DFE8E2
support.function.builtin.go#66C7AB
entity.name.package.go#55BFA8
entity.name.type.go#55BFA8
keyword.channel.go, keyword.const.go, keyword.var.go, keyword.type.go#6CA4E8
constant.other.placeholder.go#B395DE
entity.name.type.class.cs, entity.name.type.struct.cs, entity.name.type.enum.cs, entity.name.type.interface.cs, entity.name.type.delegate.cs, source.cs storage.type#55BFA8
entity.name.type.attribute.cs, meta.attribute.cs#B395DE
comment.block.documentation.cs, comment.xml.doc.cs#6E8379
meta.preprocessor.cs, keyword.preprocessor.cs#B395DE
constant.language.null.cs#B395DE
punctuation.definition.interpolation.begin.cs, punctuation.definition.interpolation.end.cs#6CA4E8
keyword.query.cs#6CA4E8
string.regexp, constant.regexp, keyword.control.anchor.regexp#B395DE