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#181818
  • activityBar.foreground#D0D0D0
  • activityBarBadge.background#1565c0
  • activityBarBadge.foreground#D0D0D0
  • debugIcon.breakpointForeground#e57373
  • editor.background#282828
  • editor.findMatchBackground#e5c07b58
  • editor.findMatchHighlightBackground#e5c07b38
  • editor.foreground#D0D0D0
  • editor.hoverHighlightBackground#D0D0D028
  • editor.lineHighlightBackground#D0D0D014
  • editor.selectionBackground#5D6D7E88
  • editor.selectionHighlightBackground#D0D0D014
  • editor.wordHighlightBackground#D0D0D028
  • editor.wordHighlightStrongBackground#5D6D7E88
  • editorBracketMatch.background#5D6D7E88
  • editorBracketMatch.border#5D6D7E00
  • editorCursor.foreground#D0D0D0
  • editorGroupHeader.tabsBackground#181818
  • editorGutter.addedBackground#8bc34a88
  • editorGutter.deletedBackground#e5737388
  • editorGutter.modifiedBackground#40c4ff88
  • editorIndentGuide.activeBackground1#D0D0D054
  • editorIndentGuide.background1#D0D0D028
  • editorLineNumber.foreground#787878
  • editorOverviewRuler.addedForeground#8bc34a88
  • editorOverviewRuler.bracketMatchForeground#ea80fc88
  • editorOverviewRuler.deletedForeground#e5737388
  • editorOverviewRuler.modifiedForeground#40c4ff88
  • editorOverviewRuler.wordHighlightForeground#ea80fc88
  • editorOverviewRuler.wordHighlightStrongForeground#ea80fc
  • editorWidget.background#202020
  • focusBorder#1565c0
  • input.background#D0D0D014
  • input.foreground#D0D0D0
  • list.activeSelectionBackground#5D6D7E88
  • list.activeSelectionForeground#D0D0D0
  • list.focusBackground#5D6D7E88
  • list.hoverBackground#D0D0D008
  • list.inactiveSelectionBackground#D0D0D008
  • sideBar.background#202020
  • sideBar.foreground#D0D0D0
  • sideBarSectionHeader.background#D0D0D014
  • sideBarSectionHeader.foreground#D0D0D0
  • statusBar.background#181818
  • statusBar.debuggingBackground#A8601A88
  • statusBar.foreground#D0D0D0
  • tab.activeBackground#282828
  • tab.activeForeground#D0D0D0
  • tab.border#181818
  • tab.inactiveBackground#181818
  • terminal.ansiBlack#212121
  • terminal.ansiBlue#40c4ff
  • terminal.ansiBrightBlack#212121
  • terminal.ansiBrightBlue#40c4ff
  • terminal.ansiBrightCyan#00bcd4
  • terminal.ansiBrightGreen#8bc34a
  • terminal.ansiBrightMagenta#ea80fc
  • terminal.ansiBrightRed#e57373
  • terminal.ansiBrightWhite#D0D0D0
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#00bcd4
  • terminal.ansiGreen#8bc34a
  • terminal.ansiMagenta#ea80fc
  • terminal.ansiRed#e57373
  • terminal.ansiWhite#D0D0D0
  • terminal.ansiYellow#e5c07b
  • terminal.foreground#D0D0D0
  • tree.indentGuidesStroke#D0D0D028
  • widget.shadow#181818

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string, constant.other.character-class.range.regexp, constant.other.character-class.set.regexp, keyword.operator.quantifier.regexp, punctuation.definition.template-expression, variable.interpolation.scss, support.constant.property-value, support.constant.color#e5c07b—
variable, meta.template.expression, constant.language.pseudo, punctuation.separator.key-value, storage.modifier.import, new.expr entity.name.type.module, constant.other.php, support.variable#D0D0D0—
constant.language, constant.numeric, constant.other.color, variable.language#e57373—
keyword, storage, entity.name.tag.reference, punctuation.separator.key-value, support.type.python#ea80fc—
entity.name.tag, entity.name.function, support.function, support.class.builtin, entity.name.type.class, new.expr entity.name.type, storage.type.java, punctuation.definition.tag, meta.function-call.generic#40c4ff—
entity.other.attribute-name, meta.object-literal.key, variable.object.property, support.type.property-name.json, entity.name.tag.css, entity.name.tag.custom, variable.parameter.function-call#8bc34a—
comment, storage.type.class.jsdoc, variable.other.jsdoc, comment.block.documentation.phpdoc, string.quoted.docstring.multi#787878italic
meta.type.annotation, meta.return.type, keyword.operator.type.annotation, meta.type.parameters, storage.type.annotation#78909C—
markup.heading#e57373bold
markup.raw, markup.inline.raw#e5c07b—
markup.italic—italic
markup.bold, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php—bold
SgtCoder Developer Coding Theme by SgtCoder - VS Code Theme