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

Andy Allan notifications at github.com
Wed Sep 20 16:09:57 UTC 2023


I experimented today with using [Bootstrap 5.3 built-in support for colour modes](https://getbootstrap.com/docs/5.3/customize/color-modes/). Here's a couple of screenshots for what it currently looks like:

![Screenshot from 2023-09-20 16-37-34](https://github.com/openstreetmap/openstreetmap-website/assets/360803/d47c0147-5ab6-45c3-9c61-a499a3f856e8)
![Screenshot from 2023-09-20 16-37-24](https://github.com/openstreetmap/openstreetmap-website/assets/360803/8f7d4f95-6ca9-44aa-afb0-804f388d2cf2)

This was a one-line change to turn on dark mode (`data-bs-theme="dark"` on `<html>`), and is just a PoC (no automatic UA-driven switching etc). It also shows that more work needs to be done first, such as:

* refactor how we define the background color for the content-heading so that it is driven by theme colours rather than a standard colour variable
* refactor our override of the table striping
* ... I'm sure there's many other parts of the site that will need refactoring to fully work too.

We aren't even on bootstrap 5.3 yet, this was just while I was testing some other upgrades. But since colour themes are built into newer versions of bootstrap, this is definitely the way forward for implementing dark mode.

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

Message ID: <openstreetmap/openstreetmap-website/issues/2332/1728044333 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20230920/334a8f56/attachment.htm>


More information about the rails-dev mailing list