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.border#D0D0D0
  • activityBar.dropBackground#0F54D680
  • activityBar.foreground#202020
  • activityBarBadge.background#0F54D6
  • activityBarBadge.foreground#ffffff
  • badge.background#0F54D6
  • badge.foreground#ffffff
  • button.background#0F54D6
  • button.foreground#ffffff
  • debugToolBar.background#ffffff
  • dropdown.background#ffffff
  • editor.background#FFFFFF
  • editor.foreground#202020
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorError.foreground#D91400
  • editorGroup.dropBackground#0F54D680
  • editorGroup.focusedEmptyBorder#0F54D6
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#D0D0D0
  • editorHoverWidget.background#ffffff
  • editorLineNumber.activeForeground#0F54D6
  • editorLineNumber.foreground#202020
  • editorMarkerNavigation.background#ffffff
  • editorWarning.foreground#826A00
  • editorWidget.background#ffffff
  • focusBorder#0F54D6
  • foreground#202020
  • input.background#ffffff
  • inputOption.activeBorder#0F54D6
  • list.activeSelectionBackground#0F54D680
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#0F54D680
  • list.focusBackground#0F54D680
  • list.focusForeground#FFFFFF
  • list.highlightForeground#0F54D6
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#ffffff
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#20202080
  • panelTitle.inactiveForeground#20202080
  • peekView.border#0F54D6
  • peekViewEditor.background#cccccc
  • peekViewResult.background#ffffff
  • peekViewTitle.background#FFFFFF
  • pickerGroup.border#FFFFFF1a
  • selection.background#0F54D6
  • sideBar.background#ffffff
  • sideBar.border#D0D0D0
  • sideBarSectionHeader.background#ffffff
  • statusBar.background#cccccc
  • statusBar.debuggingBackground#0F54D6
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#2d2d2d
  • statusBar.noFolderBackground#cccccc
  • statusBarItem.activeBackground#0F54D680
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#0F54D6
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorder#0F54D6
  • tab.activeModifiedBorder#0F54D6
  • tab.border#00000033
  • tab.inactiveBackground#ffffff
  • tab.inactiveModifiedBorder#093280
  • tab.unfocusedActiveModifiedBorder#0c43ab
  • tab.unfocusedInactiveModifiedBorder#093280
  • titleBar.activeBackground#cccccc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#202020
string#8C6C41
punctuation, constant.other.symbol#202020
constant.character.escape, text.html constant.character.entity.named#D91400
constant.language.boolean#AB2F6B
constant.numeric#AB2F6B
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#202020
keyword.other#0F54D6
keyword, modifier, variable.language.this, support.type.object, constant.language#0F54D6
entity.name.function, support.function#00855F
storage.type, storage.modifier, storage.control#0F54D6
support.module, support.node#202020italic
support.type, constant.other.key#00855F
entity.name.type, entity.other.inherited-class, entity.other#00855F
comment#248700italic
comment punctuation.definition.comment, string.quoted.docstring#248700italic
punctuation#202020
entity.name, entity.name.type.class, support.type, support.class, meta.use#6B2FBA
variable.object.property, meta.field.declaration entity.name.function#00855F
meta.definition.method entity.name.function#00855F
meta.function entity.name.function#00855F
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#0F54D6
meta.embedded, source.groovy.embedded, meta.template.expression#202020
entity.name.tag.yaml#202020
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#202020
constant.language.json#0F54D6
entity.other.attribute-name.class#0F54D6
entity.other.attribute-name.id#8C6C41
source.css entity.name.tag#00855F
support.type.property-name.css#00855F
meta.tag, punctuation.definition.tag#0F54D6
entity.name.tag#202020
entity.other.attribute-name#0F54D6
punctuation.definition.entity.html#D91400
markup.heading#0F54D6
text.html.markdown meta.link.inline, meta.link.reference#202020
text.html.markdown beginning.punctuation.definition.list#0F54D6
markup.italic#202020italic
markup.bold#202020bold
markup.bold markup.italic, markup.italic markup.bold#202020italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#8C6C41
markup.inline.raw.string.markdown#8C6C41
keyword.other.definition.ini#202020
entity.name.section.group-title.ini#0F54D6
source.cs meta.class.identifier storage.type#6B2FBA
source.cs meta.method.identifier entity.name.function#00855F
source.cs meta.method-call meta.method, source.cs entity.name.function#00855F
source.cs storage.type#00855F
source.cs meta.method.return-type#00855F
source.cs meta.preprocessor#248700
source.cs entity.name.type.namespace#202020
meta.jsx.children, SXNested#202020
support.class.component#00855F
source.cpp meta.block variable.other#202020
source.python meta.member.access.python#202020
source.python meta.function-call.python, meta.function-call.arguments#00855F
meta.block#202020
entity.name.function.call#00855F
source.php support.other.namespace, source.php meta.use support.class#202020
constant.keyword#0F54D6italic
entity.name.function#00855F
Global settings#202020
punctuation.definition.string#8C6C41
meta.tag, entity.name.tag, support.class.component, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.type#6B2FBA
entity.other.attribute-name.tsx, meta.tag.attributes.tsx#248700
entity.name.type.namespace.cs, entity.name.type.interface#6B2FBA
variable.other.property, entity.name.variable.field, meta.object-literal.key#0093A1
variable.other.constant#0093A1
entity.name.variable, entity.other.attribute-name, keyword.operator#202020
comment.documentation.name, comment.documentation.attribute.name#487D34
comment.documentation.attribute.value#8C6C41

Shiki preview

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

Loading...

Rider IDE Themes - Coding Theme