✨ Feature Suggestion | Dark Theme #1151

New Issue

jonah · 2019-08-13T07:57:33Z

dawidpotocki commented

2019-08-13 07:57:33 +00:00

(Migrated from github.com)

When I go to ptio, my eyes are dying, just like on most websites.
My suggestion is to add dark theme.
We could use prefers-color-scheme CSS media query, which would automatically set preferred by visitor color scheme.
Here you can see table of browsers that support it: https://caniuse.com/#feat=prefers-color-scheme.
To change them I would suggest adding 🌙/☀ button to the right corner of navbar.
Adding it should not be that hard, so if everyone will agree, I will start implementing it.

Thanks.

When I go to ptio, my eyes are dying, just like on most websites. My suggestion is to add dark theme. We could use `prefers-color-scheme` CSS media query, which would automatically set preferred by visitor color scheme. Here you can see table of browsers that support it: https://caniuse.com/#feat=prefers-color-scheme. To change them I would suggest adding 🌙/☀ button to the right corner of navbar. Adding it should not be that hard, so if everyone will agree, I will start implementing it. Thanks.

👍 4 ❤️ 1

blacklight447 commented

2019-08-13 09:34:04 +00:00

(Migrated from github.com)

How much work would this be though?

dawidpotocki commented

2019-08-13 09:44:12 +00:00

(Migrated from github.com)

How much work would this be though?

It would look something like this:

@media (prefers-color-scheme: dark) {
body {
	background-color: #181B21;
}

As most of the styling is done with Bootstrap classes, overriding few
classes like bg-white, bg-light should be enough. Sure, maybe that's
a little hacky, but I don't think it will be a problem. Other way could
be creating own CSS classes (similary named to BS4) and adding them to
HTML. Hardest part would probably just adding a button to switch a
colorscheme. I think it will require some Javascript, but I don't think
it will be that hard (of course button would be hidden for users
blocking scripts with display: none).

> How much work would this be though? It would look something like this: ``` @media (prefers-color-scheme: dark) { body { background-color: #181B21; } ``` As most of the styling is done with Bootstrap classes, overriding few classes like `bg-white`, `bg-light` should be enough. Sure, maybe that's a little hacky, but I don't think it will be a problem. Other way could be creating own CSS classes (similary named to BS4) and adding them to HTML. Hardest part would probably just adding a button to switch a colorscheme. I think it will require some Javascript, but I don't think it will be that hard (of course button would be hidden for users blocking scripts with `display: none`).

jonah commented

2019-08-15 00:04:51 +00:00

If you wanted to add this, I'd definitely approve a PR.

👍 1

dawidpotocki commented

2019-08-15 10:06:10 +00:00

(Migrated from github.com)