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#2a2a2a
  • activityBar.border#353535
  • activityBar.dropBackground#569CD680
  • activityBar.foreground#D0D0D0
  • activityBarBadge.background#569CD6
  • activityBarBadge.foreground#ffffff
  • badge.background#569CD6
  • badge.foreground#ffffff
  • button.background#569CD6
  • button.foreground#ffffff
  • debugToolBar.background#2a2a2a
  • dropdown.background#303030
  • editor.background#1E1E1E
  • editor.foreground#DCDCDC
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorError.foreground#FF5647
  • editorGroup.dropBackground#569CD680
  • editorGroup.focusedEmptyBorder#569CD6
  • editorGroupHeader.tabsBackground#242424
  • editorGroupHeader.tabsBorder#2d2d2d
  • editorHoverWidget.background#242424
  • editorLineNumber.activeForeground#A4A3A3
  • editorLineNumber.foreground#2B91AF
  • editorMarkerNavigation.background#242424
  • editorWarning.foreground#F5D86A
  • editorWidget.background#242424
  • focusBorder#569CD6
  • foreground#DCDCDC
  • input.background#303030
  • inputOption.activeBorder#569CD6
  • list.activeSelectionBackground#569CD680
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#569CD680
  • list.focusBackground#569CD680
  • list.focusForeground#FFFFFF
  • list.highlightForeground#569CD6
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#242424
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#DCDCDC80
  • panelTitle.inactiveForeground#DCDCDC80
  • peekView.border#569CD6
  • peekViewEditor.background#181818
  • peekViewResult.background#242424
  • peekViewTitle.background#1E1E1E
  • pickerGroup.border#FFFFFF1a
  • selection.background#569CD6
  • sideBar.background#242424
  • sideBar.border#2d2d2d
  • sideBarSectionHeader.background#2a2a2a
  • statusBar.background#181818
  • statusBar.debuggingBackground#569CD6
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#DCDCDC
  • statusBar.noFolderBackground#181818
  • statusBarItem.activeBackground#569CD680
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#569CD6
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorder#569CD6
  • tab.activeModifiedBorder#569CD6
  • tab.border#00000033
  • tab.inactiveBackground#2a2a2a
  • tab.inactiveModifiedBorder#335d80
  • tab.unfocusedActiveModifiedBorder#447cab
  • tab.unfocusedInactiveModifiedBorder#335d80
  • titleBar.activeBackground#181818

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#DCDCDC
string#D69D85
punctuation, constant.other.symbol#DCDCDC
constant.character.escape, text.html constant.character.entity.named#E07A00
constant.language.boolean#DDA0DD
constant.numeric#B5CEA8
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#DCDCDC
keyword.other#569CD6
keyword, modifier, variable.language.this, support.type.object, constant.language#569CD6
entity.name.function, support.function#00FFFF
storage.type, storage.modifier, storage.control#569CD6
support.module, support.node#DDA0DDitalic
support.type, constant.other.key#00FFFF
entity.name.type, entity.other.inherited-class, entity.other#00FFFF
comment#57A64Aitalic
comment punctuation.definition.comment, string.quoted.docstring#57A64Aitalic
punctuation#DCDCDC
entity.name, entity.name.type.class, support.type, support.class, meta.use#ADD8E6
variable.object.property, meta.field.declaration entity.name.function#00FFFF
meta.definition.method entity.name.function#00FFFF
meta.function entity.name.function#00FFFF
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#569CD6
meta.embedded, source.groovy.embedded, meta.template.expression#DCDCDC
entity.name.tag.yaml#DDA0DD
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#DDA0DD
constant.language.json#569CD6
entity.other.attribute-name.class#569CD6
entity.other.attribute-name.id#D69D85
source.css entity.name.tag#00FFFF
support.type.property-name.css#00FFFF
meta.tag, punctuation.definition.tag#569CD6
entity.name.tag#DDA0DD
entity.other.attribute-name#569CD6
punctuation.definition.entity.html#E07A00
markup.heading#569CD6
text.html.markdown meta.link.inline, meta.link.reference#DDA0DD
text.html.markdown beginning.punctuation.definition.list#569CD6
markup.italic#DDA0DDitalic
markup.bold#DDA0DDbold
markup.bold markup.italic, markup.italic markup.bold#DDA0DDitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#D69D85
markup.inline.raw.string.markdown#D69D85
keyword.other.definition.ini#DDA0DD
entity.name.section.group-title.ini#569CD6
source.cs meta.class.identifier storage.type#ADD8E6
source.cs meta.method.identifier entity.name.function#00FFFF
source.cs meta.method-call meta.method, source.cs entity.name.function#00FFFF
source.cs storage.type#00FFFF
source.cs meta.method.return-type#00FFFF
source.cs meta.preprocessor#57A64A
source.cs entity.name.type.namespace#DCDCDC
meta.jsx.children, SXNested#DCDCDC
support.class.component#00FFFF
source.cpp meta.block variable.other#DCDCDC
source.python meta.member.access.python#DDA0DD
source.python meta.function-call.python, meta.function-call.arguments#00FFFF
meta.block#DDA0DD
entity.name.function.call#00FFFF
source.php support.other.namespace, source.php meta.use support.class#DCDCDC
constant.keyword#569CD6italic
entity.name.function#00FFFF
Global settings#DCDCDC
punctuation.definition.string#D69D85
meta.tag, entity.name.tag, support.class.component, punctuation.definition.tag.begin, punctuation.definition.tag.end#E8BF6A
entity.other.attribute-name.tsx, meta.tag.attributes.tsx#DCDCDC
entity.name.type.namespace.cs, entity.name.type.interface, entity.name.type#ADD8E6
variable.other.property, entity.name.variable.field, meta.object-literal.key#EE82EE
variable.other.constant#EE82EEbold
entity.name.variable, entity.other.attribute-name, keyword.operator#DCDCDC
comment.documentation.name#DCDCDC
comment.documentation.attribute.name#A3A3A3
comment.documentation.attribute.value#D69D85

Shiki preview

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

Loading...

Rider IDE Themes - Coding Theme