earlduque / Slack-Dark-Theme

A dark theme for Slack
97 stars 47 forks source link

Support Slack client v4 #35

Open batjko opened 5 years ago

batjko commented 5 years ago

Looks like v4 changes a few things, certainly the folder structure is different.

This folder, mentioned in the README instructions no longer exists: C:\Users\username\AppData\Local\slack\app-[4.x.x]\resources\app.asar.unpacked\src\static Instead of src they seem to now only give you the dist folder (at least on Windows, but there's no reason to believe it's different on the other OS's):

image

And no ssb-interop.js can be found anywhere, as far as I can make out.

Not sure what else has changed.

alinoancea commented 5 years ago

Hi @batjko,

As a workaround (for the stable version 4.0.0) I was able to make the theme work by doing a couple extra steps (it seems that Slack is loading the ssb-interop.bundle.js from C:\Users\<username>\AppData\Local\slack\app-[4.x.x]\resources\app.asar archive. So I did this:

  1. install npm
  2. copy app.asararchive and app.asar.unpacked somewhere else (let's say our_dir)
  3. open a windows cmd, go to our_dir and install asar package with npm install -g asar
  4. extract app.asar archive with asar extract app.asar app (now you should have an app folder alongside app.asar and app.asar.unpacked
  5. enter app\dist folder and modify ssb-interop.bundle by adding at the end of file:
    document.addEventListener('DOMContentLoaded', function () {
    $.ajax({
        url: 'https://raw.githubusercontent.com/earlduque/Slack-Dark-Theme/master/dark.css',
        success: function (css) {
            $("<style></style>").appendTo('head').html(css);
        }
    });
    });
  6. delete C:\Users\<username>\AppData\Local\slack\app-[4.x.x]\resources\app.asar
  7. copy app folder into C:\Users\<username>\AppData\Local\slack\app-[4.x.x]\resources

After this steps are performed the theme should work properly.

Note: In the beta version I noticed that jQuery is not recognized by ssb-interop.bundle. So if you want to make it work you should change from jQuery AJAX request to Vanilla JS AJAX request.

FireRx commented 5 years ago

alinoancea, Can you make the changes and upload the files needed and where to put them? I don't have npm or know how to use it. your help would be appreciated. thanks

FireRx commented 5 years ago

Figured it out, Thank you for the help :)

alinoancea commented 5 years ago

Hi @FireRx, glad I could help.

I will try to push on the repo, I hope today, a script for Windows which executes the steps without needing user interaction.

If someone is using macOS or Linux (v4.0.0 for Linux is not released yet), I found this script which does the installation of the theme. You will need to create in the same directory from which you execute the script a file called event-listener.js with the content:

document.addEventListener('DOMContentLoaded', function () {
    $.ajax({
        url: 'https://raw.githubusercontent.com/earlduque/Slack-Dark-Theme/master/dark.css',
        success: function (css) {
            $("<style></style>").appendTo('head').html(css);
        }
    });
});
alinoancea commented 5 years ago

So I managed to finish the script which install the theme automatically. For the script to run successfully npm is required to be installed and added to PATH environment variable (by default when installing npm).

PR is #36

morbus commented 5 years ago

I can also confirm that simply sharing the recreated app.asar between like/trusted machines (Win10 to Win10, etc.) works.

alinoancea commented 5 years ago

Thanks for your feedback. There should be no problem moving the archive between machines which have the same slack version (i.e >= 4.0.0). I think that a problem could be if we want to move an archive from an older slack version to a newer one.

Thanks again. :+1:

somanysteves commented 5 years ago

@alinoancea - you can ignore my other comment. This worked great.

alinoancea commented 5 years ago

@imjuststeve - I'm happy that it worked. Can you tell us how did you manage to get it working? Thanks.

FireRx commented 5 years ago

I just followed you instructions. 😎


From: Alin Oancea notifications@github.com Sent: Wednesday, July 17, 2019 11:38 AM To: earlduque/Slack-Dark-Theme Cc: FireRx; Mention Subject: Re: [earlduque/Slack-Dark-Theme] Support Slack client v4 (#35)

@imjuststevehttps://github.com/imjuststeve - I'm happy that it worked. Can you tell us how did you manage to get it working? Thanks.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/earlduque/Slack-Dark-Theme/issues/35?email_source=notifications&email_token=AMT5XFE6HAK23NO4TVUM5RTP74ADJA5CNFSM4IBQGOL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2D5BLQ#issuecomment-512217262, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AMT5XFCTOXP6GVY7NNNCT4TP74ADJANCNFSM4IBQGOLQ.

kobuki commented 5 years ago

A simpler method for steps provided by @alinoancea: install 7zfm, then install Asar7z. Then in 7zfm you can just edit ssb-interop.bundle directly. It will spawn an external editor and ask if you want to update the file after saving the edit and exiting the editor. Make sure to quit Slack before doing this, of course.

FireRx commented 5 years ago

Did something happen to the script? the all white background in the chat windows is back again Yuck

Got it going again. have to use the Help/Troubleshoot/ reset App data to get it to show correctly again . Thanks,

alinoancea commented 5 years ago

After some investigation I found out that in some cases jQuery is not understand by Slack app after the script is ran. I tried the method suggested by @FireRx and everything worked just fine. Thanks.

FireRx commented 5 years ago

the method works on build 4.01 also :)

kobuki commented 5 years ago

It stopped working for me with 4.0.1.