Code Monkey home page Code Monkey logo

slack-night-mode's Introduction

Slack Night Mode

A user style for easy Slack theming. CC0.

Reviewed by Hound

Usage

Browser

This theme requires that you use a user styles extension for your browser, such as Stylus (available for Firefox, Chrome, and Opera).

Desktop App

No official support. Workarounds exist.

๐Ÿ›‘ READ FIRST: Most workarounds will request the compiled CSS file from this repository. You are strongly discouraged from using a remote CSS file. It's recommended that you create your own copy. An XSS attack could put your Slack client at risk.

Chat on Gitter (previous discussion)

Themes

Supported

Black (source - build - install)

The primary supported theme. This is an excellent theme if you use a program like f.lux or redshift.

Black Screenshot

Aubergine (source - build - install)

This is based on Slack's aubergine/maroon style. It's the original theme.

Aubergine Screenshot

Variants

Extensions

Variants can have extensions which add additional changes.

Monospaced (source)

Replaces the messaging font stack with a monospace font stack.

slack-night-mode's People

Contributors

auscompgeek avatar calebboyd avatar denno020 avatar gfody avatar glostis avatar ifvictr avatar joshsleeper avatar jspaetzel avatar lacour avatar lemmmy avatar lvarado avatar mastermel avatar matt-h avatar mortenlj avatar mufid avatar narkq avatar nequissimus avatar nysos3 avatar olets avatar salbertson avatar terminalmage avatar zengshengliu 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

slack-night-mode's Issues

Light-purple background absent from highlights

Examples:

screenshot 2015-11-18 at 14 57 58

screenshot 2015-11-18 at 15 02 33

I recall that before, they had light-purple backgrounds to make them stand out. As it is, they no longer stand out in normal chat usage as the color of the username is either the same or virtually indisguishable from the rest of the text:

If this was a conscious design choice, perhaps it may be better to alter the text color to better distinguish it from normal chat text. Otherwise, restoring the light-purple background would make the highlights stand out much better.

Update selector for message hover

Slack has updated the selector for hovered messages, appending :not(.highlight). If this changes frequently, consider making the property important to prevent such a drastic change.

Support new image viewer

A bigger, better image viewer

Our cramped image previews have been replaced with a new full-size view which includes zoom capability. View images as they are meant to be viewed: bigly.

Support for new message style

Support slack's new message style:

Weโ€™ve done away with that (nearly invisible) gear icon to bring you a new, more visible, more robust message actions menu. Hover over a message to quickly and instantly: add a reaction, edit your message, mark a message as unread, or โ€‹copy the link to a message so you can reference it later.

Tweaks needed in snippet preview and <pre> blocks

The blocks contained within div.snippet_preview DIVs look like they still need some love. span.sssh-property is still black-on-black.

To reproduce, create a code snippet with Python highlighting and dump this code into it:

>>> import timeit
>>> t1 = timeit.Timer('"{0}/{1}".format(x, y)', 'x = "foo"; y = "bar"')
>>> t2 = timeit.Timer('"/".join((x, y))', 'x = "foo"; y = "bar"')
>>> t1.repeat()
[0.4785940647125244, 0.43045902252197266, 0.4402921199798584]
>>> t2.repeat()
[0.31827497482299805, 0.2677180767059326, 0.2675449848175049]
>>>

The "Timer" text will be invisible. This is similar to a fix you recently did for syntax highlighting, just needs to be made here as well.

Also, pre.special_formatting (triple-backtick-enclosed blocks of text) displays mentions (span.mention) as grey-on-magenta.

Thanks!

Improve styling of search input

The search input was recently changed, and the current styles are inconsistent. I think it could be improved by:

  • Keeping styles consistent with reaction toasts (i.e. not so harsh contrast)
  • Not changing styles when previously focused (caused by .search_input_highlighted not being removed after unfocus)

Highlighting on channel message about exceeding message limit

When you bring a channel into focus and it has the inline message telling you that your message limited has exceeded the "free account" limit, it has an initial highlight/background color of some very displeasing colors. Seconds later the highlight leaves and it is fine.

I wish I had snagged a screenshot in time, and now I can barely remember the colors specifically enough to explain. Well they're related to the theme anyways, but we need default settings.

Improve styling of main input box

It looks very nice by default, and on hover. I think its focus style could be improved.

I don't have any concrete ideas yet, I've dabbled some in adjusting the color at a minimum.
I just think 2 pixels of solid black borders looks off when its focused.

An easy right now fix is to do something about the doubled up border where the button means the input.

image

Text is hard to read in post editor

The black text for lists and paragraph text is hard to read in the post editor. It would be nice if the post editor's text color matched the chat text color.

screen shot 2016-01-22 at 11 45 55 am

Broken menu hover styles

Some menus have broken hover styles, due to a changed selector: .menu ul li.highlighted a, .menu:not(.keyboard_active) ul li:hover:not(.disabled) a

It seems :not(.disabled) was added.

Broken reaction toasts

The selector for reaction toasts has been updated, breaking the theme's styles.

See #rxn_toast_div.header_refresh at rollup-client_secondary.css:249. Relevant SCSS. Specifically &.header_refresh must be added, keeping the current styles.

Style what's new toggle

The new checkbox for toggling the red what's new burst lacks styles for its label (i.e. #whats_new_tab .flex_heading_controls label).

Channel specific settings

The channel specific settings under account/notifications are bright white, so I assume that they aren't covered by the this yet (using the black one)

I guess the easiest way to fix it is to apply a background color to class="channel_override_row muted"

Attachment preview missing styles

Inline previews for uploaded files (namely images) are missing styles for controls.

See rollup-client_secondary.css, lines 562โ€“589 and 1425โ€“1473.

New slack updates leave unthemed CSS

  1. Clicking on a username brings up the Team Directory pane on the right, which has an unthemed background.
  2. The drop-down menu which appears when you click the inverted chevron in the upper-left (near your name) to access your preferences, sign out, etc. has an unthemed border. NOTE: The same issue occurs the the "three dots" button in the upper right of the page is clicked.
  3. The list of usernames which appears when showing matching usernames in the chat input box has an unthemed background.

Style code blocks and blockquotes

Currently code blocks and blockquotes (code, pre, .CodeMirror, .snippet_preview, and .backup_codes_wrapper) use a filter as a cheap method of restyling (i.e. _hacks.scss). They should have proper style overrides.

See #1 for more information.

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.