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#000
  • activityBar.border#8f8f8f75
  • activityBar.foreground#8f8f8f
  • activityBar.inactiveForeground#8f8f8f75
  • activityBarBadge.background#000
  • activityBarBadge.foreground#8f8f8f
  • badge.background#000000
  • badge.foreground#8f8f8f
  • breadcrumb.foreground#8f8f8f
  • button.background#000000
  • button.foreground#FFFFFF
  • button.hoverBackground#000000
  • checkbox.border#8f8f8f75
  • contrastActiveBorder#00000000
  • contrastBorder#8f8f8f75
  • debugExceptionWidget.background#000000
  • debugExceptionWidget.border#8f8f8f
  • debugToolBar.background#000000
  • debugToolBar.border#8f8f8f
  • diffEditor.insertedTextBackground#31958A55
  • diffEditor.insertedTextBorder#31958A55
  • diffEditor.removedTextBackground#892F4688
  • diffEditor.removedTextBorder#31958A55
  • dropdown.background#000000
  • dropdown.border#8f8f8f75
  • dropdown.foreground#FFFFFF
  • editor.background#000000
  • editor.findMatchBackground#6688cc
  • editor.findMatchBorder#8f8f8f75
  • editor.findMatchHighlightBackground#eeeeee44
  • editor.foreground#FFFFFF
  • editor.inactiveSelectionBackground#6688cc
  • editor.lineHighlightBorder#8f8f8f75
  • editor.selectionBackground#6688cc
  • editor.selectionForeground#000c18
  • editorGroup.border#8f8f8f75
  • editorGroupHeader.border#000000
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorHint.foreground#43B9D8
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#8f8f8f75
  • editorIndentGuide.activeBackground#505050
  • editorLineNumber.activeForeground#8f8f8f
  • editorLineNumber.foreground#8f8f8f
  • editorLink.activeForeground#0063a5
  • editorMarkerNavigation.background#060621
  • editorMarkerNavigationError.background#AB395B
  • editorMarkerNavigationWarning.background#5B7E7A
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#8f8f8f
  • editorSuggestWidget.foreground#FFFFFF
  • editorSuggestWidget.highlightForeground#43B9D8
  • editorSuggestWidget.selectedBackground#8f8f8f75
  • editorWidget.background#000000
  • editorWidget.border#000000
  • focusBorder#8f8f8f75
  • foreground#FFFFFF
  • gitlens.trailingLineBackgroundColor#000000
  • gitlens.trailingLineForegroundColor#8f8f8f
  • icon.foreground#ffffff
  • input.background#000000
  • input.border#8f8f8f75
  • input.foreground#FFFFFF
  • input.placeholderForeground#8f8f8f75
  • list.activeSelectionBackground#8f8f8f75
  • list.hoverBackground#8f8f8f75
  • list.inactiveFocusOutline#8f8f8f
  • list.inactiveSelectionBackground#8f8f8f15
  • menu.background#000000
  • menu.border#8f8f8f75
  • merge.border#8f8f8f75
  • notificationCenter.border#8f8f8f
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#FFFFFF
  • notifications.background#000000
  • notifications.border#8f8f8f75
  • notifications.foreground#FFFFFF
  • panel.background#000000
  • panel.border#8f8f8f75
  • panel.dropBorder#8f8f8f
  • panelSection.border#8f8f8f75
  • panelTitle.activeForeground#8f8f8f
  • panelTitle.inactiveForeground#8f8f8f75
  • peekView.border#8f8f8f75
  • peekViewTitle.background#000000
  • peekViewTitleLabel.foreground#ffffff
  • quickInput.background#000000
  • sideBar.background#000
  • sideBar.border#8f8f8f75
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#8f8f8f75
  • sideBarSectionHeader.foreground#8f8f8f
  • sideBarTitle.foreground#8f8f8f
  • statusBar.background#000000
  • statusBar.border#8f8f8f75
  • statusBar.debuggingBackground#43B9D815
  • statusBar.debuggingForeground#8f8f8f
  • statusBar.foreground#8f8f8f
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#8f8f8f
  • statusBarItem.hoverBackground#101010
  • tab.activeBackground#000000
  • tab.activeBorder#FFFFFF
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#8f8f8f75
  • tab.border#8f8f8f75
  • tab.hoverBackground#8f8f8f25
  • tab.hoverBorder#8f8f8f75
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#FFFFFF
  • tab.inactiveModifiedBorder#8f8f8f75
  • tab.unfocusedActiveBackground#000000
  • tab.unfocusedActiveBorder#8f8f8f
  • tab.unfocusedActiveForeground#FFFFFF
  • tab.unfocusedHoverBackground#8f8f8f25
  • tab.unfocusedInactiveBackground#000000
  • tab.unfocusedInactiveForeground#FFFFFF
  • terminal.ansiBlack#8f8f8f
  • terminal.ansiBlue#5ccaef
  • terminal.ansiBrightBlack#8f8f8f
  • terminal.ansiBrightBlue#5ccaef
  • terminal.ansiBrightCyan#a57fff
  • terminal.ansiBrightGreen#98d800
  • terminal.ansiBrightMagenta#f57f00
  • terminal.ansiBrightRed#f82a5d
  • terminal.ansiBrightWhite#f1f1f1
  • terminal.ansiBrightYellow#e7dc60
  • terminal.ansiCyan#a57fff
  • terminal.ansiGreen#98d800
  • terminal.ansiMagenta#f57f00
  • terminal.ansiRed#f82a5d
  • terminal.ansiWhite#f1f1f1
  • terminal.ansiYellow#e7dc60
  • terminal.border#8f8f8f75
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#8f8f8f
  • titleBar.border#8f8f8f75
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#8f8f8f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#D5CED9
comment, markup.quote.markdown, meta.diff, meta.diff.header#5f6167
meta.template.expression.js, constant.name.attribute.tag.jade, punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown#D5CED9
variable, support.variable, entity.name.tag.yaml, constant.character.entity.html, source.css entity.name.tag.reference, beginning.punctuation.definition.list.markdown, source.css entity.other.attribute-name.parent-selector, meta.structure.dictionary.json support.type.property-name#00e8c6
markup.bold, constant.numeric, meta.group.regexp, constant.other.php, support.constant.ext.php, constant.other.class.php, support.constant.core.php, fenced_code.block.language, constant.other.caps.python, entity.other.attribute-name, support.type.exception.python, source.css keyword.other.unit, variable.other.object.property.js.jsx, variable.other.object.js#f39c12
markup.list, text.xml string, entity.name.type, support.function, entity.other.attribute-name, meta.at-rule.extend, entity.name.function, entity.other.inherited-class, entity.other.keyframe-offset.css, text.html.markdown string.quoted, meta.function-call.generic.python, meta.at-rule.extend support.constant, entity.other.attribute-name.class.jade, source.css entity.other.attribute-name, text.xml punctuation.definition.string#FFE66D
markup.heading, variable.language.this.js, variable.language.special.self.python#ff00aa
punctuation.definition.interpolation, punctuation.section.embedded.end.php, punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.php, punctuation.section.embedded.begin.ruby, punctuation.definition.template-expression, entity.name.tag#f92672
storage, keyword, meta.link, meta.image, markup.italic, source.js support.type#c74ded
string.regexp, markup.changed#7cb7ff
constant, support.class, keyword.operator, support.constant, text.html.markdown string, source.css support.function, source.php support.function, support.function.magic.python, entity.other.attribute-name.id, markup.deleted#ee5d43
string, text.html.php string, markup.inline.raw, markup.inserted, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string, text.html punctuation.definition.string, text.html string#96E072
entity.other.inherited-classunderline

Shiki preview

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

Loading...

IfteTheme - Coding Theme