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.

  • button.background#007ACC
  • button.foreground#FFFFFF
  • button.hoverBackground#0080D6
  • dropdown.background#DCDDE0
  • dropdown.foreground#000000
  • dropdown.listBackground#DADBDE
  • editor.background#DCDDE0
  • editor.foreground#000000
  • editor.lineHighlightBackground#D0D1D4
  • editor.lineHighlightBorder#D0D1D4
  • editor.selectionBackground#A3A3A3
  • editorGroup.border#C6C7C9
  • editorGroupHeader.noTabsBackground#C6C7C9
  • editorGroupHeader.tabsBackground#C6C7C9
  • editorGroupHeader.tabsBorder#C6C7C9
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#BABBBC
  • editorSuggestWidget.highlightForeground#007ACC
  • editorSuggestWidget.selectedBackground#E1E1E1
  • editorWidget.background#E9EAEE
  • editorWidget.border#000000
  • focusBorder#E9EAEE00
  • foreground#000000
  • input.background#E9EAEE
  • input.border#b2b2b2
  • inputOption.activeBorder#000000
  • inputOption.activeForeground#000000
  • list.activeSelectionBackground#dfdfdf
  • list.activeSelectionForeground#297ACC
  • list.focusBackground#D3D4D6
  • list.focusForeground#204F99
  • list.highlightForeground#3075E3
  • list.hoverBackground#dfdfdf
  • list.hoverForeground#3075E3
  • list.inactiveSelectionBackground#dfdfdf
  • list.inactiveSelectionForeground#3075E3
  • menu.background#3A3A3A
  • menu.border#223759
  • menu.foreground#FFFFFF
  • menu.selectionBackground#297ACC
  • menu.selectionBorder#56ABFF
  • menu.selectionForeground#ffffff
  • menubar.selectionBackground#333333
  • notificationCenter.border#E9EAEE
  • notificationCenterHeader.background#E9EAEE
  • notifications.background#E9EAEE
  • notifications.border#E9EAEE
  • notificationToast.border#E9EAEE
  • panel.border#007ACC
  • scrollbar.shadow#E9EAEE
  • scrollbarSlider.activeBackground#084d8180
  • scrollbarSlider.background#084d8180
  • scrollbarSlider.hoverBackground#084d8180
  • sideBar.background#C6C7C9
  • sideBar.border#C6C7C9
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#B2B3B5
  • sideBarSectionHeader.border#B2B3B5
  • sideBarSectionHeader.foreground#000000
  • sideBarTitle.foreground#006E8C
  • statusBar.background#000000
  • statusBar.border#000000
  • statusBar.debuggingBackground#000000
  • statusBar.debuggingForeground#E9EAEE
  • statusBar.foreground#E9EAEE
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#E9EAEE
  • tab.activeBackground#D8D9DB
  • tab.activeBorder#007ACC
  • tab.activeForeground#000000
  • tab.border#C6C7C9
  • tab.inactiveBackground#C6C7C9
  • tab.inactiveForeground#000000
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#E9EAEE
  • titleBar.border#3A3A3A
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#E9EAEE

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring.multi.python#888786italic
comment.block.preprocessor#006e28
string.regexp.quoted.single.python#640611
variable.other.enummember#862A3C
comment.documentation, comment.block.documentation#757474
invalid.illegal#bf0303
keyword.operator#000000
entity.name.scope-resolution, punctuation.separator.scope-resolution#6B2841
keyword, storage#000000
keyword.control#000000
keyword.control.import.python#006e28
storage.type, support.type#0157AE
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.fl#007D54
constant.language, support.constant, variable.language#49664D
variable#87A770
variable.other#AE7D02
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#443069
entity.name.function, entity.name.function.call#21005A
entity.name.function.definition#21005Abold
meta.body.function.definition#005912
meta.function-call.python#05037c
constant.language.python#3a5800
entity.name.type, entity.other.inherited-class, support.class#007DD6
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#B88401
string#7A0202
constant.character.escape#3daee9
string.regexp#ff5500
constant.other.symbol#21005A
punctuation#21005A
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#91B3E0
entity.name.tag#4B83CD
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#91B3E0italic
constant.character.entity, punctuation.definition.entity#AB6526
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#7A3E9D
meta.property-name, support.type.property-name#AB6526
meta.property-value, meta.property-value constant.other, support.constant.property-value#448C27
keyword.other.important#180404
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#bf0303
markup.inserted#000000
meta.link#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B83CD
markup.bold, markup.italic#448C27
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

SteelFox Theme - Coding Theme