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#1a1025
  • activityBar.foreground#ffd700
  • activityBarBadge.background#ff0080
  • activityBarBadge.foreground#fff8f0
  • dropdown.background#2d0036
  • dropdown.border#a259ff
  • dropdown.foreground#ffeedd
  • editor.background#1a1025
  • editor.findMatchBackground#ffb34755
  • editor.findMatchBorder#ffd700
  • editor.findMatchHighlightBackground#a259ff88
  • editor.findRangeHighlightBackground#ffd70033
  • editor.foreground#fff8f0
  • editor.lineHighlightBorder#a259ff
  • editor.selectionBackground#a259ff88
  • editor.selectionForeground#ffeedd
  • editor.selectionHighlightBackground#a259ff44
  • editor.selectionHighlightBorder#ff0080
  • editor.wordHighlightBackground#ffb34722
  • editor.wordHighlightStrongBackground#ffd70022
  • editorBracketMatch.background#ffb34744
  • editorBracketMatch.border#ff0080
  • editorGroup.border#a259ff
  • editorLineNumber.activeForeground#ffd700
  • editorLineNumber.foreground#a259ff
  • foreground#ffeedd
  • icon.foreground#ffb347
  • input.background#1a1025
  • input.border#a259ff
  • input.foreground#ffeedd
  • input.placeholderForeground#ffb347
  • notificationCenter.border#a259ff
  • notificationCenterHeader.background#1a1025
  • notificationCenterHeader.foreground#ffb347
  • notifications.background#2d0036
  • notifications.border#ffb347
  • notifications.foreground#ffeedd
  • panel.background#2d0036
  • panel.border#ffb347
  • panelTitle.activeForeground#ffd700
  • panelTitle.inactiveForeground#ffeedd88
  • sideBar.background#1a1025
  • sideBar.foreground#ffeedd
  • sideBarTitle.foreground#ffb347
  • statusBar.background#2d0036
  • statusBar.border#ffb347
  • statusBar.debuggingBackground#a259ff
  • statusBar.debuggingForeground#ffd700
  • statusBar.foreground#ffd700
  • statusBar.noFolderBackground#1a1025
  • statusBar.noFolderForeground#ffb347
  • statusBarItem.hoverBackground#ffb34733
  • tab.activeBackground#1a1025
  • tab.activeBorder#ff0080
  • tab.activeBorderTop#ffd700
  • tab.activeForeground#ffd700
  • tab.border#2d0036
  • tab.inactiveBackground#12081a
  • tab.inactiveForeground#a98fdc
  • terminal.ansiBlack#1a1025
  • terminal.ansiBlue#a259ff
  • terminal.ansiBrightBlack#2d0036
  • terminal.ansiBrightBlue#d580ff
  • terminal.ansiBrightCyan#ffd700
  • terminal.ansiBrightGreen#ffeedd
  • terminal.ansiBrightMagenta#ffb3ff
  • terminal.ansiBrightRed#ff4fa3
  • terminal.ansiBrightWhite#fff8f0
  • terminal.ansiBrightYellow#ffd700
  • terminal.ansiCyan#ffb347
  • terminal.ansiGreen#ffd700
  • terminal.ansiMagenta#ff0080
  • terminal.ansiRed#ff0080
  • terminal.ansiWhite#ffeedd
  • terminal.ansiYellow#ffb347
  • terminal.background#1a1025
  • terminal.border#a259ff
  • terminal.findMatchBackground#ffb34744
  • terminal.findMatchBorder#ff0080
  • terminal.findMatchHighlightBackground#a259ff22
  • terminal.foreground#ffd700
  • terminal.hoverHighlightBackground#ffb34733
  • terminal.selectionBackground#a259ff55
  • terminal.selectionForeground#ffeedd
  • terminalCursor.background#1a1025
  • terminalCursor.foreground#ff0080
  • titleBar.activeBackground#1a1025
  • titleBar.activeForeground#ffd700
  • titleBar.inactiveBackground#2d0036
  • titleBar.inactiveForeground#a259ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ffeedd
comment, punctuation.definition.comment#a98fdcitalic
string, string.quoted.single, string.quoted.double, string.quoted.triple, string.quoted.docstring#ffb347
constant.numeric#ffd700
keyword, keyword.control, storage.type#ff0080bold
entity.name.function, support.function#ffd700
variable, variable.other.readwrite, variable.other.object#ffeedd
entity.name.class, entity.name.type.class#a259ffbold
entity.name.type, support.type#ffb347
constant, constant.language, constant.character#ffb347
keyword.operator#ffb347
variable.other.property, meta.object-literal.key#ffd700
punctuation, punctuation.separator, punctuation.terminator#a98fdc
entity.name.tag, support.class.component#ff0080
entity.other.attribute-name#ffd700
invalid, invalid.illegal#ff073abold
markup.heading, markup.heading.markdown#ffb347bold
markup.bold, markup.bold.markdown#ff0080bold
markup.italic, markup.italic.markdown#a98fdcitalic
entity.name.type.ts, entity.name.type.tsx, support.type.primitive.ts, support.type.primitive.tsx#a259ffitalic
support.class.component.jsx, support.class.component.tsx, entity.name.tag.jsx, entity.name.tag.tsx#ff0080bold
support.function.magic.python#a259ffitalic
support.type.property-name.css#ffb347
support.constant.property-value.css, constant.numeric.css#ffd700
support.type.property-name.json#a259ff
string.template, punctuation.definition.template-expression#ff0080
entity.name.function.decorator, punctuation.definition.decorator, storage.type.annotation#a259ffitalic
ThemeDatabase All Themes by enes ozturk - VS Code Theme