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#2B3E52
  • activityBar.background#2B3E52
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#aaaaaa
  • activityBarBadge.background#007acc
  • breadcrumb.activeSelectionForeground#eeeeee
  • breadcrumb.foreground#A6B7C2
  • button.background#2B3E52
  • button.foreground#eeeeee
  • button.hoverBackground#3A536B
  • editor.background#122033
  • editor.fontFamily'Fira Code', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'
  • editor.fontLigatures
  • editor.fontSize14
  • editor.foreground#eeffff
  • editor.lineHeight22
  • editor.lineHighlightBackground#25313D
  • editor.selectionBackground#3B5A6D
  • editorCursor.foreground#ffffff
  • editorGroupHeader.tabsBackground#122033
  • editorGutter.addedBackground#4A7B85
  • editorGutter.background#122033
  • editorGutter.deletedBackground#853B34
  • editorGutter.modifiedBackground#7B4A85
  • editorRuler.foreground#5e6e77
  • editorWhitespace.foreground#404040
  • input.background#2A3A49
  • input.border#4A5A66
  • input.foreground#D1D1D1
  • inputOption.activeBorder#007acc
  • list.activeSelectionBackground#2B3E52
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#3E5362
  • list.focusForeground#ffffff
  • list.highlightForeground#60A0C1
  • list.hoverBackground#3A4C62
  • list.inactiveSelectionBackground#212E39
  • list.inactiveSelectionForeground#A6B7C2
  • menu.border#3E5362
  • menu.foreground#D1D1D1
  • menu.selectionBackground#2B3E52
  • menu.selectionForeground#ffffff
  • menuBar.background#101C2C
  • panel.background#2A3A49
  • panel.border#3E5362
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#A6B7C2
  • sideBar.background#101C2C
  • sideBar.foreground#d1d1d1
  • sideBarSectionHeader.background#2A3A49
  • sideBarSectionHeader.foreground#D1D1D1
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#2B3E52
  • statusBar.foreground#eeeeee
  • statusBarItem.activeBackground#3A536B
  • statusBarItem.hoverBackground#2B3E52
  • tab.activeBackground#2b4c7b8a
  • tab.inactiveBackground#122033
  • titleBar.activeBackground#122033
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#1A2A3A
  • titleBar.inactiveForeground#bbbbbb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0B0B9italic
variable, string constant.other.placeholder#A0C4C7
constant.other.color#D0D0D0
invalid, invalid.illegal#FF6C6C
keyword, storage.type, storage.modifier#A1A9F1
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#A3C8DD
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#88D3A9
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#E1D67A
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#D2A46C
JalDokan - Themes by JaLDokan - VS Code Theme