Had to add some additional css today

[eedeep]

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.

[antok87]

I had the same issue this morning, thanks for the fix

[MartinKG60]

Thanks, my text was still a weird color tho, so I added this:

span.c-message__body, a.c-message__sender_link, span.c-message_attachment__media_trigger.c-message_attachment__media_trigger--caption, div.p-message_pane__foreword__description span
{
	color: #CCC !important;
}

[misterpyrrhuloxia]

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.

@eedeep so Slack on my Mac just updated to 3.1.1. In the past, I've followed these instructions and placed the code in the bottom of the index.js file every time Slack has updated. But with this update I'm still getting a default, white background in the chat pane. I tried adding your above code to the bottom of ssb-interop.js but I'm still not seeing any dark theme changes take place. I'm not a developer, so please forgive me for being ignorant on how to fix this on my own.

[steveharman]

Similarly I'd really appreciate a quick "do this, to this file, do this, to this file...." if possible please.

[odedelharar]

This is my setup using a different styling, but you can replace with parts from this repository. You need to place the following at the end of (OSX installation): /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js

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/laCour/slack-night-mode/master/css/raw/black.css';
   let cssPromise = fetch(cssPath).then(response => response.text());

   let customCustomCSS = `
   :root {
      /* Modify these to change your theme colors: */
      --primary: #61AFEF;
      --text: #00b200;
  }
  div.c-message.c-message--light.c-message--hover
  {
    color: #00b200 !important;
  }

	span.c-message__body,
	a.c-message__sender_link,
	span.c-message_attachment__media_trigger.c-message_attachment__media_trigger--caption,
	div.p-message_pane__foreword__description span
	{
			color: #00b200 !important;
      font-family: "Fira Code", Arial, Helvetica, sans-serif;
      text-rendering: optimizeLegibility;
      font-size: 14px;
      letter-spacing: -0.6px !important;
	}
  div.c-virtual_list__scroll_container {
    background-color: #080808 !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: #080808 !important;
}

div.c-message:hover {
    background-color: #080808 !important;
}
   `

   // 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);
            })
      });
   });
});

[steveharman]

Thanks @odedelharar your code pasted in & worked first time. Just need to change that green. ;-)

[misterpyrrhuloxia]

@odedelharar thank you so much!! Problem solved!

[richardcane]

This is my extended One Dark style:

  let customCustomCSS = `
  :root {
    /* Modify these to change your theme colors: */
    --primary: #61AFEF;
    --text: #ABB2BF;
    --background: #282C34;
    --background-elevated: #3B4048;
  }

  pre.special_formatting
  {
    background-color: #282C34 !important;
    color: #8f8f8f !important;
    border: solid;
    border-width: 1px !important;		
  }

  #im_browser .im_browser_row,
  .c-message_list__day_divider__line,
  .p-threads_view__divider_line
  { 
    border-top: 1px solid #afafaf !important;
  }

  div.c-message.c-message--light.c-message--hover,
  #file_preview_scroller .texty_comment_input,
  .c-message.c-message--light.c-message--hover.c-message--adjacent.c-message--last
  {
    color: #fff !important;
    background-color: #3B4048 !important;
  }

  #file_preview_scroller .message_sender,
  #file_preview_scroller .file_viewer_link,
  #file_preview_scroller .comment_body,
  #file_preview_scroller .ts_tip_btn,
  #file_preview_scroller .file_comment_tip,
  #file_preview_scroller .file_meta,
  #file_preview_scroller .file_ssb_download_link,
  .c-member--medium,
  .c-member__display-name, 
  .c-member__secondary-name--medium,  
  .c-team__display-name, 
  .c-usergroup__handle,
  .c-message_attachment,
  .c-message_attachment__pretext,
  .c-message_attachment__button,
  .c-message_attachment__select,
  .c-message_list__day_divider__label,
  .c-message_kit__background,
  .c-icon--channel,
  .c-channel_name__text,
  .c-file__title,
  .c-file__meta,
  .c-reaction__count,
  .c-reaction_add__icon--fg,
  .c-input_select_options_list__option,
  .c-input_select_options_list_container:not(.c-input_select_options_list_container--always-open),
  .p-thread_participant_list,
  .p-threads_view__divider_label,
  span.c-message__body,
  a.c-message__sender_link,
  div.c-message_attachment__row,
  div.p-message_pane__foreword__description span,
  ts-conversation.message_container ts-message .message_content .message_sender,
  span.c-message_attachment__media_trigger.c-message_attachment__media_trigger--caption
  {
    color: #afafaf !important;
  }

  .c-reaction_add__icon--bg 
  {
    color: #282C34 !important;
  }  

  div.c-virtual_list__scroll_container,
  div.c-message:hover,
  .c-file_container,
  .c-file__slide--meta,  
  .c-reaction,
  .c-reaction_add,  
  .c-message_list__day_divider__label__pill,
  .c-button--outline,
  .c-message_attachment__button,
  .c-message_attachment__select,
  .p-threads_view__divider_label,
  .c-input_select_options_list_container:not(.c-input_select_options_list_container--always-open),
  #im_browser #im_list_container:not(.keyboard_active).not_scrolling .im_browser_row:not(.disabled_dm):hover  
  {
    background-color: #282C34 !important;
  }

  .c-message_kit__background,
  .p-threads_view__footer,
  .p-threads_view_root {
    border: 1px solid #3B4048;
  }

  .c-file__icon:after
  {
    border: 3px solid #282C34;
  } 

  .c-button--outline,
  .c-message_attachment__button,
  .c-message_attachment__select,
  .c-file_container,
  .c-reaction,
  .c-reaction_add,
  .c-input_select_options_list_container:not(.c-input_select_options_list_container--always-open)
  {
    border: 1px solid;
    border-color: #3B4048;
  }

  .c-file_container:hover,
  .c-reaction:focus,
  .c-reaction:hover,
  .c-reaction_add:focus,
  .c-reaction_add:hover
  {
    border-color: #afafaf;
  }

  .c-file_container--has_thumb .c-file__actions:before
  {
    background-image: linear-gradient(90deg,hsla(0,0%,100%,0),#282C34 20px);
  }

  .c-member_slug--link,
  .c-message_kit__hover--hovered
  {
    background: #3B4048;
  }

  .c-member_slug--link:hover,
  .c-message_kit__background,
  .p-threads_view__footer
  {
    background: #25272a;
  }

  .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;
  }
  `;

[mliq]

Above suggestions did not work for me, but I was able to restore my previous theme just by adding a single simple CSS rule-set:

.c-message, .c-virtual_list__item {
  background-color: #222 !important;
}

Here is the complete code that I add to a fresh ssb-interop.js in case it helps some folks like @misterpyrrhuloxia and @steveharman. (I believe I'm using the Low Contrast theme, you can find and replace color codes like #222 to match your theme/preference)

The instructions are simply:

1. paste the following code to the bottom of /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js, no need to edit any other file:

// 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: #61AFEF;
      --text: #ABB2BF;
      --background: #282C34;
      --background-elevated: #3B4048;
    }
    div.c-message.c-message--light.c-message--hover {
      color: #fff !important;
      background-color: #222 !important;
    }

    span.c-message__body,
    a.c-message__sender_link,
    span.c-message_attachment__media_trigger.c-message_attachment__media_trigger--caption,
    div.p-message_pane__foreword__description span {
      color: #afafaf !important;
    }

    pre.special_formatting {
      background-color: #222 !important;
      color: #8f8f8f !important;
      border: solid;
      border-width: 1 px !important;
    }
    .c-message, .c-virtual_list__item {
      background-color: #222 !important;
    }
    `

    // 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);
            })
      });
    });
});

Incidentally, you can also make this easier to re-apply whenever Slack updates by placing the above code in a file on your hard drive (~/slack_dark_theme.js in this example) and adding an alias to your .bash_profile like so:

alias slackdark='cat ~/slack_dark_theme.js >> /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js'

Then you just need to type slackdark at a terminal and refresh Slack.

[dhowe]

I'm using the code from @mliq (thanks!) - how to get rid of the white 'mention' names and 'yesterday' text:

[richardcane]

@dhowe The CSS in my comment above solves a lot of those issues. I've been going through updating it as and when I find something to restyle. Hope it's helpful :)

[tarantulae]

@odedelharar your code works great, and I was finally able to use it to specify a serif font!

However, my messages bar is still the default purple instead of a darker theme color. Am I missing something or did you not change that color? How can I make it match the rest of the dark theme?

[ctsstc]

How are you guys determining the classes, does it just match up with what's in the web browser or are you forcing inspector into the code?

[richardcane]

@ctsstc it matches the web browser classes.

[xanderyzwich]

@richardcane solution worked perfectly

@mliq your solution was having an issue with link preview text matching the background color.

[misterpyrrhuloxia]

So here's what I have at the end of my ssb-interop.js file on my Mac:

`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/laCour/slack-night-mode/master/css/raw/black.css'; let cssPromise = fetch(cssPath).then(response => response.text());

let customCustomCSS = ` :root { /* Modify these to change your theme colors: */ --primary: #61AFEF; --text: #FFFFFF; } div.c-message.c-message--light.c-message--hover { color: #FFFFFF !important; }

span.c-message__body,
a.c-message__sender_link,
span.c-message_attachment__media_trigger.c-message_attachment__media_trigger--caption,
div.p-message_pane__foreword__description span
{
		color: #FFFFFF !important;
  font-family: "Ubuntu";
  text-rendering: optimizeLegibility;
  font-size: 14px;
  letter-spacing: -0.6px !important;
}

div.c-virtual_list__scroll_container { background-color: #222222 !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: #222222 !important; }

div.c-message:hover { background-color: #222222 !important; } `

// 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); }) }); }); });

But for some reason out of nowhere, now there are some elements that are dark on dark text and very difficult to read.

Example:

I don't know js or code at all. Would someone be able to take my above pasted code and change it for me to fix that dark text color in the screenshot?

[richardcane]

@misterpyrrhuloxia Slack change their styles quite a lot, which ends up breaking things. I will have a look at fixing my styling in the next few days as some of it has become outdated.

[misterpyrrhuloxia]

Thank you.

On Tue, Aug 21, 2018, 9:45 AM Richard Cane [email protected] wrote:

@misterpyrrhuloxia https://github.com/misterpyrrhuloxia Slack change their styles quite a lot, which ends up breaking things. I will have a look at fixing my styling in the next few days as some of it has become outdated.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/widget-/slack-black-theme/issues/48#issuecomment-414722103, or mute the thread https://github.com/notifications/unsubscribe-auth/AJB830Q17GFVmg9SVrrjHGQDWNnRbIDaks5uTCsagaJpZM4TXgql .

[boktoso]

My company just installed slack and I immediately went to get a dark theme of it.

Here is my snippet of fiddling with the search area and everywhere else to be conformed.

let customCustomCSS = `
    :root {
      /* Modify these to change your theme colors: */
      --primary: #61AFEF;
      --text: #ABB2BF;
      --background: #282C34;
      --background-elevated: #3B4048;
    }
    pre.special_formatting
    {
      background-color: #282C34 !important;
      color: #8f8f8f !important;
      border: solid;
      border-width: 1px !important;
    }

    #im_browser .im_browser_row,
    .c-message_list__day_divider__line
    {
      border-top: 1px solid #afafaf;
    }

    div.c-message.c-message--light.c-message--hover,
    #file_preview_scroller .texty_comment_input,
    .c-message.c-message--light.c-message--hover.c-message--adjacent.c-message--last
    {
      color: #fff !important;
      background-color: #3B4048 !important;
    }

    #file_preview_scroller .message_sender,
    #file_preview_scroller .file_viewer_link,
    #file_preview_scroller .comment_body,
    #file_preview_scroller .ts_tip_btn,
    #file_preview_scroller .file_comment_tip,
    #file_preview_scroller .file_meta,
    #file_preview_scroller .file_ssb_download_link,
    .c-member--medium,
    .c-member__display-name,
    .c-member__secondary-name--medium,
    .c-team__display-name,
    .c-usergroup__handle,
    .c-message_attachment,
    .c-message_attachment__pretext,
    .c-message_attachment__button,
    .c-message_attachment__select,
    .c-message_list__day_divider__label,
    .c-file__title,
    .c-file__meta,
    .c-reaction__count,
    .c-reaction_add__icon--fg,
    .c-input_select_options_list__option,
    .c-input_select_options_list_container:not(.c-input_select_options_list_container--always-open),
    span.c-message__body,
    a.c-message__sender_link,
    div.c-message_attachment__row,
    div.p-message_pane__foreword__description span,
    ts-conversation.message_container ts-message .message_content .message_sender,
    span.c-message_attachment__media_trigger.c-message_attachment__media_trigger--caption
    {
      color: #afafaf !important;
    }

    .c-reaction_add__icon--bg
    {
      color: #282C34 !important;
    }

    div.c-virtual_list__scroll_container,
    div.c-message:hover,
    .c-file_container,
    .c-file__slide--meta,
    .c-reaction,
    .c-reaction_add,
    .c-message_list__day_divider__label__pill,
    .c-button--outline,
    .c-message_attachment__button,
    .c-message_attachment__select,
    .c-input_select_options_list_container:not(.c-input_select_options_list_container--always-open),
    #im_browser #im_list_container:not(.keyboard_active).not_scrolling .im_browser_row:not(.disabled_dm):hover
    {
      background-color: #282C34 !important;
    }

    .c-file__icon:after
    {
      border: 3px solid #282C34;
    }

    .c-button--outline,
    .c-message_attachment__button,
    .c-message_attachment__select,
    .c-file_container,
    .c-reaction,
    .c-reaction_add,
    .c-input_select_options_list_container:not(.c-input_select_options_list_container--always-open)
    {
      border: 1px solid;
      border-color: #3B4048;
    }

    .c-file_container:hover,
    .c-reaction:focus,
    .c-reaction:hover,
    .c-reaction_add:focus,
    .c-reaction_add:hover,
    {
      border-color: #afafaf;
    }

    .c-file_container--has_thumb .c-file__actions:before
    {
      background-image: linear-gradient(90deg,hsla(0,0%,100%,0),#282C34 20px);
    }

    .c-member_slug--link
    {
      background: #3B4048;
    }

    .c-member_slug--link:hover
    {
      background: #25272a;
    }

    .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;
    }
    .ql-placeholder {
      color: #FEFEFE !important;
    }

    .c-unified_member__secondary-name,
    .c-unified_member__display-name,
    .c-channel_name  {
      color: #fff;
    }

    .c-search__input_and_close,
    .c-search__input_box,
    .c-search-autocomplete,
    .c-search_autocomplete > footer,
    .c-search_autocomplete__footer_navigation_help {
      color: #fff;
      background: #282C34;
    }

    .ReactModal__Content ReactModal__Content--after-open {
      background: #282C34 !important;
    }
    `

[mliq]

@xanderyzwich Here's my latest version which I've updated to:

• eliminate remaining white backgrounded areas such as "Today" indicator and behind @ mentions.
• fix illegible text (dark on dark) such as in file attachment text, keyboard shortcuts pane.

// 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: #61AFEF;
      --text: #ABB2BF;
      --background: #282C34;
      --background-elevated: #3B4048;
    }

    div.c-message.c-message--light.c-message--hover,
    .p-flexpane_header,
    .p-shortcuts_flexpane__title,
    .c-message_list__day_divider,
    .c-message_list__day_divider__label,
    .c-message_list__day_divider__label__pill,
    .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,
    .c-keyboard_key {
      color: #fff !important;
      background-color: #222 !important;
    }

    span.c-message__body,
    a.c-message__sender_link,
    span.c-message_attachment__media_trigger.c-message_attachment__media_trigger--caption,
    div.p-message_pane__foreword__description span,
    .c-message_attachment,
    .p-shortcuts_flexpane__shortcut_title {
      color: #afafaf !important;
    }

    pre.special_formatting {
      background-color: #222 !important;
      color: #8f8f8f !important;
      border: solid;
      border-width: 1 px !important;
    }

    .c-message,
    .c-virtual_list__item,
    .c-member_slug--link {
      background-color: #222 !important;
    }
    `

    // 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);
            })
      });
    });
});

[ghost]

thank you for this @mliq

[trukgroeg]

Nothing happens for me anymore. Downloaded a new version of Slack today. I have inserted @mliq 's version in both index and ssb-interop. Anything I am missing?

[mliq]

@trukgroeg you should only need to insert at end of /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js. Then, reload slack (cmd/ctrl+r).

[misterpyrrhuloxia]

@boktoso I used your code and just modified some of the colors, but I'm still seeing a white line in the top of the Slack message panel. Can you tell me what I can change that will get rid of the white line there? It's the divider line between the channel header and the actual messages that contains the date of the messages from that section of the channel that you're scrolling through.

Here's the code I'm using:

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: #D9D9D9; /* 90% - E6E6E6 */
     --text: #FFFFFF;
     --background: #333333;
     --background-elevated: #1F1F1F;
   }
   pre.special_formatting
   {
     background-color: #333333 !important;
     color: #8f8f8f !important;
     border: solid;
     border-width: 1px !important;
   }

   #im_browser .im_browser_row,
   .c-message_list__day_divider__line
   {
     border-top: 1px solid #afafaf;
   }

   div.c-message.c-message--light.c-message--hover,
   #file_preview_scroller .texty_comment_input,
   .c-message.c-message--light.c-message--hover.c-message--adjacent.c-message--last
   {
     color: #fff !important;
     background-color: #404040 !important;
   }

   #file_preview_scroller .message_sender,
   #file_preview_scroller .file_viewer_link,
   #file_preview_scroller .comment_body,
   #file_preview_scroller .ts_tip_btn,
   #file_preview_scroller .file_comment_tip,
   #file_preview_scroller .file_meta,
   #file_preview_scroller .file_ssb_download_link,
   .c-member--medium,
   .c-member__display-name,
   .c-member__secondary-name--medium,
   .c-team__display-name,
   .c-usergroup__handle,
   .c-message_attachment,
   .c-message_attachment__pretext,
   .c-message_attachment__button,
   .c-message_attachment__select,
   .c-message_list__day_divider__label,
   .c-file__title,
   .c-file__meta,
   .c-reaction__count,
   .c-reaction_add__icon--fg,
   .c-input_select_options_list__option,
   .c-input_select_options_list_container:not(.c-input_select_options_list_container--always-open),
   span.c-message__body,
   a.c-message__sender_link,
   div.c-message_attachment__row,
   div.p-message_pane__foreword__description span,
   ts-conversation.message_container ts-message .message_content .message_sender,
   span.c-message_attachment__media_trigger.c-message_attachment__media_trigger--caption
   {
     color: #FFFFFF !important;
     font-family: "Ubuntu";
     text-rendering: optimizeLegibility;
     font-size: 14px;
     letter-spacing: -0.6px !important;
   }

   .c-reaction_add__icon--bg
   {
     color: #2F2F2F !important;
   }

   div.c-virtual_list__scroll_container,
   div.c-message:hover,
   .c-file_container,
   .c-file__slide--meta,
   .c-reaction,
   .c-reaction_add,
   .c-message_list__day_divider__label__pill,
   .c-button--outline,
   .c-message_attachment__button,
   .c-message_attachment__select,
   .c-input_select_options_list_container:not(.c-input_select_options_list_container--always-open),
   #im_browser #im_list_container:not(.keyboard_active).not_scrolling .im_browser_row:not(.disabled_dm):hover
   {
     background-color: #333333 !important;
   }

   .c-file__icon:after
   {
     border: 3px solid #2F2F2F;
   }

   .c-button--outline,
   .c-message_attachment__button,
   .c-message_attachment__select,
   .c-file_container,
   .c-reaction,
   .c-reaction_add,
   .c-input_select_options_list_container:not(.c-input_select_options_list_container--always-open)
   {
     border: 1px solid;
     border-color: #424242;
   }

   .c-file_container:hover,
   .c-reaction:focus,
   .c-reaction:hover,
   .c-reaction_add:focus,
   .c-reaction_add:hover,
   {
     border-color: #afafaf;
   }

   .c-file_container--has_thumb .c-file__actions:before
   {
     background-image: linear-gradient(90deg,hsla(0,0%,100%,0),#2F2F2F 20px);
   }

   .c-member_slug--link
   {
     background: #424242;
   }

   .c-member_slug--link:hover
   {
     background: #262626;
   }

   .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;
   }
   .ql-placeholder {
     color: #FEFEFE !important;
   }

   .c-unified_member__secondary-name,
   .c-unified_member__display-name,
   .c-channel_name  {
     color: #fff;
   }

   .c-search__input_and_close,
   .c-search__input_box,
   .c-search-autocomplete,
   .c-search_autocomplete > footer,
   .c-search_autocomplete__footer_navigation_help {
     color: #fff;
     background: #333333;
   }

   .ReactModal__Content ReactModal__Content--after-open {
     background: #2F2F2F !important;
   }
   `

    // 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);
            })
      });
    });
});

Also, for my sidebar theme customization colors I have these:

#000000,#8E0E00,#8E0E00,#000000,#8E0E00,#FFFFFF,#B01D0C,#8E0E00

But I've noticed that when I have a mention badge or unread mention banner at the top or bottom of the sidebar, they are a very light gray rather than the #8E0E00 red color that I have selected. Do you know how I can fix that too?

Another weird issue is when I go to edit a message, I get white text on a white background.

As you can see in that screenshot, it's only readable if I highlight the text. In the web app for Slack, I inspected that text in my browser and it says that it's ql-editor. But I tried adding this to the file and it didn't change anything:

.ql-editor { color: #000000 !important; }

[acdifran]

@misterpyrrhuloxia

I used this at the bottom of my css to get rid of the white bar:

.p-message_pane .c-message_list:not(.c-virtual_list--scrollbar), .p-message_pane .c-message_list.c-virtual_list--scrollbar > .c-scrollbar__hider { color: #fff !important; background-color: #222 !important; }

#client_body:not(.onboarding):not(.feature_global_nav_layout):before { background-color: #222 !important; border: 1px solid #222; }

[misterpyrrhuloxia]

I used this at the bottom of my css to get rid of the white bar:

.p-message_pane .c-message_list:not(.c-virtual_list--scrollbar), .p-message_pane .c-message_list.c-virtual_list--scrollbar > .c-scrollbar__hider { color: #fff !important; background-color: #222 !important; }

#client_body:not(.onboarding):not(.feature_global_nav_layout):before { background-color: #222 !important; border: 1px solid #222; }

@acdifran I used your code above and it almost totally got rid of the white. As you can see in the screenshot below, though, I still have a tiny sliver of white that's present on the left of that element. I even tried adding just a left border of #222 but instead of replacing the white sliver, it just pushed it over next to the left border. Any idea how to fix this?

[acdifran]

@misterpyrrhuloxia

Yeah, I actually fixed that too, but just forgot to update my original comment to fix a mistake. You just need to add "!important" to the border like:

#client_body:not(.onboarding):not(.feature_global_nav_layout):before { background-color: #222 !important; border: 1px solid #222 !important; }

[misterpyrrhuloxia]

So that solves the issue almost completely except when on the All Threads pane.

When I go to the "All Threads", the little sliver of white is still there. This picture above is with your code applied. All that border-left code does is move the white sliver over.

Below is a screenshot of it when I set the border-left to 250px just to test it.

As you can see, all it did was push the white sliver over to the right by 250px. I'm not really sure what to do about it.

To reiterate, this white piece is now only visible on the "All Threads" pane, nowhere else.

[acdifran]

@misterpyrrhuloxia

Yeah I see that now, didn't notice it before. Just need to add this line "box-shadow: none !important;" to the same section like this:

#client_body:not(.onboarding):not(.feature_global_nav_layout):before { background-color: #222 !important; border: 1px solid #222 !important; box-shadow: none !important; }

[misterpyrrhuloxia]

Yeah I see that now, didn't notice it before. Just need to add this line "box-shadow: none !important;" to the same section like this:

#client_body:not(.onboarding):not(.feature_global_nav_layout):before {
background-color: #222 !important;
border: 1px solid #222 !important;
box-shadow: none !important;
}

@acdifran that fixed it! Thank you so much!!