slack-black-theme icon indicating copy to clipboard operation
slack-black-theme copied to clipboard

No longer works in 3.3.3

Open riw777 opened this issue 6 years ago • 17 comments

Looks like the background is back to white on 3.3.3 version of the desktop client. Any thoughts on how to make it dark again?

riw777 avatar Nov 28 '18 17:11 riw777

same here

Nick-vr avatar Nov 28 '18 19:11 Nick-vr

Use the css url linked to in this comment: https://github.com/widget-/slack-black-theme/issues/62#issuecomment-410256441

NilsJPWerner avatar Nov 28 '18 21:11 NilsJPWerner

@NilsJPWerner I used the file from that comment and I'm also still seeing white. Slack 3.3.3 64-bit on Windows 10 r1803.

wllmcnn avatar Dec 03 '18 15:12 wllmcnn

Use the css url linked to in this comment: #62 (comment)

Thanks! I worked at hacking this on my own for way too long before finding this!

zerodivisionerr avatar Dec 04 '18 00:12 zerodivisionerr

@NilsJPWerner I'm still seeing white, same as @wllmcnn On slack 3.3.3 64bit on Win10 r1803

jtorjo avatar Dec 12 '18 04:12 jtorjo

@jtorjo for me it's okay on Slack 3.3.3 on MacOS Mojave

ghost avatar Dec 19 '18 16:12 ghost

@NilsJPWerner I'm still seeing white, same as @wllmcnn On slack 3.3.3 64bit on Win10 r1803

@jtorjo Make sure you have also updated ssb-interop.js

andersonjohnf avatar Jan 08 '19 18:01 andersonjohnf

For me it doesn`t work either.

I updated the ss-interop.js and index.js files, and created the custom.css file under /usr/lib/slack/resources/app.asar.unpacked/src/static.

I`m using LMDE3 (Linux Mint based on Debian 9).

juliano-felipe avatar Jan 09 '19 16:01 juliano-felipe

For everyone having issue with the white background on 3.3.3 for Windows 10, I found a way to edit it.

Add this inside the customCustomCSS underneath the :root brackets (both files still):


  /* Message background */

  .p-message_pane .c-message_list.c-virtual_list--scrollbar>.c-scrollbar__hider:before, .p-message_pane .c-message_list:not(.c-virtual_list--scrollbar):before {
    background: var(--background-elevated)
  }
  .c-scrollbar__bar {
    background: rgba(255,255,255,.15);
  }
  .c-scrollbar__hider {
    background: transparent !important;
  }

  /* Message text color */

  .p-message_pane__foreword__description, .p-message_pane__limited_history_alert {
    color: var(--text-bright);
  }
  .c-message--focus:not(.c-message--highlight):not(.c-message--standalone):not(.c-message--pinned):not(.c-message--ephemeral):not(.c-message--custom_response):not(.c-message--starred):not(.c-message--sli_highlight), .c-message--hover:not(.c-message--highlight):not(.c-message--standalone):not(.c-message--pinned):not(.c-message--ephemeral):not(.c-message--custom_response):not(.c-message--starred):not(.c-message--sli_highlight), .c-message:hover:not(.c-message--highlight):not(.c-message--standalone):not(.c-message--pinned):not(.c-message--ephemeral):not(.c-message--custom_response):not(.c-message--starred):not(.c-message--sli_highlight) {
    background-color: var(--background-hover) !important;
  }
  .c-message__body {
    color: var(--text);
  }
  .c-message__sender_link {
    color: var(--text-bright) !important;
  }
  .ql-placeholder {
    color: unset !important;
  }

To enable developer mode follow the instructions here, and you can edit the colours the way you see fit. I only tested it with a couple of dark themes, but it seemed to work. There may still be a bit more work that needs to be added.

generalguy41 avatar Jan 12 '19 18:01 generalguy41

@generalguy41 it works! thanks for the fix, will be tweaking the style to my liking based on your patch.

amywtlin avatar Jan 14 '19 03:01 amywtlin

After the update to 3.3.8 the current solution doesn't work anymore.

VladNistor86 avatar Mar 18 '19 11:03 VladNistor86

Worked for a time, but white background since the update to 3.4.2.

webbydevvy avatar Jun 21 '19 09:06 webbydevvy

Mine was just updated to 3.4.3 on June 24 2019, and it appears this is broken again. It has reverted to factory color scheme. I tried to reinstall this hack, and it doesn't have any effect.
I hope I'm missing something??
I noted the instruction that the custom js needs to be copied into two files (ssb-interop and index.js), and I restarted.

The sidebar and title bar change to dark; but the main message window is still default colors w/ white background.

knwpsk avatar Jun 25 '19 22:06 knwpsk

After you make the adjustment in the ssb-interop file, you have to restart the application + refresh it (shortcut CTRL+R). You have to do it after every update.

VladNistor86 avatar Jun 26 '19 07:06 VladNistor86

Vlad thanks, I did that several times, it didn't work. I can tell that the hack does have some effect -- the sidebar changes color. But the main text window is still white background.

Anything else to try?

knwpsk avatar Jun 26 '19 11:06 knwpsk

I just added the following snippet at the end of the ssb-interop.js file (under slack last version folder):

document.addEventListener('DOMContentLoaded', function() { $.ajax({ url: 'https://raw.githubusercontent.com/laCour/slack-night-mode/master/css/raw/black.css', success: function(css) { $("<style></style>").appendTo('head').html(css); } }); });

After I hit CTRL+R the chat background gets dark.

VladNistor86 avatar Jun 26 '19 12:06 VladNistor86

Vlad, BAM! You are the master.
What does this do, and why does it fix it? (You're under no obligation to answer that -- I'm capable of reading/learning the code myself, I just don't have the time for it.)

Thanks!

knwpsk avatar Jun 26 '19 12:06 knwpsk