ONLYOFFICE Docsでインターフェーステーマを変更する

はじめに

既存のライト、クラシックライト、ダークインターフェーステーマに加えて、ONLYOFFICEエディターは独自のカラーテーマでカスタマイズできるようになりました。このガイドの手順に従って、その方法を学んでください。

注記

カスタムインターフェーステーマを追加する機能は、ONLYOFFICE Docs v7.0から利用可能です。

1. 次のような .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を参照してください。

2. 作成したファイルを次のディレクトリに配置します：

   • 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

3. このリクエストのサーバーキャッシュの有効期間は5分ですので、テーマは5分後に利用可能になります。エディターページをリフレッシュする必要があります。

   注記

   場合によっては、サービスを再起動してキャッシュをクリアする必要があることもあります。

4. これで、テーマが 高度な設定 の インターフェーステーマ リストに表示され、エディターインターフェースに適用できます。

カラー

ヘッダーツールバーのカラー

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