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#0a1022
  • activityBar.foreground#fbbf24
  • activityBar.inactiveForeground#3b5278
  • activityBarBadge.background#ef4444
  • activityBarBadge.foreground#ffffff
  • breadcrumb.activeForeground#fbbf24
  • breadcrumb.background#0f172a
  • breadcrumb.foreground#3b5278
  • button.background#ef4444
  • button.foreground#ffffff
  • button.hoverBackground#dc2626
  • diffEditor.insertedTextBackground#22c55e18
  • diffEditor.removedTextBackground#ef444418
  • dropdown.background#0a1022
  • dropdown.border#1e2d47
  • dropdown.foreground#e2e8f0
  • editor.background#0f172a
  • editor.findMatchBackground#fbbf2450
  • editor.findMatchHighlightBackground#fbbf2425
  • editor.foreground#e2e8f0
  • editor.lineHighlightBackground#1e2d47
  • editor.selectionBackground#ef444433
  • editor.selectionHighlightBackground#ef444420
  • editor.wordHighlightBackground#fbbf2420
  • editorBracketMatch.background#ef444430
  • editorBracketMatch.border#ef444480
  • editorCursor.foreground#ef4444
  • editorGroupHeader.tabsBackground#0a1022
  • editorIndentGuide.activeBackground1#374151
  • editorIndentGuide.background1#1e2d47
  • editorLineNumber.activeForeground#fbbf24
  • editorLineNumber.foreground#3b5278
  • editorRuler.foreground#1e2d47
  • editorWhitespace.foreground#2d3f5a
  • gitDecoration.addedResourceForeground#22c55e
  • gitDecoration.deletedResourceForeground#ef4444
  • gitDecoration.ignoredResourceForeground#374151
  • gitDecoration.modifiedResourceForeground#fbbf24
  • gitDecoration.untrackedResourceForeground#4ade80
  • input.background#162035
  • input.border#1e2d47
  • input.foreground#e2e8f0
  • input.placeholderForeground#3b5278
  • list.activeSelectionBackground#1e2d47
  • list.activeSelectionForeground#fbbf24
  • list.highlightForeground#ef4444
  • list.hoverBackground#1a2540
  • list.inactiveSelectionBackground#162035
  • minimap.background#0a1022
  • minimap.selectionHighlight#ef444450
  • notificationLink.foreground#38bdf8
  • notifications.background#0a1022
  • notifications.border#1e2d47
  • notifications.foreground#e2e8f0
  • panel.background#0a1022
  • panel.border#1e2d47
  • panelTitle.activeBorder#ef4444
  • panelTitle.activeForeground#fbbf24
  • panelTitle.inactiveForeground#3b5278
  • scrollbarSlider.activeBackground#ef444460
  • scrollbarSlider.background#1e2d4780
  • scrollbarSlider.hoverBackground#2d3f5a80
  • sideBar.background#0a1022
  • sideBar.border#0f172a
  • sideBar.foreground#94a3b8
  • sideBarSectionHeader.background#0f172a
  • sideBarSectionHeader.foreground#ef4444
  • sideBarTitle.foreground#fbbf24
  • statusBar.background#ef4444
  • statusBar.debuggingBackground#fbbf24
  • statusBar.debuggingForeground#0f172a
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#0f172a
  • statusBarItem.hoverBackground#dc2626
  • statusBarItem.remoteBackground#fbbf24
  • statusBarItem.remoteForeground#0f172a
  • tab.activeBackground#0f172a
  • tab.activeBorderTop#ef4444
  • tab.activeForeground#fbbf24
  • tab.border#0a1022
  • tab.hoverBackground#1e2d47
  • tab.inactiveBackground#0a1022
  • tab.inactiveForeground#4b6082
  • terminal.ansiBlue#38bdf8
  • terminal.ansiBrightBlue#7dd3fc
  • terminal.ansiBrightGreen#4ade80
  • terminal.ansiBrightRed#f87171
  • terminal.ansiBrightYellow#fde047
  • terminal.ansiCyan#22d3ee
  • terminal.ansiGreen#22c55e
  • terminal.ansiMagenta#f472b6
  • terminal.ansiRed#ef4444
  • terminal.ansiYellow#fbbf24
  • terminal.background#0a1022
  • terminal.foreground#e2e8f0
  • terminalCursor.foreground#ef4444
  • titleBar.activeBackground#0a1022
  • titleBar.activeForeground#fbbf24
  • titleBar.border#1e2d47
  • titleBar.inactiveBackground#0a1022
  • titleBar.inactiveForeground#3b5278

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#475569italic
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#ef4444bold
string, string.quoted, string.template#22c55e—
constant.character.escape, punctuation.definition.template-expression#fbbf24—
entity.name.function, support.function, meta.function-call entity.name.function#38bdf8—
variable.parameter#fdba74italic
variable, variable.other, variable.other.readwrite#e2e8f0—
constant, variable.other.constant, constant.language#fbbf24bold
constant.numeric#fb923c—
constant.language.boolean, constant.language.null, constant.language.undefined#f97316bold
entity.name.class, entity.name.type, support.class, entity.other.inherited-class#fbbf24bold
entity.name.tag#ef4444—
entity.other.attribute-name#fbbf24—
support.type.property-name.css#38bdf8—
support.constant.property-value.css#22c55e—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#fbbf24—
keyword.operator#94a3b8—
punctuation#64748b—
keyword.control.import, keyword.control.export, keyword.control.from#f472b6—
meta.decorator, entity.name.function.decorator#f97316—
support.type.property-name.json, meta.object-literal.key#38bdf8—
variable.language.special.self.python#ef4444italic
invalid#fca5a5strikethrough