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
Anime Trinity Theme by Dhruva Jhanjhari - VS Code Theme