Skip to main content
Coding Theme

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.foreground#22aa22
  • activityBar.inactiveForeground#626769
  • dropdown.background#525252
  • editor.background#181818
  • editor.foreground#aaaaaa
  • editorBracketHighlight.foreground1#a64617
  • editorBracketHighlight.foreground2#999e0f
  • editorBracketHighlight.foreground3#0f9e0b
  • editorBracketHighlight.foreground4#0f9e9e
  • editorBracketHighlight.foreground5#9e0b1a
  • editorBracketHighlight.foreground6#6a0b9e
  • foreground#888888
  • list.activeSelectionBackground#555555
  • list.activeSelectionForeground#dddddd
  • list.hoverBackground#444444
  • menu.background#454545
  • menu.foreground#aaaaaa
  • menu.selectionForeground#22aa22
  • panel.background#1e1e1e
  • panelTitle.activeForeground#22aa22
  • panelTitle.inactiveForeground#aaaaaa
  • peekViewEditor.background#2d2d2d
  • peekViewEditor.matchHighlightBackground#555555
  • peekViewResult.fileForeground#888888
  • peekViewResult.lineForeground#aaaaaa
  • peekViewResult.selectionForeground#bbbbbb
  • peekViewTitleLabel.foreground#888888
  • quickInputList.focusBackground#555555
  • quickInputList.focusForeground#22aa22
  • sideBar.background#1e1e1e
  • sideBarTitle.foreground#ccaa77
  • tab.activeForeground#afbd85
  • tab.inactiveForeground#aaaaaa
  • terminal.foreground#668874

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#535551
comment.block#606f52
comment.block.documentation#4e6f2e
variable#1b8a8a
keyword, keyword.control, storage.type, storage.modifier#416a95
punctuation#827433
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#c46608
constant.language.nullptr.cpp#ad1578
source.cmake#6a5864
entity.name.function.preprocessor#ad1578bold
entity.name.namespace#159d3b
entity.name.variable.member#949d15
variable.other.global.cpp#c33a65bold
variable.other.property#9b4086
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#ae5c0b
variable.parameter#a58652italic
type, entity.name.class, entity.name.class.lua, entity.name.type.class, entity.name.tag, support.class, support.type, tag.name#4295a0
string#7d7c8e
keyword.operator, constant, entity.name.constant, variable.other.constant, variable.language, support.constant, constant.numeric, constant.language, meta.embedded.assembly#c36e57
support.type.property-name.json#943510
constant.other.caps.python#b21046bold
source.python#728e72
meta.function-call.generic.python#ce8b0f
variable.parameter.function.language.special.self.python, variable.language.special.self.python#4295a0
meta.attribute.python, meta.member.access.python#862e71
constant.language.python#a61489bold
variable.language.self.lua#4295a0
entity.other.attribute.lua#862e71
variable.global.lua#d7094a
source.lua#8b7f7f
support.function.any-method.lua#ae5c0b
entity.name.function.lua#8d8d1c
constant.language.lua#a61489bold
comment.block.lua#21a923
support.type.lua, support.class.lua, storage.type.annotation.lua#4295a0
variable.other.lua#3f9371
meta.class.ts, entity.name.type.ts, entity.name.type.module.ts, support.type.primitive.ts#4295a0
meta.object-literal.key.ts#862e71
variable.other.object.ts#728e72
variable.other.constant.ts#d7094a
variable.language.this.ts#1f982b
entity.name.function.ts, meta.definition.function.ts, meta.function.ts, source.ts#ae5c0b
constant.language.boolean#a61489bold
Natural Dimmed Theme by heqyu - VS Code Theme