IT

Sblackを使わずサクッとSlackアプリをダークテーマにする

こんにちは,しまさん(@nitkcdadon)です.

私は今までブラックテーマが使用できるSblackを公式Slackアプリの代わりに使っていました.

ですがこの前Slackの通話機能を使用しようとすると,Sblackではダメでした.

公式SlackアプリもしくはChromeでお願いしますとのこと.

その時はミーティング開始数分前でかなり焦り,Chromeでなんとか凌ぎましたが潔く今後公式Slackを使うことにしました.

ですが相変わらずSlackは白いのでサクッと黒くしていきたいと思います.

環境

macOS Mojave 10.14

Slack 3.3.7

スポンサーリンク

Slackを黒くする

ということでGitHubを探すと素晴らしいものがありました.

簡単にいうと以下の場所のJSファイルの末尾にコードを追加すればOKというものです.

/Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js

おお〜〜簡単じゃんと思ってそのままコピペして実行したらメインの部分が白でサイドバーを変更したただのSlackに….

ということでIssue探したらありました.

2019年3月9日時点で動くコードを以下に貼っておきます.

// 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: #61AFEF;
    --text: #ABB2BF;
    --background: #282C34;
    --background-elevated: #3B4048;
  }

  div.c-message.c-message--light.c-message--hover,
  .p-flexpane_header,
  .p-shortcuts_flexpane__title,
  .c-message_list__day_divider,
  .c-message_list__day_divider__label,
  .c-message_list__day_divider__label__pill,
  .p-message_pane .c-message_list.c-virtual_list--scrollbar>.c-scrollbar__hider:before,
  .p-message_pane .c-message_list:not(.c-virtual_list--scrollbar):before,
  .c-keyboard_key {
    color: #fff !important;
    background-color: #222 !important;
  }

  span.c-message__body,
  a.c-message__sender_link,
  span.c-message_attachment__media_trigger.c-message_attachment__media_trigger--caption,
  div.p-message_pane__foreword__description span,
  .c-message_attachment,
  .p-shortcuts_flexpane__shortcut_title {
    color: #afafaf !important;
  }

  pre.special_formatting {
    background-color: #222 !important;
    color: #8f8f8f !important;
    border: solid;
    border-width: 1 px !important;
  }

  .c-message,
  .c-virtual_list__item,
  .c-member_slug--link {
    background-color: #222 !important;
  }

  #client_body:not(.onboarding):not(.feature_global_nav_layout):before {
  background-color: #222 !important;
  border: 1px solid #222 !important;
  box-shadow: none !important;
  }

  .ql-placeholder, .c-team__display-name, .c-unified_member__display-name, .c-usergroup__handle, .timezone_value, .timezone, .p-message_pane__foreword__description, .charcoal_grey {
    color: #ccc !important;
  }

  div[role=listitem]:first-child {
    margin-bottom: 20px !important;
  }

  div[role="presentation"]:not(class="c-submenu") { background-color: #282C34 !important; }

  .c-search__input_and_close{
      background:#292d32!important;
      color white !important;
  }
  .c-search__input_box{
      background:#292d32!important;
      color white !important;
  }
  .c-search__input_and_close{
      background:#292d32!important;
      color white !important;
  }
  .c-search_autocomplete{
      background:#b7bcbe!important;
      color white !important;
  }
  .c-search_autocomplete footer{
      background:#97a0a5!important;
      color white !important;
  }
  .c-search_autocomplete__suggestion_text{
      color white !important;
  }
  .c-search_autocomplete__suggestion_content .c-search_autocomplete__suggestion_text{
      color white !important;
  }
  .c-search_autocomplete header{
      background:#b7bcbe!important;
      color:black !important;
  }
  .c-search_autocomplete footer .c-search_autocomplete__footer_navigation_help{
      color:white !important;
  }
  .c-search__input_box .c-search__input_box__input .ql-editor, .c-search__input_box .c-search__input_box__input .ql-placeholder{
      background:#2b2c2e!important;
      border:none !important;
  }
  .c-search__tabs{
      background:#2b2c2e!important;
  }
  .c-search__view{
      background:#2b2c2e!important;
  }
  .c-search_message__body{
      color:#cacbcc !important;
  }
  .p-search_filter__title_text{
      background:#2b2c2e!important;
      color:white !important;
  }
  .p-search_filter__title:before{
      color:grey !important;
  }
  .p-search_filter__dates{
      background:#1f2021!important;
      border: none !important;
      color:#cacbcc !important;
  }
  .p-search_filter__datepicker_trigger:hover{
      color:white !important;
  }
  `

  // 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をアップデートするとやり直す必要があります.

ですので適当なファイルに追加するコードを保存しておいて適宜実行しましょう.

さいごに

ということで今回はサクッとSlackを黒くしました.

公式で黒テーマ出してくれないだろうか…

ABOUT ME
しまさん
てくてくぷれいす運営者のしまさんです. 高専→大学編入してから行動的な大学生  自身の変化を求めてブログを始める グレープフルーツと本が大好物 IT系のことやブログ,高専や編入,大学生活に関することを発信中!!詳しいプロフィールはこちら≫ 投げ銭はコチラへ YouTubeはコチラへ 質問はコチラ