Mouse Dictionaryのテーマをいい感じに変える

概要

マウスオーバーした箇所を翻訳する Mouse Dictionary というChrome拡張があります。
素晴らしく高速で使い易いのですが、デフォのカラーテーマだとダークテーマに慣れている私の目はダメージを受けがちでした。オプションから簡単に色設定や一部cssを変更できるので変えたっていい。

私はこんな感じにしました。という備忘。

勿論英辞郎データも買いました。これ強すぎる。
https://booth.pm/ja/items/777563

設定

catppuccin-Frappé を元にしてます。
https://github.com/catppuccin/catppuccin

Font size and color

値はR,G,B。

Header font: 186,187,241
Description font: 198,208,245
Background: 48,52,70

Mouse Dictionary window frame

若干paddingを広くした。

<div class="notranslate"
     style="width: {{width}}px;
            height: {{height}}px;
            position: fixed;
            overflow-x: hidden;
            overflow-y: scroll;
            top: 5px;
            background-color: {{backgroundColor}};
            z-index: 2147483646;
            padding: 4px 8px 4px 8px;
            border: 1px solid #A0A0A0;
            font-weight: normal;">
</div>

Rules to replace text

color部分を変更するだけ。

検索対象: (■.+|◆.+)
置換文字列: <span style="{{cssReset}};color:#737994;font-size:100%;">$1</span>

検索対象: ({.+?}|\[.+?\]|\(.+?\))
置換文字列: <span style="{{cssReset}};color:#737994;font-size:100%;">$1</span>

検索対象: (【.+?】|《.+?》|〈.+?〉|〔.+?〕)
置換文字列: <span style="{{cssReset}};color:#949cbb;font-size:100%;">$1</span>

検索対象: \n|\\n
置換文字列: <br/>

おわりに

おめめにやさしくなった。気がする。

お し ま い