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#076ea8
• activityBar.background#ffffff
• activityBar.border#cdcccd
• activityBar.foreground#ffffff
• activityBar.inactiveForeground#084f7a
• activityBarBadge.background#c43837
• comment#028663
• constant.character#320e11
• constant.language#8b50b1
• constant.numeric#8b50b1
• constant.other.symbol#320e11
• editor.background#f9f9f9
• editor.findMatchBackground#9bd7f8
• editor.findMatchHighlightBackground#e6f5fd
• editor.findRangeHighlightBackground#e5e5e5
• editor.foreground#090306
• editor.hoverHighlightBackground#e5e5e5
• editor.inactiveSelectionBackground#e5e5e5
• editor.lineHighlightBackground#e6f5fd
• editor.lineHighlightBorder#9bd7f8
• editor.selectionBackground#076ea8
• editor.selectionForeground#090306
• editor.selectionHighlightBackground#9bd7f8
• editor.selectionHighlightBorder#cdcccd
• editor.symbolHighlightBackground#9bd7f8
• editor.wordHighlightBackground#9bd7f8
• editor.wordHighlightBorder#cdcccd
• editor.wordHighlightStrongBackground#e6f5fd
• editorBracketHighlight.foreground#076ea8
• editorBracketMatch.background#9bd7f8
• editorBracketMatch.border#076ea8
• editorCodeLens.foreground#076ea8
• editorCursor.background#e5e5e5
• editorCursor.foreground#076ea8
• editorError.foreground#c43837
• editorGhostText.foreground#777476
• editorGutter.addedBackground#028663
• editorGutter.background#f2f2f2
• editorGutter.deletedBackground#c43837
• editorGutter.modifiedBackground#076ea8
• editorIndentGuide.activeBackground#079cee
• editorIndentGuide.background1#cdcccd
• editorInfo.foreground#084f7a
• editorLineHighlightForeground#090306
• editorLineNumber.activeForeground#076ea8
• editorLineNumber.foreground#777476
• editorOverviewRuler.background#ffffff
• editorOverviewRuler.border#848182
• editorRuler.foreground#848182
• editorSelectionBorder#cdcccd
• editorWarning.foreground#b19014
• editorWhitespace.foreground#cdcccd
• entity.name.class#076ea8
• entity.name.enum#076ea8
• entity.name.function#076ea8
• entity.name.interface#076ea8
• entity.name.namespace#076ea8
• entity.name.struct#076ea8
• entity.name.tag#076ea8
• entity.name.type#076ea8
• entity.other.attribute-name#084f7a
• entity.other.inherited-class#076ea8
• invalid#c43837
• invalid.deprecated#b19014
• invalid.illegal#c43837
• keyword#8b50b1
• keyword.control#8b50b1
• keyword.operator#8b50b1
• markup.bold#076ea8
• markup.heading#076ea8
• markup.inline.raw#084f7a
• markup.italic#777476
• markup.link#076ea8
• markup.list#090306
• markup.quote#777476
• markup.underline#076ea8
• markup.underline.link#076ea8
• meta.embedded#b19014
• meta.function-call#076ea8
• meta.function.parameters#090306
• meta.tag#076ea8
• punctuation#777476
• punctuation.bracket#777476
• punctuation.definition.string#777476
• punctuation.separator#777476
• punctuation.terminator#777476
• sideBar.background#ffffff
• sideBar.border#cdcccd
• sideBar.foreground#076ea8
• sideBarActivityBarTop.border#cdcccd
• sideBarSectionHeader.background#076ea8
• sideBarSectionHeader.foreground#ffffff
• sideBarTitle.background#ffffff
• source#090306
• statusBar.background#ffffff
• storage#8b50b1
• storage.modifier#8b50b1
• storage.type#8b50b1
• string#c43837
• string.interpolated#c43837
• string.quoted.double#c43837
• string.quoted.single#c43837
• string.quoted.triple#c43837
• string.regexp#b19014
• support.class#076ea8
• support.constant#8b50b1
• support.function#076ea8
• support.other.variable#084f7a
• support.type#076ea8
• terminal.background#f9f9f9
• terminal.foreground#084f7a
• titleBar.activeBackground#076ea8
• variable#090306
• variable.language#8b50b1
• variable.other.constant#8b50b1
• variable.other.readwrite#c43837
• variable.parameter#090306

tokenColors

TextMate scopes and font styles (syntax highlighting rules).