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#353535
  • activityBar.border#353535
  • activityBar.dropBackground#6C95EB80
  • activityBar.foreground#D0D0D0
  • activityBarBadge.background#6C95EB
  • activityBarBadge.foreground#ffffff
  • badge.background#6C95EB
  • badge.foreground#ffffff
  • button.background#6C95EB
  • button.foreground#ffffff
  • debugToolBar.background#353535
  • dropdown.background#3c3c3c
  • editor.background#262626
  • editor.foreground#D0D0D0
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorError.foreground#FF5647
  • editorGroup.dropBackground#6C95EB80
  • editorGroup.focusedEmptyBorder#6C95EB
  • editorGroupHeader.tabsBackground#2d2d2d
  • editorGroupHeader.tabsBorder#2d2d2d
  • editorHoverWidget.background#2d2d2d
  • editorLineNumber.activeForeground#6C95EB
  • editorLineNumber.foreground#D0D0D0
  • editorMarkerNavigation.background#2d2d2d
  • editorWarning.foreground#F5D86A
  • editorWidget.background#2d2d2d
  • focusBorder#6C95EB
  • foreground#D0D0D0
  • input.background#3c3c3c
  • inputOption.activeBorder#6C95EB
  • list.activeSelectionBackground#6C95EB80
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#6C95EB80
  • list.focusBackground#6C95EB80
  • list.focusForeground#FFFFFF
  • list.highlightForeground#6C95EB
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#2d2d2d
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#D0D0D080
  • panelTitle.inactiveForeground#D0D0D080
  • peekView.border#6C95EB
  • peekViewEditor.background#1e1e1e
  • peekViewResult.background#2d2d2d
  • peekViewTitle.background#262626
  • pickerGroup.border#FFFFFF1a
  • selection.background#6C95EB
  • sideBar.background#2d2d2d
  • sideBar.border#2d2d2d
  • sideBarSectionHeader.background#353535
  • statusBar.background#1e1e1e
  • statusBar.debuggingBackground#6C95EB
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#D0D0D0
  • statusBar.noFolderBackground#1e1e1e
  • statusBarItem.activeBackground#6C95EB80
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#6C95EB
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorder#6C95EB
  • tab.activeModifiedBorder#6C95EB
  • tab.border#00000033
  • tab.inactiveBackground#353535
  • tab.inactiveModifiedBorder#40598d
  • tab.unfocusedActiveModifiedBorder#5677bc
  • tab.unfocusedInactiveModifiedBorder#40598d
  • titleBar.activeBackground#1e1e1e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#D0D0D0
string#C9A26D
punctuation, constant.other.symbol#D0D0D0
constant.character.escape, text.html constant.character.entity.named#FF5647
constant.language.boolean#ED94C0
constant.numeric#ED94C0
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#D0D0D0
keyword.other#6C95EB
keyword, modifier, variable.language.this, support.type.object, constant.language#6C95EB
entity.name.function, support.function#39CC8F
storage.type, storage.modifier, storage.control#6C95EB
support.module, support.node#D0D0D0italic
support.type, constant.other.key#39CC8F
entity.name.type, entity.other.inherited-class, entity.other#39CC8F
comment#85C46Citalic
comment punctuation.definition.comment, string.quoted.docstring#85C46Citalic
punctuation#D0D0D0
entity.name, entity.name.type.class, support.type, support.class, meta.use#C191FF
variable.object.property, meta.field.declaration entity.name.function#39CC8F
meta.definition.method entity.name.function#39CC8F
meta.function entity.name.function#39CC8F
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#6C95EB
meta.embedded, source.groovy.embedded, meta.template.expression#D0D0D0
entity.name.tag.yaml#D0D0D0
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#D0D0D0
constant.language.json#6C95EB
entity.other.attribute-name.class#6C95EB
entity.other.attribute-name.id#C9A26D
source.css entity.name.tag#39CC8F
support.type.property-name.css#39CC8F
meta.tag, punctuation.definition.tag#6C95EB
entity.name.tag#D0D0D0
entity.other.attribute-name#6C95EB
punctuation.definition.entity.html#FF5647
markup.heading#6C95EB
text.html.markdown meta.link.inline, meta.link.reference#D0D0D0
text.html.markdown beginning.punctuation.definition.list#6C95EB
markup.italic#D0D0D0italic
markup.bold#D0D0D0bold
markup.bold markup.italic, markup.italic markup.bold#D0D0D0italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#C9A26D
markup.inline.raw.string.markdown#C9A26D
keyword.other.definition.ini#D0D0D0
entity.name.section.group-title.ini#6C95EB
source.cs meta.class.identifier storage.type#C191FF
source.cs meta.method.identifier entity.name.function#39CC8F
source.cs meta.method-call meta.method, source.cs entity.name.function#39CC8F
source.cs storage.type#39CC8F
source.cs meta.method.return-type#39CC8F
source.cs meta.preprocessor#85C46C
source.cs entity.name.type.namespace#D0D0D0
meta.jsx.children, SXNested#D0D0D0
support.class.component#39CC8F
source.cpp meta.block variable.other#D0D0D0
source.python meta.member.access.python#D0D0D0
source.python meta.function-call.python, meta.function-call.arguments#39CC8F
meta.block#D0D0D0
entity.name.function.call#39CC8F
source.php support.other.namespace, source.php meta.use support.class#D0D0D0
constant.keyword#6C95EBitalic
entity.name.function#39CC8F
Global settings#D0D0D0
punctuation.definition.string#C9A26D
meta.tag, entity.name.tag, support.class.component, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.type#C191FF
entity.other.attribute-name.tsx, meta.tag.attributes.tsx#85C46C
entity.name.type.namespace.cs, entity.name.type.interface#C191FF
variable.other.property, entity.name.variable.field, meta.object-literal.key#66C3CC
variable.other.constant#66C3CC
entity.name.variable, entity.other.attribute-name, keyword.operator#D0D0D0
comment.documentation.name, comment.documentation.attribute.name#487D34
comment.documentation.attribute.value#C9A26D

Shiki preview

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

Loading...