CUI

Components / Actions

Theme switcher and toggle

Controls that switch the app between light, dark and the system theme.

Functions: cui_theme_switcher, cui_theme_toggle

Usage

static int mode = -1;                       /* -1 picks up the current theme */
cui_theme_switcher(ui, &mode, true);        /* light, dark, system */
cui_theme_toggle(ui);                       /* one icon button with a sun or a moon */

Light and dark are applied for you. For "system" (mode 2), read the OS setting (for example with cui_app_desc.follow_system_theme) and call cui_set_theme.

cui_theme_switcher returns true on the frame the choice changes. mode is your int: 0 is light, 1 is dark and 2 is system. The switcher writes the new choice into it, and a value outside the range, such as the -1 above, is replaced by 0 or 1 to match the theme in use. Pass false as the last argument to leave the system choice out. cui_theme_toggle needs no variable: it reads the current theme, flips it on a click and returns true on that frame. Both use a fixed internal id, so a second switcher or toggle in the same id scope needs a cui_id_scope around it.

Keyboard

  • In the switcher, Tab, or Left and Right, move between the choices. The toggle takes Enter or Space.

Related

  • User menu: An avatar, a name and a detail line that open an account menu with a header.
  • Speed dial: A round floating button that fans out a few related actions.
  • Swipe actions: A row that slides sideways to reveal actions such as archive or delete.
  • Reactions: Reaction buttons with a count each, as under a message or a post.