CSSによるテーマ

MonotのテーマはCSSにより実装されています。CSSファイルの中で使えるID名やカスタムプロパティ名などを解説していきます。

テーマが適用される場所

Monotのテーマは、MonotのUI全体および新しいタブを生成した時に表示されるHomeページに適用されます。

以下の画像で緑色になっているところに適用されます。Webページに関しては、サーバーが見つからなかった際に表示されるページおよびHomeページのみ表示されます。

※メモ：まれにカスタムプロパティが適用されない場合がありますが、その場合は--main-background: #000!importantのように、文末に!importantを付与して強制させてください。

Monotで使用できるカスタムプロパティは合計15個。

これらは:rootに設定されています。

--main-background：主な背景色

--text-color：主なテキスト色

--browsername-color：Homeページの"Monot by monochrome."表記の文字色

--shadow-color：各色の影の色

--shadow-color-unhover：マウスカーソルが乗っていないときの影の色

--border-color：borderの色

--border-color-unhover：マウスカーソルが乗っていないときのborderの色

--backgroundcolor：ボタンなど背景色

--backgroundcolor-unhover：マウスカーソルが乗っていないときのボタンなどの背景色

--input-color-unhover：マウスカーソルが乗っていないときのinputの背景色

--borderline-color：アドレスバーとWebページとの境目の色

--opened-tab-backgroundcolor：アドレスバーでの開いているタブの背景色

--closebutton-color：タブを閉じるボタンの色

--loading-color：読み込み進捗バーの色

.mac：macOSである

.window：Thin UIの時に右側に寄せるボタン

#home：ホームボタン

#reload：再読み込みボタン

#prev：戻るボタン

#next：進むボタン

#textbox：検索ワードおよびURL入力ボックス

#move：移動ボタン

#menu：メニュー表示ボタン

#minimize：最小化ボタン

#maximize：最大化ボタン

#close：ウィンドウを閉じるボタン

#newtab：新しいタブを開くボタン

#search：検索ボックス

#searchButton：検索ボタン

#bookmarks：ブックマーク

#bookmarks-content：ブックマークを表示するところ