はじめに
Qiitaは技術情報を収集する際に欠かせないサービスですが、夜間や長時間利用していると画面の明るさが気になることがあります。
私は普段から VS Code や GitHub をダークテーマで利用しているため、Qiitaだけが明るいテーマで表示されることに少し違和感を感じていました。
そこで今回、Qiitaをダークモード化するChrome拡張を開発し、オープンソースとして公開しました。
Chrome拡張の概要
この拡張はQiitaのページに独自のスタイルを適用し、ダークテーマで快適に閲覧できるようにするものです。
主な機能
- Qiita全体をダークテーマ化
- 記事本文の文字色最適化
- コードブロックの視認性向上
- サイドバーやヘッダーにも対応
- 軽量動作
- オープンソースで公開
開発のきっかけ
Qiitaには非常に多くの有益な記事があります。
しかし夜間に記事を読む際、
- 画面が眩しい
- 目が疲れやすい
- 他のダークテーマ環境との統一感がない
という問題を感じていました。
ブラウザ全体をダークモード化する拡張もありますが、Qiita専用に最適化されたものが欲しかったため、自分で開発することにしました。
技術構成
今回の拡張はシンプルな構成になっています。
使用技術
- Chrome Extension Manifest V3
- JavaScript
- CSS
特別なライブラリは使用しておらず、Chrome拡張開発の学習用としても参考になると思います。
実装方法
基本的にはContent ScriptからCSSを注入し、Qiitaの既存スタイルを上書きしています。
コードブロックについても独自スタイルを適用し、ダーク環境でも読みやすいように調整しています。
オープンソース化した理由
個人で使うだけなら公開する必要はありません。
しかし、
- 他の開発者にも使ってほしい
- 改善アイデアを取り込みたい
- Chrome拡張開発の参考にしてほしい
という理由からGitHubで公開することにしました。
IssueやPull Requestも歓迎しています。
今後の改善予定
今後は以下の機能を追加したいと考えています。
テーマ切り替え
- ダークモード
- ライトモード
- システム設定連動
カスタマイズ機能
- 背景色変更
- フォント色変更
- コードブロックテーマ変更
ブラウザ対応
- Microsoft Edge
- Chrome
ソースコード
GitHub Repository
インストール方法
開発版
- リポジトリをClone
- Chromeで
chrome://extensionsを開く - 「デベロッパーモード」を有効化
- 「パッケージ化されていない拡張機能を読み込む」をクリック
- プロジェクトフォルダを選択
まとめ
Qiitaをより快適に閲覧するために、Qiita専用のダークモードChrome拡張を開発しました。
Chrome拡張の開発自体は思っていたよりシンプルで、Manifest V3やContent Scriptの学習にもなりました。
Qiitaを日常的に利用している方や、Chrome拡張開発に興味がある方の参考になれば幸いです。
改善提案やPull Requestをお待ちしています。