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.background#1a1c23
  • dropdown.background#2a2b36
  • dropdown.foreground#c8cacc
  • editor.background#1d1f27
  • editor.foreground#c8cacc
  • editor.lineHighlightBackground#282a36
  • editor.selectionBackground#2f313c
  • editor.selectionHighlightBackground#2f313c88
  • editor.wordHighlightBackground#34374888
  • editor.wordHighlightStrongBackground#2c2f3a88
  • editorBracketMatch.background#44475a
  • editorBracketMatch.border#5f6a8e
  • editorCursor.foreground#bbbbbb
  • editorError.foreground#d66a6a
  • editorGutter.addedBackground#7ba98b
  • editorGutter.background#1d1f27
  • editorGutter.deletedBackground#d66a6a
  • editorGutter.modifiedBackground#6a8ed6
  • editorIndentGuide.activeBackground#3b3d4c
  • editorIndentGuide.background#2a2b36
  • editorInfo.foreground#6ac6d6
  • editorLineNumber.activeForeground#c8cacc
  • editorLineNumber.foreground#44475a
  • editorWarning.foreground#d6c66a
  • editorWhitespace.foreground#2f313c
  • minimap.background#1d1f27
  • panel.background#1a1c23
  • scrollbarSlider.activeBackground#4c4f67dd
  • scrollbarSlider.background#4c4f6780
  • scrollbarSlider.hoverBackground#4c4f67aa
  • sideBar.background#1a1c23
  • statusBar.background#1a1c23
  • tab.activeBackground#282a36
  • tab.activeForeground#d8dee9
  • tab.inactiveBackground#1a1c23
  • tab.inactiveForeground#5c5f77

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type#d6ac6a
string, string.quoted, string.template#7ba98b
constant.numeric#a58adb
meta.arrow, storage.type.function.arrow#d6ac6a
entity.other.attribute-name#6a778e
variable, meta.definition.variable#c8cacc
support.variable.property.static#c67878
variable.parameter, meta.function.parameter, meta.function.arrow.parameters, meta.definition.function.parameters, meta.definition.method.parameters, variable.other.readwrite#d67a85
keyword.operator, punctuation#d6ac6a
comment, punctuation.definition.comment#7f848eitalic
variable.other.object, support.type.object.console#6a8ed6
support.function.console#6a8ed6
variable.other.member, meta.property, meta.object-literal.key#d67a85
support.type, storage.type.primitive, meta.type#d67a85
punctuation.section.block.begin, punctuation.section.block.end, punctuation.section.group.begin, punctuation.section.group.end, punctuation.section.brackets.begin, punctuation.section.brackets.end, meta.brace.curly, meta.brace.round, meta.brace.square#b983d6
meta.property.object, variable.other.property, variable.other.member#d67a85
entity.name.function, support.function#b983d6
support.class.component, entity.name.type, entity.name.import, variable.other.readwrite.alias, support.type.object.module, support.class, meta.import variable.other.readwrite#5e7fa7
Anti-Eye Strain by Pedro Jr - VS Code Theme