widget- / slack-black-theme Goto Github PK
View Code? Open in Web Editor NEWA darker, more contrasty, Slack theme.
License: Apache License 2.0
A darker, more contrasty, Slack theme.
License: Apache License 2.0
Hi there,
I have applied some sample color schema but the chat box background still stay in white.
Thanks and regards,
Do I copy files somewhere? Or just edit the index file? This needs an install script.
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 updated Slack and attempted to set this up again and it does not appear to be working. Did slack rename the elements?
→ Overflowing CSS content in thread summary places
→ Blurred emoji's
→ Chat room-input box is weird
→ Version -^3.0.0 Slack in Mac
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 :-(
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
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
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).
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!
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.
The "All Threads" page background and hover colors don't get skinned. Also as of today @ mentions and channel topics are not being skinned.
https://gyazo.com/64365befbf0bfe9ba5e1708d399eb468
I'm not really into programming, just trying to get this to work for personal use.
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
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!
Is there a way to make this work for multiple teams? This themes my first team, but the rest retain the original CSS
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 includes writing a gulpfile to auto-convert it back to CSS.
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?
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
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.
Sadly, 3.2.0 (Mac) is now back to white background etc.
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).
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):
/color @username <my hex>
, but is there a css way of overriding them permanently / all the time?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!
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?
I cannot find the CSS element that controls the color of text for the sidebar. Please advise.
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
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:
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 🙃.
Slack added a search form, which is complete white. Please add CSS to make it dark too
3.2.1 64-bit (linux)
Background in channels is white.
Other frames like "All threads" are fine.
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.
Just that, thank you!
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\static\index.js
Somehow pull a bunch of variables out of the theme into LESS variables that make sense.
Ideally cover
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:
...............................................................................
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");
...............................................................................
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.