Alloy Design System Theme

Color themes

• 

  Alloy (Dark)

• 

  Alloy (Light)

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.activeBackground#38aff1
• activityBar.background#211b1e
• activityBar.border#777476
• activityBar.foreground#211b1e
• activityBar.inactiveForeground#079cee
• activityBarBadge.background#e06463
• comment#00bf8c
• constant.character#efb1b1
• constant.language#ae7ad0
• constant.numeric#ae7ad0
• constant.other.symbol#efb1b1
• editor.background#090306
• editor.findMatchBackground#3a3537
• editor.findMatchHighlightBackground#2d282b
• editor.findRangeHighlightBackground#464244
• editor.foreground#e5e5e5
• editor.hoverHighlightBackground#464244
• editor.inactiveSelectionBackground#464244
• editor.lineHighlightBackground#2d282b
• editor.lineHighlightBorder#3a3537
• editor.selectionBackground#5e5a5c
• editor.selectionForeground#e5e5e5
• editor.selectionHighlightBackground#3a3537
• editor.selectionHighlightBorder#777476
• editor.symbolHighlightBackground#3a3537
• editor.wordHighlightBackground#3a3537
• editor.wordHighlightBorder#777476
• editor.wordHighlightStrongBackground#2d282b
• editorBracketHighlight.foreground#38aff1
• editorBracketMatch.background#3a3537
• editorBracketMatch.border#38aff1
• editorCodeLens.foreground#38aff1
• editorCursor.background#464244
• editorCursor.foreground#38aff1
• editorError.foreground#e06463
• editorGhostText.foreground#b4b2b3
• editorGutter.addedBackground#00bf8c
• editorGutter.background#150f12
• editorGutter.deletedBackground#e06463
• editorGutter.modifiedBackground#38aff1
• editorIndentGuide.activeBackground#079cee
• editorIndentGuide.background1#777476
• editorInfo.foreground#079cee
• editorLineHighlightForeground#e5e5e5
• editorLineNumber.activeForeground#38aff1
• editorLineNumber.foreground#b4b2b3
• editorOverviewRuler.background#211b1e
• editorOverviewRuler.border#dad9d9
• editorRuler.foreground#dad9d9
• editorSelectionBorder#777476
• editorWarning.foreground#fbd747
• editorWhitespace.foreground#777476
• entity.name.class#38aff1
• entity.name.enum#38aff1
• entity.name.function#38aff1
• entity.name.interface#38aff1
• entity.name.namespace#38aff1
• entity.name.struct#38aff1
• entity.name.tag#38aff1
• entity.name.type#38aff1
• entity.other.attribute-name#079cee
• entity.other.inherited-class#38aff1
• invalid#e06463
• invalid.deprecated#fbd747
• invalid.illegal#e06463
• keyword#ae7ad0
• keyword.control#ae7ad0
• keyword.operator#ae7ad0
• markup.bold#38aff1
• markup.heading#38aff1
• markup.inline.raw#079cee
• markup.italic#b4b2b3
• markup.link#38aff1
• markup.list#e5e5e5
• markup.quote#b4b2b3
• markup.underline#38aff1
• markup.underline.link#38aff1
• meta.embedded#fbd747
• meta.function-call#38aff1
• meta.function.parameters#e5e5e5
• meta.tag#38aff1
• punctuation#b4b2b3
• punctuation.bracket#b4b2b3
• punctuation.definition.string#b4b2b3
• punctuation.separator#b4b2b3
• punctuation.terminator#b4b2b3
• sideBar.background#211b1e
• sideBar.border#777476
• sideBar.foreground#38aff1
• sideBarActivityBarTop.border#777476
• sideBarSectionHeader.background#38aff1
• sideBarSectionHeader.foreground#211b1e
• sideBarTitle.background#211b1e
• source#e5e5e5
• statusBar.background#211b1e
• storage#ae7ad0
• storage.modifier#ae7ad0
• storage.type#ae7ad0
• string#e06463
• string.interpolated#e06463
• string.quoted.double#e06463
• string.quoted.single#e06463
• string.quoted.triple#e06463
• string.regexp#fbd747
• support.class#38aff1
• support.constant#ae7ad0
• support.function#38aff1
• support.other.variable#079cee
• support.type#38aff1
• terminal.background#090306
• terminal.foreground#079cee
• titleBar.activeBackground#38aff1
• variable#e5e5e5
• variable.language#ae7ad0
• variable.other.constant#ae7ad0
• variable.other.readwrite#e06463
• variable.parameter#e5e5e5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).