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#332433
  • activityBar.foreground#F0EBE7
  • activityBar.inactiveForeground#C9C9CD
  • activityBarBadge.background#C68EDE
  • activityBarBadge.foreground#2B1D2B
  • badge.background#C68EDE
  • badge.foreground#2B1D2B
  • button.background#4D9391
  • button.foreground#2B1D2B
  • button.hoverBackground#EED891
  • diffEditor.insertedLineBackground#49BDB022
  • diffEditor.insertedTextBackground#49BDB033
  • diffEditor.removedLineBackground#EF678722
  • diffEditor.removedTextBackground#EF678733
  • dropdown.background#332433
  • dropdown.border#452F45
  • dropdown.foreground#F0EBE7
  • editor.background#2B1D2B
  • editor.findMatchBackground#1A9EEEAA
  • editor.findMatchHighlightBackground#35BF8866
  • editor.foreground#F0EBE7
  • editor.inactiveSelectionBackground#2E394066
  • editor.lineHighlightBackground#372E4080
  • editor.selectionBackground#2E394099
  • editor.selectionHighlightBackground#EAE46A44
  • editor.wordHighlightBackground#EED89144
  • editor.wordHighlightStrongBackground#1A9EEE55
  • editorBracketMatch.background#68F3CA33
  • editorBracketMatch.border#68F3CA
  • editorCursor.foreground#9587DD
  • editorError.foreground#E84C58
  • editorGutter.addedBackground#49BDB0
  • editorGutter.background#2B1D2B
  • editorGutter.deletedBackground#EF6787
  • editorGutter.modifiedBackground#F5C791
  • editorHint.foreground#7A6884
  • editorIndentGuide.activeBackground1#545C5E
  • editorIndentGuide.background1#452F45AA
  • editorInfo.foreground#FBAED2
  • editorLineNumber.activeForeground#C68EDE
  • editorLineNumber.foreground#7A6884
  • editorOverviewRuler.addedForeground#49BDB0
  • editorOverviewRuler.deletedForeground#EF6787
  • editorOverviewRuler.errorForeground#E84C58
  • editorOverviewRuler.infoForeground#FBAED2
  • editorOverviewRuler.modifiedForeground#F5C791
  • editorOverviewRuler.warningForeground#F3C91F
  • editorWarning.foreground#F3C91F
  • editorWhitespace.foreground#BEBEC466
  • input.background#332433
  • input.border#452F45
  • input.foreground#F0EBE7
  • input.placeholderForeground#BEBEC4
  • list.activeSelectionBackground#2E394066
  • list.activeSelectionForeground#F0EBE7
  • list.highlightForeground#C68EDE
  • list.hoverBackground#3D293D88
  • panel.background#261926
  • panel.border#3D293D
  • panelTitle.activeBorder#C68EDE
  • panelTitle.activeForeground#F0EBE7
  • panelTitle.inactiveForeground#C9C9CD
  • peekView.border#452F45
  • peekViewEditor.background#2B1D2B
  • peekViewEditor.matchHighlightBackground#EAE46A66
  • peekViewResult.background#261926
  • peekViewResult.matchHighlightBackground#EAE46A66
  • sideBar.background#261926
  • sideBar.foreground#D4D4D6
  • sideBarSectionHeader.background#332433
  • sideBarSectionHeader.foreground#F0EBE7
  • sideBarTitle.foreground#F0EBE7
  • statusBar.background#332433
  • statusBar.debuggingBackground#F3C91F
  • statusBar.debuggingForeground#2B1D2B
  • statusBar.foreground#F0EBE7
  • statusBar.noFolderBackground#332433
  • tab.activeBackground#2B1D2B
  • tab.activeBorderTop#C68EDE
  • tab.activeForeground#F0EBE7
  • tab.border#3D293D
  • tab.inactiveBackground#332433
  • tab.inactiveForeground#C9C9CD
  • terminal.ansiBlack#2B1D2B
  • terminal.ansiBlue#738FD7
  • terminal.ansiBrightBlack#7A6884
  • terminal.ansiBrightBlue#FBAED2
  • terminal.ansiBrightCyan#6BD9DB
  • terminal.ansiBrightGreen#65E6A7
  • terminal.ansiBrightMagenta#738FD7
  • terminal.ansiBrightRed#E84C58
  • terminal.ansiBrightWhite#F0EBE7
  • terminal.ansiBrightYellow#F3C91F
  • terminal.ansiCyan#6BD9DB
  • terminal.ansiGreen#0D9C94
  • terminal.ansiMagenta#C68EDE
  • terminal.ansiRed#E84C58
  • terminal.ansiWhite#F0EBE7
  • terminal.ansiYellow#F5C791
  • terminal.background#2B1D2B
  • terminal.foreground#F0EBE7
  • titleBar.activeBackground#332433
  • titleBar.activeForeground#F0EBE7
  • titleBar.inactiveBackground#2B1D2B
  • titleBar.inactiveForeground#C9C9CD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A6884
keyword, keyword.control, storage, storage.type#C68EDE
support.function, support.class, support.type, support.constant#FBAED2
entity.name.function, meta.function-call, support.function.any-method#FBAED2
variable, meta.definition.variable.name, entity.name.variable#9587DD
variable.parameter, meta.parameter#D4D4D6
variable.other.property, meta.object-literal.key, support.variable.property#9587DD
entity.name.type, entity.name.class, entity.name.namespace, support.type#6BD9DB
constant, constant.language, constant.character#738FD7
constant.numeric#F5C791
constant.language.boolean#F5C791
string, string.quoted, string.template#E361C3
constant.character.escape, string.regexp, string.regexp punctuation.definition.string.begin#807F96
comment.block.documentation, string.quoted.docstring#807F96
meta.preprocessor, entity.name.tag, entity.other.attribute-name#41B0F3
keyword.operator, punctuation, meta.brace#D4D4D6
invalid, invalid.deprecated#E84C58
markup.warning#F3C91F
markup.heading, markup.heading punctuation.definition.heading#C68EDE
markup.italic, markup.bold, markup.bold markup.italic#FBAED2
markup.underline.link, string.other.link.title#9D81BA
markup.inserted, meta.diff.header.to-file#49BDB0
markup.changed, meta.diff.header#F5C791
markup.deleted, meta.diff.header.from-file#EF6787
Kaolin Themes (Emacs Port) by hasit - VS Code Theme