ONLYOFFICE Docsでインターフェーステーマを変更する
はじめに
既存のライト、クラシックライト、ダークインターフェーステーマに加えて、ONLYOFFICEエディターは独自のカラーテーマでカスタマイズできるようになりました。このガイドの手順に従って、その方法を学んでください。
-
次のような.jsonファイルを作成します：
{ "name": "Amazing theme", "l10n": { "fr": "Thème incroyable", "de": "Geweldig thema" }, "id" : "theme-amazing", "type" : "light", "colors" : { "toolbar-header-document" : "#446995", "toolbar-header-spreadsheet" : "#40865c", "toolbar-header-presentation" : "#aa5252", "border-color-shading" : "rgba(0, 0, 0, 0.15)" ... } }ここで、次のパラメータを指定する必要があります：
- name: テーマ名を定義し、高度な設定のテーマピッカーに表示されます。
- l10n: ローカライズされたテーマ名を定義します。オブジェクトキーは2文字の言語コード（ru、de、itなど）で、値は各言語のテーマ名の翻訳です。
- id: テーマの一意の識別子を定義します。theme-プレフィックスで始める必要があり、a-Z、1-9、-、_の記号を含めることができます。
- type: テーマのタイプを定義します。ダークまたはライトにすることができます。
- colors: テーマカラーのセットを定義します。カラーはhexまたはRGBA形式で表現できます。このオブジェクトが含むことができるカラー変数の詳細については、colorsを参照してください。
-
作成したファイルを次のディレクトリに配置します：
- Windows:
%ProgramFiles%\ONLYOFFICE\DocumentServer\web-apps\apps\common\main\resources\themes - Linux:
/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes - Docker: Docsコンテナにファイルをコピーします：
sudo docker cp /home/username/folder_name/file_name {container_id}:/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes
- Windows:
-
このリクエストのサーバーキャッシュの有効期間は5分ですので、テーマは5分後に利用可能になります。エディターページをリフレッシュする必要があります。
これで、テーマが高度な設定のインターフェーステーマリストに表示され、エディターインターフェースに適用できます。
カラー
ヘッダーツールバーのカラー
| パラメータ | 説明 | デフォルト |
|---|---|---|
toolbar-header-document |
テキストドキュメントのツールバーヘッダーの色です。
| #446995 |
toolbar-header-spreadsheet |
スプレッドシートのツールバーヘッダーの色です。
| #40865c |
toolbar-header-presentation |
プレゼンテーションのツールバーヘッダーの色です。
| #BE664F |
toolbar-header-pdf |
PDFのツールバーヘッダーの色です。
| #AA5252 |
text-toolbar-header-on-background-document |
テキストドキュメントのツールバーヘッダーからのユーザーイニシャルのテキストカラーです。
| #38567A |
text-toolbar-header-on-background-spreadsheet |
スプレッドシートのツールバーヘッダーからのユーザーイニシャルのテキストカラーです。
| #336B49 |
text-toolbar-header-on-background-presentation |
プレゼンテーションのツールバーヘッダーからのユーザーイニシャルのテキストカラーです。
| #854535 |
text-toolbar-header-on-background-pdf |
PDFのツールバーヘッダーからのユーザーイニシャルのテキストカラーです。
| #8D4444 |
背景色
| パラメータ | 説明 | デフォルト |
|---|---|---|
background-normal |
ウィンドウ、ドロップダウンパネル、通常のコントロールの背景色です。
| #fff |
background-toolbar |
ツールバー、すべてのパネル、ダイアログボックスのヘッダー、キャンバス内のボタンを持つパネル（コンテンツコントロールのヘッダー、挿入またはオートコレクトオプションのボタン）の背景色です。
| #f7f7f7 |
background-toolbar-additional |
追加のツールバー背景色です。スプレッドシートの非アクティブシートに使用されます。
| #efefef |
background-primary-dialog-button |
プライマリダイアログボタンの背景色です。
| #444 |
background-accent-button |
テキストドキュメントエディター内のアクセントボタンの背景色です。
| #446995 |
background-tab-underline |
グレーツールバーのタブ下線の背景色です。
| #444 |
background-notification-popover |
通知ポップオーバーの背景色（例：レビュー モード、フォーム入力など）。
| #fcfed7 |
background-notification-badge |
ツールバーのヘッダーや左側のパネルからのアイコン通知バッジの背景色。
| #ffd112 |
background-scrim |
モーダルウィンドウの背景の強度を減少させるスクリムの色。
| rgba(0, 0, 0, 0.2) |
background-loader |
ローダーの背景色。
| rgba(24, 24, 24, 0.9) |
background-alt-key-hint |
Altキーを押したときのボタンショートカットヒントの背景色。
| #FFD938 |
background-contrast-popover |
情報チップの背景色。
| #fff |
background-fill-button |
フォームヘッダーのボタンの背景色。
| #FFD112 |
shadow-contrast-popover |
情報チップの影の背景色。
| rgba(0, 0, 0, 0.3) |
ハイライト色
| パラメーター | 説明 | デフォルト |
|---|---|---|
highlight-button-hover |
ボタン、ドロップダウンメニュー項目、その他のインタラクティブリストのホバー時のハイライト色。
| #e0e0e0 |
highlight-button-pressed |
押されたボタンのハイライト色。
| #cbcbcb |
highlight-button-pressed-hover |
押されたボタンのホバー時のハイライト色。
| #bababa |
highlight-primary-dialog-button-hover |
プライマリダイアログボタンのホバー時のハイライト色。
| #1c1c1c |
highlight-accent-button-hover |
アクセントボタンのホバー時のハイライト色。
| #375478 |
highlight-accent-button-pressed |
押されたアクセントボタンのハイライト色。
| #293f59 |
highlight-header-button-hover |
ヘッダーボタンのホバー時のハイライト色。
| rgba(255, 255, 255, 0.15) |
highlight-header-button-pressed |
押されたヘッダーボタンのハイライト色。
| rgba(255, 255, 255, 0.25) |
highlight-toolbar-tab-underline |
グレーツールバーのアクティブタブの下線のハイライト色。
| #444 |
highlight-text-select |
通常のコントロールで選択されたテキストのハイライト色。
| #3494fb |
highlight-fill-button-hover |
フォームヘッダーボタンのホバー時のハイライト色。
| #FFE165 |
highlight-fill-button-pressed |
フォームヘッダーからの押されたボタンの背景色。
| #DFB500 |
ボーダー色
| パラメーター | 説明 | デフォルト |
|---|---|---|
border-toolbar |
ツールバー、パネル、モーダルウィンドウのボーダー色。
| #cbcbcb |
border-toolbar-active-panel-top |
上部ツールバーのアクティブパネルの境界線の色。
| #f7f7f7 |
border-divider |
ツールバーとパネル要素を分ける境界線の色。
| #dfdfdf |
border-regular-control |
通常のコントロールの境界線の色。
| #c0c0c0 |
border-toolbar-button-hover |
ツールバーのボタンがホバーされたときの一般的な境界線の色。
| #e0e0e0 |
border-preview-hover |
プレビューコントロールの要素がホバーされたときの境界線の色（スライドプレビュー、ツールバースタイル）。
| #bababa |
border-preview-select |
プレビューコントロールの押された要素の境界線の色（スライドプレビュー、ツールバースタイル）。
| #888 |
border-control-focus |
フォーカスされた通常のコントロールの境界線の色。
| #848484 |
border-color-shading |
パレットカラーの境界線の色。
| rgba(0, 0, 0, 0.15) |
border-error |
無効な値を入力したときの入力ボックスの境界線の色。
| #f62211 |
border-contrast-popover |
情報ヒントの境界線の色。
| #fff |
border-button-pressed-focus |
フォーカスされた押されたボタンの境界線の色。
| #848484 |
テキストの色
| パラメーター | 説明 | デフォルト |
|---|---|---|
text-normal |
デフォルトのテキストの色。
| rgba(0, 0, 0, 0.8) |
text-normal-pressed |
アクティブな要素のテキストの色（選択されたタブ、押されたボタンなど）。
| rgba(0, 0, 0, 0.8) |
text-secondary |
セカンダリーテキストの色（注釈、説明など）。
| rgba(0, 0, 0, 0.6) |
text-tertiary |
ターシャリーテキストの色（プレースホルダー）。
| rgba(0, 0, 0, 0.4) |
text-link |
通知ポップオーバー内のリンクおよびリンクボタンのテキストの色。
| #445799 |
text-link-hover |
通知ポップオーバー内のリンクおよびリンクボタンがホバーされたときのテキストの色。
| #445799 |
text-link-active |
通知ポップオーバー内の押されたリンクおよびリンクボタンのテキストの色。
| #445799 |
text-link-visited |
通知ポップオーバー内の訪問済みリンクおよびリンクボタンのテキストの色。
| #445799 |
text-inverse |
反転したツールバー背景上のテキストの色。
| #fff |
text-toolbar-header |
ツールバーヘッダーのテキストの色。
| #fff |
text-contrast-background |
コントラストのある背景（ローダー、シートビューのプリセット内のセルタイトル）のテキストの色。
| #fff |
text-alt-key-hint |
Altキーが押されたときのボタンショートカットヒントのテキストの色。
| rgba(0, 0, 0, 0.8) |
アイコンの色
| パラメーター | 説明 | デフォルト |
|---|---|---|
icon-normal |
アイコンの色。
| #444 |
icon-normal-pressed |
アクティブな要素（選択されたタブや押されたボタンなど）のアイコンの色。
| #444 |
icon-inverse |
反転したアイコンの色（現在、インターフェースでは使用されていません）。 | #fff |
icon-toolbar-header |
ツールバーのヘッダーからのアイコンの色（例：ユーザーのイニシャルが表示されたアイコン）。
| #fff |
icon-notification-badge |
ツールバーのヘッダーや左側のパネルからの通知バッジのアイコンの色。
| #000 |
icon-contrast-popover |
コントラスト情報のヒントのアイコンの色（現在、インターフェースでは使用されていません）。 | #fff |
icon-success |
解決済みコメントのチェックボックスやその他の成功を示すアイコンの色。
| #090 |
キャンバスの色
| パラメーター | 説明 | デフォルト |
|---|---|---|
canvas-background |
ドキュメントページ、シートまたはスライドの背後にある作業スペースの背景色、列見出しの背景、およびスプレッドシート内の列グループ化インターフェースの背景。
| #eee |
canvas-content-background |
ドキュメントページ、セルまたはスライドの背景色。
| #fff |
canvas-page-border |
ドキュメントページの境界線の色。
| #ccc |
canvas-ruler-background |
ルーラーの背景色。
| #fff |
canvas-ruler-border |
ルーラーの境界線の色。
| #cbcbcb |
canvas-ruler-margins-background |
ルーラーのマージンの背景色。
| #d9d9d9 |
canvas-ruler-mark |
ルーラーマーク（ターゲットとテキスト）の色。
| #555 |
canvas-ruler-handle-border |
ルーラーハンドルの境界線の色。
| #555 |
canvas-ruler-handle-border-disabled |
無効なルーラーハンドルの境界線の色。
| #aaa |
canvas-high-contrast |
高コントラスト要素の色（ルーラーのタブマーク、グループ化されたセルのシンボル）。
| #000 |
canvas-high-contrast-disabled |
無効な高コントラスト要素の色（ルーラーのタブマーク、グループ化されたセルのシンボル）。
| #666 |
canvas-cell-border |
セルの境界線の色。
| rgba(0, 0, 0, 0.1) |
canvas-cell-title-text |
セルタイトルのテキストの色。
| #444 |
canvas-cell-title-background |
セルタイトルの背景色。
| #f7f7f7 |
canvas-cell-title-background-hover |
ホバー時のセルタイトルの背景色。
| #dfdfdf |
canvas-cell-title-background-selected |
選択されたセルタイトルの背景色。
| #cfcfcf |
canvas-cell-title-border |
セルタイトルの境界線の色。
| #d8d8d8 |
canvas-cell-title-border-hover |
ホバー時のセルタイトルの境界線の色。
| #c9c9c9 |
canvas-cell-title-border-selected |
選択されたセルタイトルの境界線の色。
| #bbb |
canvas-scroll-thumb |
スクロールサムの色。
| #f1f1f1 |
canvas-scroll-thumb-hover |
ホバー時のスクロールサムの色。
| #cfcfcf |
canvas-scroll-thumb-pressed |
押されたスクロールサムの色。
| #adadad |
canvas-scroll-thumb-border |
スクロールサムの境界線の色。
| #cfcfcf |
canvas-scroll-thumb-border-hover |
ホバー時のスクロールサムの境界線の色。
| #cfcfcf |
canvas-scroll-thumb-border-pressed |
押されたスクロールサムの境界線の色。
| #adadad |
canvas-scroll-arrow |
スクロール矢印の色。
| #adadad |
canvas-scroll-arrow-hover |
ホバー時のスクロール矢印の色。
| #f1f1f1 |
canvas-scroll-arrow-pressed |
押されたスクロール矢印の色。
| #f1f1f1 |
canvas-scroll-thumb-target |
スクロールサムのターゲット色。
| #cfcfcf |
canvas-scroll-thumb-target-hover |
ホバー時のスクロールサムのターゲット色。
| #f1f1f1 |
canvas-scroll-thumb-target-pressed |
押されたスクロールサムのターゲット色。
| #f1f1f1 |
canvas-sheet-view-cell-background |
シートビュー モードでのセル背景色。
| #73bf91 |
canvas-sheet-view-cell-background-hover |
ホバー時のシートビュー モードでのセル背景色。
| #97e3b6 |
canvas-sheet-view-cell-background-pressed |
押されたシートビュー モードでのセル背景色。
| #aaffcc |
canvas-sheet-view-cell-title-label |
シートビュー モードでのセルテキストの色。
| #121212 |
canvas-sheet-view-select-all-icon |
シートビュー モードでのすべてのセルを選択アイコンの色。
| #3d664e |
canvas-freeze-line-1px |
影付きのフリーズラインの色。
| #818181 |
canvas-freeze-line-2px |
影なしのフリーズラインの色。
| #aaaaaa |
canvas-select-all-icon |
すべてのセルを選択アイコンの色。
| #82878f |
