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#2c2f32
  • activityBar.foreground#f0f0f0
  • activityBarBadge.background#00bfff
  • editor.background#24272A
  • editor.findMatchHighlightBackground#444444
  • editor.foreground#dddddd
  • editor.hoverHighlightBackground#444444
  • editor.selectionBackground#444444
  • editor.selectionForeground#f0f0f0
  • editor.selectionHighlightBackground#444444
  • editor.wordHighlightBackground#444444
  • editor.wordHighlightStrongBackground#444444
  • editorGroupHeader.tabsBackground#202124
  • editorInfo.foreground#00E673
  • editorWarning.foreground#f4433c
  • editorWidget.background#202124
  • focusBorder#00A1F1
  • gitDecoration.addedResourceForeground#00E673
  • gitDecoration.deletedResourceForeground#FF6347
  • gitDecoration.modifiedResourceForeground#8BE9FD
  • input.background#2c2f32
  • list.activeSelectionBackground#35363a
  • list.activeSelectionForeground#f0f0f0
  • list.errorForeground#FF6347
  • list.focusAndSelectionOutline#00bfff
  • list.hoverBackground#3D4043
  • list.inactiveSelectionBackground#35363a
  • list.warningForeground#FF6347
  • minimap.findMatchHighlight#00E673
  • panelTitle.activeBorder#00bfff
  • sideBar.background#202124
  • sideBarSectionHeader.background#2c2f32
  • sideBarTitle.foreground#f0f0f0
  • statusBar.background#202124
  • statusBar.foreground#f0f0f0
  • statusBar.noFolderBackground#202124
  • tab.activeBackground#24272A
  • tab.activeBorder#00bfff
  • tab.inactiveBackground#2c2f32
  • terminal.background#24272A
  • titleBar.activeBackground#24272A
  • titleBar.inactiveBackground#202124

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable#dddddd
variable.language#BD93F9
variable.parameter#FFB86C
variable.other.constant#E1FFFF
variable.scss, variable.other.interpolation.less#E1FFFF
entity.name.variable.parameter.cs#FFB86C
comment, punctuation.definition.comment#737373
invalid, invalid.illegal#f4433c
invalid.deprecated.entity.other.attribute-name#00bfff
invalid.deprecated.media#00E673
keyword#FF69B4
keyword.operator.newbold
keyword.type.cs#8BE9FD
storage#FF69B4
storage.type.cs#00bfff
meta.paragraph.markdown, text.html.markdown#D2D3D9
punctuation.definition.heading.markdown#FF69B4
markup.heading.markdown#00bfff
punctuation.definition.markdown, markup.fenced_code.block.markdown#75ABE0
punctuation.definition.raw.markdown, markup.inline.raw.string.markdown#75ABE0
markup.underline.link.markdown#75ABE0
meta.link.inline.markdown#FFB86C
punctuation.definition.bold.markdown, markup.bold.markdown#FFB86C
punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown#FFB86C
punctuation.definition.string.begin.markdown#FF69B4
markup.underline.link.image.markdown#75ABE0
string.other.link.description.markdown#eefa7a
constant, constant.numeric#BD93F9
entity.name.type, entity.other.inherited-class, entity.other.attribute-name#00bfff
entity.other.attribute-name.pseudo-element#FF69B4
entity.name.tag#FF69B4
entity.name.type.class#00bfff
entity.name.namespace.cpp, entity.name.namespace.c#8BE9FD
meta.function.parameters, entity.name.function#00E673
meta.toc-list.id.html, meta.attribute-with-value.id#C3E88D
meta.tag.block.any#FF69B4
meta.property-value.css#FF69B4
string.quoted.single, string.quoted.double, string.quoted.triple, string.quoted.other, string.template#C3E88D
string.regexp#00E673
string.unquoted.attribute-value.css#BD93F9
punctuation, punctuation.separator, punctuation.terminator, punctuation.separator.continuation, punctuation.accessor#dddddd
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end#C3E88D
string.json, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end, variable.other.jsdoc#8BE9FD
punctuation.definition.entity#BD93F9
punctuation.definition.block.tag.jsdoc, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF69B4
punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc#FFB86C
punctuation.separator.key-value, punctuation.definition.variable, punctuation.definition.keyword, punctuation.definition.entity.css, punctuation.definition.constant.css, punctuation.definition.interpolation, keyword.control.at-rule.import, variable.other.less#FF69B4
punctuation.accessor.optional#FF69B4
punctuation.definition.directive.cpp, punctuation.definition.directive.c#FF69B4
punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.metadata.markdown#FF69B4
support.class, support.variable, support.function, support.type, support.constant#8BE9FD
support.constant.color.w3c-standard-color-name.css, support.constant.property-value.css#BD93F9

Shiki preview

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

Loading...

Simple Dark - Coding Theme