[Feature request] Dark theme

[KaKi87]

Thanks

[payne911]

This is specific to the website, right? The plugin already supports that, iirc.

I'm not quite sure how I could detect what is the GitHub preference of the user right away.

But that was certainly an option I wanted to support and which I kept in the back of my mind.

[KaKi87]

This is specific to the website, currently only the header is dark, I would like the entire UI to be dark, preferably as togglable option below Export CSV in cog settings. Thanks

[payne911]

I've been looking into whether Bulma already supported this stuff. It seems like it's a WIP. I'll evaluate whether I want to roll my own thing, or wait for these other efforts to reach a viable/official solution.

• https://github.com/jgthms/bulma/issues/2342
• https://github.com/jgthms/bulma/pull/2425
• https://github.com/jgthms/bulma/pull/2981
• https://github.com/Manuel-Steinberg/bulma/commit/05036116d4946556d31a23c5f034a37eb90eef2c

[KaKi87]

Well, I might consider starting to use this UI framework myself some day if native dark support really gets added, for now the only one I found matching this criteria is Halfmoon so I use it sometimes.

[payne911]

I've been trying to replicate GitHub's dark-theme colors. It's still a WIP, but so far, the result seems pretty good:

---

(Notes to myself)

The current CSS tweaks I used to obtain the screenshot from above:

:root { /* those are just the values for the dark-theme */
  --uf-bg: #0d1117;
  --uf-header-bg: #161b22;
  --uf-light-gray: #c9d1d9;
  --uf-button-hover: #1e2329;
  --uf-border: #21262d; /* maybe #30363d */
  --uf-strong: #fff;
}

.input, .textarea {
  background-color: var(--uf-header-bg);
  border: 1px solid var(--uf-border);
  color: var(--uf-light-gray);
}
.navbar.is-dark {
  background-color: var(--uf-header-bg);
}
.navbar-item {
  background-color: var(--uf-header-bg);
  color: var(--uf-light-gray) !important;
}
.navbar-item:hover {
  background-color: (--uf-button-hover) !important;
}
.button:hover {
  background-color: var(--uf-button-hover) !important;
}
.badge {
  box-shadow: 0 0 0 2px var(--uf-bg);
}
strong, .label, .modal-card-title, .title {
  color: var(--uf-strong);
}
.modal-card-body {
  background-color: var(--uf-bg);
  border: 1px solid var(--uf-border);
}
.modal-card-head, .modal-card-foot {
  background-color: var(--uf-header-bg);
  border: 1px solid var(--uf-border);
}
body {
  background-color: var(--uf-bg);
  color: var(--uf-light-gray);
}
.footer {
  background-color: var(--uf-bg) !important;
}

And the elements that need some more tweaking:

• Email button in the footer
• Hover colors (for buttons, and table rows)
• Input-field (text-area)
• SVG icons (need a white fill-color)

---

But honestly, I'm not all that passionate nor good with CSS, so supporting multiple display modes won't be much of a priority. I'll leave this here for now, and maybe someone will actually pick it up and complete the work.

And I think it'd be a better idea to have a toggle-switch in the top nav-bar rather than having it as an option in the cog. I think it makes more sense to keep the cog to be only for settings which relate to preferences and functional aspects of how the queries are ran (in a way, that's why it's linked to the input field directly).

I'd love to get a PR for this!

[KaKi87]

Well, I actually do have a brands.css project which purpose is to replicate colors from known platforms, so I think I'll add GitHub.

Then, I might work on a PR for this, because I do like CSS. :)

[domportera]

I made a CSS style for Stylus integrating a pretty complete dark/dimmed theme.

Here's some screenshots:

Here's the CSS I wrote:

:root {
	--dark-bg-color: #151515;
	--dark: #333;
	--darker: #222;
	--muted-white: #ccc;
	--button-invert: invert(83%);
	--dim-amount: 0.9;
	--dim: brightness(var(--dim-amount));
	--input-field-placeholder-color: #ccc3;

	background-color: var(--dark-bg-color);
	color: var(--muted-white);
}

.input::placeholder,
.select select::placeholder,
.textarea::placeholder {
	color: var(--input-field-placeholder-color);
}

.allButFooter,
.footer,
.useful_forks_table,
.useful_forks_repo,
.title {
	background-color: var(--dark-bg-color) !important;
	color: var(--muted-white) !important;
}

strong,
.navbar-item {
	color: var(--muted-white) !important;
}

.badge {
	box-shadow: 0 0 0 2px var(--muted-white) !important;
	color: var(--muted-white) !important;
}

.uf_badge,
.modal-card-foot .button,
nav img {
	filter: var(--dim);
}

.useful_forks_repo:hover,
.useful_forks_table:hover {
	background-color: var(--darker) !important;
}

.octicon,
footer .button {
	filter: var(--button-invert);
}

div #useful_forks_msg img {
	filter: var(--dim);
}

.control .is-expanded,
.input,
.modal-card [class*="modal-card-"],
.modal-card-body label,
#uf_csv_export_btn,
.has-background-info-light#useful_forks_msg {
	background-color: var(--dark) !important;
	color: var(--muted-white) !important;
}

.control .button{
	color: var(--muted-white) !important;
	background-color: var(--darker) !important;
}

.control .button:hover{
	filter: var(--dim);
}

.control .button:hover #totalApiCalls
{
	--offset-brightness: calc(1/var(--dim-amount));
	filter: brightness(var(--offset-brightness) ) !important;
}

[payne911]

@domportera Nice work!

Anyone's free to create a PR introducing this theme with some kind of toggle in the settings: I'll gladly review it. :)

[domportera]

Sounds like something I might be willing to try. I know veeeeery little about web development but this could be a fun dip in the pool.

I cleaned up my css a bit, so it should be very easy to swap colors to the github colors if you prefer that on your repo

[payne911]

Well, good news: Bulma now officially supports dark themes! https://bulma.io/documentation/features/dark-mode/

Not quite sure when I'll have the time to incorporate that, though. I'd definitely prefer receiving a PR for this.