--text only seems to apply to navigation about slack-black-theme HOT 25 OPEN

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

from slack-black-theme.

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 ?

from slack-black-theme.

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

from slack-black-theme.

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

from slack-black-theme.

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.

from slack-black-theme.

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

from slack-black-theme.

@david1602 it works for me, thank you!

from slack-black-theme.

@stevenlordiam you're welcome!

from slack-black-theme.

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

from slack-black-theme.

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.

from slack-black-theme.

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. :(

from slack-black-theme.

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

from slack-black-theme.

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

from slack-black-theme.

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

from slack-black-theme.

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.

from slack-black-theme.

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

from slack-black-theme.

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

from slack-black-theme.

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

from slack-black-theme.

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

from slack-black-theme.

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.

from slack-black-theme.

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.

from slack-black-theme.

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.

from slack-black-theme.

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.

from slack-black-theme.

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

from slack-black-theme.

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

from slack-black-theme.