Skip to main content
Coding Theme

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.activeBorder#ff6b6b
  • activityBar.background#050508
  • activityBar.foreground#00ffff
  • activityBarBadge.background#ff6b6b
  • activityBarBadge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ff6b6b
  • breadcrumb.background#0a0a0f
  • breadcrumb.focusForeground#00ffff
  • breadcrumb.foreground#8888aa
  • button.background#ff6b6b
  • button.foreground#ffffff
  • button.hoverBackground#ff8e8e
  • dropdown.background#1a1a2e
  • dropdown.border#3a3a4e
  • dropdown.foreground#e8e8f0
  • editor.background#0a0a0f
  • editor.findMatchBackground#ff6b6b50
  • editor.findMatchHighlightBackground#ffd93d30
  • editor.foreground#e8e8f0
  • editor.lineHighlightBackground#1a1a2e
  • editor.selectionBackground#2d4f67
  • editor.selectionHighlightBackground#3d3d5c
  • editor.wordHighlightBackground#4a4a6a
  • editor.wordHighlightStrongBackground#5a5a7a
  • editorCursor.foreground#00ffff
  • input.background#1a1a2e
  • input.border#3a3a4e
  • input.foreground#e8e8f0
  • inputOption.activeBorder#00ffff
  • list.activeSelectionBackground#2d4f67
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#2d4f67
  • list.hoverBackground#1e1e2e
  • list.inactiveSelectionBackground#2a2a3e
  • notificationCenter.border#3a3a4e
  • notifications.background#1a1a2e
  • notifications.foreground#e8e8f0
  • notificationToast.border#3a3a4e
  • panel.background#080810
  • panel.border#2a2a3e
  • panelTitle.activeForeground#00ffff
  • panelTitle.inactiveForeground#8888aa
  • scrollbarSlider.activeBackground#4a4a5e80
  • scrollbarSlider.background#2a2a3e80
  • scrollbarSlider.hoverBackground#3a3a4e80
  • sideBar.background#080810
  • sideBar.foreground#c8c8d0
  • sideBarSectionHeader.background#1a1a2e
  • sideBarSectionHeader.foreground#ff6b6b
  • sideBarTitle.foreground#00ffff
  • statusBar.background#050508
  • statusBar.foreground#c8c8d0
  • statusBar.noFolderBackground#050508
  • statusBarItem.hoverBackground#2a2a3e
  • statusBarItem.remoteBackground#ff6b6b
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#1a1a2e
  • tab.activeBorder#00ffff
  • tab.activeForeground#ffffff
  • tab.border#2a2a3e
  • tab.inactiveBackground#0a0a0f
  • tab.inactiveForeground#8888aa
  • terminal.ansiBlack#2a2a3e
  • terminal.ansiBlue#74c0fc
  • terminal.ansiBrightBlack#5a5a7a
  • terminal.ansiBrightBlue#a4cafe
  • terminal.ansiBrightCyan#66ffff
  • terminal.ansiBrightGreen#8cff8c
  • terminal.ansiBrightMagenta#e5d5ff
  • terminal.ansiBrightRed#ffa8a8
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe66d
  • terminal.ansiCyan#00ffff
  • terminal.ansiGreen#51fa7b
  • terminal.ansiMagenta#d0bfff
  • terminal.ansiRed#ff6b6b
  • terminal.ansiWhite#e8e8f0
  • terminal.ansiYellow#ffd93d
  • terminal.background#0a0a0f
  • terminal.foreground#00ff41
  • titleBar.activeBackground#050508
  • titleBar.activeForeground#c8c8d0
  • titleBar.inactiveBackground#050508
  • titleBar.inactiveForeground#666677

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a9955italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.other.debugger#00ffffbold
string, string.quoted, string.template#51fa7b
string.template, punctuation.definition.string.template#8cff8c
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined#ffd93d
entity.name.function, meta.function-call, support.function#ff6b6bbold
variable, variable.other, variable.parameter#74c0fc
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#ffa8a8bold
entity.name.tag.html, entity.name.tag.xml, entity.name.tag, punctuation.definition.tag.html, punctuation.definition.tag.xml, punctuation.definition.tag.begin, punctuation.definition.tag.end#ff6f2cbold
entity.name.tag.jsx, entity.name.tag.tsx, support.class.component.jsx, support.class.component.tsx, punctuation.definition.tag.jsx, punctuation.definition.tag.tsx#ff6f2cbold
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#00ffff
entity.other.attribute-name.html#ffd93d
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff6b6b
support.type.property-name.css#74c0fc
support.constant.property-value.css, constant.numeric.css#51fa7b
support.type.property-name.json#74c0fc
keyword.operator, punctuation.separator, punctuation.terminator#ff8e8e
punctuation.definition, punctuation.section, meta.brace#c8c8d0
keyword.control.import, keyword.control.export, keyword.control.from#d0bfffbold
constant.language, support.constant, variable.language.this#ffd93dbold
Dark Aura Theme by Furqan - VS Code Theme