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.background#0f0f10
  • activityBar.foreground#e0e0e0
  • activityBar.inactiveForeground#4a4a4d
  • activityBarBadge.background#00ffa3
  • activityBarBadge.foreground#000000
  • button.background#00ffa3
  • button.foreground#000000
  • button.hoverBackground#00e692
  • dropdown.background#1a1a1c
  • dropdown.border#2a2a2c
  • dropdown.foreground#e0e0e0
  • editor.background#0a0a0b
  • editor.findMatchBackground#00ffa355
  • editor.findMatchHighlightBackground#00ffa333
  • editor.foreground#e0e0e0
  • editor.selectionBackground#00ffa325
  • editor.selectionHighlightBackground#00ffa315
  • editor.wordHighlightBackground#00d1ff20
  • editorBracketMatch.background#00ffa325
  • editorBracketMatch.border#00ffa399
  • editorCursor.foreground#00ffa3
  • editorGutter.addedBackground#00ffa388
  • editorGutter.deletedBackground#ff4d8d88
  • editorGutter.modifiedBackground#00d1ff88
  • editorIndentGuide.activeBackground#444444
  • editorIndentGuide.background#1e1e1e
  • editorLineNumber.activeForeground#00ffa3
  • editorLineNumber.foreground#3a3a3a
  • focusBorder#00ffa360
  • input.background#1a1a1c
  • input.border#2a2a2c
  • input.foreground#e0e0e0
  • list.activeSelectionBackground#00ffa320
  • list.activeSelectionForeground#00ffa3
  • list.highlightForeground#00ffa3
  • list.hoverBackground#1a1a1c
  • panel.background#0f0f10
  • panel.border#1a1a1c
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#ffffff20
  • scrollbarSlider.background#ffffff10
  • scrollbarSlider.hoverBackground#ffffff15
  • sideBar.background#0c0c0d
  • sideBar.border#1a1a1c
  • sideBar.foreground#94a3b8
  • sideBarSectionHeader.background#121214
  • sideBarSectionHeader.foreground#e2e8f0
  • statusBar.background#0a0a0b
  • statusBar.border#1e1e20
  • statusBar.foreground#94a3b8
  • statusBar.noFolderBackground#0a0a0b
  • statusBarItem.hoverBackground#1a1a1c
  • tab.activeBackground#0a0a0b
  • tab.activeBorder#00ffa3
  • tab.activeForeground#00ffa3
  • tab.border#1a1a1c
  • tab.inactiveBackground#0f0f10
  • tab.inactiveForeground#64748b
  • terminal.ansiBrightGreen#00ffa3
  • terminal.ansiCyan#00d1ff
  • terminal.ansiGreen#00ffa3
  • terminal.background#0a0a0b
  • terminal.foreground#e0e0e0
  • titleBar.activeBackground#0f0f10
  • titleBar.activeForeground#e2e8f0
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4a5568italic
keyword, storage.type, storage.modifier#00bdff
string, punctuation.definition.string#f9d57b
constant.numeric#ff9d45
constant.language, constant.character, constant.other#ff9d45bold
variable, variable.other, variable.language, variable.parameter#9cdcfe
entity.name.function, support.function#dcdcaa
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution, support.class, support.type#c792ff
entity.name.tag, punctuation.definition.tag#7ec8e3
entity.other.attribute-name#b8cc52
support.type.property-name.css, support.type.vendored.property-name.css#9cdcfe
keyword.operator, punctuation, meta.brace, punctuation.definition.parameters, punctuation.definition.block, punctuation.separator#94a3b8
storage.type.free#00ff88bold
keyword.control.route-method.free#ff9900bold
punctuation.definition.template-expression.begin.free, punctuation.definition.template-expression.end.free#00ff88
Free Framework by Omar Tolba - VS Code Theme