TweetDeckの配色を元のものに戻す

2月の初め頃、TweetDeck のダークテーマの色が全体的に変わりました。

彩度が2倍になり、非常に目が疲れる配色となりました。 このままでは視力が無限に下がるのでユーザーCSSで元の彩度に戻したいと思います。

解決策1. Filter を使う

CSS3 には filter というプロパティがあり簡単な画像処理を行うことができます。 filter - CSS | MDN この場合全体の彩度を半分にすればいいだけです。画像については彩度を元に戻します。

body { filter: saturate(50%) !important; }
img  { filter: saturate(200%) !important; }

一応これでも良さげなんですが、全体にフィルタをかけているのでやはり動作が遅くなる問題点があります。あと画像が元の色と若干違って見えます。

解決策2. CSS プロパティの色の定義を上書きする

元々の CSS 定義されている色の彩度を下げて全て再定義するという力技です。 力技なのでプログラミングで解決します。

方針としては、ダークテーマを識別するクラス .dark が含まれるルールの全ての色の値を書き換えることをします。 幸い css をパースするツールや、Webにおける色定義を扱うツール等は npm に転がっているのでそれを用います。

やり方

前準備として最新の node の環境を用意しましょう。 そして適当なディレクトリを作り、 npm install color css でライブラリをインストールします。 そのディレクトリに対し以下のプログラムを gen_css.js のように適当な名前をつけて保存してください。

// gen_css.js
const fs = require('fs');
const css = require('css');
const Color = require('color');

let cssText = fs.readFileSync('bundle.css', 'utf-8');
let cssObj  = css.parse(cssText);
let rules   = cssObj.stylesheet.rules;

const colorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/ig;
let output = '';

function procColor(colText) {
  return Color(colText).desaturate(0.5).rgb()
}

for(let rule of rules) {
  if(rule.type === 'rule') {
    if(rule.selectors.some(s => s.includes('.dark'))) {
      let colorProps = 
        rule.declarations.filter(d => d.value.match(colorRegex));
      if(colorProps.length > 0) {
        output += `${rule.selectors.join(', ')} {\n`
        output += colorProps.map(m => `    ${m.property}: ${m.value.replace(colorRegex, procColor)};`).join('\n');
        output += `\n}\n`;
      }
    }
  }
}

fs.writeFileSync('bundle.out.css', output);

その後、 https://ton.twimg.com/tweetdeck-web/web/dist/bundle.????.css （TweetDeckのHTMLソースに書いてあります） をダウンロードしてきて、 bundle.css として同ディレクトリに配置します。あとは node gen_css.js と実行すれば、 bundle.out.css として出力されます。 出力されたCSSは、Stylish などのブラウザ拡張でユーザー定義を行えばOKです。

適用後はこんな感じです。若干おかしい部分がありますが動作自体に影響がないので大丈夫かと思います。細かい点は自分で修正してください。

一応2/4 5:00時点での出力結果はこちらにありますが、TweetDeck は頻繁に更新されているためすぐ使い物にならなくなる可能性が高いです。

††† この記事は需要があれば詳細を追記いたします。 †††