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#23262E
  • activityBar.foreground#F3F4F6
  • button.background#3E4351
  • button.foreground#F3F4F6
  • button.hoverBackground#353945
  • checkbox.background#3E4351
  • checkbox.border#23262E
  • checkbox.foreground#F3F4F6
  • editor.background#272A33
  • editor.foreground#F3F4F6
  • editor.lineHighlightBackground#23262E
  • editor.selectionBackground#62697F
  • editorCursor.foreground#F3F4F6
  • editorGroupHeader.tabsBackground#23262E
  • editorWhitespace.foreground#474C5C
  • input.background#23262E
  • list.activeSelectionBackground#23262E
  • panel.background#272A33
  • settings.dropdownBackground#353945
  • settings.dropdownBorder#23262E
  • settings.dropdownForeground#F3F4F6
  • sideBar.background#272A33
  • sideBar.dropBackground#23262E
  • sideBar.foreground#F3F4F6
  • sideBarSectionHeader.background#23262E
  • sideBarSectionHeader.foreground#F3F4F6
  • statusBar.background#23262E
  • statusBar.border#23262E
  • statusBar.debuggingBackground#23262E
  • statusBar.debuggingBorder#23262E
  • statusBar.debuggingForeground#F3F4F6
  • statusBar.foreground#F3F4F6
  • statusBar.noFolderBackground#272A33
  • statusBar.noFolderForeground#F3F4F6
  • statusBarItem.prominentBackground#ffca7a
  • statusBarItem.prominentHoverBackground#ffee7a
  • tab.inactiveBackground#353945
  • tab.inactiveForeground#F3F4F6
  • titleBar.activeBackground#23262E
  • titleBar.activeForeground#F3F4F6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6A728A italic
string#85B6FF
constant.numeric#EFA9EF
constant.language#EFA9EF
constant.character, constant.other#EFA9EF
variable#39FFBA
keyword#FF476E
storage#FF476E
storage.type#01F7F7italic
entity.name.class#39FFBAunderline
entity.other.inherited-class#FFEE7Aitalic underline
entity.name.function#FF476E
variable.parameter#FFEE7Aitalic
entity.name.tag#FF476E
entity.other.attribute-name#39FFBA
support.function#39FFBA
support.constant#FFEE7A
support.type, support.class#39FFBAitalic
support.other.variable#FFEE7A
invalid#F8F8F0
invalid.deprecated#F8F8F0
invalid.illegal#F8F8F0
source.js meta.brace.curly.js, source.js meta.function.js punctuation.definition.parameters.begin.js, source.js meta.function.js punctuation.definition.parameters.end.js, source.js meta.brace.round.js, source.js meta.delimiter.object.comma.js#474C5C
source.python meta.class.python punctuation.definition.inheritance.begin.python, source.python meta.class.python punctuation.definition.inheritance.end.python, source.python meta.function.python punctuation.definition.parameters.begin.python, source.python meta.function.python punctuation.definition.parameters.end.python, source.python meta.function-call.python punctuation.definition.arguments.begin.python, source.python meta.function-call.python punctuation.definition.arguments.end.python, source.python meta.function.python meta.function.parameters.python punctuation.separator.parameters.python#474C5C
source.ruby meta.function.method.with-arguments.ruby punctuation.definition.parameters.ruby, source.ruby punctuation.section.array.ruby, source.ruby punctuation.section.function.ruby, source.ruby meta.require.ruby meta.environment-variable.ruby, source.ruby punctuation.separator.variable.ruby#474C5C
markup.strike#ffca7aitalic
meta.link.inline, meta.link.reference#01f7f7bold
markup.bold#ffca7abold
markup.italic#ffca7aitalic
markup.heading#39ffbabold
punctuation.definition.list_item.markdown#EFA9EF
markup.quote#85B6FFitalic
punctuation.definition.blockquote.markdown#85B6FFitalic
meta.separator#858db7
text.html.markdown markup.raw.inline#39ffba
text.html.markdown markup.raw.inline#ffca7aunderline
markup.raw.block#39ffba
markup.raw.block.fenced.markdown source#F3F4F6
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#858db7italic
variable.language.fenced.markdown#858db7italic
punctuation.accessor#EFA9EF
meta.function.return-type#EFA9EF
punctuation.section.block.begin#F3F4F6
punctuation.section.block.end#F3F4F6
punctuation.section.embedded.begin#EFA9EF
punctuation.section.embedded.end#EFA9EF
punctuation.separator.namespace#EFA9EF
variable.function#39ffba
variable.other#F3F4F6
variable.language#EFA9EF
entity.name.module.ruby#85B6FF
entity.name.constant.ruby#EFA9EF
support.function.builtin.ruby#F3F4F6
storage.type.namespace.cs#EFA9EF
entity.name.namespace.cs#85B6FF
Yami by houssaineamzil - VS Code Theme