[Feature] Dark mode friendly PWA splash screen

[schaafjs]

Is your feature request related to a problem? Please describe.
I prefer the dark version of cryptee on my mobile device but this setting is not respected by the splash screen since that is most likely a hardcoded image.

Describe the solution you'd like
A dark mode friendly PWA splash screen which is either the standard or switches based on the theme selected by the user.

Additional context
n/a

[brendanperry]

I agree this would be a nice fix.

[PreciselyPixels]

Yet to be fixed with crypt.ee 3.0

[johnozbay]

Hey there! Funny thing is that we actually did fix this for v3.0 initially :

web-client/source/imports/www/webapp-head.kit

Lines 16 to 94 in 7ae4124

	<!-- LIGHT & DARK MODE -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-2048-2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-2048-2732.png" media="(prefers-color-scheme: dark) and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-2732-2048.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-2732-2048.png" media="(prefers-color-scheme: dark) and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-1668-2388.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-1668-2388.png" media="(prefers-color-scheme: dark) and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-2388-1668.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-2388-1668.png" media="(prefers-color-scheme: dark) and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-1536-2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-1536-2048.png" media="(prefers-color-scheme: dark) and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-2048-1536.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-2048-1536.png" media="(prefers-color-scheme: dark) and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-1668-2224.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-1668-2224.png" media="(prefers-color-scheme: dark) and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-2224-1668.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-2224-1668.png" media="(prefers-color-scheme: dark) and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-1620-2160.png" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-1620-2160.png" media="(prefers-color-scheme: dark) and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-2160-1620.png" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-2160-1620.png" media="(prefers-color-scheme: dark) and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-1284-2778.png" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-1284-2778.png" media="(prefers-color-scheme: dark) and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-2778-1284.png" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-2778-1284.png" media="(prefers-color-scheme: dark) and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-1170-2532.png" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-1170-2532.png" media="(prefers-color-scheme: dark) and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-2532-1170.png" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-2532-1170.png" media="(prefers-color-scheme: dark) and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-1125-2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-1125-2436.png" media="(prefers-color-scheme: dark) and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-2436-1125.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-2436-1125.png" media="(prefers-color-scheme: dark) and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-1242-2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-1242-2688.png" media="(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-2688-1242.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-2688-1242.png" media="(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-828-1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-828-1792.png" media="(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-1792-828.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-1792-828.png" media="(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-1242-2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-1242-2208.png" media="(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-2208-1242.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-2208-1242.png" media="(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-750-1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-750-1334.png" media="(prefers-color-scheme: dark) and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-1334-750.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-1334-750.png" media="(prefers-color-scheme: dark) and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-640-1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-640-1136.png" media="(prefers-color-scheme: dark) and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" /> -->
	<link rel="apple-touch-startup-image" href="../imgs/splash/lm/apple-splash-1136-640.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
	<!-- <link rel="apple-touch-startup-image" href="../imgs/splash/dm/apple-splash-dark-1136-640.png" media="(prefers-color-scheme: dark) and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" /> -->

BUT.
Turns out there's a big Safari bug that made things even worse. Basically Safari caches app icons & start screens at the moment of installation, and keeps using those forever. So if you had dark mode on when you installed Cryptee it gets stuck in dark mode boot images etc.

What's more is that your boot images may also get stuck on the install-moment orientation of your device (i.e. if you installed Cryptee while your iPad was in portrait mode, if you launch Cryptee in landscape the splash images stretch out to fill the screen 🤦🏻‍♂️ ) thx apple. Both are known webkit bugs, and hopefully someone will fix them soon. Here's a relevant thread if you'd like to read more about all the ios specific splash screen bugs.

Until then, we had to make a choice to go with one or another. So we checked what other apps do, and majority of the ones we checked seemed be going with light-mode as default in these situations, so that's what we did. As soon as webkit fixes these bugs, we'll enable the dark mode splash screens.

Hoping this makes sense! ✌🏻

[ghost]

Does the same apply to Blink-based browsers like Chromium? I experience similar situation with the Chromium Browser on my Android device

[johnozbay]

@makkussu It's entirely possible! Pretty much every browser, blink-or-not, implement PWA manifests differently. Mainly because the idea of PWAs are still too new (in internet years), there's very little standardization, and lots of work-in-progress changes.

PWA installation flows / implementations differ even among blink-based browsers (and even operating systems) nowadays.
i.e. Edge & Chrome have different installation badging & flows for PWAs even on same OSes.

Firefox introduced bunch of bugs with PWA installations recently, causing icons to appear white (#113) etc.

All this aside, –funnily enough– the concept of "dark-mode" itself is still too new for the web & operating systems.
i.e. our editor now supports full-dark-mode (dark background, white text), and we have to convert dark background to light background right before things are printed so that you won't empty the ink cartridge printing all black. Turns out some browsers auto-disable dark mode before rendering the page for print (yay!), and some don't (fuuuuck!). So to combat this, we have to watch for the "print" event, turn on light-mode before opening the print dialog, wait for browser to render the document for print, then restore dark-mode. 🤦🏻‍♂️ (here's where all this magic happens if you want to check the code)