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#CABFC4
  • activityBar.foreground#261D21
  • activityBar.inactiveForeground#827279
  • activityBarBadge.background#E070BF
  • activityBarBadge.foreground#120B0E
  • badge.background#D360B2
  • badge.foreground#FFF1FB
  • breadcrumb.activeSelectionForeground#9E5DE1
  • breadcrumb.focusForeground#9E5DE1
  • breadcrumb.foreground#827279
  • breadcrumbPicker.background#E5DADF
  • button.background#ED80CC
  • button.foreground#FFF1FB
  • button.hoverBackground#FA90D9
  • debugToolBar.background#CABFC4FF
  • diffEditor.insertedTextBackground#5FB6601A
  • diffEditor.removedTextBackground#EC757026
  • dropdown.background#E5DADF
  • dropdown.border#B6A3AB
  • dropdown.foreground#3B3035
  • editor.background#FFF5FA
  • editor.findMatchBackground#B1430030
  • editor.findMatchHighlightBackground#CA630030
  • editor.findRangeHighlightBackground#968D9130
  • editor.foreground#3B3035
  • editor.inactiveSelectionBackground#4E474A30
  • editor.lineHighlightBackground#E5DADF
  • editor.selectionBackground#C64FA530
  • editor.selectionHighlightBackground#ED80CC30
  • editor.wordHighlightBackground#7D757830
  • editor.wordHighlightStrongBackground#E070BF30
  • editorActiveLineNumber.foreground#120B0E
  • editorBracketHighlight.foreground1#7E5ECDBF
  • editorBracketHighlight.foreground2#A44EADBF
  • editorBracketHighlight.foreground3#BD437DBF
  • editorBracketHighlight.foreground4#C64444BF
  • editorBracketHighlight.foreground5#BE5300BF
  • editorBracketHighlight.foreground6#A46A00BF
  • editorBracketMatch.background#968D9130
  • editorBracketMatch.border#9C8A92BF
  • editorCodeLens.foreground#827279
  • editorCursor.foreground#9F1080
  • editorError.foreground#C64444
  • editorGroup.border#EDD6E0
  • editorGroupHeader.noTabsBackground#FFF5FA
  • editorGroupHeader.tabsBackground#FFF5FA
  • editorGutter.addedBackground#70C370
  • editorGutter.deletedBackground#F9857F
  • editorGutter.modifiedBackground#00C5D5
  • editorHint.foreground#4370D7
  • editorHoverWidget.background#FFF5FA
  • editorHoverWidget.foreground#3B3035
  • editorInfo.foreground#4370D7
  • editorLineNumber.foreground#827279
  • editorLink.activeForeground#9F1080
  • editorOverviewRuler.addedForeground#00758B33
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.bracketMatchForeground#120B0E4D
  • editorOverviewRuler.deletedForeground#00758B33
  • editorOverviewRuler.errorForeground#EC7570E6
  • editorOverviewRuler.findMatchForeground#E48238E6
  • editorOverviewRuler.infoForeground#6F9BFAE6
  • editorOverviewRuler.modifiedForeground#00758B33
  • editorOverviewRuler.warningForeground#C99500E6
  • editorOverviewRuler.wordHighlightForeground#120B0E4D
  • editorOverviewRuler.wordHighlightStrongForeground#120B0E4D
  • editorSuggestWidget.background#FFF5FAFF
  • editorWarning.foreground#A46A00
  • editorWidget.background#E5DADFFF
  • errorForeground#DF6561
  • focusBorder#E070BF
  • foreground#3B3035
  • gitDecoration.addedResourceForeground#238E2C
  • gitDecoration.conflictingResourceForeground#A44EAD
  • gitDecoration.deletedResourceForeground#C64444
  • gitDecoration.modifiedResourceForeground#C25100
  • gitDecoration.untrackedResourceForeground#0090A3
  • input.background#FFF5FA
  • input.border#B6A3AB
  • input.foreground#3B3035
  • input.placeholderForeground#827279
  • inputOption.activeBorder#D360B2
  • list.activeSelectionBackground#E070BF40
  • list.activeSelectionForeground#120B0E
  • list.errorForeground#C64444
  • list.focusBackground#E070BF40
  • list.focusForeground#120B0E
  • list.highlightForeground#D360B2
  • list.hoverBackground#B0A6AA54
  • list.inactiveSelectionBackground#7D75784D
  • list.inactiveSelectionForeground#120B0E
  • list.warningForeground#A46A00
  • minimap.findMatchHighlight#CA630030
  • minimap.selectionHighlight#C64FA530
  • notification.errorBackground#F9857F
  • notification.errorForeground#C64444
  • notification.infoBackground#7EA9FF
  • notification.infoForeground#4370D7
  • notification.warningBackground#D6A327
  • notification.warningForeground#A46A00
  • panel.border#B6A3AB
  • panelTitle.activeBorder#E070BF
  • peekView.border#D1BCC5
  • peekViewEditor.background#B0A6AA2B
  • peekViewTitle.background#E5DADFFF
  • scrollbar.shadow#0000001A
  • scrollbarSlider.activeBackground#100C0E26
  • scrollbarSlider.background#100C0E13
  • scrollbarSlider.hoverBackground#100C0E26
  • sideBar.background#E5DADF
  • sideBarSectionHeader.background#B0A6AA
  • sideBarTitle.foreground#120B0E
  • statusBar.background#CABFC4
  • statusBar.debuggingBackground#CABFC4
  • statusBar.debuggingForeground#3B3035
  • statusBar.foreground#3B3035
  • statusBar.noFolderBackground#CABFC4
  • statusBar.noFolderForeground#3B3035
  • statusBarItem.errorBackground#F9857F
  • statusBarItem.errorForeground#3B3035
  • statusBarItem.errorHoverBackground#C6444440
  • statusBarItem.errorHoverForeground#120B0E
  • statusBarItem.hoverBackground#B0A6AAFF
  • statusBarItem.remoteBackground#CABFC4
  • statusBarItem.remoteForeground#3B3035
  • statusBarItem.remoteHoverBackground#B93E9840
  • statusBarItem.remoteHoverForeground#120B0E
  • statusBarItem.warningBackground#D6A327
  • statusBarItem.warningForeground#3B3035
  • statusBarItem.warningHoverBackground#A46A0040
  • statusBarItem.warningHoverForeground#120B0E
  • tab.activeBackground#FFF5FA
  • tab.activeBorder#B93E98
  • tab.activeForeground#120B0E
  • tab.border#FFF5FA
  • tab.hoverBackground#E5DADF80
  • tab.inactiveBackground#FFF5FA
  • tab.inactiveForeground#52454B
  • terminal.ansiBlack#FFF5FA
  • terminal.ansiBlue#6F9BFA
  • terminal.ansiBrightBlack#968D91
  • terminal.ansiBrightBlue#3562CB
  • terminal.ansiBrightCyan#008297
  • terminal.ansiBrightGreen#008116
  • terminal.ansiBrightMagenta#724FC1
  • terminal.ansiBrightRed#B83135
  • terminal.ansiBrightWhite#120B0E
  • terminal.ansiBrightYellow#8B4E00
  • terminal.ansiCyan#00B7C8
  • terminal.ansiGreen#5FB660
  • terminal.ansiMagenta#A48AF1
  • terminal.ansiRed#EC7570
  • terminal.ansiWhite#3B3035
  • terminal.ansiYellow#BD8600
  • terminal.background#FFF5FA
  • terminal.cursorColor#9F1080
  • terminal.foreground#3B3035
  • terminal.selectionBackground#E8A4CF
  • textLink.activeForeground#B93E98
  • textLink.foreground#C64FA5
  • titleBar.activeBackground#52454B
  • titleBar.activeForeground#FFF5FA
  • titleBar.inactiveBackground#6A5B61
  • titleBar.inactiveForeground#E5DADF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, meta.definition.variable.name, support.variable, variable.other.readwrite, variable.other.constant, variable.other.readonly#3B3035—
variable.parameter, variable.other.local, variable.other.constant#3B3035italic
variable.other.property, variable.other.constant.property#C25100—
meta.object-literal.key, meta.object-literal.key entity.name.function#3B3035—
comment, punctuation.comment, punctuation.definition.comment#827279—
keyword.operator#9F1080—
punctuation, delimiter, bracket, brace, paren, delimiter.tag, punctuation.tag, tag.html, tag.xml, meta.property-value punctuation.separator.key-value, punctuation.definition.metadata.md, string.link.md, meta.brace#827279—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js, punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php, punctuation.definition.typeparameters#DB7200—
string, meta.property-value.string, support.constant.property-value.string, meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.dictionary.json string.quoted.double.json, meta.preprocessor string#9E5DE1italic
meta.template.expression.ts—
constant.numeric, constant.dec.numeric, constant.hex.numeric, meta.property-value.numeric, support.constant.property-value.numeric, meta.property-value.color, support.constant.property-value.color, constant.language#8639CB—
entity.name.namespace, entity.name.type.module#B54000—
entity.name.type#B93E98—
support.type#AC2A8C—
entity.name.type.parameter#C25100italic
variable.other.constant#8639CB—
constant.character, constant.other, entity.name, entity.name.class, entity.name.function, entity.other.inherited-class, entity.other.attribute-name, entity.other.attribute-name, entity.other.attribute-name.html, support.type.property-name, string.key, entity.name.tag.table, meta.structure.dictionary.json string.quoted.double.json#261D21—
entity.name.function.member#261D21—
variable.language.this#120B0E—
keyword, meta.property-value.keyword, support.constant.property-value.keyword, meta.preprocessor.keyword, keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#9E1182bold
storage, storage.type, storage.type.ts, storage.type.var.ts, storage.type.js, storage.type.var.js, storage.type.const.ts, storage.type.let.ts, storage.type.let.js, storage.type.const.js, entity.name.tag#9E1182bold
meta.ptr, meta.pointer, meta.address, meta.array.cxx——
meta.preprocessor#261D21—
support.class, support.function, support.constant#261D21—
invalid#D25553—
invalid.deprecated#D25553—
punctuation.definition.heading.md, entity.name.type.md, beginning.punctuation#261D21—
markup.heading, entity.name.section#9E1182bold
markup.raw, markup.inline.raw, markup.fenced, markup.fenced_code#C25100—
markup.link, string.other.link.title, string.other.link.description, meta.link.inline, meta.image.inline#261D21—
markup.underline.link.markdown#9E5DE1italic
variable.language.makefile, variable.other.makefile#261D21—
punctuation.definition.markdown, punctuation.definition.heading.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown#9F1080—
markup.italic—italic
markup.bold—bold
entity.other.attribute-name.class.css#261D21—
entity.name.tag.css#9E1182bold
meta.property-name.css#261D21—