Other

ThemeGlyph

The Auto, Light and Dark marks, drawn to move.

Props

Guidelines

The Auto, Light and Dark marks, drawn to move. Use them wherever someone picks a theme: the AccountMenu theme row and ThemeToggle.

Provide: theme (auto, light or dark). Optional size (default 20) and on.

• Outlined at rest. Once chosen they fill in: the sun's rays burst out and settle, six stars fade up around the moon one by one and twinkle, and Auto's half spins round to fill.
• "Chosen" comes from the parent: an element with aria-checked="true" or aria-pressed="true" (a menu radio, a toggle). Pass on when there is no such parent.
• The marks are decoration (aria-hidden); name the control that holds them.
• Under reduced motion they fill and the stars show, with no movement.
• They draw in currentColor, so they follow the control's text color in both themes.