Skip to main content
CodingTheme

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.activeBackground#1d0543
  • activityBar.background#1a033f
  • activityBar.foreground#e7e7e7
  • activityBar.inactiveForeground#e7e7e799
  • activityBarBadge.background#a61a1a
  • activityBarBadge.foreground#e7e7e7
  • badge.background#4916b3
  • button.background#7b36e2
  • commandCenter.border#e7e7e799
  • debugToolBar.background#2a1c3e
  • debugToolBar.border#100422
  • dropdown.background#202432
  • editor.background#100c1d
  • editor.findMatchBackground#42108c
  • editor.findMatchHighlightBackground#42108c99
  • editor.foreground#a497b5
  • editor.lineHighlightBackground#00000099
  • editor.selectionBackground#683196
  • editorBracketHighlight.foreground1#fc5a5a
  • editorBracketHighlight.foreground2#5af1fc
  • editorBracketHighlight.foreground3#bb5afc
  • editorBracketHighlight.foreground4#fcd65a
  • editorBracketHighlight.foreground5#5afcb0
  • editorBracketHighlight.foreground6#655afc
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorCursor.foreground#ffffff
  • editorGroup.border#7b36e2
  • editorGroup.dropBackground#7b36e244
  • editorGroupHeader.tabsBackground#110e1a
  • editorGutter.addedBackground#1f5ce9
  • editorGutter.deletedBackground#e9004b
  • editorGutter.modifiedBackground#00b70e
  • editorIndentGuide.activeBackground#ff000000
  • editorIndentGuide.background#7b36e244
  • editorLineNumber.foreground#e3d1ff33
  • editorWhitespace.foreground#7f66a3
  • editorWidget.background#2a1c3e
  • editorWidget.border#100422
  • errorForeground#ff0948
  • focusBorder#7b36e2
  • input.background#9c64ee22
  • input.border#9c64ee44
  • inputOption.activeBorder#9c64ee16
  • inputValidation.errorBackground#e31846ee
  • inputValidation.errorBorder#e31846
  • inputValidation.infoBackground#0071b7
  • inputValidation.infoBorder#094590
  • inputValidation.warningBackground#e97f00
  • inputValidation.warningBorder#ffaa41
  • list.activeSelectionBackground#29007566
  • list.activeSelectionForeground#ffffffaa
  • list.focusBackground#15003d33
  • list.highlightForeground#7b36e2
  • list.hoverBackground#29007580
  • list.inactiveSelectionBackground#00000033
  • minimapSlider.activeBackground#5200eb66
  • minimapSlider.background#32008f66
  • minimapSlider.hoverBackground#4000b866
  • panel.background#150e33
  • peekView.border#5158d8
  • peekViewEditor.background#110028
  • peekViewEditor.matchHighlightBackground#001422
  • peekViewResult.background#0e0021
  • peekViewResult.matchHighlightBackground#2b0264
  • peekViewTitle.background#38385d
  • pickerGroup.border#490e7b
  • pickerGroup.foreground#8838ff
  • progressBar.background#4600b7
  • scrollbar.shadow#7e28ff11
  • scrollbarSlider.activeBackground#7e28ff99
  • scrollbarSlider.background#69588322
  • scrollbarSlider.hoverBackground#69588333
  • selection.background#3b446f
  • sideBar.background#0b011e
  • sideBar.foreground#7a7398
  • sideBarSectionHeader.background#0f0e1045
  • statusBar.background#12022c
  • statusBar.debuggingBackground#4b00bb
  • statusBar.foreground#e7e7e7
  • statusBar.noFolderBackground#4b208b
  • statusBarItem.hoverBackground#310f61
  • statusBarItem.remoteBackground#080835
  • statusBarItem.remoteForeground#e7e7e7
  • tab.activeBackground#191526
  • tab.activeBorder#7b36e2
  • tab.inactiveBackground#161221
  • tab.inactiveForeground#60576f
  • titleBar.activeBackground#27065b
  • titleBar.activeForeground#e7e7e7
  • titleBar.inactiveBackground#08083599
  • titleBar.inactiveForeground#e7e7e799

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.parameter.function#1CE566
comment, punctuation.definition.comment#60576F
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#D3D0C8
none#E40043
keyword.operator#008ED2
entity.name.atomtag.vinala-atomium#E40043
entity.name.echo.vinala-atomium#9F47FF
keyword#E45100italic
variable#A5D851
entity.name.function, meta.require, support.function.any-method#008ED2
support.class, entity.name.class, entity.name.type.class#9F47FF
meta.class#00FFFF
keyword.other.special-method#6699CC
storage#AE51D8
support.function#66CCCC
string, constant.other.symbol, entity.other.inherited-class#C30051
constant.numeric#F99157
none#F99157
none#F99157
constant#F99157
entity.name.tag#20B2AA
entity.name.subtag#00FF00
entity.other.attribute-name#00BCD4
entity.other.attribute-name.id, punctuation.definition.entity#6699CC
meta.selector#CC99CC
none#F99157
markup.heading punctuation.definition.heading, entity.name.section#6699CC
keyword.other.unit#F99157
markup.bold, punctuation.definition.bold#FFCC66bold
markup.italic, punctuation.definition.italic#CC99CCitalic
markup.raw.inline#99CC99
string.other.link#F2777A
meta.link#F99157
markup.list#F2777A
markup.quote#F99157
meta.separator#D3D0C8
markup.inserted, markup.inserted.git_gutter#D21D52
markup.deleted, markup.deleted.git_gutter#F2777A
markup.changed, markup.changed.git_gutter#CC99CC
markup.ignored, markup.ignored.git_gutter#515151
markup.untracked, markup.untracked.git_gutter#515151
constant.other.color#66CCCC
string.regexp#66CCCC
constant.character.escape#66CCCC
punctuation.section.embedded, variable.interpolation#D27B53
invalid.illegal#2D2D2D
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#8BC34A
meta.property-name, support.type.property-name#15B7FF
keyword.other.important#FF0960bold
markup.deleted.git_gutter#F92672
markup.inserted.git_gutter#A6E22E
markup.changed.git_gutter#967EFB
markup.ignored.git_gutter#565656
markup.untracked.git_gutter#565656
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6

Shiki preview

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

Loading...

Funny purple color by Gilberto Gaspar - VS Code Theme