Advertisement
internetweather

Dark theme for Slack client - add to ssb-interop.js

Mar 21st, 2018
221
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // First make sure the wrapper app is loaded
  2. document.addEventListener("DOMContentLoaded", function() {
  3.  
  4.    // Then get its webviews
  5.    let webviews = document.querySelectorAll(".TeamView webview");
  6.  
  7.    // Fetch our CSS in parallel ahead of time
  8.    const cssPath = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css';
  9.    let cssPromise = fetch(cssPath).then(response => response.text());
  10.  
  11.    let customCustomCSS = `
  12.    :root {
  13.       /* Modify these to change your theme colors: */
  14.       --primary: #09F;
  15.       --text: #CCC;
  16.       --background: #080808;
  17.       --background-elevated: #222;
  18.    }
  19.    div.c-message.c-message--light.c-message--hover
  20.     {
  21.     color: #fff !important;
  22.     background-color: #222 !important;
  23.     }
  24.  
  25.     span.c-message__body,
  26.     a.c-message__sender_link,
  27.     span.c-message_attachment__media_trigger.c-message_attachment__media_trigger--caption,
  28.     div.p-message_pane__foreword__description span
  29.     {
  30.             color: #afafaf !important;
  31.     }
  32.  
  33.     pre.special_formatting{
  34.         background-color: #222 !important;
  35.         color: #8f8f8f !important;
  36.         border: solid;
  37.         border-width: 1 px !important;
  38.        
  39.     }
  40.    `
  41.  
  42.    // Insert a style tag into the wrapper view
  43.    cssPromise.then(css => {
  44.       let s = document.createElement('style');
  45.       s.type = 'text/css';
  46.       s.innerHTML = css + customCustomCSS;
  47.       document.head.appendChild(s);
  48.    });
  49.  
  50.    // Wait for each webview to load
  51.    webviews.forEach(webview => {
  52.       webview.addEventListener('ipc-message', message => {
  53.          if (message.channel == 'didFinishLoading')
  54.             // Finally add the CSS into the webview
  55.             cssPromise.then(css => {
  56.                let script = `
  57.                      let s = document.createElement('style');
  58.                      s.type = 'text/css';
  59.                      s.id = 'slack-custom-css';
  60.                      s.innerHTML = \`${css + customCustomCSS}\`;
  61.                      document.head.appendChild(s);
  62.                      `
  63.                webview.executeJavaScript(script);
  64.             })
  65.       });
  66.    });
  67. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement