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#353535
  • activityBar.border#E1DFDD10
  • activityBar.foreground#E1DFDD
  • activityBarBadge.background#98676A
  • activityBarBadge.foreground#353535
  • badge.background#E1DFDD
  • badge.foreground#353535
  • button.background#E1DFDD
  • button.foreground#353535
  • checkbox.background#353535
  • checkbox.border#FF7518
  • dropdown.listBackground#454545
  • editor.background#353535
  • editor.findMatchBackground#ff5b5b
  • editor.findMatchHighlightBackground#ff5b5b60
  • editor.foreground#E1DFDD
  • editor.lineHighlightBackground#c0c0c015
  • editor.selectionBackground#E1DFDD60
  • editor.selectionHighlightBackground#ffcc0060
  • editorBracketHighlight.foreground1#ff5b5b
  • editorBracketHighlight.foreground2#FF7518
  • editorBracketHighlight.foreground3#ffcc00
  • editorBracketHighlight.foreground4#00ff9c
  • editorBracketHighlight.foreground5#00c3ff
  • editorBracketHighlight.foreground6#E0B0FF
  • editorBracketHighlight.unexpectedBracket.foreground#EE4B2B
  • editorError.foreground#EE4B2B
  • editorGroupHeader.border#E1DFDD10
  • editorGroupHeader.noTabsBackground#353535
  • editorGroupHeader.tabsBackground#353535
  • editorGutter.addedBackground#00ff9c
  • editorGutter.deletedBackground#ff5b5b
  • editorGutter.modifiedBackground#00c3ff
  • editorIndentGuide.activeBackground1#ff5b5b
  • editorIndentGuide.activeBackground2#FF7518
  • editorIndentGuide.activeBackground3#FFCC00
  • editorIndentGuide.activeBackground4#00ff9c
  • editorIndentGuide.activeBackground5#00c3ff
  • editorIndentGuide.activeBackground6#E0B0FF
  • editorIndentGuide.background1#ff5b5b85
  • editorIndentGuide.background2#FF751885
  • editorIndentGuide.background3#FFCC0085
  • editorIndentGuide.background4#00ff9c85
  • editorIndentGuide.background5#00c3ff85
  • editorIndentGuide.background6#E0B0FF85
  • editorInfo.foreground#F0E68C
  • editorWarning.foreground#FF7518
  • editorWidget.background#454545
  • editorWidget.foreground#E1DFDD
  • errorForeground#EE4B2B
  • errorLens.errorForeground#EE4B2B
  • errorLens.infoForeground#F0E68C
  • errorLens.warningForeground#FF7518
  • focusBorder#FFCC0085
  • foreground#E1DFDD
  • gitDecoration.addedResourceForeground#00ff9c
  • gitDecoration.conflictingResourceForeground#EE4B2B
  • gitDecoration.deletedResourceForeground#ff5b5b
  • gitDecoration.ignoredResourceForeground#636363
  • gitDecoration.modifiedResourceForeground#00c3ff
  • gitDecoration.renamedResourceForeground#E0B0FF
  • gitDecoration.stageDeletedResourceForeground#FF0000
  • gitDecoration.stageModifiedResourceForeground#00FF00
  • gitDecoration.submoduleResourceForeground#FF7518
  • gitDecoration.untrackedResourceForeground#ffcc00
  • gitlens.decorations.addedForegroundColor#00ff9c
  • gitlens.decorations.copiedForegroundColor#FFCC00
  • gitlens.decorations.deletedForegroundColor#ff5b5b
  • gitlens.decorations.ignoredForegroundColor#FFCC00
  • gitlens.decorations.modifiedForegroundColor#E0B0FF
  • gitlens.decorations.renamedForegroundColor#E0B0FF
  • gitlens.decorations.untrackedForegroundColor#FFCC00
  • icon.foreground#E1DFDD
  • input.background#2a2a2a
  • input.foreground#E1DFDD
  • input.placeholderForeground#E1DFDD85
  • list.activeSelectionBackground#E1DFDD30
  • list.activeSelectionForeground#00ff9c
  • list.errorForeground#EE4B2B
  • list.focusOutline#E1DFDD
  • list.hoverBackground#E1DFDD10
  • list.inactiveSelectionBackground#E1DFDD30
  • list.invalidItemForeground#EE4B2B
  • list.warningForeground#FF7518
  • minimap.background#353535
  • minimap.errorHighlight#EE4B2B85
  • minimap.findMatchHighlight#48d1cdb5
  • minimap.infoHighlight#F0E68C85
  • minimap.warningHighlight#FF751885
  • minimapGutter.addedBackground#00ff9c
  • minimapGutter.deletedBackground#ff5b5b
  • minimapGutter.modifiedBackground#00c3ff
  • panel.background#353535
  • panel.border#E1DFDD10
  • quickInputList.focusBackground#353535
  • selection.background#E1DFDD40
  • settings.dropdownBackground#353535
  • settings.dropdownBorder#E1DFDD
  • settings.dropdownForeground#E1DFDD
  • settings.dropdownListBorder#E1DFDD
  • settings.headerForeground#FF7518
  • sideBar.background#353535
  • sideBar.border#E1DFDD10
  • sideBar.foreground#E1DFDD
  • sideBarSectionHeader.background#353535
  • sideBarSectionHeader.border#E1DFDD10
  • sideBarSectionHeader.foreground#E1DFDD
  • sideBarTitle.background#353535
  • sideBarTitle.foreground#E1DFDD85
  • statusBar.background#252525
  • statusBar.border#E1DFDD10
  • statusBar.debuggingBackground#DC3958
  • statusBar.debuggingForeground#353535
  • statusBar.foreground#E1DFDD
  • statusBar.noFolderBackground#252525
  • statusBarItem.remoteBackground#252525
  • statusBarItem.remoteForeground#E1DFDD
  • tab.activeBackground#353535
  • tab.activeBorder#FF7518
  • tab.activeModifiedBorder#353535
  • tab.border#E1DFDD10
  • tab.inactiveBackground#454545
  • terminal.ansiBlack#4D4D4D
  • terminal.ansiBlue#FF7518
  • terminal.ansiBrightBlack#B3B3B3
  • terminal.ansiBrightBlue#FF9E5D
  • terminal.ansiBrightCyan#7FDFD8
  • terminal.ansiBrightGreen#85D9A1
  • terminal.ansiBrightMagenta#E9C8FF
  • terminal.ansiBrightRed#FF9690
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFC461
  • terminal.ansiCyan#00c3ff
  • terminal.ansiGreen#00ff9c
  • terminal.ansiMagenta#E0B0FF
  • terminal.ansiRed#ff5b5b
  • terminal.ansiWhite#E1DFDD
  • terminal.ansiYellow#FFCC00
  • textLink.foreground#48d1cd
  • titleBar.activeBackground#353535
  • titleBar.activeForeground#E1DFDD
  • titleBar.inactiveBackground#3535355c
  • titleBar.inactiveForeground#E1DFDD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#E1DFDD55italic
constant, constant.numeric, constant.character.escape, constant.language#00ff9c
entity.name, entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, entity.other, entity.other.inherited-class#00ff9citalic
invalid, invalid.illegal#EE4B2B
keyword.operator, keyword.other, keyword.control#808080bold
meta, meta.function, meta.object, meta.objectliteral, meta.var, meta.definition, meta.object-literal, meta.attribute, meta.scriptblock#00c3ff
meta.group.simple.subexpression#FF7518italic
punctuation.definition, punctuation.separator, punctuation.section, punctuation.support#ff5b5b
source.python#00c3ffbold
storage.type, storage.modifier#FF7518bold
string#FFCC00
support.function.powershell, support.function.builtin.python, support.function, support.type, support.class, support.other.namespace.use.php, support.other.namespace.php, support.type.sys-types#E0B0FF
support.variable, support.constant#E0B0FFbold
variable, variable.other, variable.other.readwrite, variable.other.readwrite.powershell, variable.function#00ff9c
punctuation.definition.variable#ff5b5bbold
punctuation.definition.string.begin, punctuation.definition.string.end#ff5b5b
meta.function-call, keyword.other.special-method#00ff9citalic bold
*url*, *link*, *uri*underline
woolly pro by DiamondBar9 - VS Code Theme