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#19181a
  • activityBar.foreground#ffffff
  • activityBarBadge.background#7d3eeb
  • activityBarBadge.foreground#ffffff
  • badge.background#464c50
  • badge.foreground#ffffff
  • button.background#7d3eeb
  • button.foreground#ffffff
  • button.hoverBackground#9357fd
  • dropdown.background#373f44
  • dropdown.border#373f44
  • dropdown.foreground#c3c3c3
  • dropdown.listBackground#373f44
  • editor.background#20252a
  • editor.findMatchBackground#0c7d9d
  • editor.findMatchHighlightBackground#073a49
  • editor.foreground#d4d4d4
  • editor.hoverHighlightBackground#3c454a
  • editor.inactiveSelectionBackground#e98333
  • editor.lineHighlightBackground#242e32
  • editor.selectionBackground#0c69d8
  • editor.wordHighlightBackground#535e65
  • editorCursor.foreground#4c8ffc
  • editorError.foreground#d15d64
  • editorGroup.dropBackground#24292e
  • editorGroupHeader.tabsBackground#252526
  • editorHoverWidget.background#22272c
  • editorHoverWidget.border#3c454a
  • editorLineNumber.activeForeground#c3c3c3
  • editorLineNumber.foreground#ffffff
  • editorWhitespace.foreground#2d2d30
  • editorWidget.background#1a1e22
  • extensionButton.prominentBackground#7d3eeb
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#9357fd
  • focusBorder#24292e
  • foreground#c3c3c3
  • input.background#3b3b3e
  • input.foreground#c3c3c3
  • input.placeholderForeground#7f7f81
  • inputValidation.errorBackground#0c69d8
  • inputValidation.errorBorder#0c69d8
  • list.activeSelectionBackground#2a2d2e
  • list.focusBackground#2a2d2e
  • list.highlightForeground#3793fd
  • list.hoverBackground#2a2d2e
  • notificationCenter.border#19181a
  • notificationCenterHeader.background#1a1e22
  • notificationCenterHeader.foreground#ffffff
  • panel.background#20252a
  • panel.border#7d3eeb
  • panelTitle.activeBorder#7d3eeb
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#c3c3c3
  • pickerGroup.border#24292e
  • pickerGroup.foreground#3793fd
  • progressBar.background#7d3eeb
  • scrollbar.shadow#191919
  • settings.checkboxBackground#373f44
  • settings.checkboxBorder#373f44
  • settings.dropdownBackground#373f44
  • settings.dropdownBorder#24292e
  • settings.dropdownForeground#c0c0c0
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#0c69d8
  • settings.numberInputBackground#373f44
  • settings.numberInputBorder#24292e
  • settings.numberInputForeground#c0c0c0
  • settings.textInputBackground#373f44
  • settings.textInputBorder#24292e
  • settings.textInputForeground#c0c0c0
  • sideBar.background#373f44
  • sideBarSectionHeader.background#464c50
  • sideBarTitle.foreground#c3c3c3
  • statusBar.background#ffffff
  • statusBar.debuggingBackground#7d3eeb
  • statusBar.debuggingForegground#ffffff
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#ffffff
  • statusBar.noFolderForeground#000000
  • tab.activeBackground#20252a
  • tab.border#20252a
  • tab.inactiveBackground#252526
  • tab.inactiveForeground#a3a3a3
  • textLink.activeForeground#b690fc
  • textLink.foreground#9f7be1
  • walkThrough.embeddedEditorBackground#24292e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ffffff
keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block#ffffff
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdownbold
markup.italic.markdownitalic
meta.link.inline.markdown#c3c3c3underline
comment, markup.fenced_code, markup.inline#a3a3a3
string#af83a5
constant.numeric, constant.language, variable.language.this, variable.other.class, variable.other.constant, meta.property-name, meta.property-value, support#e8e8e8
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, support.function.node, support.type.property-name.json, punctuation.separator.key-value, punctuation.definition.template-expression#ed9a97
variable.parameter.function#e8be80
entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function, constant.keyword.clojure#af83a5
entity.name.tag, string.quoted, string.regexp, string.interpolated, string.template, keyword.other.template#98aa66
token.info-token#c3c3c3
token.warn-token#e8be80
token.error-token#ed9a97
token.debug-token#af83a5

Shiki preview

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

Loading...

Ultima - Coding Theme