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.

  • accent=======================================================
  • activityBar.activeBorder#c2b084
  • activityBar.background#0c0c10
  • activityBar.border#0c0c10
  • activityBar.foreground#9bc2c4
  • activityBar.inactiveForeground#222
  • activityBarBadge.background#3d414b
  • activityBarBadge.foreground#29292e
  • badge.background#4f5b69
  • button.background#8fb6b8
  • button.foreground#29292e
  • button.hoverBackground#c2b084
  • button.secondaryForeground#c2b084
  • charcoal.opque===============================================
  • chat.requestBackground#1f2024
  • chat.requestBorder#566674
  • chat.requestBubbleBackground#1f1f22
  • chat.requestBubbleHoverBackground#37373f
  • chat.requestCodeBorder#75577b
  • checkbox.background#8fb6b8
  • checkbox.foreground#29292e
  • darkest======================================================
  • darkmode...........................................................
  • dropdown.background#0c0c10
  • dropdown.listBackground#131315
  • editor.background#131315
  • editor.foreground#7f9fa1
  • editor.lineHighlightBackground#100f11
  • editor.lineHighlightBorder#181719
  • editor.selectionBackground#233245
  • editor.selectionHighlightBorder#c7d2cf
  • editor.wordHighlightBackground#2d2f34
  • editorBracketHighlight.foreground1#a9cdd9
  • editorBracketHighlight.foreground2#ded3ba
  • editorBracketHighlight.foreground3#5b8592
  • editorCursor.background#131315
  • editorCursor.foreground#7f9fa1
  • editorError.background#232129
  • editorError.border#d0667f
  • editorError.foreground#e2768f
  • editorGroup.border#0c0c10
  • editorGroup.dropBackground#1f2024
  • editorGroupHeader.noTabsBackground#1B202a
  • editorGroupHeader.tabsBackground#0c0c10
  • editorGroupHeader.tabsBorder#0c0c10
  • editorIndentGuide.activeBackground1#3e4249
  • editorIndentGuide.background1#1d1d1f
  • editorInfo.foreground#87b2d1
  • editorInlayHint.foreground#5b6f7f
  • editorLineNumber.activeForeground#444
  • editorLineNumber.foreground#535b61
  • editorSuggestWidget.selectedBackground#0c0c10
  • editorSuggestWidget.selectedForeground#c2b084
  • editorWarning.background#47384a
  • editorWarning.border#131315
  • editorWarning.foreground#cdbb8f
  • editorWidget.background#131315
  • editorWidget.border#6e7881
  • extensionButton.prominentBackground#c2b084
  • extensionButton.prominentForeground#0c0c10
  • fivesomething.transparent====================================
  • focusBorder#1f1f22
  • foreground#aac3bb
  • icon.foreground#aac3bb
  • input.background#0c0c10
  • lightblue.opaque---------------------------------------------
  • list.activeSelectionBackground#0c0c10
  • list.dropBackground#232429
  • list.dropBetweenBackground#8fb6b8
  • list.errorForeground#d0667f
  • list.focusBackground#0c0c10
  • list.focusOutline#0d0c0d
  • list.hoverBackground#33353d
  • list.hoverForeground#fff
  • list.warningForeground#c8bfa8
  • medgrey.opaque-----------------------------------------------
  • medlightgrey.opaque------------------------------------------
  • medlightgrey.transparent=====================================
  • midnight=====================================================
  • near-accent==================================================
  • panelTitle.activeForeground#5a6c7a
  • panelTitle.inactiveForeground#70939e
  • prussianblue=================================================
  • quickInput.background#0c0c10
  • quickInput.foreground#7f9fa1
  • quickInputList.focusBackground#131315
  • quickInputList.focusForeground#c2b084
  • selection.background#2d2e35
  • settings.textInputBackground#0c0c10
  • sideBar.background#0c0c10
  • sideBar.border#0c0c10
  • sideBar.foreground#525c65
  • sideBarSectionHeader.background#0c0c10
  • sideBarTitle.foreground#7f9fa1
  • statusBar.background#0c0c10
  • statusBar.debuggingBackground#566674
  • statusBar.debuggingForeground#0c0c10
  • statusBar.foreground#4e4e4e
  • statusBar.noFolderBackground#262a34
  • statusBar.noFolderForeground#0c0c10
  • statusBarItem.activeBackground#c2b084
  • statusBarItem.compactHoverBackground#70939e
  • statusBarItem.errorBackground#d0667f
  • statusBarItem.hoverBackground#53616e
  • statusBarItem.hoverForeground#0c0c10
  • statusBarItem.prominentBackground#c2b084
  • statusBarItem.prominentForeground#000
  • tab.activeBackground#131315
  • tab.activeBorderTop#e1d6b5
  • tab.activeForeground#70939e
  • tab.border#0c0c10
  • tab.hoverBackground#131315
  • tab.inactiveBackground#0c0c10
  • textLink.foreground#9bc2c4
  • titleBar.activeBackground#0c0c10
  • titleBar.activeForeground#70939e
  • titleBar.border#0c0c10
  • titleBar.inactiveBackground#131315
  • toolbar.activeBackground#c2b084
  • toolbar.hoverBackground#3a3e48
  • toolbar.hoverOutline#9fb9b5
  • verydarkbluegrey=============================================
  • warning=======================================================
  • widget.shadow#0c0c10

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ control ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ ↗ #c898b5
keyword.control, storage.modifier.mut, storage.type.class, storage.type.struct#c898b5
keyword.control.fn, keyword.other.fn.rust, storage.type.function#c898b5bold
🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥 hot end 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥#e7e8b9
entity.name.function.definition, entity.name.function, entity.name.tag.localname.xml#e7e8b9bold
meta.function.call, meta.function-call#e7e8b9
keyword.operator.function.arrow.tempo#e7e8b9
support.function, meta.function.call.imported#e7e8b9
meta.function-result, meta.function.result, support.type.result, constant.language.result#e7e8b9bold
meta.function-result.type#e7e8b9
keyword.operator.assignment#e8ddd7
variable.parameter.label, support.function.any-method.swift#d1c3bd
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️ cold end ❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️#a9cdd9
entity.name.type.struct.definition#bcdde4bold
meta.struct.definition, entity.other.attribute-name.localname.xml#a9cdd9
entity.name.tag.html, entity.name.tag.localname.html, entity.other.attribute-name.html#a9cdd9
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#3f444f
keyword.declaration.struct#a9cdd9bold
meta.item-access#bfdee4
entity.name.type#a9cdd9
entity.name.type.ts, entity.name.type.tsx, entity.name.type.interface.ts, entity.name.type.alias.ts, entity.name.type.class.ts, entity.name.type.enum.ts, entity.name.type.module.ts, entity.name.type.namespace.ts, support.type.primitive.ts, support.type.builtin.ts, support.class.ts#a9cdd9
storage.type.interface.ts, storage.type.type.ts, storage.type.enum.ts, storage.type.class.ts, storage.type.namespace.ts, storage.type.module.ts#c898b5
string, constant.language, constant.numeric, constant.rgb-value, constant.character#a9cdd9
constant.other#a9cdd9
meta.struct.definition#a9cdd9
entity.name.variable.field#a9cdd9
constant.character.escape#3d424d
meta.brace, punctuation.section.block.begin, punctuation.section.block.end, punctuation.definition.block.begin, punctuation.definition.block.end.rust, punctuation.brackets.curly, punctuation.section#3f4550
storage.modifier.mutitalic
variable, meta.function-call.arguments#7f9fa1
variable.other, variable.language, variable.parameter#7f9fa1
entity.name.namespace#7f9fa1
source#7f9fa1
keyword.declaration.variable, storage.modifier.mut, keyword.other, keyword.control.import#49595b
keyword.control.import#49595bbold
🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️ familiar tokens 🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️🏷️#a9cdd9
entity.name.type.library#a9cdd9
entity.name.type.struct.field#a9cdd9
support.type.module#a9cdd9
entity.name.type.module#a9cdd9
🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍 hidden details 🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍#a9cdd9
storage.type, entity.name.namespace.import, keyword.operator.logical, variable.argument.label#49595b
meta.use, meta.import, keyword.declaration, punctuation.definition.tag.xml#49595b
🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳 human touch 🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳#a9cdd9
📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝 markdown 📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝📝#a9cdd9
markup.heading.markdown, markup.heading.setext.markdown#e7e8b9bold
heading.1.markdown, markup.heading.1.markdown, markup.heading.setext.1.markdown, heading.2.markdown, markup.heading.2.markdown, markup.heading.setext.2.markdown#e7e8b9bold
heading.3.markdown, markup.heading.3.markdown, heading.4.markdown, markup.heading.4.markdown, heading.5.markdown, markup.heading.5.markdown, heading.6.markdown, markup.heading.6.markdown#c8bfa8bold
punctuation.definition.heading.markdown#cdbb8f
markup.bold.markdown#c898b5bold
markup.italic.markdown#e7e8b9italic
markup.strikethrough.markdown#7f9fa1strikethrough
markup.inline.raw.string.markdown#a9cdd9
markup.fenced_code.block.markdown#49595b
punctuation.definition.raw.markdown, punctuation.section.code.begin.markdown, punctuation.section.code.end.markdown#3f4550
markup.quote.markdown#7f9fa1italic
punctuation.definition.quote.begin.markdown#3f4550
markup.list.unnumbered.markdown, markup.list.numbered.markdown#7f9fa1
punctuation.definition.list.begin.markdown#a9cdd9
markup.underline.link.markdown#49595bunderline
string.other.link.description.markdown, string.other.link.title.markdown, constant.other.reference.link.markdown#7f9fa1underline
punctuation.definition.link.markdown, punctuation.definition.metadata.markdown#3f4550
markup.table.header.markdown, meta.table.header.markdown, meta.table.header.row.markdown, markup.table.header.cell.markdown#a9cdd9bold
punctuation.definition.table.markdown, punctuation.separator.table.markdown, markup.table.separator.markdown, meta.separator.table.markdown, meta.table.markdown punctuation.definition.metadata.markdown, meta.table.markdown punctuation.definition.table.markdown, meta.table.markdown punctuation.separator.table.markdown, markup.table.markdown punctuation.definition.metadata.markdown#49595b
meta.separator.markdown#6e7881
source.json.comments, source.json meta.structure.dictionary.json, support.type.property-name.json, support.type.property-name.json.comments, string.json.comments, meta.structure.dictionary.json.comments#49595bitalic
punctuation.definition.comment.tempo#49595b
comment.line.content.tempo#49595b
comment#49595b
Rust Python Functional Dark by rklassen - VS Code Theme