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#FF0033
  • activityBar.background#f1f1f1
  • activityBar.foreground#070038
  • activityBar.inactiveForeground#888888
  • activityBarBadge.background#FF0033
  • activityBarBadge.foreground#ffffff
  • button.background#FF0033
  • button.foreground#FFFFFF
  • button.hoverBackground#D9002B
  • dropdown.background#FFFFFF
  • dropdown.border#D8D8D8
  • dropdown.foreground#070038
  • editor.background#ffffff
  • editor.foreground#070038
  • editor.lineHighlightBackground#FFF2B3
  • editor.selectionBackground#C2E7FF
  • editorCursor.foreground#FF0033
  • editorGroup.border#E0E0E0
  • editorGroupHeader.tabsBackground#F7F7F7
  • editorIndentGuide.background1#D0D0D0
  • focusBorder#FF0033
  • input.background#FFFFFF
  • input.border#D8D8D8
  • input.foreground#070038
  • inputOption.activeBorder#FF0033
  • list.activeSelectionBackground#EAF6FF
  • list.activeSelectionForeground#070038
  • list.focusBackground#EAF6FF
  • list.hoverBackground#F4F4F4
  • panel.background#FFFFFF
  • panel.border#E0E0E0
  • panelTitle.activeForeground#070038
  • panelTitle.inactiveForeground#666666
  • scrollbarSlider.activeBackground#00000044
  • scrollbarSlider.background#00000022
  • scrollbarSlider.hoverBackground#00000033
  • sideBar.background#FFFFFF
  • sideBar.border#E0E0E0
  • sideBar.foreground#070038
  • sideBarSectionHeader.background#F7F7F7
  • sideBarSectionHeader.foreground#070038
  • sideBarTitle.foreground#070038
  • statusBar.background#FFFFFF
  • statusBar.border#E0E0E0
  • statusBar.debuggingBackground#FF0033
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#070038
  • tab.activeBackground#FFFFFF
  • tab.activeBorderTop#FF0033
  • tab.activeForeground#070038
  • tab.border#E0E0E0
  • tab.inactiveBackground#F7F7F7
  • tab.inactiveForeground#666666
  • terminal.background#FFFFFF
  • terminal.foreground#070038
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#070038
  • titleBar.inactiveBackground#FFFFFF
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag.html#FF0000
entity.other.attribute-name.html#00A72A
string.quoted.double.html, string.quoted.single.html#0061F1
comment.block.html, comment.line.html#999999italic
punctuation.definition.tag#070038
support.type.property-name.css, support.type.property-name.scss, meta.attribute.style.html source.css#A626A4
support.constant.property-value.css, constant.numeric.css, constant.other.color.hex.css#FF7700
source.js variable, source.js variable.other.readwrite, source.jsx variable, source.jsx variable.other.readwrite#070038
source.js keyword, source.js storage.type, source.js storage.modifier, source.js keyword.control.async, source.js keyword.control.await, source.js keyword.control.import, source.js keyword.control.export, source.jsx keyword, source.jsx storage.type, source.jsx storage.modifier#A626A4
source.js entity.name.function, source.js support.function, source.js meta.function-call, source.jsx entity.name.function, source.jsx meta.function-call#0044FF
source.js variable.parameter, source.jsx variable.parameter#070038
source.js variable.language.this, source.jsx variable.language.this#A64000
source.js variable.other.property, source.js variable.other.object.property, source.jsx variable.other.property, source.jsx variable.other.object.property#00AAFF
source.python, variable, variable.other.readwrite#070038
keyword, storage.type, storage.modifier#A626A4
entity.name.function, support.function, meta.function-call.generic#0044FF
variable.parameter#A64000
variable.other.object.property, meta.attribute.python#00AAFF
string#00A72A
constant.numeric#FF6400
constant.language, constant.other#01C7F3
keyword.operator, punctuation#A64000
comment, punctuation.definition.comment#999999italic
support.type.python#FF008C
storage.type.sql, support.type.sql, keyword.type.sql, storage.type.numeric.sql, storage.type.string.sql#FF6600
source.sql keyword, keyword.other.sql, keyword.control.sql#A626A4
source.sql constant.other.table-name#070038
source.sql variable.other, source.sql meta.column#009999
source.sql support.function#0044FFitalic
EDUSER Light Theme by EDUSER - VS Code Theme