MacのSlackアプリをかなり黒くする

公開日:2018-10-14
最終更新:2018-10-24
※この記事は外部サイト(https://qiita.com/kai_kou/items/6f6015feda...)からのクロス投稿です

概要

ついカっとなって黒くした。 若干見にくいけど満足。

ご参考

Slack Black Theme https://github.com/widget-/slack-black-theme

アプリがElectronベースなので、jsとcssでゴニョゴニョ できるよってことみたいです。

ドキュメントがしっかりと整っているので 手順通りにやれば設定できるだろうと思ってやってみたら、 中途半端に適用される罠があるので、みんなハマればいいと思います。

で、Issuesを眺めてたら下記Issuesが上がってました。

Had to add some additional css today https://github.com/widget-/slack-black-theme/issues/48

MacのSlaskアプリがバージョンアップしてから 一部スタイルが適用されなくなったとのこと。

こちらのスレに対応策がコメントされてました(感謝

https://github.com/widget-/slack-black-theme/issues/48#issuecomment-382017521

アプリがバージョンアップされると毎回設定しなおさなきゃなので、その対応。

https://github.com/widget-/slack-black-theme/issues/48#issuecomment-381941617

上記のCSSだと一部テキストが読みにくいので、上記のCSSをご参考に。

手順

slack_dark_theme.js を作成(中身は後述) パスやファイル名は任意で。

> touch ~/slack_dark_theme.js

.bash_profile とかにエイリアス登録

alias slackdark='cat ~/slack_dark_theme.js >> /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js'

.bash_profileを読み込み直してからアプリに適用。 アプリのバージョンが上がってテーマが戻ったらまた実行しましょう。

> slackdark

私が使っているjsおいておきますね。

slack_dark_theme.js

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

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

  #im_browser .im_browser_row,
  .c-message_list__day_divider__line  
  { 
    border-top: 1px solid #afafaf;
  }

  div.c-message.c-message--light.c-message--hover,
  #file_preview_scroller .texty_comment_input,
  .c-message.c-message--light.c-message--hover.c-message--adjacent.c-message--last
  {
    color: #fff !important;
    background-color: #3B4048 !important;
  }

  #file_preview_scroller .message_sender,
  #file_preview_scroller .file_viewer_link,
  #file_preview_scroller .comment_body,
  #file_preview_scroller .ts_tip_btn,
  #file_preview_scroller .file_comment_tip,
  #file_preview_scroller .file_meta,
  #file_preview_scroller .file_ssb_download_link,
  .c-member--medium,
  .c-member__display-name, 
  .c-member__secondary-name--medium,  
  .c-team__display-name, 
  .c-usergroup__handle,
  .c-message_attachment,
  .c-message_attachment__pretext,
  .c-message_attachment__button,
  .c-message_attachment__select,
  .c-message_list__day_divider__label,
  .c-file__title,
  .c-file__meta,
  .c-reaction__count,
  .c-reaction_add__icon--fg,
  .c-input_select_options_list__option,
  .c-input_select_options_list_container:not(.c-input_select_options_list_container--always-open),
  span.c-message__body,
  a.c-message__sender_link,
  div.c-message_attachment__row,
  div.p-message_pane__foreword__description span,
  ts-conversation.message_container ts-message .message_content .message_sender,
  span.c-message_attachment__media_trigger.c-message_attachment__media_trigger--caption
  {
    color: #afafaf !important;
  }

  .c-reaction_add__icon--bg 
  {
    color: #282C34 !important;
  }  

  div.c-virtual_list__scroll_container,
  div.c-message:hover,
  .c-file_container,
  .c-file__slide--meta,  
  .c-reaction,
  .c-reaction_add,  
  .c-message_list__day_divider__label__pill,
  .c-button--outline,
  .c-message_attachment__button,
  .c-message_attachment__select,
  .c-input_select_options_list_container:not(.c-input_select_options_list_container--always-open),
  #im_browser #im_list_container:not(.keyboard_active).not_scrolling .im_browser_row:not(.disabled_dm):hover  
  {
    background-color: #282C34 !important;
  }

  .c-file__icon:after
  {
    border: 3px solid #282C34;
  } 

  .c-button--outline,
  .c-message_attachment__button,
  .c-message_attachment__select,
  .c-file_container,
  .c-reaction,
  .c-reaction_add,
  .c-input_select_options_list_container:not(.c-input_select_options_list_container--always-open)
  {
    border: 1px solid;
    border-color: #3B4048;
  }

  .c-file_container:hover,
  .c-reaction:focus,
  .c-reaction:hover,
  .c-reaction_add:focus,
  .c-reaction_add:hover,
  {
    border-color: #afafaf;
  }

  .c-file_container--has_thumb .c-file__actions:before 
  {
    background-image: linear-gradient(90deg,hsla(0,0%,100%,0),#282C34 20px);
  }

  .c-member_slug--link
  {
    background: #3B4048;
  }

  .c-member_slug--link:hover
  {
    background: #25272a;
  }

  .p-message_pane .c-message_list:not(.c-virtual_list--scrollbar), 
  .p-message_pane .c-message_list.c-virtual_list--scrollbar > .c-scrollbar__hider {
      z-index: 0;
  }
  `

  // 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);
          })
    });
  });
});
記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@kaikouの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする