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#303341
  • activityBar.border#3A3F53
  • activityBar.foreground#EAF0FF
  • activityBar.inactiveForeground#93A4CF
  • button.background#8BE9FD
  • button.foreground#282A36
  • button.hoverBackground#A4F0FF
  • descriptionForeground#C6D0E8
  • dropdown.background#303341
  • dropdown.border#3A3F53
  • dropdown.foreground#EAF0FF
  • editor.background#282A36
  • editor.foreground#EAF0FF
  • editor.inactiveSelectionBackground#44475A66
  • editor.lineHighlightBackground#343746
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBackground#44475A99
  • editor.wordHighlightBackground#44475A88
  • editor.wordHighlightStrongBackground#6272A488
  • editorBracketMatch.background#44475A66
  • editorBracketMatch.border#8BE9FD
  • editorCursor.foreground#8BE9FD
  • editorError.foreground#FF5555
  • editorGutter.addedBackground#50FA7B
  • editorGutter.background#282A36
  • editorGutter.deletedBackground#FF5555
  • editorGutter.modifiedBackground#8BE9FD
  • editorHint.foreground#50FA7B
  • editorIndentGuide.activeBackground1#6272A4
  • editorIndentGuide.background1#44475A
  • editorInfo.foreground#8BE9FD
  • editorLineNumber.activeForeground#C6D0E8
  • editorLineNumber.foreground#7E8DB8
  • editorWarning.foreground#63D6E7
  • editorWhitespace.foreground#3A3F53
  • errorForeground#FF5555
  • focusBorder#6272A4
  • foreground#EAF0FF
  • icon.foreground#C6D0E8
  • input.background#303341
  • input.border#3A3F53
  • input.foreground#EAF0FF
  • input.placeholderForeground#93A4CF
  • list.activeSelectionBackground#44475A
  • list.hoverBackground#343746
  • list.inactiveSelectionBackground#44475A66
  • panel.background#282A36
  • panel.border#3A3F53
  • panelTitle.activeForeground#EAF0FF
  • panelTitle.inactiveForeground#93A4CF
  • sideBar.background#303341
  • sideBar.border#3A3F53
  • sideBar.foreground#C6D0E8
  • sideBarSectionHeader.background#303341
  • sideBarSectionHeader.foreground#EAF0FF
  • statusBar.background#303341
  • statusBar.debuggingBackground#8BE9FD
  • statusBar.debuggingForeground#282A36
  • statusBar.foreground#C6D0E8
  • statusBar.noFolderBackground#303341
  • statusBarItem.hoverBackground#44475A
  • tab.activeBackground#282A36
  • tab.activeBorderTop#8BE9FD
  • tab.activeForeground#EAF0FF
  • tab.border#3A3F53
  • tab.inactiveBackground#303341
  • tab.inactiveForeground#93A4CF
  • terminal.ansiBlack#303341
  • terminal.ansiBlue#8BE9FD
  • terminal.ansiBrightBlack#7E8DB8
  • terminal.ansiBrightBlue#8BE9FD
  • terminal.ansiBrightCyan#50FA7B
  • terminal.ansiBrightGreen#50FA7B
  • terminal.ansiBrightMagenta#BD93F9
  • terminal.ansiBrightRed#FF5555
  • terminal.ansiBrightWhite#EAF0FF
  • terminal.ansiBrightYellow#63D6E7
  • terminal.ansiCyan#50FA7B
  • terminal.ansiGreen#69D58A
  • terminal.ansiMagenta#BD93F9
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#C6D0E8
  • terminal.ansiYellow#63D6E7
  • terminal.background#282A36
  • terminal.foreground#EAF0FF
  • titleBar.activeBackground#303341
  • titleBar.activeForeground#EAF0FF
  • titleBar.border#3A3F53
  • titleBar.inactiveBackground#303341
  • titleBar.inactiveForeground#93A4CF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7E8DB8
keyword, storage, storage.modifier#8BE9FD
keyword.operator, punctuation, meta.brace, meta.delimiter#C6D0E8
string, string.quoted, string.template#69D58A
constant.numeric, constant.language, constant.character, constant.other#BD93F9
invalid, invalid.illegal, invalid.deprecated#FF5555
entity.name.function, support.function, meta.function-call, variable.function#50FA7B
entity.name.type, entity.name.class, support.type, support.class, storage.type#63D6E7
variable, meta.definition.variable.name, support.variable, variable.other.readwrite#EAF0FF
variable.parameter, meta.function.parameters#C6D0E8
variable.language.this, variable.language.self#63D6E7
markup.heading, markup.heading entity.name#8BE9FDbold
markup.bold, markup.italic, markup.underline, markup.strikethrough#C6D0E8
markup.link, markup.underline.link, markup.inline.raw#50FA7B
markup.fenced_code#EAF0FF
markup.inserted, punctuation.definition.inserted#50FA7B
markup.deleted, punctuation.definition.deleted#FF5555
markup.changed#63D6E7
meta.diff.header#C6D0E8
entity.name.tag, punctuation.definition.tag#8BE9FD
entity.other.attribute-name#C6D0E8
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector#63D6E7
support.type.property-name.css, support.type.property-name, variable.css, variable.scss, variable.other.less#EAF0FF
variable.css, variable.argument.css#8BE9FD
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double, meta.object-literal.key, meta.object-literal.key entity.name.function#8BE9FD
meta.structure.dictionary.value.json string.quoted.double#69D58A
constant.numeric.json, constant.language.json#BD93F9
punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json#C6D0E8
entity.name.tag.yaml#8BE9FD
string.quoted.single.yaml, string.quoted.double.yaml, string.unquoted.plain.out.yaml#69D58A
constant.language.boolean.yaml, constant.language.null.yaml#BD93F9
constant.numeric.yaml#BD93F9
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#BD93F9
punctuation.definition.block.sequence.item.yaml#C6D0E8
punctuation.definition.document.begin.yaml, punctuation.definition.document.end.yaml#7E8DB8
markup.heading.atx.1.markdown, heading.1.markdown#8BE9FDbold
markup.heading.atx.2.markdown, heading.2.markdown#50FA7Bbold
markup.heading.atx.3.markdown, markup.heading.atx.4.markdown, markup.heading.atx.5.markdown, markup.heading.atx.6.markdown#C6D0E8bold
markup.bold.markdown#EAF0FFbold
markup.italic.markdown#C6D0E8italic
markup.inline.raw.string.markdown, code.markdown#50FA7B
markup.fenced_code.block.markdown#EAF0FF
fenced_code.block.language.markdown#63D6E7
markup.quote.markdown#7E8DB8
punctuation.definition.list.begin.markdown#8BE9FD
meta.link.inline.markdown, string.other.link.title.markdown#50FA7B
markup.underline.link.markdown, markup.underline.link.image.markdown#8BE9FD
string.other.link.description.markdown#C6D0E8
meta.separator.markdown#3A3F53
meta.type.annotation, meta.return-type#63D6E7
support.type.primitive, support.type.builtin#63D6E7
entity.name.type.module, entity.name.namespace, entity.name.type.interface#63D6E7
variable.other.constant#BD93F9
variable.other.object.property, meta.property.object#8BE9FD
meta.decorator, punctuation.decorator#BD93F9
keyword.control.import, keyword.control.export, keyword.control.from#8BE9FD
storage.type.function.arrow#8BE9FD
punctuation.accessor, punctuation.separator.key-value#C6D0E8
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#8BE9FD
variable.language.special.self.python, variable.parameter.function.language.special.cls.python#63D6E7
support.function.magic.python, entity.name.function.magic.python#50FA7B
entity.name.function.decorator.python, meta.function.decorator.python#BD93F9
keyword.operator.logical.python#8BE9FD
support.type.python#63D6E7
variable.other.constant.python#BD93F9
punctuation.definition.interpolation.begin.python, punctuation.definition.interpolation.end.python#8BE9FD
entity.name.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust#BD93F9
meta.macro.rust, support.macro.rust, entity.name.function.macro.rust#50FA7B
meta.attribute.rust, punctuation.definition.attribute.rust#BD93F9
entity.name.type.alias.rust, entity.name.type.trait.rust#63D6E7
storage.modifier.unsafe.rust, keyword.other.unsafe.rust#FF5555
meta.path.rust#EAF0FF
support.function.builtin.go#50FA7B
entity.name.package.go#63D6E7
entity.name.type.go#63D6E7
keyword.channel.go, keyword.const.go, keyword.var.go, keyword.type.go#8BE9FD
constant.other.placeholder.go#BD93F9
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#63D6E7
entity.name.type.attribute.cs, meta.attribute.cs#BD93F9
comment.block.documentation.cs, comment.xml.doc.cs#7E8DB8
meta.preprocessor.cs, keyword.preprocessor.cs#BD93F9
constant.language.null.cs#BD93F9
punctuation.definition.interpolation.begin.cs, punctuation.definition.interpolation.end.cs#8BE9FD
keyword.query.cs#8BE9FD
string.regexp, constant.regexp, keyword.control.anchor.regexp#BD93F9