🎨

Chrome 拡張の Stylus で 2023/09 変更版 Slack の WEB UI を見やすく調整

Hi-Noguchi

2023/09/24に公開

what's this

2023/09 に Slack の UI がアップデートされたようで、個人的には大変見づらくなりました。
特に以下の channel / DM の一覧が表示されるサイドバーですね。

何だかこの色合いだと、ここのサイドバー全体が disabled 状態に見えませんか？
このまま使っていると心労も溜まるし、視認性が低く生産性が落ちそうです。

ということで、気に入らないならカスタマイズしてしまいましょう。

Stylus

Stylus は Chrome 拡張です。
特定の条件に応じて表示中の WEB サイトの CSS をユーザ側で上書きできます。
なので今回の Slack に限らず他でも使えますし ( 例 : GitHub とか ) 既に導入済みの方も多いかもしれません。

code

どのような css をどのように上書きするか……というのは、お好みによるわけですが、ひとまず Chrome の devtools で要素検証して class を特定し、プロパティを指定してあげます。

以下は私好みの一例です。

@-moz-document domain("slack.com") {
  .p-theme_background {
    background: radial-gradient(circle at 50% 50%,var(--p-theme_background__start) 20%,#0000 80%),conic-gradient(from 45deg at 50% 50%,var(--p-theme_background__end) 0,var(--p-theme_background__start) 25%,var(--p-theme_background__end) 50%,var(--p-theme_background__start) 75%,var(--p-theme_background__end) 100%) !important;
  }
  
  .p-ia4_client .p-view_contents--sidebar.p-view_contents--channel-list-pry {
    background-color: white;
  }
  
  .p-ia4_client--theming .p-ia4_channel_list .p-channel_sidebar__channel--unread:not(.p-channel_sidebar__channel--muted,.p-channel_sidebar__channel--suggested,.p-channel_sidebar__channel--selected) .p-channel_sidebar__name, .p-ia4_client--theming .p-ia4_channel_list .p-channel_sidebar__link--unread:not(.p-channel_sidebar__link--selected) .p-channel_sidebar__name, .p-ia4_client--theming .p-ia4_channel_list .p-channel_sidebar__section_heading--unreads.p-channel_sidebar__section_heading--collapsed {
    color: #D32F2F;
  }
}