Dark mode for Chrome App's Title Bar

🌟Features
#1

Hi devs. A lot of people would be using chrome’s app shortcut feature (3 dots>More Tools>Create Shortcut>Open in new tab) to convert dynalist.io into an app. I’ve been using dynalist (and many web apps) this way on my laptop from few months because of limited storage. The experience is great. It feels like I’m using dynalist desktop app.

Except one thing: The title bar. It stays white. I feel it can be easily tweaked to turn dark by developers. This one little thing would make the whole experience of app shortcut perfect. Please take a look at below screenshot to understand my request better.

QIwXKH
QIwXKH1920Ă—1080 372 KB

Thank you :slightly_smiling_face:

#2

I figured out the developers might need to change “theme-color” meta-tag to black and this will be done. This will create a great user experience as a lot of people are using dark theme of dynalist and lot of them might be using it in chrome app mode so it’s obvious they would want a darker title bar.

How I came up with the answer? These two pages helped me figure out the solution:
https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/cmrz3SCRQGQ

1 Like
#3

Temporary DIY Solution is here:

Until developers fix this you can manually change color of chrome app’s title bar using below method:

  1. Uninstall dynalist chrome app if you have installed previously
  2. Open dynalist on chrome and right click anywhere on the page and select option called “Inspect”
  3. Don’t get overwhelmed by the window that shows up, just press Ctrl+F (windows) or CMD+F (Mac) and it’ll open a search field.
  4. type “theme-color” (without quotes) and double click on “#ffffff” and type “#1a1a1a” without quotes.
  5. Create chrome app as you normally do. Which is from chrome options (3 dots at top right)> More tools>Create Shortcut and in the popup select “open as window”
  6. Enjoy the fully dark mode dynalist chrome app (until you close and reopen it. :slight_smile:
#4

This is a problem for the macOS app as well:

Screen Shot 2020-03-05 at 13.50.29
Screen Shot 2020-03-05 at 13.50.291776Ă—1306 286 KB

#5

Oh! I wish developers see this thread. The fix is literally 5 lines of code. They can change the meta called theme-color to “#1a1a1a” when user is using a darker theme.

This problem is quite small but does leave a gap in having a great user experience. What’s funny is it has been this way since the beginning and still no one noticed this or made thread around it.

#6

Saw something interesting today. The title bar has now turned to blue.

Dynalist
Dynalist1692Ă—885 174 KB

#7

Anyone figure out other workarounds for this?

Apparently you can’t modify a page’s metadata tag via CSS? :stuck_out_tongue:

#8

I really wish this was possible through CSS, because I feel like developers don’t even visit this place, let alone fix something so basic.

Like it would take less than 5 minutes to create a simple code on their side that changes " theme-color" meta according to user’s theme.

1 Like
#9

You can change the HTML via the chrome extension tampermonkey

2 Likes