Skip to content
This repository has been archived by the owner. It is now read-only.
Atom One Dark For Slack (ARCHIVED)
CSS JavaScript
Branch: master
Clone or download
Pull request Compare This branch is 62 commits ahead, 2 commits behind widget-:master.
Latest commit 5538c2e Jul 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist bad update Jul 22, 2019
lib update Jul 22, 2019
scss new ui Jul 22, 2019
styles bad update Jul 22, 2019
.gitignore push Jul 17, 2019
LICENSE Initial commit Mar 14, 2017
_config.yml Set theme jekyll-theme-hacker Feb 22, 2018
gulpfile.js help Jul 15, 2019
main.js new cli Jul 17, 2019
package.json update Jul 22, 2019
preview.png update preview Feb 28, 2018
readme.md Update readme.md Jul 22, 2019

readme.md

One Dark Theme for Slack

Atom One Dark Theme for Slack!

IMPORTANT NOTICE!!!!!!!!!!!!

This repository is now archived since Slack changed the way they work. Until a workaround, if exists, is found, there is no > way to change the theme again.

If you still own a previous version though, here is how to apply it:


Preview

Screenshot

Pledge

If you like this plugin, you can buy me a beer (or a coffee, or something else) using PayPal

Backers

Thank you to all our backers! 🙏 [Become a backer]

Check also : http://www.material-theme.com/docs/support-us/

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Installing into Slack

For Slack > 4.0

  • Clone this repository
  • Install NodeJS if you didn't do it yet (<>https://nodejs.org/en/download/</>)
  • Run npm install
  • Run npm run apply
  • Select Apply in the menu
  • Open or Restart Slack
  • ??????
  • PROFIT!!!!!!

For Slack < 4.0

Find your Slack's application directory.

  • Windows: %homepath%\AppData\Local\slack\
  • Mac: /Applications/Slack.app/Contents/
  • Linux: /usr/lib/slack/ (Debian-based)

Open up the most recent version (e.g. app-2.5.1) then open resources\app.asar.unpacked\src\static\ssb-interop.js

At the very bottom, add

// 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://raw.githubusercontent.com/mallowigi/slack-one-dark-theme/master/custom.css';
   let cssPromise = fetch(cssPath).then(response => response.text());

   let customCustomCSS = `
   :root {
      /* Modify these to change your theme colors: */
     --primary: #E5C17C;
     --accent: #568AF2;
     --text: #ABB2BF;
     --background: #282C34;
     --background-elevated: #3B4048;

     /* These should be less important: */
     --background-hover: lighten(#3B4048, 10%);
     --background-light: #AAA;
     --background-bright: #FFF;

     --border-dim: #666;
     --border-bright: var(--primary);

     --text-bright: #FFF;
     --text-dim: #555c69;
     --text-special: var(--primary);
     --text-accent: var(--text-bright);

     --scrollbar-background: #000;
     --scrollbar-border: var(--primary);

     --yellow: #fc0;
     --green: #98C379;
     --cyan: #56B6C2;
     --blue: #61AFEF;
     --purple: #C678DD;
     --red: #E06C75;
     --red2: #BE5046;
     --orange: #D19A66;
     --orange2: #E5707B;
     --gray: #3E4451;
     --silver: #9da5b4;
     --black: #21252b;
      }
   `

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

Notice that you can edit any of the theme colors using the custom CSS (for the already-custom theme.) Also, you can put any CSS URL you want here, so you don't necessarily need to create an entire fork to change some small styles.

That's it! Restart Slack and see how well it works.

NB: You'll have to do this every time Slack updates.

Color Schemes

Here's some example color variations you might like.

Default

Default

--primary: #09F;
--text: #CCC;
--background: #080808;
--background-elevated: #222;

One Dark

One Dark

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

Low Contrast

Low Contrast

--primary: #CCC;
--text: #999;
--background: #222;
--background-elevated: #444;

Navy

Navy

--primary: #FFF;
--text: #CCC;
--background: #225;
--background-elevated: #114;

Development

Inspect

Open Slack on the browser. It has the useful Developer Tools available to them so you can debug with ease.

To test your CSS, install a Stylish-like extension (https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en) then create a new style for slack and paste the CSS inside and save.

Acknowledgements

Thanks to https://github.com/widget-/slack-black-theme for the idea!

License

Apache 2.0

You can’t perform that action at this time.