[Feedback] Native dark theme for the website

[Andre601]

Describe the topic

It could be a useful feature to have the Octicons site (and maybe primer.style as a whole) support a native dark theme to be used. While extensions such as Dark Reader already do the job would a native dark theme be better... primarily to also test out and see certain UI features in the GitHub Dark themes available, which in the end could help with debugging things.

If it is doable should primer use whatever theme has been defined in GitHub (Would require a logged in account I assume?) and otherwise stick to some defaults.

Perhaps also offer a theme toggle to switch between the themes.

Anything else?

This is only a minor thing and the usage of browser extensions such as Dark Reader is more than good enough for the time being, so this is nothing that should be considered of being high priority.

[jsoref]

I filed https://github.com/github/feedback/discussions/12233 about this...

[Andre601]

I filed github/feedback#12233 about this...

Not sure how this is related in any way...

My issue here is about https://primer.style/octicons not having a native dark theme, which is rather strange since it's about GitHub SVGs which should work in both light and dark theme, so a native toggle to see the icons in both styles is only logical.

Your issue isn't something GitHub should IMO fix, as it could affect other SVGs too. Octicons are black by default due to them not having any specific fill color defined.

The issue you have is solved by downloading the SVG from the Octicons page, open it in a text editor and add fill="#ffffff" to the <svg> tag.

- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/></svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="#FFFFFF"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/></svg>

All you have to do now is upload both the original SVG and the one you modified to the markdown page and attach either #gh-light-mode-only or #gh-dark-mode-only depending on if the SVG should be displayed only in light or dark mode.

As an example, the below markdown...

![copy-dark] ![copy-light]

[copy-dark]: https://user-images.githubusercontent.com/11576465/156061427-10f83808-602f-4674-86cc-bbd9eae6e597.svg#gh-dark-mode-only
[copy-light]: https://user-images.githubusercontent.com/11576465/156061498-0a30cc05-fec2-46e0-8e31-1ae7ba8fdd7f.svg#gh-light-mode-only

...will only display the white SVG on the dark theme and the black SVG on the light theme as shown below:

[jsoref]

https://twitter.com/ashtom/status/1463554157932023808 says:

Works for Markdown files in repos, gists, and your profile/org READMEs.

That doesn't appear to include Wikis. Anyway. I'd like to be able to use the GitHub Primer icons in GitHub hosted wikis in a way that's GitHub (Dark) Appearance aware. If you don't feel that's sufficiently similar to your ticket, I'm happy to file my own.

I try to avoid filing duplicate tickets (having worked on a large project where duplicate bug reports were a thing we spent a lot of time dealing w/).

[Andre601]

That doesn't appear to include Wikis. Anyway. I'd like to be able to use the GitHub Primer icons in GitHub hosted wikis in a way that's GitHub (Dark) Appearance aware. If you don't feel that's sufficiently similar to your ticket, I'm happy to file my own.

That certainly isn't the same. My issue, as mentioned before, is about adding native dark theme to the primer.style website, while yours is about having dark/light theme support for SVGs... which honestly doesn't make much sense to have. The SVGs here are served with no fill color, which makes them default to black. Adding a fill to them, would make them break in the long run and also mess up systems that use those SVGs. At least that's my basic understanding of this.

I myself provided a solution, which to my knowledge should work on wikis too, since it's also markdown and not that different from normal repositories to begin with.

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[Andre601]

blablabla, this is still relevant, blablabla, no reply from the maintainers yet, blablabla, bad github action setup as explained in #808

[tallys]

Hi @Andre601 thanks for your patience on this. The two assignees you had listed on this issue are not working on the Octicons group anymore, and I'm taking over managing the Octicons group. There is concurrent work on primer.style and color theme infrastructure, and I'm passing along these issues to those teams. Thank you for your feedback!