Floorp 専用のテーマを作成するには

Floorp は、バージョン 8.7.2 で他のブラウザーと互換性がない API をテーマで使用できるようにしました。ここでは、その API を使用したテーマの作成方法をご紹介します。

theme_experimnt とは

theme_experiment とは、Firefox のテーマの実験的機能であり、現状安定したビルドであれば Floorp のみで使用することができます。

基本的な使用法は以下の通りです。これをテーマの manifest.json に含ませることで Floorp にロードされることが可能です。 “properties” は必要ありませんが、使用可能です

"theme_experiment": {
    "stylesheet": "experiment.css",
    },
    "properties": {
      "panel_hover": "--panel-item-hover-bgcolor",
      "panel_active": "--arrowpanel-dimmed-further",
      "panel_active_darker": "--panel-item-active-bgcolor",
      "toolbar_field_icon_opacity": "--urlbar-icon-fill-opacity",
      "zap_gradient": "--panel-separator-zap-gradient"
    }
  }

“stylesheet”: “experiment.css”

この値は、Floorp に CSS を読み込ませることができるものです。この CSS の適用先は必ずFloorp UIに適用されます。内部サイトに読み込むことはできません。

CSS の書き方は基本的に、userChrome.css と同じです。userChrome.css の作成方法は以下をご覧ください。userChrome.css をリネームするだけで移植可能です。

【Floorp】カスタムCSSの使い方。自分で好きなようにデザインを変えてみよう!

その他のテーマの実装に関しては以下をご覧ください。

https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/them

見本を見たい場合、以下のURLからみることができます。

https://github.com/surapunoyousei/Theme-sample


@supports -moz-bool-pref(“{bool pref}”)

ブラウザーの設定によって条件区分を作ることのできる Firefox 専用の CSS の機能です。現在、ウェブサイト側から使用することはできません。

例:

@supports -moz-bool-pref("floorp.hide.tabbrowser-tab.enable") {
  #tabbrowser-tabs{
    display: none;
  }
}

この場合、floorp.hide.tabbrowser-tab.enable が、true の場合、ブラウザーは以下の CSS を読み込み、タブの外観を削除します。

pref はユーザーが about:config サイトを操作するか、user.js 等で変更する必要があります。既存の pref にも有効なため、設定を読み取ることも可能です。

*機能制限

Firefox の仕様上、@support の中に @support は入れることはできません。つまり、以下の CSS は無効です。

@supports -moz-bool-pref("floorp.hide.tabbrowser-tab.enable") {

  @supports -moz-bool-pref("floorp.optimized.msbutton.ope") {
  #forward-button, 
  #back-button{
    display: none;
  }
  }
}