Skip to main content
Coding Theme

Color themes

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#ffffff
  • activityBar.dropBackground#f7768e80
  • activityBarBadge.background#f7768e
  • activityBarBadge.foreground#ffffff
  • badge.background#f7768e
  • badge.foreground#ffffff
  • button.background#f7768e
  • button.foreground#ffffff
  • debugToolBar.background#ffffff
  • dropdown.background#ffffff
  • editor.background#c0caf5
  • editor.foreground#1a1b26
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorGroup.dropBackground#f7768e80
  • editorGroup.focusedEmptyBorder#f7768e
  • editorGroupHeader.tabsBackground#e6f2ff
  • editorHoverWidget.background#e6f2ff
  • editorLineNumber.activeForeground#f7768e
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#e6f2ff
  • editorWidget.background#e6f2ff
  • focusBorder#f7768e
  • foreground#1a1b26
  • input.background#ffffff
  • inputOption.activeBorder#f7768e
  • list.activeSelectionBackground#f7768e80
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#f7768e80
  • list.focusBackground#f7768e80
  • list.focusForeground#FFFFFF
  • list.highlightForeground#f7768e
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • notebook.focusedCellBorder#f7768e
  • notebook.inactiveFocusedCellBorder#f7768e80
  • panel.background#e6f2ff
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#1a1b2680
  • panelTitle.inactiveForeground#1a1b2680
  • peekView.border#f7768e
  • peekViewEditor.background#99a1c4
  • peekViewResult.background#e6f2ff
  • peekViewTitle.background#c0caf5
  • pickerGroup.border#FFFFFF1a
  • selection.background#f7768e
  • sideBar.background#e6f2ff
  • sideBarSectionHeader.background#ffffff
  • statusBar.background#99a1c4
  • statusBar.debuggingBackground#f7768e
  • statusBar.debuggingForeground#ffffff
  • statusBar.noFolderBackground#99a1c4
  • statusBarItem.activeBackground#f7768e80
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#f7768e
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorder#f7768e
  • tab.activeModifiedBorder#f7768e
  • tab.border#00000033
  • tab.inactiveBackground#ffffff
  • tab.inactiveModifiedBorder#944655
  • tab.unfocusedActiveModifiedBorder#c55e71
  • tab.unfocusedInactiveModifiedBorder#944655
  • titleBar.activeBackground#99a1c4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#1a1b26
string#9ece6a
punctuation, constant.other.symbol#f7768e
constant.character.escape, text.html constant.character.entity.named#edff9f
constant.language.boolean#f7768e
constant.numeric#7aa2f7
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#f7768e
keyword, modifier, variable.language.this, support.type.object, constant.language#f7768e
entity.name.function, support.function#7aa2f7
storage.type, storage.modifier, storage.control#f7768e
support.module, support.node#ffb1d5italic
support.type, constant.other.key#e0af68
entity.name.type, entity.other.inherited-class, entity.other#e0af68
comment#ffffffitalic
comment punctuation.definition.comment, string.quoted.docstring#ffffffitalic
punctuation#f7768e
entity.name, entity.name.type.class, support.type, support.class, meta.use#e0af68
variable.object.property, meta.field.declaration entity.name.function#e0af68
meta.definition.method entity.name.function#e0af68
meta.function entity.name.function#e0af68
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#f7768e
meta.embedded, source.groovy.embedded, meta.template.expression#1a1b26
entity.name.tag.yaml#ffb1d5
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#ffb1d5
constant.language.json#f7768e
entity.other.attribute-name.class#f7768e
entity.other.attribute-name.id#9ece6a
source.css entity.name.tag#e0af68
support.type.property-name.css#7aa2f7
meta.tag, punctuation.definition.tag#f7768e
entity.name.tag#ffb1d5
entity.other.attribute-name#f7768e
punctuation.definition.entity.html#edff9f
markup.heading#f7768e
text.html.markdown meta.link.inline, meta.link.reference#ffb1d5
text.html.markdown beginning.punctuation.definition.list#f7768e
markup.italic#ffb1d5italic
markup.bold#ffb1d5bold
markup.bold markup.italic, markup.italic markup.bold#ffb1d5italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#9ece6a
markup.inline.raw.string.markdown#9ece6a
keyword.other.definition.ini#ffb1d5
entity.name.section.group-title.ini#f7768e
source.cs meta.class.identifier storage.type#e0af68
source.cs meta.method.identifier entity.name.function#e0af68
source.cs meta.method-call meta.method, source.cs entity.name.function#7aa2f7
source.cs storage.type#e0af68
source.cs meta.method.return-type#e0af68
source.cs meta.preprocessor#ffffff
source.cs entity.name.type.namespace#1a1b26
meta.jsx.children, SXNested#1a1b26
support.class.component#e0af68
source.cpp meta.block variable.other#1a1b26
source.python meta.member.access.python#ffb1d5
source.python meta.function-call.python, meta.function-call.arguments#7aa2f7
meta.block#ffb1d5
entity.name.function.call#e0af68
source.php support.other.namespace, source.php meta.use support.class#1a1b26
constant.keyword#f7768eitalic
entity.name.function#e0af68
Global settings#1a1b26
Tokyo Night NE by NoahELE - VS Code Theme