[Demo App] Toolbar with light/dark support

[B3nz01d]

Card

Requirement

As a user of the demo
I want to be able to view the tested component in light and dark theme
So That I will get this ready to use component compatible with Orange design specifications and a11y requirements

General description

• An icon in the header should allow the user to switch from the current mode (system default /light or dark) to the opposite
• User flow possibilities from the toggle actions:
  • system default with light theme -> dark theme -> system default
  • system default with dark theme -> light theme -> system default
  • light theme -> dark theme -> light theme
  • dark theme -> light theme -> dark theme
• The toogle will present te user with :
  • in light theme: a moon icon to switch to dark mode
  • in dark them: a sun icon to switch to light mode

UI specifications

Anatomy

1. xx
2. xx

Variants

variant 1

xxx

variant 2

xxx

States

• xx
• xx
• xx
• xx

Internationalization

xxx

Appearance

xxx

Placement

xxx

UX specifications

Interaction

• All:
  • xxx
  • xxx
• Touch:
  • xxx
  • xxx
• Keyboard:
  • xxx
  • xxx

Animations

• xxx

Accessibility

Visual Accessibility

• (?) Color Management

Usage Accessibility

• (?) Focus order
• (?) Focus loss expected behavior
• (?) Screen Reader

Technical specifications

Implementation tasks

• Task 1
• Task 2

Related tasks

• Task 1
• Task 2