Gollum: Improve Primer.css styling

[bartkamphorst]

Github's Primer.css has been added to gollum for styling (implemented in https://github.com/gollum/gollum/pull/1393). This issue is meant to track any styling issues that can be improved upon, but also as an open invitation to improve the styling more generally.

• [x] [Use Primer to style the breadcrumbs](https://primer.style/css/components/breadcrumb)
• [x] [Use Primer to style horitzontal rule](https://github.com/gollum/gollum/issues/1518)
• [x] [Use Primer to style H1-H6 headings](https://github.com/gollum/gollum/issues/1515)
• [ ] [Box overlays](https://github.com/gollum/gollum/issues/1381)

[dometto]

Added a todo list in the starting comment above.

[bartkamphorst]

Primer breadcrumbs implemented in #1499

[PanAeon]

Hi,
methinks it would be much better if either:
a) the styling were handled without any framework at all with pure css, or
b) the framework chosen for styling were much more customization friendly then Primer.css. Or at least there were a comprehensive guide on how to generate custom themes for the Primer.css

My reasons for writing this is that I prefer a dark theme. I had written a small css with like 70 lines of code and achieved what I wanted (not glossy looking of course) but still, this shows that surface area is quite small and it's possible to extract everything into a custom css and don't use any framework at all.

I think this would greatly benefit the project. I think the people that choose gollum over obsidian for example, are the people that like flexibility, so event a decent pack of bundled themes is a bit worse then a clear defined and simple way to customize gollum's appearance.

What do you think?

[bartkamphorst]

Looks like (automatic) dark mode is coming to primer with the release of v16: https://github.com/primer/css/pull/1131.

[dometto]

Looks like (automatic) dark mode is coming to primer with the release of v16: primer/css#1131.

Cool! Would that provide a simple way for the user to activate this via custom.css?

[bartkamphorst]

See these new docs. Apparently, we should be able to set data-color-mode to auto to make the pages sync with the OS's color mode. Pretty sweet.

<div data-color-mode="auto" data-light-theme="light" data-dark-theme="dark_dimmed" class="p-3">

[bartkamphorst]

BTW, release v.16 should drop by the end of this month.