ダークテーマってかっこいいですよね～。
最近はスマホはもちろん、Youtubeでもダークテーマ機能が出ており、流行っている感が結構伝わってきます。
主に目への刺激が少ないことから好む方が多いのですが、プリザンターにもダークテーマを実装してほしいという要望がGithubのとあるIssuesから来ていました。
ところでプリザンターってダークテーマ出来るの！？という感じの方もいると思いますが、拡張機能（スタイル）を用いれば出来ちゃうのです。
【プリザンターユーザーマニュアル】スタイル機能
実際に公式ブログでも見た目をカスタマイズした記事がありますのでぜひ興味のある方は見てみるのも良いかもですね！
CSSを使ってプリザンターの見た目を自由にカスタマイズ！
そこで今回は試しに一覧画面のみサクッとダークテーマにしてみましたので共有していこうと思います。
（ホントは全画面に適用したかったけど、思いのほか画面多かったので一覧画面のみでオナシャス！ｗ）
ダークテーマ設定方法
まずは一覧画面右上より「管理」→「テーブルの管理」をクリックします。
「スタイル」タブを選択し、「新規作成」をクリックします。
タイトルに「ダークテーマ」等の任意のタイトルを入れてスタイルに以下のCSSを貼り付けます。
body{
background-color: #333333;
}
.item a{
color:white;
}
.separator{
color:white;
}
#ViewFilters{
color:white;
}
#ViewSelector{
background-color: #3333;
}
.grid-row{
background-color: #333333;
color:white;
}
.title a{
color:white;
}
#ReduceAggregations{
color:white;
}
.data{
color:white;
}
.status-new{
color:black;
}
.grid-title-body > p > pre >span > a{
color: white;
}
.grid-row:hover{
background-color: #333333;
}
table.grid tr:hover{
background-color: #333333;
}
table#Grid tr:hover{
background-color: #333333;
}
.grid-row:hover .grid-title-body{
background-color: #333333 !important;
}
.svg-progress-rate text{
fill: white;
}
.svg-work-value {
fill: white;
}
.field-label{
color:white;
}
.crosstab-row td{
color: white;
}
.container-normal{
color:white;
}
.comment{
background-color: gray !important;
}
.comment:hover{
background-color: gray !important;
}
出力先は「全て」を外して「一覧」にチェックを入れます。
完了したら「追加」をクリックします。
画面下の「更新」ボタンを押すのも忘れずにクリックします。
一覧画面に戻ると・・・良い感じのダークテーマになっていることが分かります!(^^)!
おわりに
ということで！とりあえず流行っているということで今回はプリザンターの一覧画面のみダークテーマにしてみましたがいかがでしたでしょうか？？
今後、時間を見つけて画面一つずつダークテーマを適用していこうと思います！
何かカッコいいデザイン等がありましたらぜひ教えてください。
ではでは！また！