Hi @scblr

I cannot find the predefined Dark theme from the library and cannot find the Wikimedia dark style for the map either.

Here's the current json file we are using for the map, it is a static file that will be included in the app.
https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Kartographer/+/663867/9/mvt-style.json

If you check on the file above, you can notice some styling patterns by checking the id and its paint.

My question is:
Would that be helpful to provide you a list of id and its paint hex color for you to tune for the Dark theme? or maybe from the design team, you have a pre-defined color guideline for the map like what we did in the component work?

Hey @cooltey, thanks for the info. I have a clarifying question: isn’t Mapbox supposed to have a core dark theme, see this link or screenshot below:

If we can’t use the core themes, it’d be good if you could provide the list you’ve mentioned. I think the most up-to-date resource to base this on is the Theme - Master file on Figma.

Hey @cooltey, thanks for the info. I have a clarifying question: isn’t Mapbox supposed to have a core dark theme, see this link or screenshot below:

It is from MapBox but we are using the open-source version called MapLibre, and it looks like the core styles are not included in the MapLibre library.

If we can’t use the core themes, it’d be good if you could provide the list you’ve mentioned. I think the most up-to-date resource to base this on is the Theme - Master file on Figma.

I cannot find the match colors for the dark theme from our theme guideline, maybe you have some ideas about it.

Here is the list of items with their colors:

@scblr
I tried to apply my own dark theme setting to the map and here is the demo:
https://www.youtube.com/shorts/Vwub0XfWEs4

And here is the config I used:

You can download the APK to see how it works:
https://github.com/wikimedia/apps-android-wikipedia/pull/4307

Please let me know if you need to tweak a bit, thanks!

Thanks @cooltey 👊

It is from MapBox but we are using the open-source version called MapLibre, and it looks like the core styles are not included in the MapLibre library.

I see; so MapBox and MapLibre are two completely different products?

And you are saying that is not possible to use MapBox’s style files from here? 👇

I tried to apply my own dark theme setting to the map and here is the demo:

I will likely have to invest more time in this (and maybe play around directly in Android Studio), but could you try these styles for dark mode and maybe post some screenshots (or a video) ?

Hi @scblr

And you are saying that is not possible to use MapBox’s style files from here? 👇

Correct. The Mapbox styles are not included in the library so we cannot use them.

I will likely have to invest more time in this (and maybe play around directly in Android Studio), but could you try these styles for dark mode and maybe post some screenshots (or a video) ?

Done:
https://youtube.com/shorts/Uyl3AI3Hb1Q?feature=share

If you would like to update the configuration yourself, please edit the mapstyle-dark.json in the assets package.

@cooltey

I will likely have to invest more time in this (and maybe play around directly in Android Studio), but could you try these styles for dark mode and maybe post some screenshots (or a video) ?

Done:
https://youtube.com/shorts/Uyl3AI3Hb1Q?feature=share

It's a bit better (the darker green), but it looks pretty similar to what you had previously! ;)

If you would like to update the configuration yourself, please edit the mapstyle-dark.json in the assets package.

How about scheduling a session to try to tweak this together tonight? I added some time to our calendars!

I experimented with AI prompts @cooltey. I trained GPT-4 with best practices first. Then, I took several rounds of prompt writing and fine-tuning. Initial mistakes to not translate hslu, opacity, or shorthand hex code writing have been ironed out (in theory). I have high hopes. Can you try them out, please? Looking forward to our session later today! 👨‍🎨🎨

1) Dark theme based on the existing light theme (fine-tuned):

2) Uses a color scheme based on Google Maps for light and dark:

3) Uses a color scheme based on Apple Maps for light and dark:

Cooltey and I had a session today in which we tweaked the styles. These are the ones we are using now:

I consider this SPIKE as completed.