[REQ] Dark theme

[selfdigest]

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:

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]

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

[selfdigest]

@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]

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 [email protected] 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]

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]

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 [email protected] 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]

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 [email protected] 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 [email protected] 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]

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

[jfurrow]

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):

1. All colors should be defined as variables in appropriate places (either colors.scss or the corresponding components)
2. There should be a setting in the UI settings tab to toggle between the light/dark modes
3. 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
4. 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]

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

[geekism]

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

⁣Sent from TypeApp ​

On Sep 16, 2017, 04:55, at 04:55, sakhavhyand [email protected] 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]

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]

Update : now i've made the logon screen :

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]

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.

[noraj]

@jfurrow Flood doesn't need to make appearance very configurable but we can very easily provide:

• 2 themes : 1 dark / 1 light (the current one)
• make an option to include external CSS

And that's it, only providing one alternative dark theme for most users and a way to use a custom user style-sheet for advanced users.

I thin this issue deserve to be re-open if some people like @sakhavhyand want to contribute to this.

[jfurrow]

@noraj Sounds good! I'm building dark themed components for flood-ui-kit as well.

[noraj]

I :heart: dark themes :D

[noraj]

Fromm #682 @joker999 https://github.com/joker999/rtorrent-dark-flood @Vustom https://gist.github.com/Vustom/dcbdab73263710e60b54d1d11053a252

[noraj]

With Dark Reader by default:

[ryanerwin]

Any update on how to get dark mode working in the current version?

There's no longer a style.css that the previous posts referred to.

[ghost]

You can edit the sass files in client/src/sass/components/ to whatever colour you like and rebuild.

_torrent.scss _torrents.scss _torrent-details-panel.scss

Should be what you're interested in.

[jesec]

Dark color scheme has been implemented in the new versions of Flood.

See flood.js.org for screenshots.

There are still rooms for improvements, and PRs are welcome.