widget- / slack-black-theme

A darker, more contrasty, Slack theme.
Apache License 2.0
1.75k stars 407 forks source link

No longer works in 3.3.3 #74

Open riw777 opened 5 years ago

riw777 commented 5 years ago

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?

Nick-vr commented 5 years ago

same here

NilsJPWerner commented 5 years ago

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

wllmcnn commented 5 years ago

@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.

zerodivisionerr commented 5 years ago

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!

jtorjo commented 5 years ago

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

ghost commented 5 years ago

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

andersonjohnf commented 5 years ago

@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

juliano-felipe commented 5 years ago

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).

generalguy41 commented 5 years ago

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.

amywtlin commented 5 years ago

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

VladNistor86 commented 5 years ago

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

webbydevvy commented 5 years ago

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

knwpsk commented 5 years ago

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.

VladNistor86 commented 5 years ago

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.

knwpsk commented 5 years ago

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?

VladNistor86 commented 5 years ago

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.

knwpsk commented 5 years ago

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!