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#ddd
  • activityBar.border#0003
  • activityBar.foreground#232731
  • activityBarBadge.foreground#eee
  • badge.background#aaa
  • contrastBorder#0003
  • editor.background#fff
  • editor.foreground#232731
  • editor.inactiveSelectionBackground#0003
  • editor.lineHighlightBackground#f9f9f9
  • editor.selectionBackground#e5e5e5
  • editor.selectionHighlightBackground#ea13
  • editorError.foreground#ff0000
  • editorGroup.border#0003
  • editorGroupHeader.noTabsBackground#f9f9f9
  • editorGroupHeader.tabsBackground#eee
  • editorGroupHeader.tabsBorder#0003
  • editorGutter.addedBackground#007c23
  • editorGutter.background#fff
  • editorGutter.deletedBackground#800
  • editorGutter.modifiedBackground#005faf
  • editorIndentGuide.activeBackground#0006
  • editorIndentGuide.background#0002
  • editorInfo.foreground#05a
  • editorLightBulb.foreground#cd9731
  • editorLightBulbAutoFix.foreground#cd9731
  • editorLineNumber.activeForeground#000
  • editorLineNumber.foreground#aaa
  • editorSuggestWidget.background#eee
  • editorWarning.foreground#cd9731
  • editorWidget.background#eee
  • editorWidget.border#0003
  • input.placeholderForeground#aaa
  • list.activeSelectionBackground#ddd
  • list.activeSelectionForeground#232731
  • list.focusBackground#ddd
  • list.highlightForeground#005faf
  • list.hoverBackground#0001
  • list.inactiveSelectionBackground#ddd
  • list.inactiveSelectionForeground#232731
  • list.invalidItemForeground#b89500
  • notificationsErrorIcon.foreground#ff0000
  • notificationsInfoIcon.foreground#cd9731
  • notificationsWarningIcon.foreground#05a
  • notificationToast.border#0003
  • panel.background#fff
  • peekViewEditor.background#eee
  • problemsErrorIcon.foreground#ff0000
  • problemsInfoIcon.foreground#05a
  • problemsWarningIcon.foreground#cd9731
  • quickInputList.focusBackground#0002
  • scrollbarSlider.background#0003
  • sideBar.background#eee
  • sideBar.border#0003
  • sideBarTitle.foreground#555
  • statusBar.background#ddd
  • statusBar.border#0003
  • statusBar.debuggingBackground#ea1
  • statusBar.debuggingForeground#642
  • statusBar.foreground#555
  • statusBar.noFolderBackground#f9f9f9
  • symbolIcon.classForeground#708
  • symbolIcon.constructorForeground#05a
  • symbolIcon.enumeratorForeground#05a
  • symbolIcon.enumeratorMemberForeground#05a
  • symbolIcon.fieldForeground#05a
  • symbolIcon.functionForeground#05a
  • symbolIcon.interfaceForeground#708
  • symbolIcon.keywordForeground#232731
  • symbolIcon.methodForeground#05a
  • symbolIcon.moduleForeground#708
  • symbolIcon.namespaceForeground#708
  • symbolIcon.referenceForeground#05a
  • symbolIcon.snippetForeground#232731
  • symbolIcon.unitForeground#232731
  • symbolIcon.variableForeground#05a
  • tab.activeBackground#fff
  • tab.activeForeground#333
  • tab.border#0003
  • tab.inactiveBackground#eee
  • terminal.ansiBlack#3b4252
  • terminal.ansiBlue#81a1c1
  • terminal.ansiBrightBlack#4c566a
  • terminal.ansiBrightBlue#81a1c1
  • terminal.ansiBrightCyan#8fbcbb
  • terminal.ansiBrightGreen#a3be8c
  • terminal.ansiBrightMagenta#b48ead
  • terminal.ansiBrightRed#bf616a
  • terminal.ansiBrightWhite#eceff4
  • terminal.ansiBrightYellow#ebcb8b
  • terminal.ansiCyan#88c0d0
  • terminal.ansiGreen#a3be8c
  • terminal.ansiMagenta#b48ead
  • terminal.ansiRed#bf616a
  • terminal.ansiWhite#e5e9f0
  • terminal.ansiYellow#ebcb8b
  • terminal.background#232731
  • terminal.foreground#d8dee9
  • titleBar.activeBackground#ddd
  • titleBar.activeForeground#333
  • titleBar.border#0003
  • titleBar.inactiveBackground#eee
  • titleBar.inactiveForeground#bbb
  • widget.shadow#0003

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#858585italic
comment.block.preprocessor#858585italic
comment.documentation, comment.block.documentation, string.quoted.docstring#858585italic
invalid#e24747strikethrough
invalid.deprecated#e24747strikethrough
invalid.illegal#e24747strikethrough
keyword.operator, punctuation.separator.pointer-access.c, punctuation.separator.pointer-access.cpp#232731bold
keyword.operator.expression.in, keyword.operator.expression.instanceof, keyword.operator.expression.of, keyword.operator.expression.typeof, keyword.operator.logical.python, keyword.operator.new, keyword, punctuation.separator.colon.python, storage.modifier, storage.type.function, storage.type#232731bold
punctuation.separator.key-value, punctuation.separator.dictionary#232731bold
storage.type.annotation.groovy, storage.type.annotation.java, storage.type.boolean.go, storage.type.byte.go, storage.type.cs, storage.type.generic.cs, storage.type.generic.groovy, storage.type.generic.java, storage.type.groovy, storage.type.java, storage.type.modifier.cs, storage.type.numeric.go, storage.type.object.array.groovy, storage.type.object.array.java, storage.type.parameters.groovy, storage.type.primitive.array.groovy, storage.type.primitive.array.java, storage.type.primitive.groovy, storage.type.primitive.java, storage.type.string.go, storage.type.token.java, storage.type.uintptr.go, storage.type.variable.cs#05a
meta.function.decoratoritalic
constant.language, support.constant, variable.language#085
variable, support.variable#232731
entity.name.function, meta.function-call, punctuation.decorator, support.function#708
entity.name.class, entity.name.type, entity.other.inherited-class, meta.return-type, support.class#708
entity.name.exception#800
entity.name.sectionbold
constant#085
constant.character, constant.numeric#085
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string#800
constant.character.escape#05a
constant.other.placeholder, meta.embedded.line#05a
string.regexp#AB6526
constant.other.symbol#AB6526
string source, text source
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#085
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#4d4d4d
entity.name.tag#085
entity.other.attribute-name.html, meta.tag entity.other.attribute-name#05a
constant.character.entity, punctuation.definition.entity#800
meta.object-literal.key, meta.property-name, punctuation.support.type.property-name, support.type.property-name#05a
meta.property-value, meta.property-value constant.other, support.constant.property-value#800
entity.name.tag.css, entity.other.attribute-name, meta.selector entity punctuation, meta.selector entity, meta.selector, punctuation.definition.entity.css#232731bold
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#232731italic
keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css, punctuation.definition.constant#085
keyword.other.importantbold
constant.other.color.rgb-value.hex#085
source.js string.template punctuation.definition.template-expression#05a
punctuation.definition.directive.c, punctuation.definition.directive.cpp#232731bold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#600
markup.inserted#000000
meta.link#05a
markup.output, markup.raw#777
markup.prompt#777
markup.heading, punctuation.definition.heading.markdown#800bold
markup.bold, punctuation.definition.bold.markdown#085bold
markup.traceback#600
markup.underlineunderline
markup.quote#7A3E9D
markup.list#232731
markup.italic, punctuation.definition.italic#05A
markup.inline.raw, punctuation.definition.raw.markdown#800
meta.diff.header.git#05a
meta.diff.range, meta.diff.index, meta.separator#232731bold
meta.diff.header.from-file#232731bold
meta.diff.header.to-file#232731bold
markup.deleted.diff, punctuation.definition.deleted#800
markup.inserted.diff, punctuation.definition.inserted#085
punctuation.definition.block.tag.jsdoc, punctuation.definition.inline.tag.jsdoc#05a