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.

[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!!

[acdifran]

@misterpyrrhuloxia

No problem! Glad it's working :)

[misterpyrrhuloxia]

So I would like to change the colors of the "new messages" element as well as its divider line.

I can't seem to right click on it to inspect it with dev tools. Does anyone have any suggestions?

[Luffles]

For anyone else annoyed with the white flash while changing channels, add:

div[role="presentation"] { background-color: #282C34 !important; }

[leoandreotti]

Here is an updated version of @mliq code with some improvements.

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

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

  .ql-placeholder, .c-team__display-name, .c-unified_member__display-name, .c-usergroup__handle, .timezone_value, .timezone, .p-message_pane__foreword__description, .charcoal_grey {
    color: #ccc !important;
  }

  div[role=listitem]:first-child {
    margin-bottom: 20px !important;
  }

  div[role="presentation"]:not(class="c-submenu") { background-color: #282C34 !important; }

  .c-search__input_and_close{
      background:#292d32!important;
      color white !important;
  }
  .c-search__input_box{
      background:#292d32!important;
      color white !important;
  }
  .c-search__input_and_close{
      background:#292d32!important;
      color white !important;
  }
  .c-search_autocomplete{
      background:#b7bcbe!important;
      color white !important;
  }
  .c-search_autocomplete footer{
      background:#97a0a5!important;
      color white !important;
  }
  .c-search_autocomplete__suggestion_text{
      color white !important;
  }
  .c-search_autocomplete__suggestion_content .c-search_autocomplete__suggestion_text{
      color white !important;
  }
  .c-search_autocomplete header{
      background:#b7bcbe!important;
      color:black !important;
  }
  .c-search_autocomplete footer .c-search_autocomplete__footer_navigation_help{
      color:white !important;
  }
  .c-search__input_box .c-search__input_box__input .ql-editor, .c-search__input_box .c-search__input_box__input .ql-placeholder{
      background:#2b2c2e!important;
      border:none !important;
  }
  .c-search__tabs{
      background:#2b2c2e!important;
  }
  .c-search__view{
      background:#2b2c2e!important;
  }
  .c-search_message__body{
      color:#cacbcc !important;
  }
  .p-search_filter__title_text{
      background:#2b2c2e!important;
      color:white !important;
  }
  .p-search_filter__title:before{
      color:grey !important;
  }
  .p-search_filter__dates{
      background:#1f2021!important;
      border: none !important;
      color:#cacbcc !important;
  }
  .p-search_filter__datepicker_trigger:hover{
      color:white !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);
          })
    });
  });
});

-- fixed for version 3.3.1

• search box background
• some black over black messages
• side bar formating

[veekas]

Confirmed that it's unnecessary to modify index.js; just changing ssb-interop.js is fine.

@leoandreotti's latest code block works great. I've made two changes locally:

1. Removed :not(class="c-submenu") from div[role="presentation"] as it was causing a large white div in a private message view that only had a few messages in it. (Edit: As Leo's comment indicates, this has the side-effect of making the "Remind me..." message action background dark as well.)

2. Small addition for the unread_group_header class in the All Unreads view after clicking the Mark As Read button:
   .unread_group_header { background-color: #222 !important; }

Thanks everyone for this work!

[leoandreotti]

@veekas thank you for your comment. I was looking for your addition this morning.

About your removal, please note that when you expand the messages actions ... you will see one option with the #222 background, that is wht I’ve placed that :not. Will look for another alternative.

[leoandreotti]

Can anyone help to find that white box when and only when there is this new messages alert?

[veekas]

@leoandreotti I too had some trouble finding the fix for that. Thanks in advance to whoever figures that one out! Same for the :not alternative. =)

[leoandreotti]

@veekas For the :not I am using now:

.c-menu {
    background-color: #fff !important;
  }

[misterpyrrhuloxia]

Thanks to everyone so far for the help with my css. I do have a question for everyone.

TLDR; I need help changing which image url one particular emoji/reaction uses with custom css in the ssb-interop.js file.

I'm the only one in my department where I work that uses dark mode for Slack. And my coworkers use the "heavy_check_mark" a lot. For some reason, while I'm not using the dark mode in Slack, that check mark is green and very easy to see. But while I'm using dark mode, the check mark turns to a dark gray. It has a transparent background and because of that, it's low contrast and hard to see because it's gray on gray.

That's what it looks like on my screen. It's kind of hard to see.

Below is the element of that heavy check mark:

<span class="emoji-outer emoji-sizer" data-codepoints="2714-fe0f" style="background-image: url(&quot;https://a.slack-edge.com/c00d19/img/emoji_2017_12_06/sheet_apple_64_indexed_256.png&quot;); background-position: 96.0784% 86.2745%; background-size: 5200% 5200%;">:heavy_check_mark:</span>

Once again, this is only a problem for me since I'm using the dark mode.

Do you guys know if it's possible for me to modify the css of just that emoji reaction in my Slack to use a different image url? I don't really know css at all. The span, :heavy_check_mark: is 100% unique to this emoji/reaction I want to change. So my idea was to add a custom css to be something like below:

span.emoji-outer.emoji-sizer:(:heavy_check_mark:) {background-image: url(https://emoji.slack-edge.com/T0381KY5P/greensquarecheck/fb8462c4db1a9d48.png);}

I know that obviously, that's not the right syntax at all. Like I said, I don't know what I'm doing. But maybe one of you guys know how to do this? I couldn't find what I needed while searching Google. Any help is appreciated, thanks!

[jakeduncan-roam]

Would love a solution to this! The only remaining issue I have with this theme! Tyvm!

[hiteshkr]

Would love a solution to this! The only remaining issue I have with this theme! Tyvm!

For removing the white behind new message banner, add the following:

.p-message_pane .p-message_pane__top_banners:not(:empty)+div .c-message_list.c-virtual_list--scrollbar>.c-scrollbar__hider:before,.p-message_pane .p-message_pane__top_banners:not(:empty)+div .c-message_list:not(.c-virtual_list--scrollbar):before{
      box-shadow:0 32px #222;
  }

EDIT: I was getting little flashes of white when switching to a channel (or All Threads view) for the first time. Resolved by adding the following:

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

[leoandreotti]

@hiteshkr thank you! both your codes work great!!!

[TheStigh]

Hi Guys, using @leoandreotti 's latest script.
Is it possible to increase the width of the channel_sidebar_list ?

I dont want the scrollbar to overlap the selection of channel

Thx :)

[jgerstle]

@leoandreotti can you please create a repo for your code? I am using it and it's really useful. I want to be able to follow changes and get them easily without having to get piecemeal changes from other people's comments. I don't mind doing it if you don't want to keep up the repo and deal with prs, but I figure since it's your code you should be the one to do it.

[leoandreotti]

@jgerstle Hi Jeremy, I can do it. I will try to do it this weekend. Thank you!

[leoandreotti]

@jgerstle

https://github.com/leoandreotti/slack-dark-theme/

[dvanlunen]

thanks everyone for the amazing work above

Can we also get a fix for the reply to a thread white box?

[leoandreotti]

Hi @dvanlunen,

can you provide a screenshot of where you see that box? I can try to fix that in my fork of the project.

[dvanlunen]

now that I'm signed in on a different comptuer it looks a bit less white (or perhaps what I copied from above didn't match what is currently on your fork that I'm using now). I'm ok with the difference.

I was referring to how the reply in a thread is brighter than ther reply in a channel.

[leoandreotti]

Hi @dvanlunen,

I have been able to fix that on my fork of this project at https://github.com/leoandreotti/slack-dark-theme

[djobes-fabfitfun]

I added this to the local config file to make the Threads font color dark enough to see in the conversations tab.

.p-threads_footer__input--legacy .p-message_input_field .ql-editor p {color: #000000; }

[richardcane]

Just updated my styling again, threading looks alright now.