デザイン

「デザイン」タブで、ページ全体の見た目を設定します。ブロック単位の色や角丸は ブロックのスタイル で個別に上書きできます。

テーマ

テーマは 描き方そのもの を切り替えます（色の組み合わせは下の カラープリセット で選びます）。 テーマを選ぶと、そのテーマに合う色が入ります。色はその後で自由に変えられます。

リキッドグラスの設定

• 屈折（背景のゆがみと虹色の縁）は Chrome / Edge で表示されます。Safari・Firefox ではぼかしのガラスになります（下バーのレンズの中身は、どのブラウザーでも屈折して見えます）
• カスタム CSS からは .folita-theme-liquidglass と、CSS 変数 --t-orb1〜--t-orb4 --t-tint --t-blur --t-refraction で調整できます

アダプティブデザイン

「テーマ」の アダプティブデザイン をオンにすると、テーマを手で選ぶ代わりに 閲覧する端末で自動で決まります。

• オンにすると「編集する端末」の切り替え（Android → マテリアル / iOS → リキッドグラス）が出ます。選んだ端末のテーマの設定を編集し、プレビューもその端末で表示します
• テーマ固有の設定（マテリアルのパレット、リキッドグラスの背景の玉など）はテーマごとに覚えています。オフに戻しても消えません
• 背景・文字色・ボタン色・色テーマ・カラープリセットはリキッドグラス側だけで使われます（マテリアルはパレットで色が決まります）。フォント・ボタンの形と角丸・アイコン・レイアウトは共通です
• 端末の判定は User-Agent です（iPadOS の Safari は Mac として判定されるので、同じくリキッドグラスになります）

Material のパレット

マテリアルテーマの色は、Android の壁紙から作られる色と同じ 5 系統 × 13 段階のパレット（accent1 accent2 accent3 neutral1 neutral2 × 0〜1000。0 が白、1000 が黒）で決まります。

• シード色とスキームから生成: シード色を選び、スキーム（Tonal Spot = Android の既定、Vibrant、Expressive、Neutral、Monochrome、Fidelity、Content、Rainbow、Fruit Salad）を選んで「パレットを生成」を押します。生成には Google の material-color-utilities を使います
• Android のパレットを貼り付け: --accent1_600 = #28657D のような一覧（: 区切りでも可）を貼り付けて「取り込む」を押すと、端末と同じ色になります。足りない色は今の色のままです
• 色見本をクリックするとコードをコピーできます
• 割り当ては Android の動的カラーと同じです。ライトでは primary = accent1_600、面 = neutral1_10、文字 = neutral1_900、補助文字 = neutral2_700。ダークでは primary = accent1_200、面 = neutral1_900、文字 = neutral1_100 になります
• 「ライト / ダーク」で端末の設定に合わせるか、いつもライト / ダークかを選べます。ブラウザのタブや PWA の色（theme-color）も合わせて変わります
• カスタム CSS では var(--accent1_600) のようにパレットをそのまま使えます。役割の色は --md-primary --md-on-primary --md-surface --md-on-surface --md-surface-container --md-outline-variant などで参照できます
• ボタンのスタイルは Material の部品に対応します: 塗り = Filled、枠線 = Outlined、ソフト / ガラス = Tonal、シャドウ = Elevated

色テーマ

色を 1 つ選ぶと、次の 5 つをまとめてその色にします。

• 文字色が明るい（暗い背景の）ときは、同じ色の暗い段階の背景と明るい段階の文字色になります
• 背景が画像のときは、背景はそのまま（下バー・タイムライン・メンション・選択ハイライトだけ変わります）
• ボタンやリンクの下線などの アクセント は色テーマでは変わりません
• カラープリセットを選んでも色テーマはそのままです
• カスタム CSS からは CSS 変数 --f-nav-accent --f-link --f-selection --f-selection-text（タイムラインの強調色は --tl-accent）で調整できます

カラープリセット

プリセットを選ぶと、背景・文字色・ボタンがまとめて切り替わります（テーマはそのまま）。選んだ後に個別の項目を変えると「カスタム」になります。

背景

フォント

Google Fonts から選べます。日本語に対応したフォントには ✓ を付けています。

欧文フォントを選んだ場合、日本語の文字は端末のフォントで表示されます。

色

ボタン

リンクブロックの見た目です。

ボタンの色・文字色と、角丸（0〜999px）を指定できます。

アイコンとレイアウト