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#EDF6F3
  • activityBar.border#C5DDD7
  • activityBar.foreground#1F2C2A
  • activityBar.inactiveForeground#7B9891
  • button.background#2F81B8
  • button.foreground#F6FBF9
  • button.hoverBackground#4A94C3
  • descriptionForeground#3C5650
  • dropdown.background#EDF6F3
  • dropdown.border#C5DDD7
  • dropdown.foreground#1F2C2A
  • editor.background#F6FBF9
  • editor.foreground#1F2C2A
  • editor.inactiveSelectionBackground#D9ECE766
  • editor.lineHighlightBackground#E8F4F1
  • editor.selectionBackground#D9ECE7
  • editor.selectionHighlightBackground#D9ECE799
  • editor.wordHighlightBackground#D9ECE788
  • editor.wordHighlightStrongBackground#9FBEB888
  • editorBracketMatch.background#D9ECE766
  • editorBracketMatch.border#2F81B8
  • editorCursor.foreground#2F81B8
  • editorError.foreground#C9566A
  • editorGutter.addedBackground#2E9E85
  • editorGutter.background#F6FBF9
  • editorGutter.deletedBackground#C9566A
  • editorGutter.modifiedBackground#2F81B8
  • editorHint.foreground#2E9E85
  • editorIndentGuide.activeBackground1#9FBEB8
  • editorIndentGuide.background1#D9ECE7
  • editorInfo.foreground#2F81B8
  • editorLineNumber.activeForeground#3C5650
  • editorLineNumber.foreground#67857E
  • editorWarning.foreground#318FA0
  • editorWhitespace.foreground#C5DDD7
  • errorForeground#C9566A
  • focusBorder#9FBEB8
  • foreground#1F2C2A
  • icon.foreground#3C5650
  • input.background#EDF6F3
  • input.border#C5DDD7
  • input.foreground#1F2C2A
  • input.placeholderForeground#7B9891
  • list.activeSelectionBackground#D9ECE7
  • list.hoverBackground#E8F4F1
  • list.inactiveSelectionBackground#D9ECE766
  • panel.background#F6FBF9
  • panel.border#C5DDD7
  • panelTitle.activeForeground#1F2C2A
  • panelTitle.inactiveForeground#7B9891
  • sideBar.background#EDF6F3
  • sideBar.border#C5DDD7
  • sideBar.foreground#3C5650
  • sideBarSectionHeader.background#EDF6F3
  • sideBarSectionHeader.foreground#1F2C2A
  • statusBar.background#EDF6F3
  • statusBar.debuggingBackground#2F81B8
  • statusBar.debuggingForeground#F6FBF9
  • statusBar.foreground#3C5650
  • statusBar.noFolderBackground#EDF6F3
  • statusBarItem.hoverBackground#D9ECE7
  • tab.activeBackground#F6FBF9
  • tab.activeBorderTop#2F81B8
  • tab.activeForeground#1F2C2A
  • tab.border#C5DDD7
  • tab.inactiveBackground#EDF6F3
  • tab.inactiveForeground#7B9891
  • terminal.ansiBlack#EDF6F3
  • terminal.ansiBlue#2F81B8
  • terminal.ansiBrightBlack#67857E
  • terminal.ansiBrightBlue#2F81B8
  • terminal.ansiBrightCyan#2E9E85
  • terminal.ansiBrightGreen#2E9E85
  • terminal.ansiBrightMagenta#7664B8
  • terminal.ansiBrightRed#C9566A
  • terminal.ansiBrightWhite#1F2C2A
  • terminal.ansiBrightYellow#318FA0
  • terminal.ansiCyan#2E9E85
  • terminal.ansiGreen#3A9466
  • terminal.ansiMagenta#7664B8
  • terminal.ansiRed#C9566A
  • terminal.ansiWhite#3C5650
  • terminal.ansiYellow#318FA0
  • terminal.background#F6FBF9
  • terminal.foreground#1F2C2A
  • titleBar.activeBackground#EDF6F3
  • titleBar.activeForeground#1F2C2A
  • titleBar.border#C5DDD7
  • titleBar.inactiveBackground#EDF6F3
  • titleBar.inactiveForeground#7B9891

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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