Tip

このドキュメントはAIによって翻訳されました。不正確な情報については、英語版をご参照ください

テーマエディター

現在のテーマ機能は Ant Design 5.x をベースに実装されています。本ドキュメントを読む前に、まずテーマのカスタマイズに関する概念を理解しておくことをお勧めします。

はじめに

テーマエディタープラグインは、フロントエンドページ全体のスタイルを変更するために使用します。現在、グローバルな範囲のSeedTokenMapTokenAliasTokenの編集をサポートしており、ダークモードコンパクトモード への切り替えも可能です。今後、コンポーネントレベルでのテーマカスタマイズもサポートされる可能性があります。

使用方法

テーマエディタープラグインを有効にする

まず、NocoBase を最新バージョン(v0.11.1 以降)に更新してください。その後、プラグイン管理ページで テーマエディター カードを検索し、カード右下の 有効にする ボタンをクリックして、ページが更新されるのを待ちます。

20240409132838

テーマ設定ページへ移動する

プラグインを有効にしたら、カード左下の設定ボタンをクリックして、テーマ編集ページに移動します。デフォルトでは、4つのテーマオプションが提供されています。デフォルトテーマダークテーマコンパクトテーマコンパクトダークテーマです。

20240409133020

新しいテーマを追加する

新しいテーマを追加 ボタンをクリックし、全く新しいテーマを作成 を選択すると、ページ右側にテーマエディターがポップアップ表示されます。ここでは、サイズスタイル などのオプションを編集できます。編集が完了したら、テーマ名を入力して保存をクリックすると、新しいテーマの追加が完了します。

20240409133147

新しいテーマを適用する

ページ右上部にマウスカーソルを移動すると、テーマ切り替えオプションが表示されます。これをクリックすると、先ほど追加したテーマなど、他のテーマに切り替えることができます。

20240409133247

既存のテーマを編集する

カード左下の 編集 ボタンをクリックすると、ページ右側にテーマエディターがポップアップ表示されます(新しいテーマを追加する場合と同じです)。編集が完了したら、保存をクリックするとテーマの変更が完了します。

20240409134413

ユーザーが選択可能なテーマを設定する

新しく追加されたテーマは、デフォルトでユーザーが切り替え可能です。もしユーザーに特定のテーマへの切り替えを許可したくない場合は、テーマカード右下の ユーザーが選択可能 スイッチをオフにしてください。これにより、ユーザーはそのテーマに切り替えることができなくなります。

20240409133331

デフォルトテーマとして設定する

初期状態では、デフォルトテーマは デフォルトテーマ です。特定のテーマをデフォルトテーマとして設定したい場合は、そのテーマカード右下の デフォルトテーマ スイッチをオンにしてください。これにより、ユーザーが初めてページを開いたときにそのテーマが表示されるようになります。注:デフォルトテーマは削除できません。

20240409133409

テーマを削除する

カード下部の 削除 ボタンをクリックし、ポップアップ表示される確認ダイアログで確認をクリックすると、テーマが削除されます。

20240409133435