--text only seems to apply to navigation

[david1602]

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!

[Arezhik]

Myself and others I work with are experiencing it too.

I added the following to the let customCustomCSS to at least make it readable @david1602

` 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: #8f8f8f !important;
}

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

}`

[david1602]

I tried but I failed badly trying to do the same thing, that helps a lot! I think an improvement label for the documentation would be appropriate.

[stevenlordiam]

Hi I had the same issue, where should I add your customCustomCSS to? @Arezhik

[david1602]

@stevenlordiam this is what the bottom of my ssb-interop.js file looks like:

// 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: #09F;
      --text: #CCC;
      --background: #080808;
      --background-elevated: #222;
   }
   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;

    }
   `

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

[stevenlordiam]

@david1602 it works for me, thank you!

[david1602]

@stevenlordiam you're welcome!

[Arezhik]

Welcome guys. I do have a my own repo based off of this CSS, you are welcome to pull from it for your cssPath variable in the same file. @david1602 @stevenlordiam

` // 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/Arezhik/slackCustomCSS/85e49edd/custom.css" let cssPromise = fetch(cssPath).then(response => response.text());

let customCustomCSS = `
:root{
/*Modifythesetochangeyourthemecolors: */
--primary: #09F;
--text: #CCC;
--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); }) }); }); });

[david1602]

@Arezhik I appreciate the effort, but you have to fix your formatting 😄

[Arezhik]

Work in progress, the theme was broken for me to begin with unfortunately and didn’t work well with slack 3.0.0.

If you feel the need you can create an issue on my repository for it, so I can look into it.

[Zoooook]

None of those solutions worked for me, no matter whose CSS I use none of my own colors apply to anything except the far left workspace-switcher sidebar. And then I upgraded to Slack 3.0 and the whole thing is busted, back to white background. :(

[kivan-mih]

Solution by david1602 works, but with two problems:

1. Color is not applied to shared message text
2. When scrolling message history some jittering occur. I have slack 3.0.5 on linux mint 18

[Bterrell721]

Same issue as @kivan-mih.

david1602's fix does resolve the issue with impossible to read text and highlight issue, but the text color in the main message pane is reverted to grey and doesn't respect my color choices in the "root" section.

Any fix for that @david1602 ?

[Jyosua]

I'm also experiencing the same thing as @Bterrell721 as of last night.

[laurencee]

Slight modification to fix bot link text.

Change 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: #afafaf !important;
    }

So you end up with

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

    .c-message_attachment__field_title
    {
        font-weight: bold;
        color: #afafaf !important;
    }

[me21]

Another issue is that "Add reaction" button is invisible until you hover mouse cursor over it, and "View thread" link is on white background when hover. And bot messages are with light backgroud until hover.

[kivan-mih]

Hmmm... since today all background became white? Does anyone has this problem?

[laurencee]

@kivan-mih Everytime there's a new version of slack you'll have to reapply the js changes to the files in the new version folder.

[seanpianka]

@laurencee Applying the original changes to the "new version folder"/index.js and/or ssb-interop.js does not seem to function properly (the background of the chat is still white w/ white text).

[laurencee]

I just started getting this too with the white background, will have to check what changed. Guess my update was delayed.

[quietconundrum]

can confirm on mac, above modifications suggested for index.js and ssb-interop.js have no effect after latest update. white background has returned once again.

[laurencee]

Well the above fixes were just mean to fix a few different styles that had been introduced/renamed. The main script is still https://github.com/widget-/slack-black-theme/blob/master/custom.css and that hasn't been updated since the repo owner disappeared.

[d-fay]

Been trying to keep a fork of this up-to-date with latest fixes:

https://github.com/d-fay/slack-black-theme#installing-into-slack

Will soon be making more modifications and adding a bash script to automatically append the custom CSS when things break after an update.

[Arezhik]

div.c-virtual_list__item{ background-color: #000 !important; }

This is the css item you can apply the color to fix the main message window color.

[Arezhik]

Not perfect, but here is a repo for the most recent update change. Feel free to add issues for me to fix.

https://github.com/Arezhik/slackCustomCSS

[wickkidd]

v3.3.1 breaks the message window styling. The sidebar styling still works.

re: https://github.com/widget-/slack-black-theme/issues/39#issuecomment-356698404