search

sneljo1 / auryo

[Discontinued] Auryo - Unofficial Soundcloud Desktop App
http://auryo.com
GNU General Public License v3.0
638 stars 46 forks source link

added darkmode #183

Closed pwltr closed 5 years ago

pwltr commented 5 years ago

Hi, I've added an option for dark mode. This is the quickest solution in my opinion but it's also not very flexible. A better solution would be to extract all colors into CSS variables and change them on the :root component depending on the bodyClass. This would allow for multiple themes and avoids deep selector nesting like I've done here. It would be more work though as the color vars are not setup for flexibility right now. Let me know how you'd like to do this, I'm sure there's quite a few style overrides missing here.

https://github.com/Superjo149/auryo/issues/140#issuecomment-458892009

sneljo1 commented 5 years ago

Awesome. I was planning on working on this for the next release. I did some googling and since we are using scss, this seems to be one of the better solutions in my opinion https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995. But It will be a painstaking process to convert everything, either way.

sneljo1 commented 5 years ago

Might as well skip the deep selector nesting straight away and use the css vars. Think thats pretty good. https://medium.com/trabe/a-simple-react-theme-component-using-css-variables-e20434ae97c

pwltr commented 5 years ago

Might as well skip the deep selector nesting straight away and use the css vars. Think thats pretty good. https://medium.com/trabe/a-simple-react-theme-component-using-css-variables-e20434ae97c

Yes, this looks clean enough. Think React + native CSS is the better long term choice here and it's easier to read.

sneljo1 commented 5 years ago

I just created the branchfeature/dark-mode. Could you change to merge your PR into this?

sneljo1 commented 5 years ago

Do you have plans to continue to work on this feature?

pwltr commented 5 years ago

Sure, I'll work on it in the coming days.

sneljo1 commented 5 years ago

Allright, keep me updated. If I can help, feel free to reach out to me via https://gitter.im/auryoapp-/Lobby. Looking forward finally seeing this implemented. 🙂

pwltr commented 5 years ago

I think this is in a good state now. Feel free to review and get back to me for correction. Thanks!

sneljo1 commented 5 years ago

🙌Woah man, that was quick. I love it, the Blue theme is a nice touch as well. Very clean. I'm looking forwards to adding this to the upcoming release.

Just a couple of remarks. Feel free to fix those, if not, I would gladly continue your work.

Chart tabs I think it would neat if these tabs would also be themed. Maybe the same color as the sidebar? image

Track details page Large white elements attract too much attention when using the dark theme. image

Header The header seems to be broken for me now. Maybe there's some color which does not have the proper opacity anymore? Also, the color of the gradient should go from transparant to the themes background color. So in this case, the gradient shouldn't be white, but blackish. image

pwltr commented 5 years ago

Hopefully that's fixed now! I also changed some other styles that we're missing before. Let me know if there's issues still.

sneljo1 commented 5 years ago

That's a job well done. Thanks for helping out, I'm really pleased with it. 👍 I have some more bug fixes and chromecast support planned for this release and then we can ship this. Looking forward to it.

fluffynuts commented 5 years ago

Hi all

This looks awesome -- is there a way to force this on? It looks like this is supposed to automatically figure out state from OSX dark mode settings -- I'd like the same under KDE, if possible?

C0DK commented 5 years ago

So how do you enable this? If it's automatic from OSX dark mode, then it's not going to do a lot for us friendly linux folks :'(

On top of this:

i thought about working towards making a more general theming.. i really want to use the Dracula color theme in all apps, and thought about implementing it myself. Would that be okay with you?

sneljo1 commented 5 years ago

Chromecast support has been added in the same update. This required some extra effort. It's mostly finished, but not yet published. I will have to find some time to finish it.