[openstreetmap/openstreetmap-website] Dark Mode (#2332)

[Emin Kocan]

I've been exploring these updates, and with Bootstrap 5.3 now in use, I believe we can implement them with minimal code adjustments.

> - **Refactor the background color for `content-heading` to use theme colors instead of a standard color variable**

This seems to be working fine locally, so I assume it’s already been addressed.

> - **Refactor our table striping override**

Tables could benefit from some additional styling adjustments to better align with the overall UI appearance in dark mode. I’d be happy to dive deeper into this and prepare a PR. Here’s how the notes table currently appears:
<img width="974" alt="Screenshot 2024-11-07 at 09 22 48" src="https://github.com/user-attachments/assets/e9ca425f-9573-4732-aa65-4793c96af6b1">

I also reviewed other pages across the site, and so far, everything else seems consistent.

I tried applying the suggested filter styling to the map, but I couldn't locate the correct class in the code. For reference, here’s the suggested style:

> `invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)`

@krjan02 @pkrasicki Would you know which class should be targeted to apply this effect to the map? 

If we’re aligned on this approach, I'm keen to open a PR for this. Additionally, would you be interested in styling the map with this filter as mentioned in the comments or perhaps adding a dropdown with options like dark mode (UI), dark mode (UI + map), and default mode?
@tomhughes @AntonKhorev @gravitystorm 

#### Additional Screenshots
<img width="1442" alt="Screenshot 2024-11-07 at 09 36 59" src="https://github.com/user-attachments/assets/c7522e87-a11a-4a63-a38e-a3ed181a5527">
<img width="1467" alt="Screenshot 2024-11-07 at 09 40 20" src="https://github.com/user-attachments/assets/310fbec8-4c1e-4030-98f9-51132f557626">


-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/2332#issuecomment-2461656428
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/issues/2332/2461656428 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20241107/847f058a/attachment.htm>