Dark mode and appearance

Latte comes in light and dark, and you can pick an accent color to make it yours. Your choice is remembered on the device you set it on.

🖥 Web
📱 Mobile

Click the menu icon in the top app bar.

Screenshot coming soon

The app-bar menu open, showing Toggle dark/light mode and Switch theme

Capture spec (for maintainers)

{
  "id": "web.profile-and-friends.dark-mode-and-appearance.app-menu",
  "platform": "web",
  "route": "/",
  "actions": [
    {
      "click": {
        "selector": "#app-bar button[aria-haspopup]",
        "note": "the hamburger menu icon in the top app bar"
      }
    },
    {
      "assertVisible": {
        "text": "Toggle dark/light mode"
      }
    }
  ]
}

Click Toggle dark/light mode to switch between the light and dark themes.
Click Switch theme to pick an accent color from the palette.

On the Latte desktop app

The desktop app has the same app-bar menu, so dark mode and accent color live in the same place.

Open your profile.
Under Appearance, use the Theme switch to turn dark mode on or off. The label shows Dark or Light to tell you which is active.
Screenshot coming soon
The Appearance section on the mobile profile with the Theme dark/light switch
Capture spec (for maintainers)
```
{
  "id": "mobile.profile-and-friends.dark-mode-and-appearance.appearance-section",
  "platform": "mobile",
  "route": "/users/me",
  "actions": [
    {
      "assertVisible": {
        "text": "Theme"
      }
    }
  ]
}
```

tip

The accent-color palette lives on the web and desktop app. On mobile you get the light/dark Theme switch.

Related​

Related