Popcorn-desktop: THEME EDIT! (not an issue)

[Axe090]

I just edited the css file for Sebastian Red & Black theme to Blue and Black and wanted to share it. To install you will have to add the theme in "C:UsersUSERNAMEAppDataLocalPopcorn-Timesrcappthemes". the devs can decide to add it if they see fit. All the credit goes to the original author, I just changed it to my liking. Devs are free to remove this post if this is wrong... I didn't know where else to post this.

Download the zip file and add the .css file into the directory mentioned above.
Sebastiaans Blue n Black.zip

[kiriles90]

You can change the name. I changed it to Sebastiaans_-_Black_&_Blue_theme.css and it works fine. Btw why not make this a PR so it can be merged?

[Axe090]

You can change the name. I changed it to Sebastiaans_-_Black_&_Blue_theme.css and it works fine. Btw why not make this a PR so it can be merged?

Oh, just checked it myself after updating popcorn time to the latest release and renaming works, somehow it wasn't working a few versions back. Edited the post & file accordingly now. BTW I'm not that familiar with github, I'll look into making this a pull request. Thanks

[kiriles90]

To help you get started, just fork the main repo(top right), duplicate /src/app/styl/Sebastiaans_-_Black_&_Red_theme.styl and rename it to blue, then edit and replace

#F31616     ->  #1681F3 (this is the 'RedL' color variable)
#E32020     ->  #2182E4 ('RedM')
#D40000     ->  #0081D6 ('RedD')
#DF2D37     ->  #2E99E0

But the ones below wont be so straightforward, the red theme wasn't modifying them, they were getting their values from Popcorn Time's main styl's

#F4A460     ->  #6295F4 (.vjs-error-display a, .vjs-error-display a:visited)
#FC6        ->  #66B2FF (.video-js .vjs-captions)
#FC5753     ->  #5489FC (#header .btn-set.darwin .btn-os.os-close)
#FDBC40     ->  #3F88FD (#header .btn-set.darwin .btn-os.os-min)
#D9534F     ->  #4FABD8 (#disclaimer-container .disclaimer .disclaimer-state .disclaimer-content .btn-close)
#D43F3A     ->  #3A8AD4 (#disclaimer-container .disclaimer .disclaimer-state .disclaimer-content .btn-close)
#D2322D     ->  #2D74D2 (#disclaimer-container .disclaimer .disclaimer-state .disclaimer-content .btn-close:hover)
#AC2925     ->  #257FAD (#disclaimer-container .disclaimer .disclaimer-state .disclaimer-content .btn-close:hover)

Once you're done save it, then just create a pull request.

[Axe090]

To help you get started, just fork the main repo(top right), duplicate /src/app/styl/Sebastiaans_-_Black_&_Red_theme.styl and rename it to blue, then edit and replace

rgba(243,22,22,0.15)  ->  rgba(22,188,243,0.15) (this is the 'RedL' color variable)
#f31616           ->  #1681f3 (also 'RedL')
#d40000           ->  #0081d6 ('RedD')
#f4a460           ->  #6295f4
#fc6          ->  #66b2ff
#e32020           ->  #2182e4 ('RedM')
#fc5753           ->  #5489fc
#fdbc40           ->  #3f88fd
#df2d37           ->  #2e99e0
#d9534f           ->  #4fabd8
#d43f3a           ->  #3a8ad4
#d2322d           ->  #2d74d2
#ac2925           ->  #257fad

..and save it, then just create a pull request.

I made a pull request by going to fork and directly adding the .css file to "styl" then made a pull request don't know if that's the right way to do it.....

[kiriles90]

Nop, you cant do it like that. The styl is what generates the css but they arent the same.

[Axe090]

Nop, you cant do it like that. The styl is what generates the css but they arent the same.

I see, I'll try your method. Deleted the pr. Thanks

[kiriles90]

Edited above. The first 4 which are basically the main colors are very easy to replace and would only take a couple of minutes. The rest, will require some more digging and declaring/adding them in your .styl and maybe other styl's since the red theme wasnt modifying them to begin with, they were getting their values from the app's main .styl's which we cannot (should not) modify directly in this case.

Tbh.. I'd suggest leaving those alone and just do with the main ones and anything else inside the red theme's styl you'd like to modify, it would save you A LOT of trouble and potential issues.

[Axe090]

Edited above. The first 4 which are basically the main colors are very easy to replace and would only take a couple of minutes. The rest, will require some more digging and declaring/adding them in your .styl and maybe other styl's since the red theme wasnt modifying them to begin with, they were getting their values from the app's main .styl's which we cannot (should not) modify directly in this case.

Tbh.. I'd suggest leaving those alone and just do with the main ones and anything else inside the red theme's styl you'd like to modify, it would save you A LOT of trouble and potential issues.

I'm not finding a way to duplicate the file inside the repository, are there any commands? Do I clone it to.my desktop,edit then reupload? sorry I'm a total noob :P

[kiriles90]

I'm not finding a way to duplicate the file inside the repository, are there any commands?

Yeah, there is no way to duplicate it from the web interface afaik. There is an easier way though than using git.
Just download the entire repo in a .zip file (the green 'code' button, top right) then get the red theme .styl from it, rename it into blue and upload it in the styl dir in your forked repo. Then edit, make any changes you want, save it and make a PR.

[Axe090]

I'm not finding a way to duplicate the file inside the repository, are there any commands?

Yeah, there is no way to duplicate it from the web interface afaik. There is an easier way though than using git.
Just download the entire repo in a .zip file (the green 'code' button, top right) then get the red theme .styl from it, rename it into blue and upload it in the styl dir in your forked repo. Then edit, make any changes you want, save it and make a PR.

Thank You, that's what I was initially thinking of doing but I thought there was a way through the web interface.

[Axe090]

@kiriles90 Made the changes and created a pull request. Only edited the Hex for the three you mentioned, hopefully it works fine I had made a bit more changes to the css but Ill find and edit them later. Thanks for all the help, Cheers! (might edit a few different colors if this works)

[kiriles90]

Nice. You can change #DF2D37 -> #2E99E0 too btw, its in there its just not declared as a variable.
Edit as much as you want, the more the better so its distinctly a new theme. If you edit the file in your repo now the PR will be automatically updated you dont need to do anything else. Just let people know when you are done so it can be reviewed/merged. Add a [WIP] or something (work in progress) in your PR's title, then just remove it when you are done.

Oh, and close this issue please :) Just comment in https://github.com/popcorn-official/popcorn-desktop/pull/1737 if there is anything related with this.