WIP: Add dark theme

[xvilo]

This is WIP and experimental

Add CSS for dark theme. Currently depending on #43 to be merged first. (less changes etc).

• Add dark theme (currently using Discord color style since it's a nice one).
• Tweaking UI slightly to accommodate dark UI elements.
• Create a small toggle (for now) in the connection screen to enable 'dark mode'

Small demo in current state (last updated on: 30-07-2018 21:11)

[brandly]

let me know when you have the styled sorted out, and i can help (if needed) with allowing you to toggle between light and dark mode

[xvilo]

Step 1 and 2 are finished for now.

[brandly]

the screenshot looks nice!! my only thought is that the chat text should probably be fully white or it might be hard to read.

---

i ran it locally after adding theme-dark to the body, but some things aren't dark

the login screen also had a white background. i think maybe these styles aren't applying correctly:

https://github.com/xvilo/irc/blob/4f10bc8cba92dc73b8b9a1b45e5ed4a0a413dd64/src/sass/themes/dark/_type.scss#L2-L6

do these work on your end?

---

if we're toggling this class name with react, we could maybe put it on this div, which wraps the entire app. adding a #react-root id to it would allow us to target #react-root.theme-dark rather than body.theme-dark.

these styles that aren't being properly applied to html, body could also target #react-root.

let me know what you think 🌟

[xvilo]

I will check if I can fix it. Did you run gulp sass?

[brandly]

Yeah I thought so. Not at a computer right now, but I ran ‘npm run dev’ which I think runs gulp sass

…

On Wed, Aug 1, 2018 at 2:36 AM sem schilder ***@***.***> wrote: I will check if I can fix it. Did you run gulp sass? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#44 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAyF2JZ8wKm1arzsbq8Ya0Wn9i5QBfPEks5uMUxagaJpZM4Vm-tA> .

[xvilo]

Did you do a $ npm install and $ sudo npm install -g gulp before?

[xvilo]

Ah, I see now it's broken :)

[xvilo]

text should probably be fully white or it might be hard to read.

That's partly a personal opinion I suppose. I like how it looks now, and don't have any issues with visisbility. Thats for speaking without any disabilities.

i think maybe these styles aren't applying correctly:

You're correct! This has been fixed now :)

these styles that aren't being properly applied to html, body could also target #react-root.

That's up to you, if toggling the body from within React, I would opt keeping it on body. Otherwise we would need to come up with a diffrent solution.

[brandly]

I like how it looks now, and don't have any issues with visibility.

cool. now that things are working smoothly, i can take a real look and check it out. eventually, maybe we'll support custom themes and let people do whatever they want.

if toggling the body from within React, I would opt keeping it on body.

we can tie into react's lifecycle and update the class on body. here's an example: https://jaketrent.com/post/update-body-class-react/

i can look into this later and add a toggle button. great work!

[brandly]

what's the intent here? it looks like the margin-right leaves a small gap between the highlighted channel and the right edge:

[brandly]

i fixed this on master

[brandly]

the people search bar is also white text on a white background

[brandly]

there's a secret button below your list of conversations to toggle the theme lol

the people search is still white on white. i think it should have some grey background with white text, to blend in with the rest of the theme.

---

we should add a preferences page. we'd extend RouteT with a new SETTINGS type, and <Router> can render some new <Settings> component.

ideally it's accessible via keyboard shortcut and the app's menu e.g.