Skip to content

Change how whitelabel themes are generated #9459

@charlag

Description

@charlag

#9388 migrates the app to new color tokens aligned more closely to Material 3.

Unfortunately existing whitelabel themes cannot be migrated in a fully compatible way.

As more colors of the app are now variable it is not enough to select accent color + dark/light base. We need a way to generate full theme from one or few colors selected by the user.

Individual parts of whitelabel editor should be removed. Changing individual tokens is hard for users, leads to breakages and adds maintenance burden.

AC

  • Whitelabel editor allows selecting the source color, akin to Material Theme Builder and light/dark base
  • The rest of the theme is generated from this information
  • "Advanced" part of whitelabel editor is removed

Estimated: 24h

Tasks

  • Fork the library, remove unneeded code
  • Review the library
  • Generate the theme during editing
  • Add a version to theme config

Test notes

New whitelabel using new client:

  • Whitelabel custom color palette can be generated using a Source color for both light and dark themes.
  • When first setting a custom color palette, sourceColor defaults to the default primary color.
  • sourceColor is persisted when setting a custom color theme.
  • When a custom color theme is a set, and logo isn't, the default gray Tuta logo is used.
  • When a custom logo is set and color isn't, the default theme colors are used.
  • When on Tuta domain the theme is reverted to the user's current theme after the custom color dialog is closed.
  • When on whitelabel domain the new custom theme is applied immediately and closing the custom color dialog doesn't revert the theme.
  • Check how the color theme is applied across the app, check for weird colors and glitches.

Old whitelabel using new client:

  • Having old whitelabel theme and logging in with the new client doesn't change whitelabel setting.
    • Using an old client setup whitelabel with no custom logo and no custom colors.
    • Login with the new client, check that whitelabel settings aren't changed (custom colors and custom logo are both deactivated).
    • When custom color is set but logo isn't, settings aren't changed.
    • When logo is set, but custom colors are deactivated, settings aren't changed.
  • For whitelabel users, old custom color theme is used to generate new theme.
    • Using an old client set a custom whitelabel color.
    • Login with a new client as a whitelabel user (not admin), see that the old accent color was used to generate a new theme. Test this using both web and desktop client and see that on desktop the generated theme is persisted in conf.json (check that the theme has a version: 1 and new color tokens like primary).
    • Check the old client again to see that the old theme is still used there.
  • For whitelabel admins, old custom color theme is migrated to new tokens on login.
    • Using an old client set a custom whitelabel color.
    • Login with a new client as a whitelabel admin, see that the old accent color was used to generate a new theme.
    • The old color theme should've also been migrated, so check the old client again to see that it now used the new Material 3 colors.

New whitelabel using old client:

  • Using the new client set a custom whitelabel color.
  • Login using an old client, see that the whitelabel theme uses Material 3 colors.

Note: Trying to edit a new whitelabel color theme using an old client will cause an error to be thrown, this is expected. The new color theme can't be edited using an old client, but we can still remove it and create another old whitelabel color theme.

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions