Giter Club home page Giter Club logo

slack-black-theme's Introduction

Slack 4 Black Theme Night Mood

The Black Theme you'll fall in love with ๐Ÿ˜

Theme Preview

screen shot 2018-09-09 at 22 27 00

Screenshot 2019-07-18 at 13 38 37

Mac/Linux Install

Requirements

  • Slack 4
  • Muli Font
    • Please download and install this Font on your computer.
  • npm / node
    • It requires you have nodejs, npx and the asar package installed globally, you can install asar and npx with:
  npm i -g npx
  npm i -g asar

Installation

  1. Download from here slack-4-sh.zip and unpack zip
  2. Open terminal and drag and drop .sh file to the terminal. After installation, restart Slack and enjoy.
Make sure you have Npm / Node already installed in your computer.
It requires you have nodejs and the asar package installed globally with npm i -g asar

Windows Install

  1. Please have NodeJS Installed.

  2. There are fonts used in this theme and the script will download and install them if they are not in your fonts folder.

  3. You must have Powershell 5.0, aka Windows 10 to get full compatibility. If you don't have Windows 10 install the latest powershell for Windows.

  4. When running this script always run powershell in Adminstrator Mode. Hit your windows start button then type powershell, right click powershell, then Run as administrator.

Note:

  • These instructions are error handled in the script.
  • Please restart/close powershell if you have installed NodeJS during this install. This will refresh your environment variables to which NodeJS/Windows uses for commands. If you have Chocolatey installed just type refreshenv while in powershell and run the install command below without closing/restarting powershell.

Install

To install theme just open powershell as administrator (Refer to #4 above) and run this command below.

iex (new-object net.webclient).downloadstring('https://raw.githubusercontent.com/caiceA/slack-black-theme/master/slack-dark-mode.ps1')

Potential Errors

  1. If you get an error when you try and run the install command above you might need to change the execution policy (i.e. enable Powershell). You need to be an administrator on your computer to do this.

    Open powershell(Refer to #4 above) and run this command: Set-ExecutionPolicy RemoteSigned -scope CurrentUser

  2. If you happen to get this error. While the command npx asar extract app.asar app.asar.unpackedcustom has run:

npm ERR! code ENOLOCAL
npm ERR! Could not install from "...\AppData\Roaming\npm-cache\_npx\*****" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     "C:\Users\...\AppData\Roaming\npm-cache\_logs\**********-debug.log
Install for asar@latest failed with code 1"

Please enter this: npm config set cache C:\tmp\nodejs\npm-cache --global -- Origin

Contributors

caiceA - Maintainer & Designer

Design by Ali Caice

slack-black-theme's People

Contributors

caicea avatar column01 avatar empurium avatar guygadebois avatar hunman avatar jonlev1n avatar jpmckearin avatar ngurney avatar pseeth avatar rosiak avatar tgburgin avatar tonsit avatar triplepoint avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

slack-black-theme's Issues

Cannot seem to see the close button for threads and downloads any more

After getting the new theme (about a week ago?) I noticed the close button is not as readable as before. Could you please take a look?

I am on MacOS 10.14.4 and I can confirm the same is happening on my windows machine. Here are some screenshots:

  • For threads:

image

  • For downloads:

image

The close button for viewing Pinned items and Members of a channel is working correctly though.

Please let me know if there's any additional information I can provide. Thank you!

Looking for this style to match MacOS Mojave

https://github.com/widget-/slack-black-theme

Scroll down to "One Dark"

which uses:

"--primary: #61AFEF;
--text: #ABB2BF;
--background: #282C34;
--background-elevated: #3B4048;"

For some reason the lato code/version you have spaces things out more - I want to make it to look exactly like this:

When I tried using https://github.com/widget-/slack-black-theme 's version on MacOS Mojave, the main chat window is white. When I use yours, all the windows correctly match in color, but the font seems too spaced out, different from Slack's default font, and doesn't match MacOS's dark mode ("One Dark" does though).

I looked over your code for the ssb-interop.js file & I have no idea how to edit it to make it look like what you see in this image above. I just want to make it look like this with Slack's default fonts/spacing/etc.

How can I uninstall this?

I removed the .js file and replaced it with the backed-up original, but it hasn't fixed my Slack back to its original condition. It now looks like what you see in the attached screenshot.
screen shot 2019-01-03 at 10 01 07 am

White bits in the Downloads area

Hey there!

First off, thanks so much for this awesome theme, it's very complete and so easy on the eyes! There's just one small bit that stays (partly) white, in the Downloads tab:
image
So the bottom Shift-click hint, and the hover mode are white. I'd really appreciate it if you could help me with this, since I usually have that tab open.

Thanks again!

Slackbot alerts have inverted hover color

When not hovering over a slackbot message or reply, it will show up as white like this and go to the normal background colour when you hover it (not the proper hover colour).
img

Text isn't "crisp"

I just installed this theme on Slack 3.3.8 on MacOS Mojave (10.14.2) and even though the colours are great, the text doesn't look as crisp as it did without the theme or in your screenshot. It's almost as if Slack or MacOS is having trouble rendering it. I tried installing the font both into User Fonts and System Fonts, but I'm having the same problem.

The difference is subtle, but noticeable when you're looking at a full page of text. I can't provide a full window screenshot, but I've attached a sample that might be clear enough to notice the strangeness. It's especially noticeable when something is in code syntax.

Any ideas?

Slack

maybe make text-color for image uploads a little brighter?

I noticed that when I upload an image in slack, the texts that include the timestamp of the image upload are a little hard to read.

Here's what I mean:

image

I manually highlighted the text to make them more visible in this screenshot.

image

I am using Mac Mojave and my slack version is 3.3.7.

Everything else about this theme is awesome though! This is by far my favorite! :) thanks for the good work! ๐Ÿ‘

Use sidebar theme controls

It'd be interesting if it added a sidebar theme to be selected , but would obey the overrides allowing for small tweaks like to text font.

'Direct Messages' Delete Still

image

The 'x' by someone's name still highlights the selection in dark purple. Not a huge issue, just letting you know about this.

Using Slack version 3.4.1.

Change title bar to black

First of all, congrats on this theme, it's by far the best I've found so far. It's possible I misunderstood some step, but while most of the colours do change to grey, the title bar remains the usual white, regardless of the number of workspaces I'm signed into. I'm guessing it's an issue with the latest update.

screenshot 2019-02-01 at 09 59 47

Is there anything that can be done about it?

slack 4.0.0 has different directory

after updating to 4.0.0 the directory has changed, I dropped the .sh on terminal as previously mentioned but I get this message:
sudo: npx: command not found
what do I need to do?

Issue with "All Threads" tab

The threads on this tab have white background with light grey text which makes it hard to read. I've reinstalled slack and re-replaced the file in order to see if it was the problem on my end but the style seems to be the same. Was this intentional? If not, a fix would be helpful :) Thanks!

Date at top of message window is clipped

The date straddles the message pane and the top pane, and the top half appears clipped.

I tried to get at the CSS to make a PR, but looks like the styling is inline. Do you see a way to fix this?

Readme info

The readme mentions it works for Mac Only, however I can confirm it works on Linux as well.

When Slack is installed locally, the path of the js file to replace is:

/usr/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js

Not working in Windows 10

Title says it all. Chat and Thread windows are left as white after the "upgrade".

If it helps, the ssb-interop.js file is only 1kB when the original was 5kB... Maybe you forgot to include some content... :)

Missing shebang

The slack-dark-mode.sh that is extracted from slack-4-sh.zip, is missing shell shebang, hence is not executable directly & gives this error on console.

image

Please add #!/usr/bin/env bash as first line to fix it.

Crashed: Update 3.3.8

Just updated and lost the theme. I tried going through the installation instructions again, and no use.

Can't customize name colours.

I'm unable to customize my name colour or the name colour of other users so there's no visual contrast from one name to another. All are in a default white. Any thoughts?
screen shot 2019-01-21 at 10 09 36 am

Poor contrast in code snippets

Below is a screenshot of how javascript is styled within a code snippet:

Screen Shot 2019-06-27 at 10 56 17 AM

JSON is pretty bad too with a deep reds and blues for text colors.

Github Release

Wanna give appreciation to the author @caiceA for making this amazing theme, it's super slick. If it's not too much of an ask, when you do an update to the theme, I would very much appreciate if you could create a github release tag.

This way I can simply watch for releases and get notified when you update ๐Ÿ‘

Feel free to close this.

Just wanted to say thanks. Works like a charm, and I really appreciate it that you keep updating it after Slack updates break compatibility. <3

Installed as informed by direction, but Slack will not "load"

After installing required fonts and using the provided sub-interop.js, Slack app will start, but endlessly "spins". I suspect it could be due to font, but am not sure. Is there some information that I could provide that would help debug? (Mac OSX 10.13.6)

bolder "unreads" in channel sidebar?

I love this theme, but one issue I'm having is that I can't really tell when a channel has unread messages (but not a badge) - you can just barely tell it's bolded. Do you know which line I can change to make this text bolder/larger?

Anyway to pull css from this repo?

Some other themes pull directly from their repo url as a form of autoupdate. I know you edit the js file more than most, but is this still possible?

Code block background/foreground in a post is wrong color

Create a post, with a code block. Pin it to the channel. Then open that post in the sidebar. This is what I see after updating your theme today:
Screen Shot 2019-05-24 at 11 23 10 AM

Edit: Noticed the white-on-white appears in the sidebar and the inline preview if you view a post right in the chat thread after posting it.

PS: thank you for maintaining this theme! I like it much better than the one by Widget- and various forks of it.

Alternate Font recommendation?

Hi @caiceA,

Thanks for making this. I love the theme. My only small nitpick is that I'd like a more traditional font for the text of the actual messages people type. Can you recommend an alternative font that fits the bill, and the CSS selector I'd need to change?

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.