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.activeBackground#00DC8220
  • activityBar.activeBorder#00DC82
  • activityBar.background#f1f5f9
  • activityBar.border#e2e8f0
  • activityBar.foreground#0f172a
  • activityBar.inactiveForeground#64748b
  • activityBarBadge.background#00DC82
  • activityBarBadge.foreground#000000
  • button.background#00DC82
  • button.foreground#000000
  • button.hoverBackground#00DC82AA
  • button.secondaryBackground#f1f5f9
  • button.secondaryForeground#0f172a
  • button.secondaryHoverBackground#00DC8230
  • editor.background#f8fafc
  • editor.findMatchBackground#00DC8250
  • editor.findMatchHighlightBackground#00DC8230
  • editor.foreground#1e293b
  • editor.lineHighlightBackground#00DC8210
  • editor.lineHighlightBorder#00DC8220
  • editor.selectionBackground#00DC8240
  • editor.selectionHighlightBackground#00DC8220
  • editor.wordHighlightBackground#00DC8220
  • editor.wordHighlightStrongBackground#00DC8230
  • editorBracketMatch.background#00DC8220
  • editorBracketMatch.border#00DC82
  • editorCursor.foreground#00DC82
  • editorGroup.border#e2e8f0
  • editorGroupHeader.tabsBackground#f1f5f9
  • editorGroupHeader.tabsBorder#e2e8f0
  • editorHoverWidget.background#f1f5f9
  • editorHoverWidget.border#e2e8f0
  • editorLineNumber.activeForeground#00DC82
  • editorLineNumber.foreground#64748b80
  • editorOverviewRuler.addedForeground#4ade80
  • editorOverviewRuler.border#e2e8f0
  • editorOverviewRuler.deletedForeground#f43f5e
  • editorOverviewRuler.errorForeground#f43f5e
  • editorOverviewRuler.findMatchForeground#00DC82
  • editorOverviewRuler.infoForeground#3b82f6
  • editorOverviewRuler.modifiedForeground#00DC82
  • editorOverviewRuler.warningForeground#64748b
  • editorSuggestWidget.background#f1f5f9
  • editorSuggestWidget.border#e2e8f0
  • editorSuggestWidget.selectedBackground#00DC8240
  • editorWidget.background#f1f5f9
  • editorWidget.border#e2e8f0
  • focusBorder#00DC82
  • foreground#0f172a
  • gitDecoration.addedResourceForeground#4ade80
  • gitDecoration.conflictingResourceForeground#a855f7
  • gitDecoration.deletedResourceForeground#f43f5e
  • gitDecoration.ignoredResourceForeground#94a3b8
  • gitDecoration.modifiedResourceForeground#64748b
  • gitDecoration.untrackedResourceForeground#4ade80
  • input.background#ffffff
  • input.border#e2e8f0
  • input.foreground#0f172a
  • input.placeholderForeground#64748b
  • inputOption.activeBackground#00DC8240
  • inputOption.activeBorder#00DC82
  • inputOption.activeForeground#0f172a
  • inputValidation.errorBackground#f43f5e20
  • inputValidation.errorBorder#f43f5e
  • inputValidation.infoBackground#3b82f620
  • inputValidation.infoBorder#3b82f6
  • inputValidation.warningBackground#64748b20
  • inputValidation.warningBorder#64748b
  • progressBar.background#00DC82
  • selection.background#00DC8240
  • sideBar.background#f1f5f9
  • sideBar.border#e2e8f0
  • sideBar.foreground#0f172a
  • sideBarSectionHeader.background#e2e8f0
  • sideBarSectionHeader.border#e2e8f0
  • sideBarSectionHeader.foreground#0f172a
  • sideBarTitle.foreground#0f172a
  • statusBar.background#00DC82
  • statusBar.border#e2e8f0
  • statusBar.debuggingBackground#00DC82
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#f1f5f9
  • statusBarItem.hoverBackground#00DC8250
  • statusBarItem.prominentBackground#00DC82
  • statusBarItem.prominentHoverBackground#00DC82AA
  • statusBarItem.remoteBackground#00DC82
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#00DC82
  • tab.activeBorder#00DC82
  • tab.activeBorderTop#00DC82
  • tab.activeForeground#000000
  • tab.border#e2e8f0
  • tab.hoverBackground#00DC8220
  • tab.hoverForeground#0f172a
  • tab.inactiveBackground#f1f5f9
  • tab.inactiveForeground#0f172a
  • tab.unfocusedActiveBorder#00DC8270
  • tab.unfocusedActiveBorderTop#00DC8270
  • terminal.ansiBlack#0f172a
  • terminal.ansiBlue#3b82f6
  • terminal.ansiBrightBlack#334155
  • terminal.ansiBrightBlue#3b82f6
  • terminal.ansiBrightCyan#06b6d4
  • terminal.ansiBrightGreen#4ade80
  • terminal.ansiBrightMagenta#a855f7
  • terminal.ansiBrightRed#f43f5e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#94a3b8
  • terminal.ansiCyan#06b6d4
  • terminal.ansiGreen#00DC82
  • terminal.ansiMagenta#a855f7
  • terminal.ansiRed#f43f5e
  • terminal.ansiWhite#f8fafc
  • terminal.ansiYellow#64748b
  • terminal.background#f8fafc
  • terminal.border#e2e8f0
  • terminal.foreground#0f172a
  • terminalCursor.background#f8fafc
  • terminalCursor.foreground#00DC82
  • titleBar.activeBackground#f1f5f9
  • titleBar.activeForeground#0f172a
  • titleBar.border#e2e8f0
  • titleBar.inactiveBackground#f1f5f9
  • titleBar.inactiveForeground#64748b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#64748bitalic
variable, string constant.other.placeholder#334155
constant.other.color#334155
invalid, invalid.illegal#f43f5e
keyword, storage.type, storage.modifier#00DC82
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#00DC82AA
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#00DC82
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#00DC82
meta.block variable.other#334155
support.other.variable, string.other.link#00DC82
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#00DC82AA
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#334155