テーマを自作・共有する方法

テーマを自作・共有する方法

ORIZIN Agent HTMLではユーザーがテーマを自作したり、他のユーザーと共有したりできます。

自作する方法

テーマをもっとも簡単に自作する方法は、ORIZIN Agent HTMLの設定のテーマの中にある「カスタムテーマの編集」を使用することです。カラーピッカーを使用して簡単に色を設定できます。

しかし、カスタムテーマを複数作成したい場合や好きな名称を設定したい場合は、自分でファイルを作成する必要があります。

以下は、「オート（OSやブラウザの設定に従います）（オレンジ）」のテーマの設定ファイルの内容です。

/* オート(OSやブラウザの設定に従います)(オレンジ) */

:root {
    --bg: #ffffff;
    --card_bg: #ffffff;
    --text: rgba(0, 0, 0, 0.87);
    --shadow: rgba(0, 0, 0, 0.26);
    --theme_color: #f86806;
    --header_background_color: var(--theme_color);
    --error_text_color: #b00020;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #121212;
        --card_bg: #1d1d1d;
        --text: rgba(255, 255, 255, 0.87);
        --shadow: rgba(0, 0, 0, 0.26);
        --theme_color: #f86806;
        --header_background_color: #272727;
        --error_text_color: #cf6679;
    }
}

1行目のコメントでテーマの名前を設定します。ORIZIN Agent HTMLの設定ページでは、この名前が表示されます。

色はCSSでサポートされている形式で指定してください。

CSS変数	使われる場所
--bg	画面の背景色
--card_bg	カードの背景色。一番使われる面積が広いです。
--text	テキストの色
--shadow	影の色です。v5.0.133.0dev-Eagleのコミット1775dcf605ff04145e3805a47374d39e8a986823以降ではほとんど使用されていません。
--theme_color	テーマカラー
--header_background_color	アプリのヘッダーの背景色
--error_text_color	エラーや警告を表す色

完成したらresource/css/theme/user/（「このフォルダーにユーザー定義のテーマを保存できます.txt」があるフォルダー）に好きな名前で拡張子は.cssとして保存してください。

共有する方法

上記の方法で作成したテーマを共有するしたい場合は、作成したファイルをそのまま共有し、相手には同じ場所に保存してもらってください。

また、「カスタムテーマの編集」で作成したテーマはresource/css/theme/custom_theme.cssというファイルです。