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#ffffff
  • activityBar.border#e1e4e8
  • activityBar.foreground#3e3f3f
  • activityBar.inactiveForeground#b9bec5
  • activityBarBadge.background#54a3ff
  • activityBarBadge.foreground#ffffff
  • breadcrumb.background#ffffff
  • breadcrumb.foreground#586069
  • button.background#008ac6
  • button.foreground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#0077aa44
  • editor.findMatchHighlightBackground#ee990055
  • editor.foreground#000000
  • editor.lineHighlightBackground#fffbdd
  • editor.selectionBackground#b3d4fc
  • editor.selectionHighlightBackground#b3d4fc88
  • editor.wordHighlightBackground#66990022
  • editor.wordHighlightStrongBackground#66990033
  • editorBracketMatch.background#f1f8ff
  • editorBracketMatch.border#c8e1ff
  • editorCursor.foreground#0077aa
  • editorError.foreground#d93556
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#e1e4e8
  • editorIndentGuide.activeBackground1#009bdd
  • editorIndentGuide.background1#eeeeee
  • editorInfo.foreground#0077aa
  • editorLineNumber.activeForeground#24292e
  • editorLineNumber.foreground#cccccc
  • editorWarning.foreground#ee9900
  • editorWhitespace.foreground#cccccc99
  • focusBorder#fafbfc
  • list.activeSelectionBackground#b3d4fc99
  • list.activeSelectionForeground#24292e
  • list.hoverBackground#f1f2f3
  • list.inactiveSelectionBackground#b3d4fc66
  • panel.background#ffffff
  • panel.border#e1e4e8
  • panelTitle.activeBorder#e36209
  • progressBar.background#0077aa
  • scrollbar.shadow#00000000
  • selection.background#b3d4fc99
  • sideBar.background#ffffff
  • sideBar.border#e1e4e8
  • sideBar.foreground#586069
  • sideBarSectionHeader.background#f1f2f3
  • sideBarSectionHeader.foreground#24292e
  • sideBarTitle.foreground#24292e
  • statusBar.background#fafbfc
  • statusBar.border#e1e4e8
  • statusBar.debuggingBackground#fafbfc
  • statusBar.debuggingForeground#24292e
  • statusBar.foreground#24292e
  • statusBar.noFolderBackground#fafbfc
  • statusBar.noFolderForeground#24292e
  • statusBarItem.errorBackground#d93556
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.warningBackground#ee9900
  • statusBarItem.warningForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#e36209
  • tab.activeForeground#24292e
  • tab.border#f1f1f1
  • tab.hoverBackground#f5f4f4
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#586069
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#008ac6
  • terminal.ansiBrightBlack#5a6773
  • terminal.ansiBrightBlue#00aef9
  • terminal.ansiBrightCyan#00b5cc
  • terminal.ansiBrightGreen#88cc00
  • terminal.ansiBrightMagenta#db007b
  • terminal.ansiBrightRed#e65b77
  • terminal.ansiBrightWhite#5a6773
  • terminal.ansiBrightYellow#ffb022
  • terminal.ansiCyan#008899
  • terminal.ansiGreen#669900
  • terminal.ansiMagenta#a8005e
  • terminal.ansiRed#d93556
  • terminal.ansiWhite#b8c0c7
  • terminal.ansiYellow#ee9900
  • terminal.background#ffffff
  • terminal.foreground#000000
  • terminal.selectionBackground#cbe2fa
  • terminalCursor.background#000000
  • terminalCursor.foreground#000000
  • textCodeBlock.background#f5f2f1
  • textLink.foreground#0077aa
  • textPreformat.background#f5f2f1
  • textPreformat.foreground#cb6861
  • titleBar.activeBackground#fafbfc
  • titleBar.activeForeground#24292e
  • titleBar.border#e1e4e8
  • titleBar.inactiveBackground#fafbfc
  • titleBar.inactiveForeground#586069

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#000000
comment, punctuation.definition.comment#708090
comment.block.preprocessor#708090
meta.brace.square, meta.brace.round, punctuation.separator.parameter#999999
variable.parameter, meta.function.parameter variable#990055
meta.embedded, source.groovy.embedded, meta.template.expression#000000
invalid.deprecated#d9355680
invalid, invalid.illegal#dd4a68
keyword.operator, constant.language.import-export-all#9a6e3a
keyword, storage#0077aa
storage.type, support.type, keyword.operator.expression, keyword.operator.new#0077aa
cast.expr.ts meta.brace.angle.ts, keyword.operator.definiteassignment#ee9900
constant.language, support.constant, variable.language#0077aa
support.variable.property.dom, support.variable.dom, support.variable.property, variable#000000
meta.template.expression punctuation.definition.template-expression, expression.embedded punctuation.definition.generic, punctuation.section.embedded, variable.interpolation, string.interpolated.pug, meta.interpolation.stylus meta.brace.curly#ee9900bold
entity.name.function, support.function, new.expr entity.name.type#dd4a68
support.class#dd4a68bold
entity.other.inherited-class#669900
support.class#669900
support.class.component#dd4a68
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type#708090
entity.name.typebold
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded#ee9900
entity.other.attribute-name.html, entity.other.attribute-name.id.html, entity.other.attribute-name.tsx#0077aa
entity.name.exception#d93556
constant.numeric, constant.character, constant, constant.language.boolean, constant.language.nan, constant.language.infinity, constant.language.undefined, constant.language.null, source.editorconfig constant.language#990055bold
entity.other.inherited-classbold
string, punctuation.definition.string#669900
constant.character.escape#ee9900
string.regexp, string.regexp punctuation.definition.string#ee9900
constant.other.symbol#9a6e3a
punctuation#999999
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag, meta.tag.metadata.doctype entity.other.attribute-name.html, meta.tag.sgml.doctype#708090bb
entity.name.tag#990055
meta.tag string#0077aa
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#0077aa
constant.character.entity, punctuation.definition.entity#9a6e3a
meta.property-name, support.type.property-name#990055
keyword.control.at-rule.import#0077aa
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity#669900
entity.name.tag.css#ee9900
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#9a6e3a
entity.other.attribute-name.id.html#669900
constant.numeric.css#000000
entity.other.attribute-name punctuation.definition.entity#999999
constant.numeric keyword.other.unit#708090
variable.parameter.url#9a6e3a
constant.other.color#0077aa
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#0077aa
meta.property-value, meta.property-value constant.other, support.constant.property-value#669900
keyword.other.important#dd4a68bold
variable.scss#ee9900
entity.name.tag.reference.scss#9a6e3a
markup.changed#ee9900
markup.deleted#dd4a68
markup.error#d93556
markup.inserted#669900
meta.link#0077aa
markup.output, markup.raw#999999
markup.prompt#999999
markup.heading#dd4a68
markup.traceback#d93556
markup.underlineunderline
markup.quote#990055
meta.diff.range, meta.diff.index, meta.separator#0077aa
meta.diff.header.from-file#990055
meta.diff.header.to-file#669900
entity.name.section.group-title.ini#ee9900bold
punctuation.definition.entity.ini#999999
keyword.other.definition.ini#990055
source.ini#0077aa
entity.name.section.markdown, markup.heading.setext#ee9900bold
punctuation.definition.list#dd4a68
markup.inline.raw#cb6861
meta.link punctuation.definition.string, meta.image punctuation.definition.string#999999
markup.boldbold
markup.italicitalic
markup.underline.link.image.markdown#990055dd
markup.heading.setext#708090
constant.numeric.json#0077aa
string.interpolated.pug variable#000000
support.variable#ee9900
meta.tag string, source.vue string.quoted#669900
meta.directive.vue entity.other.attribute-name.html#ee9900
meta.function-call.generic.python, meta.function-call support.type#dd4a68
punctuation.definition.list.end.python, punctuation.definition.list.begin.python#999999
support.type.exception, entity.name.exception#dd4a68bold
log.info#0077aa
log.warning#ee9900
log.error#dd4a68
log.debug#9a6e3a
log.constant#990055
comment.block.documentation variable.other.jsdoc#000000
punctuation.definition.directive#990055
string.quoted.other.lt-gt.include punctuation.definition.string#999999
punctuation.separator.namespace#9a6e3a
meta.import.java storage.modifier#990055
keyword.operator.instanceof.java#0077aa
punctuation.definition.variable.begin.batchfile, punctuation.definition.variable.end.batchfile#dd4a68
keyword.type#708090
entity.name.type.namespace#ee9900
markup.inline.raw, markup.raw.inline#cb6861