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#141414
  • activityBar.border#00000000
  • activityBar.foreground#bdfe58
  • activityBar.inactiveForeground#414141
  • activityBarBadge.background#141414
  • activityBarBadge.foreground#ffffff
  • banner.background#141414
  • banner.foreground#c0c0c0
  • banner.iconForeground#1bfd9c
  • breadcrumb.background#141414
  • breadcrumb.foreground#a1a1a1
  • debugToolBar.background#141414
  • debugToolBar.border#404040
  • dropdown.background#141414
  • dropdown.border#141414
  • dropdown.foreground#c0c0c0
  • editor.background#141414
  • editor.findMatchBackground#00000000
  • editor.findMatchForeground#1bfd9c
  • editor.findMatchHighlightBackground#00000000
  • editor.findMatchHighlightForeground#1bfd9c
  • editor.foreground#c0c0c0
  • editor.inactiveSelectionBackground#404040
  • editor.lineHighlightBackground#303030
  • editor.lineHighlightBorder#404040
  • editor.selectionBackground#303030
  • editor.selectionHighlightBackground#303030
  • editor.wordHighlightBackground#303030
  • editor.wordHighlightStrongBackground#303030
  • editorBracketHighlight.foreground1#e6e6e6
  • editorBracketHighlight.foreground2#d0d0d0
  • editorBracketHighlight.foreground3#b3b3b3
  • editorBracketHighlight.foreground4#969696
  • editorBracketHighlight.foreground5#7a7a7a
  • editorBracketHighlight.foreground6#5e5e5e
  • editorBracketHighlight.unexpectedBracket.foreground#ff003f
  • editorCursor.foreground#bdfe58
  • editorError.border#e9967add
  • editorError.foreground#00000000
  • editorGroup.border#00000000
  • editorGroup.dropBackground#141414
  • editorGroupHeader.tabsBackground#141414
  • editorGroupHeader.tabsBorder#00000000
  • editorHint.border#bedc7499
  • editorHint.foreground#00000000
  • editorIndentGuide.activeBackground#585858
  • editorIndentGuide.background#404040
  • editorInfo.border#7fa1c399
  • editorInfo.foreground#00000000
  • editorOverviewRuler.background#141414
  • editorOverviewRuler.border#00000000
  • editorSuggestWidget.background#141414
  • editorSuggestWidget.focusHighlightForeground#1bfd9c
  • editorSuggestWidget.foreground#c0c0c0
  • editorSuggestWidget.highlightForeground#c0c0c0
  • editorSuggestWidget.selectedBackground#141414
  • editorWarning.border#e8f48caa
  • editorWarning.foreground#00000000
  • editorWidget.background#141414
  • editorWidget.border#141414
  • editorWidget.foreground#c0c0c0
  • editorWidget.resizeBorder#bdfe58
  • editorWidget.selectionForeground#bdfe58
  • gitDecoration.addedResourceForeground#baffc9
  • gitDecoration.deletedResourceForeground#ffb3ba
  • gitDecoration.modifiedResourceForeground#ffffba
  • input.background#202020
  • input.border#141414
  • input.foreground#c0c0c0
  • input.placeholderForeground#585858
  • inputOption.activeBorder#1bfd9c
  • inputValidation.*.border#1bfd9c
  • list.activeSelectionBackground#141414
  • list.activeSelectionForeground#bdfe58
  • list.errorForeground#e9967a
  • list.warningForeground#e8f48c
  • menu.background#141414
  • menu.foreground#c0c0c0
  • menu.selectionBackground#141414
  • menu.selectionForeground#bdfe58
  • menu.separatorBackground#141414
  • menubar.selectionBackground#141414
  • menubar.selectionForeground#bdfe58
  • notificationCenter.border#00000000
  • notificationCenterHeader.background#141414
  • notificationCenterHeader.foreground#c0c0c0
  • notificationLink.foreground#7fa1c3
  • notifications.background#141414
  • notifications.foreground#c0c0c0
  • notificationsErrorIcon.foreground#ffb3ba
  • notificationsInfoIcon.foreground#7fa1c3
  • notificationsWarningIcon.foreground#ffffba
  • panel.background#141414
  • panel.border#00000000
  • panel.foreground#c0c0c0
  • problemsErrorIcon.foreground#e9967a
  • problemsInfoIcon.foreground#7fa1c3
  • problemsWarningIcon.foreground#e8f48c
  • progressBar.background#1bfd9c
  • quickInput.background#141414
  • quickInput.foreground#c0c0c0
  • quickInputList.focusBackground#303030
  • quickInputList.focusForeground#c0c0c0
  • scrollbarSlider.activeBackground#c0c0c0
  • scrollbarSlider.background#404040
  • scrollbarSlider.hoverBackground#585858
  • settings.checkboxBackground#141414
  • settings.checkboxBorder#404040
  • settings.checkboxForeground#c0c0c0
  • settings.dropdownBackground#141414
  • settings.dropdownBorder#404040
  • settings.dropdownForeground#c0c0c0
  • settings.dropdownListBorder#404040
  • settings.focusedRowBackground#303030
  • settings.focusedRowBorder#1bfd9c
  • settings.headerBorder#404040
  • settings.headerForeground#c0c0c0
  • settings.modifiedItemIndicator#bdfe58
  • settings.numberInputBackground#202020
  • settings.numberInputBorder#404040
  • settings.numberInputForeground#c0c0c0
  • settings.rowHoverBackground#303030
  • settings.sashBorder#404040
  • settings.settingsHeaderHoverForeground#bdfe58
  • settings.textInputBackground#202020
  • settings.textInputBorder#404040
  • settings.textInputForeground#c0c0c0
  • sideBar.background#141414
  • sideBar.border#00000000
  • sideBar.foreground#a1a1a1
  • sideBarSectionHeader.background#141414
  • sideBarSectionHeader.foreground#b1b1b1
  • statusBar.background#141414
  • statusBar.border#00000000
  • statusBar.debuggingBackground#4b8902
  • statusBar.foreground#b1b1b1
  • statusBar.noFolderBackground#141414
  • statusBar.noFolderForeground#b1b1b1
  • statusBarItem.hoverBackground#141414
  • statusBarItem.hoverForeground#bdfe58
  • tab.activeBackground#141414
  • tab.activeForeground#f1f1f1
  • tab.hoverForeground#bdfe58
  • tab.inactiveBackground#141414
  • tab.inactiveForeground#b1b1b1
  • terminal.ansiBlack#141414
  • terminal.ansiBlue#66b2b2
  • terminal.ansiBrightBlack#404040
  • terminal.ansiBrightBlue#b2d8d8
  • terminal.ansiBrightCyan#1bfd9c
  • terminal.ansiBrightGreen#bdfe58
  • terminal.ansiBrightMagenta#d3869b
  • terminal.ansiBrightRed#ffb3ba
  • terminal.ansiBrightWhite#f1f1f1
  • terminal.ansiBrightYellow#ffffba
  • terminal.ansiCyan#1bfd9c
  • terminal.ansiGreen#b2d8d8
  • terminal.ansiMagenta#b16286
  • terminal.ansiRed#ff3131
  • terminal.ansiWhite#f1f1f1
  • terminal.ansiYellow#d1d1d1
  • terminal.background#141414
  • terminal.border#00000000
  • terminal.foreground#c0c0c0
  • terminal.selectionBackground#303030
  • terminal.selectionForeground#c0c0c0
  • terminalCursor.background#303030
  • terminalCursor.foreground#bdfe58
  • titleBar.activeBackground#141414
  • titleBar.border#00000000
  • titleBar.inactiveBackground#141414

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#585858italic
variable, string constant.other.placeholder#b1b1b1
constant.other.color#ffffff
invalid, invalid.illegal#ffb3ba
keyword.control, storage.modifier#f1f1f1
keyword.type, storage.type#a1a1a1
entity.name, support.class#a1a1a1
keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.comparison, keyword.operator.infix, keyword.operator.arrow, keyword.operator.double-colon, keyword.operator.colon, keyword.operator.pipe, punctuation.separator.period#1bfd9c
entity.name.tag, meta.tag.sgml#e1e1e1
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#e1e1e1
meta.block variable.other#b1b1b1
support.other.variable, string.other.link#b1b1b1
constant.language#66b2b2
constant.numeric, support.constant#b2d8d8
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#d1d1d1
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#a1a1a1
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#a1a1a1
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#a1a1a1
variable.language#c5c5c5
entity.name.method.js#b1b1b1
meta.class-method.js entity.name.function.js, variable.function.constructor#e1e1e1
entity.other.attribute-name#b1b1b1
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#a1a1a1italic
entity.other.attribute-name.class#e1e1e1
source.sass keyword.control#a1a1a1
markup.inserted#baffc9
markup.deleted#ffb3ba
markup.changed#ffffba
string.regexp#d1d1d1
constant.character.escape#1bfd9c
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#a1a1a1
source.js constant.other.object.key.js string.unquoted.label.js#b2d8d8
source.json meta.structure.dictionary.json support.type.property-name.json#b1b1b1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b1b1b1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b1b1b1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b1b1b1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a1a1a1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b1b1b1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b1b1b1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b1b1b1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b1b1b1
text.html.markdown, punctuation.definition.list_item.markdown#b1b1b1
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#1bfd9c
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#f1f1f1
markup.italic#a1a1a1italic
markup.bold, markup.bold string#e1e1e1bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#e1e1e1italic
markup.underline#c5c5c5underline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#d1d1d1
string.other.link.description.title.markdown#b1b1b1
constant.other.reference.link.markdown#d1d1d1
markup.raw.block#b1b1b1
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#f1f1f1
variable.language.fenced.markdown#b1b1b1
meta.separator#e1e1e1bold
markup.table#c5c5c5
preprocessor#4b8902

Shiki preview

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

Loading...

darkvoid - Coding Theme