Skip to content

Migrate to Material Design 3

Goals

  • upgrade the color system without using dynamic color
  • upgrade basic components (FAB, bottom app bar, etc.)
  • does not introduce breakage
  • minimal changes

Colors

I used our current primary (fdroid_blue #1976d2) and secondary color (fdroid_green #8ab000) with the Material Theme Builder (with matched color), and here is what I get: https://www.figma.com/file/ABnrhL6k5yDa67nOchezuD/Material-3-Design-Kit-(Community)?type=design&node-id=49823%3A12141&mode=design&t=LNzqJd5skWrE7WCK-1

image

We don't have a tertiary brand color. So I just used the generated tertiary color by the Material Theme Builder (magenta #A685B1), based on the Primary Color fdroid_blue #1976d2, as recommended by the guidelines for this situation.

image

image

Preview

Light

image28f623a8-2eb6-4a5d-89d8-16acf231baf681744797-83bf-4bcf-b9a5-081579e6a8fcimage.pngimageimageimageimage.png

Dark

2a4d7fe3-c6f2-4e44-92f9-7b8ae7a0c7134c9a288f-4936-48d4-b547-035e8403fad1a61f50a7-76ed-486c-b191-8212a376468eimageimage.pngimage.png055b6bca-d267-45d5-abe8-04419b26dac1.png2123e4ef-01fd-47fb-820c-5c2b694362c8.png

Black

121f881f-0400-43f8-84c1-64a3a0cfa582a209b5d7-13c6-44a2-b324-b8a72c09bbadcf283e16-5ad0-4685-be52-cadc15016810imageimage.pngimage698ebf16-9a70-4868-8732-a58af364ae86.png4166ce81-9617-4225-b206-f3e45c8bdd8b.png

Fixes #1962 (closed), #2246 (closed), #2511 (closed), #2927 (closed), #2926 (closed)

Edited by Torsten Grote

Merge request reports

Loading