Lily Design System™

Theme View

ThemeView is a headless component that displays the current theme name as inline text. It renders the theme value in a <span> element with an accessible label, making the current theme selection readable by screen readers.

This component is commonly paired with ThemeSelect in an Input/View pattern. While ThemeSelect allows the user to select a theme, ThemeView displays the currently active theme. It is useful in settings panels, status bars, or anywhere the current theme needs to be communicated visually and programmatically.

Example

Light
Show demo markup 
<span class="theme-view" role="img" aria-label="Current theme: Light">Light</span>
Usage example 
<script lang="ts">
  import ThemeView from "./ThemeView.svelte";
</script>

<ThemeView label="Current theme" value="dark" />
Show Svelte source 
// In your Svelte component:
import ThemeView from "lily-design-system-svelte-headless/components/ThemeView/ThemeView.svelte";

<ThemeView label="Label" value="Sample value" />

Usage

Display the current theme in a settings summary:

<ThemeView label="Current theme" value="dark" />

In a summary list alongside other preferences:

<SummaryList>
  <SummaryListItem>
    <dt>Theme</dt>
    <dd><ThemeView label="Current theme" value={currentTheme} /></dd>
  </SummaryListItem>
  <SummaryListItem>
    <dt>Language</dt>
    <dd>English</dd>
  </SummaryListItem>
</SummaryList>

In a status bar showing the active theme:

<footer>
  <ThemeView label="Active theme" value={theme} data-theme={theme} />
</footer>

Props

  • label: string (required) -- accessible name for the display element via aria-label
  • value: string (required) -- the current theme name to display as text content
  • ...restProps: unknown -- additional attributes spread onto the <span> element

Keyboard Interactions

None -- this component is a passive display element with no interactive behavior.

ARIA

  • aria-label={label} -- provides an accessible name describing what the displayed value represents

When to Use

  • Use to display the current theme in read-only format in settings summaries and status bars.
  • Use in confirmation screens where the user has just selected a theme and needs to see it confirmed.
  • Use when displaying the active theme alongside other user preferences.
  • Use in admin panels to show the theme assigned to a user or organisation.

When Not to Use

  • Do not use when users need to select or change the theme -- use ThemeSelect instead.
  • Do not use for general-purpose text display -- use a <span> or Badge instead.

Headless

This headless component provides a <span> element with aria-label for accessible read-only theme display. The consumer provides all visual styling, including typography, color, and layout.

Styles

The consumer provides all CSS styling. The component renders with a .theme-view class for targeting. No default styles are included — this is a fully headless component.

Testing

  • Verify the component renders a <div> element with class theme-view
  • Verify aria-label={label}` -- provides an accessible name describing what the displayed value represents
  • Verify pass-through attributes are applied

Advice

  • Designers: Style the theme name to visually reflect the current theme (e.g., dark text for dark mode label) so users can confirm at a glance.
  • Developers: Keep the value prop in sync with the actual applied theme so the display is always accurate.

Implementation Notes

  • Renders a <span> element containing the theme value as text content
  • Uses aria-label to provide an accessible name for the displayed value
  • Both label and value are required props
  • Spreads restProps onto the span for consumer customization
  • pattern: standard props destructuring with typed props

Composition

ThemeView is the read-only display counterpart to ThemeSelect. Use ThemeView to show the current theme, and pair it with ThemeSelect for editing.

Related components

  • theme-select — a select dropdown for choosing a theme

References

  • WAI-ARIA Accessible Name: https://www.w3.org/TR/accname-1.2/

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: theme-view
  • PascalCase: ThemeView
  • Description: a read-only display of the current theme
  • Status: stable — exercised in composed page flows under e2e and axe, beyond the per-component checks
  • HTML tag: <div>
  • CSS class: .theme-view
  • Interactive: no

ARIA

  • aria-label={label} -- provides an accessible name describing what the displayed value represents

Keyboard

  • No keyboard interactions — this is a passive element

Props

  • label: string (required) -- accessible name for the display element via aria-label
  • value: string (required) -- the current theme name to display as text content
  • ...restProps: unknown -- additional attributes spread onto the <span> element