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#303035
  • activityBar.foreground#EEDCC1
  • activityBar.inactiveForeground#C9C9CD
  • activityBarBadge.background#4EB8CA
  • activityBarBadge.foreground#2B2B2F
  • badge.background#4EB8CA
  • badge.foreground#2B2B2F
  • button.background#4D9391
  • button.foreground#2B2B2F
  • button.hoverBackground#EED891
  • diffEditor.insertedLineBackground#4FA8A322
  • diffEditor.insertedTextBackground#4FA8A333
  • diffEditor.removedLineBackground#C74A4D22
  • diffEditor.removedTextBackground#C74A4D33
  • dropdown.background#303035
  • dropdown.border#383E3F
  • dropdown.foreground#EEDCC1
  • editor.background#2B2B2F
  • editor.findMatchBackground#1A9EEEAA
  • editor.findMatchHighlightBackground#EE704266
  • editor.foreground#EEDCC1
  • editor.inactiveSelectionBackground#402E3366
  • editor.lineHighlightBackground#30303580
  • editor.selectionBackground#402E3399
  • editor.selectionHighlightBackground#68F3CA44
  • editor.wordHighlightBackground#2AE18644
  • editor.wordHighlightStrongBackground#1A9EEE55
  • editorBracketMatch.background#EF678733
  • editorBracketMatch.border#EF6787
  • editorCursor.foreground#EEDCC1
  • editorError.foreground#E84C58
  • editorGutter.addedBackground#4FA8A3
  • editorGutter.background#2B2B2F
  • editorGutter.deletedBackground#C74A4D
  • editorGutter.modifiedBackground#D7936D
  • editorHint.foreground#697375
  • editorIndentGuide.activeBackground1#545C5E
  • editorIndentGuide.background1#383E3FAA
  • editorInfo.foreground#91B9C7
  • editorLineNumber.activeForeground#49BDB0
  • editorLineNumber.foreground#697375
  • editorOverviewRuler.addedForeground#4FA8A3
  • editorOverviewRuler.deletedForeground#C74A4D
  • editorOverviewRuler.errorForeground#E84C58
  • editorOverviewRuler.infoForeground#91B9C7
  • editorOverviewRuler.modifiedForeground#D7936D
  • editorOverviewRuler.warningForeground#F3C91F
  • editorWarning.foreground#F3C91F
  • editorWhitespace.foreground#BEBEC466
  • input.background#303035
  • input.border#383E3F
  • input.foreground#EEDCC1
  • input.placeholderForeground#BEBEC4
  • list.activeSelectionBackground#402E3366
  • list.activeSelectionForeground#EEDCC1
  • list.highlightForeground#4EB8CA
  • list.hoverBackground#353B3C88
  • panel.background#262628
  • panel.border#353B3C
  • panelTitle.activeBorder#4EB8CA
  • panelTitle.activeForeground#EEDCC1
  • panelTitle.inactiveForeground#C9C9CD
  • peekView.border#383E3F
  • peekViewEditor.background#2B2B2F
  • peekViewEditor.matchHighlightBackground#68F3CA66
  • peekViewResult.background#262628
  • peekViewResult.matchHighlightBackground#68F3CA66
  • sideBar.background#262628
  • sideBar.foreground#D4D4D6
  • sideBarSectionHeader.background#303035
  • sideBarSectionHeader.foreground#EEDCC1
  • sideBarTitle.foreground#EEDCC1
  • statusBar.background#303035
  • statusBar.debuggingBackground#F3C91F
  • statusBar.debuggingForeground#2B2B2F
  • statusBar.foreground#EEDCC1
  • statusBar.noFolderBackground#303035
  • tab.activeBackground#2B2B2F
  • tab.activeBorderTop#4EB8CA
  • tab.activeForeground#EEDCC1
  • tab.border#353B3C
  • tab.inactiveBackground#303035
  • tab.inactiveForeground#C9C9CD
  • terminal.ansiBlack#2B2B2F
  • terminal.ansiBlue#4EB8CA
  • terminal.ansiBrightBlack#697375
  • terminal.ansiBrightBlue#91B9C7
  • terminal.ansiBrightCyan#B9C791
  • terminal.ansiBrightGreen#47BA99
  • terminal.ansiBrightMagenta#4FA8A3
  • terminal.ansiBrightRed#E84C58
  • terminal.ansiBrightWhite#EEDCC1
  • terminal.ansiBrightYellow#F3C91F
  • terminal.ansiCyan#49BDB0
  • terminal.ansiGreen#47BA99
  • terminal.ansiMagenta#FBAED2
  • terminal.ansiRed#EF6787
  • terminal.ansiWhite#EEDCC1
  • terminal.ansiYellow#EED891
  • terminal.background#2B2B2F
  • terminal.foreground#EEDCC1
  • titleBar.activeBackground#303035
  • titleBar.activeForeground#EEDCC1
  • titleBar.inactiveBackground#2B2B2F
  • titleBar.inactiveForeground#C9C9CD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#697375
keyword, keyword.control, storage, storage.type#4EB8CA
support.function, support.class, support.type, support.constant#91B9C7
entity.name.function, meta.function-call, support.function.any-method#91B9C7
variable, meta.definition.variable.name, entity.name.variable#47BA99
variable.parameter, meta.parameter#D4D4D6
variable.other.property, meta.object-literal.key, support.variable.property#47BA99
entity.name.type, entity.name.class, entity.name.namespace, support.type#B9C791
constant, constant.language, constant.character#4FA8A3
constant.numeric#EF6787
constant.language.boolean#EF6787
string, string.quoted, string.template#FBAED2
constant.character.escape, string.regexp, string.regexp punctuation.definition.string.begin#BA667D
comment.block.documentation, string.quoted.docstring#BA667D
meta.preprocessor, entity.name.tag, entity.other.attribute-name#EF6787
keyword.operator, punctuation, meta.brace#D4D4D6
invalid, invalid.deprecated#E84C58
markup.warning#F3C91F
markup.heading, markup.heading punctuation.definition.heading#4EB8CA
markup.italic, markup.bold, markup.bold markup.italic#91B9C7
markup.underline.link, string.other.link.title#EF6787
markup.inserted, meta.diff.header.to-file#4FA8A3
markup.changed, meta.diff.header#D7936D
markup.deleted, meta.diff.header.from-file#C74A4D
Kaolin Themes (Emacs Port) by hasit - VS Code Theme