widget- / slack-black-theme Goto Github PK

3.2.1 64-bit (linux)

Background in channels is white.
Other frames like "All threads" are fine.

This includes writing a gulpfile to auto-convert it back to CSS.

Slack added a search form, which is complete white. Please add CSS to make it dark too

Hello!

On Windows using the 1.8.0 64-bit Desktop Client, the result of One Dark are as follows:

To me it looks like some CSS styles don't get applied, perhaps the tag was changed?

What i did exactly:

• Edited my index.js as per Installation instructions on the git page.
• Copy-pasted the CSS for One Dark to replace rows 67-79
• Restarded Slack.

Just that, thank you!

This mod works great...until I reboot! I have to update the index.js file after every reboot in order for the theme to continue working.

1. Locate ssb-interop.js on Ubuntu 18.04
   
2. sudo vi /snap/slack/6/usr/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js
3. Can't modify any of these files: read-only.

I think, that I must modify another source in Ubuntu 18.04.

Until today this was working perfectly on all three Slack teams I have configured. Today though it isn't working correctly for ONE of the teams. Anyone have any ideas?

I've removed the team & re-added it, removed Slack entirely and reinstalled it (Mac version, direct download from Slack website), even rebooted my machine. Same situation.

The issue is only with text in the main conversation window of the app (not the sidebar) where the text is too dark on one team but fine on another.

Thanks

The "All Threads" page background and hover colors don't get skinned. Also as of today @ mentions and channel topics are not being skinned.

My theme looks pretty good for everything except for the attachment text from bots. For example:

Does anyone know what value to change to make the attachment text more readable? Normal text between me and my coworkers is readable, just not the attachment text

If click on "View members list", will open window with elements "Channel Details", "X Pinned Items"..
If click and expand "X Members", we can see that theme non fully applied.
Background applied from theme. But text color still black. So, read black text on dark backround not good feature :-(

It seems that starting from today, I suddenly had to add in these extra bits of CSS to my ssb-interop.js other wise a bunch of stuff (chiefly the background of the main messages pane) in the slack UI (this is on 3.1.1 of the desktop app on ubuntu) was no longer dark:

       div.c-virtual_list__scroll_container {
           background-color: black !important;
       }
       .p-message_pane .c-message_list:not(.c-virtual_list--scrollbar), .p-message_pane .c-message_list.c-virtual_list--scrollbar > .c-scrollbar__hider {
            z-index: 0;
       }
       div.c-message__content:hover {
           background-color: black !important;
       }

       div.c-message:hover {
           background-color: black !important;
       }

Just an FYI more than an issue per se.

Is there a way to use a custom theme that doesn't require reapplying it after installing an update? My Slack install is through the Mac App store.

I think it should be worth noting that in corporate instances where the AppData folder is being restricted/hardened in light of ransomware outbreaks, re/installing Slack will place the directory in ProgramData (e.g. C:\ProgramData\udpPigeons\slack or %PROGRAMDATA%\udpPigeons\slack).

Just something I wanted to contribute so others will know. :)

I cannot find the CSS element that controls the color of text for the sidebar. Please advise.

The new slack 3.0.5 update breaks this hack in Window 10.

I have the readme code in the ssb-interop.js file. This worked for the past update, but not in 3.0.5. Anyone else having the same issue?

Hello,

Thanks for this awesome package, been working wonderfully and I love it. Unfortunately, Slack has recently updated with a new version that seems to invalidate it:

app-3.0.0-beta2638bae9b

I updated the new index.js file in the AppData path with the additional code and restarted Slack, but it seems to be entirely ignoring it and none of the styling or CSS is being applied. Is there some additional tweak I need to make in order for this to continue to function?

Note that it still works perfectly in the most recent non-beta version of 2.8.2

Thanks again, and let me know if I can assist further. Index file is attached.
index.zip

When clicking on "Reply to thread" in channel, the input area becomes black-on-black and it is hard to see what I am typing. See the screenshot below (it contains text "oops... dark on dark").

I am using "One Dark" theme.

Is there a way to make this work for multiple teams? This themes my first team, but the rest retain the original CSS

Thanks!

Thanks for this very cool theme! You may wish to include this on the readme page: the path to the index.js file is tricky to find on Win 10:

C:\ProgramData\<username>\slack\app-2.9.0\resources\app.asar.unpacked\src\stati‌​c\index.js

FYI: /usr/lib/slack/resources/app.asar.unpacked/src/static/index.js is where the slack files are located on debian based linux distro (including ubuntu).

Somehow pull a bunch of variables out of the theme into LESS variables that make sense.

Ideally cover

• All the colors (FG, BG, Text, Links)
• Borders and padding
• Fonts?
• Minimum contrast for stuff like Emojis.

Do I copy files somewhere? Or just edit the index file? This needs an install script.

Hi there,

I have applied some sample color schema but the chat box background still stay in white.

Thanks and regards,

What do I need to edit, to change the main body background hover color? I'm not too versed on this, so sorry if it is obvious to some. Cheers!

I should mention I want to edit this in my custom css

Before someone starts typing in a new window, it says something like "Message #general". That text is currently not rethemed and nearly disappears on a dark theme. Once the user starts typing, it uses the color for regular messages and appears fine.

https://gyazo.com/64365befbf0bfe9ba5e1708d399eb468

I'm not really into programming, just trying to get this to work for personal use.

Today Slack has been down and after refreshing the page, the --text part of the custom CSS wouldn't apply to the body anymore. My friend doesn't seem to have this issue, but I do on two different devices with two different operating systems, so I think it can't just be me messing something up.

Am I the only person running into this? I tested this both on mac and windows 10, and I used the actual Slack application, rather than something from the apple / windows store.

Below is a screenshot of my troubles:

Hovering works, sort of

Edit: it was working prior to it being down!

I updated Slack and attempted to set this up again and it does not appear to be working. Did slack rename the elements?

The text within the Channel Details tab is too closely colored to the background.
Needs more contrast in order to be read without hovering over everything.

Thanks for making this available! My company just switched from HipChat to Slack and my eyes have been killing me due to all the BRIGHTNESS ;)

I'd like to customize the CSS even further and contribute back, but for the life of me I cannot get the DevTools web inspector to show in the latest version of Slack (2.7.1).

Color chat white
Here is the result:

After fixing the dark mode with the fix described in https://github.com/widget-/slack-black-theme/issues/34#issuecomment-350708922 - I am experiencing a new issue. The text is way too dark (even when I set it to #cccccc), and when I hover over things, the background goes from dark to white (over that specific message).

Is there a way to control the hover settings or to fix the font color?

Greetings,

You have to acquire Slack for the Windows App Store in Windows 10

When looking for %homepath%\AppData\Local\slack\

That location is not found under Windows 10

Any help?

Here is a screenshot of what I'm seeing. Anyone know how to fix this?

I'm using Low Contrast combination but in stead of gray it is shown as purple. Could you please further explain how to change the colors? It seems that the item associated name has change or similar.

Thanks

This may be a possible duplicate issue. The background for 3.1.1 is now white using the instructions on the readme, adding in the custom.css file, and adding the small bit of code from https://github.com/widget-/slack-black-theme/issues/21#issuecomment-342551435

System is Windows 7 professional

This is annoying because I can't figure out how to open the dev tools for the outer window on Windows.

Also the fact that I don't actually care about Slack on Windows 🙃.

Hi there! First off, just wanted to say thank you for making this custom theme project - it's really nice and lets me colour coordinate with all my other things 👍

Not sure where to ask, just had a few questions on changing the colors for certain elements (I'm pretty bad at css):

• is there any way I can change the colours of the usernames? I know that I can change them via /color @username <my hex>, but is there a css way of overriding them permanently / all the time?
• is there anything to change the "add a topic" button for channels? Right now for me it's a white square sitting on top of my mostly dark theme
• last thing is about the preferences page -> the text color seems to be using my background color https://puu.sh/y7eML/21238ee78b.png but I've added color: var(--text); to every single css property under whatever's tagged /* preferences page*'/.

Once again, many thanks for this, and sorry if I missed anything!

Hi, I just downloaded a fresh copy of Slack 3.1.1 from Slack (not the Mac app store, applied the code from https://github.com/widget-/slack-black-theme to the bottom of resources\app.asar.unpacked\src\static\index.js & saved my file.

Now when I try to launch Slack I'm told:

Presumably some kind of checksum fails because the index.js has been modified? Is there any way around this? Obviously I can revert the code change and launch Slack but I'd like to get this mod working.

Thanks,

Steve

cat /etc/os-release 
NAME="Ubuntu"
VERSION="16.04.3 LTS (Xenial Xerus)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 16.04.3 LTS"
VERSION_ID="16.04"
HOME_URL="http://www.ubuntu.com/"
SUPPORT_URL="http://help.ubuntu.com/"
BUG_REPORT_URL="http://bugs.launchpad.net/ubuntu/"
VERSION_CODENAME=xenial
UBUNTU_CODENAME=xenial

Here are the contents of my index.js file:

$ cat /usr/lib/slack/resources/app.asar.unpacked/src/static/index.js
//do not migrate preload script into TypeScript
require('../stat-cache');
const profiler = require('../utils/profiler');

if (profiler.shouldProfile()) profiler.startProfiling();

var startup = function() {
  var url = require('url');

  // Skip "?loadSettings=".
  var fileUri = url.parse(window.location.href);

  var queryParts = fileUri.query.split('&');
  var loadSettingsStr = null;

  for (var j=0; j < queryParts.length; j++) {
    if (queryParts[j].match(/loadSettings/)) {
      loadSettingsStr = queryParts[j].replace("loadSettings=", "");
      break;
    }
  }

  var loadSettings = JSON.parse(decodeURIComponent(loadSettingsStr));

  // Require before the module cache in dev mode
  window.loadSettings = loadSettings;

  var noCommitVersion = loadSettings.version.split('-')[0];
  var shouldSuppressErrors = loadSettings.devMode;
  if (!loadSettings.isSpec) {
    require('../renderer/bugsnag-setup').setupBugsnag(shouldSuppressErrors, noCommitVersion);
  }

  if (loadSettings.bootstrapScript) {
    require(loadSettings.bootstrapScript);
  }
};


document.addEventListener("DOMContentLoaded", function() { // eslint-disable-line
  try {
    startup();
  } catch (e) {
    console.log(e.stack);

    if (window.Bugsnag) {
      window.Bugsnag.notifyException(e, "Renderer crash");
    }

    throw e;
  }
});

// First make sure the wrapper app is loaded
document.addEventListener("DOMContentLoaded", function() {

   // Then get its webviews
   let webviews = document.querySelectorAll(".TeamView webview");

   // Fetch our CSS in parallel ahead of time
   const cssPath = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css';
   let cssPromise = fetch(cssPath).then(response => response.text());

   let customCustomCSS = `
   :root {
      /* Modify these to change your theme colors: */
      --primary: #999;
      --text: #C1C;
      --background: #080808;
      --background-elevated: #222;
   }
   `

   // Insert a style tag into the wrapper view
   cssPromise.then(css => {
      let s = document.createElement('style');
      s.type = 'text/css';
      s.innerHTML = css + customCustomCSS;
      document.head.appendChild(s);
   });

   // Wait for each webview to load
   webviews.forEach(webview => {
      webview.addEventListener('ipc-message', message => {
         if (message.channel == 'didFinishLoading')
            // Finally add the CSS into the webview
            cssPromise.then(css => {
               let script = `
                     let s = document.createElement('style');
                     s.type = 'text/css';
                     s.id = 'slack-custom-css';
                     s.innerHTML = \`${css + customCustomCSS}\`;
                     document.head.appendChild(s);
                     `
               webview.executeJavaScript(script);
            })
      });
   });
});

Slack is still in vanilla appearance and changing the css values has no effect.

Or maybe I missed something in the installation.
Slack 3.2.1 64-bit on Linux
Here is what I did:

1. Added the js at the bottom line of /usr/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js

  ...............................................................................
  const resourcePath = path.join(__dirname, '..', '..');
  const mainModule = require.resolve('../ssb/main.ts');
  const isDevMode = loadSettings.devMode && isPrebuilt();

  init(resourcePath, mainModule, !isDevMode);
}

// First make sure the wrapper app is loaded
document.addEventListener("DOMContentLoaded", function() {

   // Then get its webviews
   let webviews = document.querySelectorAll(".TeamView webview");
   ...............................................................................

2. Restart Slack

→ Overflowing CSS content in thread summary places
→ Blurred emoji's
→ Chat room-input box is weird
→ Version -^3.0.0 Slack in Mac

Sadly, 3.2.0 (Mac) is now back to white background etc.

Hi!

I've tried your solution and I've noticed that when I add the "snippet" to ssb-interop.js the sidebar becomes black. It is great. But when I also add that snippet to index.js - nothing changes. Maybe I do that wrong? Or maybe the solution is outdated for Slack 3.3.1?

Thanks much!