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#a2a2a5
  • activityBar.dropBackground#FFFFFF80
  • activityBarBadge.background#ffff62
  • activityBarBadge.foreground#000000
  • debugToolBar.background#0100eb
  • dropdown.background#0100ff
  • editor.background#2a65c9
  • editor.foreground#FFFFFF
  • editor.inactiveSelectionBackground#2a65c9
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#0cc99087
  • editorGroup.dropBackground#FFFFFF80
  • editorGroup.focusedEmptyBorder#FFFFFF
  • editorGroupHeader.tabsBackground#0690ece3
  • editorHoverWidget.background#0100c9
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#0100c9
  • editorWidget.background#0100c9
  • focusBorder#FFFFFF
  • foreground#FFFFFF
  • gitDecoration.modifiedResourceForeground#7fff00
  • gitDecoration.untrackedResourceForeground#c7c7bd
  • input.background#FFFFFF
  • input.foreground#252726
  • inputOption.activeBorder#FFFFFF
  • list.activeSelectionBackground#2a65c9
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#FFFFFF
  • list.focusBackground#dc711f
  • list.focusForeground#FFFFFF
  • list.hoverBackground#2a65c9
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#ffffff40
  • list.inactiveSelectionForeground#FFFFFF
  • panel.background#050b13
  • panel.border#FFFFFF
  • panel.dropBackground#ffffff
  • panelTitle.activeBorder#000000
  • panelTitle.inactiveForeground#FFFFFF80
  • peekView.border#FFFFFF
  • peekViewEditor.background#000086
  • peekViewResult.background#0100c9
  • peekViewTitle.background#0100a8
  • pickerGroup.border#FFFFFF1a
  • scrollbarSlider.activeBackground#4eef0c
  • scrollbarSlider.background#FFFFFF
  • selection.background#0cc99087
  • sideBar.background#12773d
  • sideBarSectionHeader.background#0f66af
  • statusBar.background#a2a2a5
  • statusBar.debuggingBackground#FFFFFF
  • statusBar.noFolderBackground#000086
  • statusBarItem.activeBackground#FFFFFF80
  • statusBarItem.hoverBackground#FFFFFF1a
  • tab.activeBackground#52af2a
  • tab.activeBorder#FFFFFF
  • tab.border#FFFFFF
  • tab.inactiveBackground#518bf0
  • tab.inactiveForeground#FFFFFF
  • tab.unfocusedActiveForeground#FFFFFF
  • terminal.ansiBlue#5555FF
  • terminal.ansiBrightBlue#9FCFF9
  • terminal.foreground#23df12
  • textLink.activeForeground#ff0000
  • textLink.foreground#23df12
  • titleBar.activeBackground#a9a9a9
  • titleBar.activeForeground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Function name#fdf573
Global settings#FFFFFF
string#00ff2a
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#75ffff
constant.language.boolean#FFFFFF
constant.numeric#fdf573
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#ffffff
keyword, modifier, variable.language.this, support.type.object, constant.language#FFFFFF
entity.name.function, support.function#fdf573
storage.type, storage.modifier#FFFFFF
support.module, support.node#ffffffitalic
support.type#6eff40
entity.name.type, entity.other.inherited-class#6eff40
comment#d6be34d0italic
entity.name.type.class#6eff40underline
variable.object.property, meta.field.declaration entity.name.function#6eff40
meta.definition.method entity.name.function#6eff40
meta.function entity.name.function#6eff40
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FFFFFF
meta.embedded, source.groovy.embedded, meta.template.expression#FFFFFF
entity.name.tag.yaml#ffffff
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#ffffff
constant.language.json#FFFFFF
entity.other.attribute-name.class#FFFFFF
entity.other.attribute-name.id#4efff8
source.css entity.name.tag#6eff40
meta.tag, punctuation.definition.tag#FFFFFF
entity.name.tag#ffffff
entity.other.attribute-name#FF5555
markup.heading#FFFFFF
text.html.markdown meta.link.inline, meta.link.reference#ffffff
text.html.markdown beginning.punctuation.definition.list#FFFFFF
markup.italic#ffffffitalic
markup.bold#ffffffbold
markup.bold markup.italic, markup.italic markup.bold#ffffffitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#4efff8
markup.inline.raw.string.markdown#4efff8
keyword.other.definition.ini#ffffff
entity.name.section.group-title.ini#FFFFFF
source.cs meta.class.identifier storage.type#6eff40underline
source.cs meta.method.identifier entity.name.function#6eff40
source.cs meta.method-call meta.method, source.cs entity.name.function#FF5555
source.cs storage.type#6eff40
source.cs meta.method.return-type#6eff40
source.cs meta.preprocessor#0300ff
source.cs entity.name.type.namespace#FFFFFF
Global settings#FFFFFF
ThemeDatabase All Themes by enes ozturk - VS Code Theme