Open KaKi87 opened 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.
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
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.
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.
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:
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).
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. :)
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;
}
@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. :)
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
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.
Thanks