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#16202B
  • activityBar.border#26384B
  • activityBar.foreground#DDE7F2
  • activityBar.inactiveForeground#8198AD
  • button.background#5EA8F8
  • button.foreground#111820
  • button.hoverBackground#74B5FA
  • descriptionForeground#A8BCD0
  • dropdown.background#16202B
  • dropdown.border#26384B
  • dropdown.foreground#DDE7F2
  • editor.background#111820
  • editor.foreground#DDE7F2
  • editor.inactiveSelectionBackground#1D2A3866
  • editor.lineHighlightBackground#182432
  • editor.selectionBackground#1D2A38
  • editor.selectionHighlightBackground#1D2A3899
  • editor.wordHighlightBackground#1D2A3888
  • editor.wordHighlightStrongBackground#2D455B88
  • editorBracketMatch.background#1D2A3866
  • editorBracketMatch.border#5EA8F8
  • editorCursor.foreground#5EA8F8
  • editorError.foreground#D76A7A
  • editorGutter.addedBackground#5BC2B8
  • editorGutter.background#111820
  • editorGutter.deletedBackground#D76A7A
  • editorGutter.modifiedBackground#5EA8F8
  • editorHint.foreground#5BC2B8
  • editorIndentGuide.activeBackground1#2D455B
  • editorIndentGuide.background1#1D2A38
  • editorInfo.foreground#5EA8F8
  • editorLineNumber.activeForeground#A8BCD0
  • editorLineNumber.foreground#647A90
  • editorWarning.foreground#47B8C9
  • editorWhitespace.foreground#26384B
  • errorForeground#D76A7A
  • focusBorder#2D455B
  • foreground#DDE7F2
  • icon.foreground#A8BCD0
  • input.background#16202B
  • input.border#26384B
  • input.foreground#DDE7F2
  • input.placeholderForeground#8198AD
  • list.activeSelectionBackground#1D2A38
  • list.hoverBackground#182432
  • list.inactiveSelectionBackground#1D2A3866
  • panel.background#111820
  • panel.border#26384B
  • panelTitle.activeForeground#DDE7F2
  • panelTitle.inactiveForeground#8198AD
  • sideBar.background#16202B
  • sideBar.border#26384B
  • sideBar.foreground#A8BCD0
  • sideBarSectionHeader.background#16202B
  • sideBarSectionHeader.foreground#DDE7F2
  • statusBar.background#16202B
  • statusBar.debuggingBackground#5EA8F8
  • statusBar.debuggingForeground#111820
  • statusBar.foreground#A8BCD0
  • statusBar.noFolderBackground#16202B
  • statusBarItem.hoverBackground#1D2A38
  • tab.activeBackground#111820
  • tab.activeBorderTop#5EA8F8
  • tab.activeForeground#DDE7F2
  • tab.border#26384B
  • tab.inactiveBackground#16202B
  • tab.inactiveForeground#8198AD
  • terminal.ansiBlack#16202B
  • terminal.ansiBlue#5EA8F8
  • terminal.ansiBrightBlack#647A90
  • terminal.ansiBrightBlue#5EA8F8
  • terminal.ansiBrightCyan#5BC2B8
  • terminal.ansiBrightGreen#5BC2B8
  • terminal.ansiBrightMagenta#A790E0
  • terminal.ansiBrightRed#D76A7A
  • terminal.ansiBrightWhite#DDE7F2
  • terminal.ansiBrightYellow#47B8C9
  • terminal.ansiCyan#5BC2B8
  • terminal.ansiGreen#79C396
  • terminal.ansiMagenta#A790E0
  • terminal.ansiRed#D76A7A
  • terminal.ansiWhite#A8BCD0
  • terminal.ansiYellow#47B8C9
  • terminal.background#111820
  • terminal.foreground#DDE7F2
  • titleBar.activeBackground#16202B
  • titleBar.activeForeground#DDE7F2
  • titleBar.border#26384B
  • titleBar.inactiveBackground#16202B
  • titleBar.inactiveForeground#8198AD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#647A90
keyword, storage, storage.modifier#5EA8F8
keyword.operator, punctuation, meta.brace, meta.delimiter#A8BCD0
string, string.quoted, string.template#79C396
constant.numeric, constant.language, constant.character, constant.other#A790E0
invalid, invalid.illegal, invalid.deprecated#D76A7A
entity.name.function, support.function, meta.function-call, variable.function#5BC2B8
entity.name.type, entity.name.class, support.type, support.class, storage.type#47B8C9
variable, meta.definition.variable.name, support.variable, variable.other.readwrite#DDE7F2
variable.parameter, meta.function.parameters#A8BCD0
variable.language.this, variable.language.self#47B8C9
markup.heading, markup.heading entity.name#5EA8F8bold
markup.bold, markup.italic, markup.underline, markup.strikethrough#A8BCD0
markup.link, markup.underline.link, markup.inline.raw#5BC2B8
markup.fenced_code#DDE7F2
markup.inserted, punctuation.definition.inserted#5BC2B8
markup.deleted, punctuation.definition.deleted#D76A7A
markup.changed#47B8C9
meta.diff.header#A8BCD0
entity.name.tag, punctuation.definition.tag#5EA8F8
entity.other.attribute-name#A8BCD0
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector#47B8C9
support.type.property-name.css, support.type.property-name, variable.css, variable.scss, variable.other.less#DDE7F2
variable.css, variable.argument.css#5EA8F8
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double, meta.object-literal.key, meta.object-literal.key entity.name.function#5EA8F8
meta.structure.dictionary.value.json string.quoted.double#79C396
constant.numeric.json, constant.language.json#A790E0
punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json#A8BCD0
entity.name.tag.yaml#5EA8F8
string.quoted.single.yaml, string.quoted.double.yaml, string.unquoted.plain.out.yaml#79C396
constant.language.boolean.yaml, constant.language.null.yaml#A790E0
constant.numeric.yaml#A790E0
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#A790E0
punctuation.definition.block.sequence.item.yaml#A8BCD0
punctuation.definition.document.begin.yaml, punctuation.definition.document.end.yaml#647A90
markup.heading.atx.1.markdown, heading.1.markdown#5EA8F8bold
markup.heading.atx.2.markdown, heading.2.markdown#5BC2B8bold
markup.heading.atx.3.markdown, markup.heading.atx.4.markdown, markup.heading.atx.5.markdown, markup.heading.atx.6.markdown#A8BCD0bold
markup.bold.markdown#DDE7F2bold
markup.italic.markdown#A8BCD0italic
markup.inline.raw.string.markdown, code.markdown#5BC2B8
markup.fenced_code.block.markdown#DDE7F2
fenced_code.block.language.markdown#47B8C9
markup.quote.markdown#647A90
punctuation.definition.list.begin.markdown#5EA8F8
meta.link.inline.markdown, string.other.link.title.markdown#5BC2B8
markup.underline.link.markdown, markup.underline.link.image.markdown#5EA8F8
string.other.link.description.markdown#A8BCD0
meta.separator.markdown#26384B
meta.type.annotation, meta.return-type#47B8C9
support.type.primitive, support.type.builtin#47B8C9
entity.name.type.module, entity.name.namespace, entity.name.type.interface#47B8C9
variable.other.constant#A790E0
variable.other.object.property, meta.property.object#5EA8F8
meta.decorator, punctuation.decorator#A790E0
keyword.control.import, keyword.control.export, keyword.control.from#5EA8F8
storage.type.function.arrow#5EA8F8
punctuation.accessor, punctuation.separator.key-value#A8BCD0
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#5EA8F8
variable.language.special.self.python, variable.parameter.function.language.special.cls.python#47B8C9
support.function.magic.python, entity.name.function.magic.python#5BC2B8
entity.name.function.decorator.python, meta.function.decorator.python#A790E0
keyword.operator.logical.python#5EA8F8
support.type.python#47B8C9
variable.other.constant.python#A790E0
punctuation.definition.interpolation.begin.python, punctuation.definition.interpolation.end.python#5EA8F8
entity.name.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust#A790E0
meta.macro.rust, support.macro.rust, entity.name.function.macro.rust#5BC2B8
meta.attribute.rust, punctuation.definition.attribute.rust#A790E0
entity.name.type.alias.rust, entity.name.type.trait.rust#47B8C9
storage.modifier.unsafe.rust, keyword.other.unsafe.rust#D76A7A
meta.path.rust#DDE7F2
support.function.builtin.go#5BC2B8
entity.name.package.go#47B8C9
entity.name.type.go#47B8C9
keyword.channel.go, keyword.const.go, keyword.var.go, keyword.type.go#5EA8F8
constant.other.placeholder.go#A790E0
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#47B8C9
entity.name.type.attribute.cs, meta.attribute.cs#A790E0
comment.block.documentation.cs, comment.xml.doc.cs#647A90
meta.preprocessor.cs, keyword.preprocessor.cs#A790E0
constant.language.null.cs#A790E0
punctuation.definition.interpolation.begin.cs, punctuation.definition.interpolation.end.cs#5EA8F8
keyword.query.cs#5EA8F8
string.regexp, constant.regexp, keyword.control.anchor.regexp#A790E0
BeaDark by ballombert - VS Code Theme