国産SNS「Beluga」でダークテーマを適用する方法

今回は国産SNS「Beluga」でダークテーマを適用する方法を書いていきたいと思います。

環境

・Windows10
・Google Chrome バージョン87.0.4280.141

事前準備

歯車マークからBelugaのデザインテーマを黄色（#ffeb3b）に変えておく。

作業

１：Chrome拡張機能「My Style」をダウンロードする。

My Style – Chrome ウェブストア

２：下の〈BelugaのダークテーマCSS〉をマウスで選択して、Ctrl+Cでコピーする。

〈BelugaのダークテーマCSS〉

[PR]

2021/01/09 23:30 更新

div.inside.multiple-columns-component{
background-color:#444444;
}

div.inside.rounded-corner-component{
background-color:#555555;
color:#FFFFFF;
}

.status-header>.inside>.link>.display-name{
color:#DDDDDD;
}

.status-action{
background-color:#555555;
}

.status-action>.inside>.action-button a{
color:#EEEEEEE;
}

.rounded-corner-component{
background-color:#666666;
}

.column-component.community-overview>.inside{
background-color:#666666;
}

.status-header>.inside>.time{
color:#00FF00;
}

.status-header>.inside>.link>.display-name a::hover{
color:#FFFF00;
}

.status-header>.inside>.link>.name{
color:#FFDBC9;
}

.timeline-header-component>.inside>.label-area>.icon{
color:#DDDDDD;
}

.channel-list-component>.content>.title>.text{
color:#FFFFFF;
}

.column-component.community-overview>.inside>.header>.name>a{
color:#FFFFFF;
}

.postbox-component>.preview{
background-color:#B8860B;
color:#FFFFFF;
}

.column-component.community-overview>.inside>.members-area>.item{
color: #FFFFFF;
}

.button{
color:#000000;
}

.status-action>.inside>.action-button{
color:#FFFFFF;
}

.status-content>.body>.sentence{
color:#FFFFFF;
}

.status-body-commenters>.stats>.latest-comment{
color:#FFFFFF;
}

.column-component.community-overview>.inside>.members-area>.item>.icon.members{
color:#FFFFFF;
}

.app{
background-color:#333333;
}

.joined-channels-by-community-component>.inside>.community-list>.individual-community-area>.community-name{
color:#FFFFFF;
}

.timeline-header-component>.inside>.label-area.thread>.link>.label{
color:#FFFFFF;
}

.timeline-header-component>.inside>.label-area.thread>.link>.icon{
color:#FFFFFF;
}

.status-body-website>.content>.domain{
color:#CCFFFF;
}

３：Ctrl+Mを押すと、右側にバーが現れる。

４：さきほどコピーしたCSSをCtrl+Vで貼り付ける。

５：Ctrl+Mを押して閉じる。

６：以下の写真のようにダークテーマが適用されていることを確認して終了する。