[REQ] Dark theme - Githubissues

selfdigest commented 7 years ago

It would be great if we could get an included dark theme option.

I recently switched my server over to rtorrent to test resources compared Deluge. Flood is one of the main reasons I kept it. Fantastic job on it.

Only problem was it's too bright for my needs (It's always on, on my second monitor in a webapp).

Here are a couple of example of the css edits I did: cond expa

CSS for stylish if anyone's interested: (might look slightly different, as I don't run it in a regular browser, and had to edit the css server side with some other changes.)

.view--torrent-list {
    background: #1b1b1d;
}
.application__sidebar, .search .textbox {
    background: #1b1b1d;
}
.torrents {
    background: #222225;
}
.table__row--heading {
    background: rgb(34, 34, 37, .6);
}
.torrent--is-condensed {
    border-top: 1px solid #1b1b1d;
}

Another small request: Add "Update Tracker" to the context menu of torrents.

Thanks for the great work. This is the best looking torrent GUI around. 👍

geekism commented 7 years ago

Can you please explain which file you edited? or Post your changed file?

selfdigest commented 7 years ago

@geekism np, I edited '/server/assets/style.css'

Heres mine, but note there are a few changes in it other than that. Mainly hiding the scrollbars. style.zip

geekism commented 7 years ago

I used your style.css, cleared the cache, yet the style remains to the stock one. Any ideas?

On Tue, Sep 12, 2017 at 6:50 PM, sek0n notifications@github.com wrote:

@geekism https://github.com/geekism np, I edited '/server/assets/style.css'

Heres mine, but note there are a few changes in it other than that. Mainly hiding the scrollbars. style.zip https://github.com/jfurrow/flood/files/1297670/style.zip

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jfurrow/flood/issues/444#issuecomment-329006196, or mute the thread https://github.com/notifications/unsubscribe-auth/AFcpeJV1B7gup-K4HFKN2LFFInBDBgDwks5shwq7gaJpZM4PVBuz .

selfdigest commented 7 years ago

I have no clue. Every change I made when I was doing it worked with just a page refresh.

Maybe make sure it replaced the old one by deleting it(backing up somewhere else first), then putting the new one there again.

geekism commented 7 years ago

Thats what i did

mv server/assets/style.css server/assets/save.style.css unzip style.zip mv style.css server/assets/ Firefox/Chrome (F5)

On Tue, Sep 12, 2017 at 7:19 PM, sek0n notifications@github.com wrote:

I have no clue. Every change I made when I was doing it worked with just a page refresh.

Maybe make sure it replaced the old one by deleting it(backing up somewhere else first), then putting the new one there again.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jfurrow/flood/issues/444#issuecomment-329011263, or mute the thread https://github.com/notifications/unsubscribe-auth/AFcpeIb84J2nryi3LH1cbXTRfnA4HISjks5shxFzgaJpZM4PVBuz .

geekism commented 7 years ago

Seems restarting flood did the trick. Thanks for the style.css. Maybe they'll make a style setting in the Settings, to allow users to select a stylesheet

On Tue, Sep 12, 2017 at 7:47 PM, Chris Booth geekism@gmail.com wrote:

Thats what i did

mv server/assets/style.css server/assets/save.style.css unzip style.zip mv style.css server/assets/ Firefox/Chrome (F5)

On Tue, Sep 12, 2017 at 7:19 PM, sek0n notifications@github.com wrote:

I have no clue. Every change I made when I was doing it worked with just a page refresh.

Maybe make sure it replaced the old one by deleting it(backing up somewhere else first), then putting the new one there again.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jfurrow/flood/issues/444#issuecomment-329011263, or mute the thread https://github.com/notifications/unsubscribe-auth/AFcpeIb84J2nryi3LH1cbXTRfnA4HISjks5shxFzgaJpZM4PVBuz .

selfdigest commented 7 years ago

Np. Glad you got it working, and that's what I'm hoping for.

jfurrow commented 7 years ago

Looks good! I'd be happy to review a PR implementing something like this.

Here are some implementation details I'd love to see (and if anyone has better ideas fell free to contribute):

All colors should be defined as variables in appropriate places (either colors.scss or the corresponding components)
There should be a setting in the UI settings tab to toggle between the light/dark modes
When dark mode is enabled, a single class should be applied at the mount point of the app (or close to it). This way we don't need to implement logic everywhere in the app to conditionally apply classes depending on the light/dark mode
Both light and dark style variants should be contained within their respective component files (as opposed to creating a single "dark" stylesheet). For example, if the progress bar has specific dark mode styles, its stylesheet might look like this:
```
.progress-bar {
width: 100%;

&__track {
background: $grey--light;

.dark-mode & {
  background: $grey--dark;
}
}

&__fill {
background: $blue;
}
}
```

sakhavhyand commented 7 years ago

Nice theme ! I have add some other modification in the right-click menu. (Sorry for the french interface^^)

capture

geekism commented 7 years ago

Can you show your changes? Or post what file you edited?

⁣Sent from TypeApp

On Sep 16, 2017, 04:55, at 04:55, sakhavhyand notifications@github.com wrote:

Nice theme ! I have add some other modification in the right-click menu. (Sorry for the french interface^^)

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/jfurrow/flood/issues/444#issuecomment-329955898

sakhavhyand commented 7 years ago

I've edit the same file, style.css. My changes : .menu { background: hsla(0, 0%, 0%, .70); border-radius: 3px; box-shadow: 0 0 0 1px rgba(29, 41, 56, .075), 0 1px 4px rgba(29, 41, 56, .15), 0 3px 15px rgba(29, 41, 56, .15); color: #258de5; text-align: left } .menu__item--separator { background: rgba(0, 160, 240, 0.50); height: 1px; margin: 5px 0; padding: 0 } .menu__item.is-selectable:hover { background: rgba(37, 141, 229, .65); color: #39cc6a } .menu__item.is-selectable.is-selected { color: #258de5 } And thats all if I remember.

My sytle.css style.zip

sakhavhyand commented 7 years ago

Update : now i've made the logon screen : capture

The css file : style.zip

And my modification : .application__view--auth-form { background:#222225 } .form--authentication .form__wrapper { background:#222225; border:1px solid #258de5; padding:31.25px } .form--authentication .form__header { background:#1b1b1d; margin:-31.25px -31.25px 0; padding:23.4375px 31.25px } .form--authentication .form__header h1 { color:#258de5; font-size:1.4em; font-weight:400; line-height:1 } .form--authentication .form__label { color:#258de5 } .form--authentication .checkbox__decoy:after,.form--authentication .interactive-list,.form--authentication .radio__decoy:after,.form--authentication .textbox { background:transparent; border-bottom:1px solid #258de5 } .form--authentication .checkbox__decoy:active:after,.form--authentication .checkbox__decoy:focus:after,.form--authentication .interactive-list:active,.form--authentication .interactive-list:focus,.form--authentication .radio__decoy:active:after,.form--authentication .radio__decoy:focus:after,.form--authentication .textbox:active,.form--authentication .textbox:focus { border-bottom:1px solid #258de5 } .form--authentication .interactive-list::placeholder,.form--authentication .textbox::placeholder { color:#258de5; font-style:normal }

Next : the loading Screen

PS : Why when I insert code, it doesn't go back at the line ?

jfurrow commented 6 years ago

I'm sorry, but I'm going to close this... Y'all are welcome to fork Flood and do whatever you want, or share CSS amongst yourselves to modify Flood in any way you see fit, but I don't think it's worth the time investment to make Flood's appearance configurable to this degree.