KaKi87 commented 3 years ago

Thanks

payne911 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.

KaKi87 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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 commented 5 months ago

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.

useful-forks / useful-forks.github.io

[Feature request] Dark theme #34

I'd love to get a PR for this!