Modifier le thème de l'interface ONLYOFFICE Docs

Introduction

Outre que des thèmes d'interface claire, classique claire et sombre, il est possible de personnaliser le thème de vos éditeurs ONLYOFFICE. Veuillez suivre les étapes ci-dessous pour apprendre à personnaliser les thèmes.

Le thème d'interface personnalisé n'est disponible que sur ONLYOFFICE Docs v7.0 et versions supérieures.

Créez le fichier .json qui et doit ressembler à ceci:
```
{
    "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)"
        ...
    }
}
                
```
où il faut configurer les paramètres suivants:
- nom: Pour définir le nom du thème qui s'affichera dans le sélecteur de thèmes des paramètres avancés.
- l10n: Pour définir la localisation du nom de thème. Les clés d'objet sont le code de langue à deux lettres (ru, de, it, etc.), mais la traduction du nom de thème représente les valeurs.
- id: Pour définir l'identifiant unique du thème qui doit commencer par theme-. L'identifiant peut comporter les caractères a-Z, 1-9, -, _.
- type: Pour définir le type du thème soit sombre, soit claire.
- colors: Pour définir le jeu de couleurs du thème. Les couleurs sont utilisés au format hexadécimal ou RGBA. Veuillez consulter couleurs, pour en savoir plus sur les variables de couleurs qu'on objet peut contenir.
Placez le fichier créé dans le répertoire:
- Windows: %ProgramFiles%\ONLYOFFICE\DocumentServer\web-apps\apps\common\main\resources\themes
- Linux: /var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes
- Docker: Copiez le fichier dans le conteneur Docs: sudo docker cp /home/username/folder_name/file_name {container_id}:/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes
La durée de vie de mise en cache du serveur est 5 minutes, alors le thème deviendra disponible dans 5 minutes. Il faudra actualiser la page de l'éditeur.
Parfois, il faudra également réinitialiser les services et vider le cache. Pour savoir comment vider le cache du serveur, veuillez consulter la section Résolution des problèmes pour Linux ou Docker.
Le thème s'affichera désormais dans la liste Thème d'interface de Paramètres avancés et vous pourrez l'appliquer à votre interface.

Couleurs

Couleurs de l'en-tête de la barre d'outils

Paramètre	Description	Défaut
`toolbar-header-document`	La couleur de l'en-tête de la barre d'outils pour des documents texte.	`#446995`
`toolbar-header-spreadsheet`	La couleur de l'en-tête de la barre d'outils pour des classeurs.	`#40865c`
`toolbar-header-presentation`	La couleur de l'en-tête de la barre d'outils pour des présentations.	`#BE664F`
`toolbar-header-pdf`	La couleur de l'en-tête de la barre d'outils pour des fichiers PDF.	`#AA5252`
`text-toolbar-header-on-background-document`	Le couleur des initiales de l'utilisateur sur l'en-tête de la barre d'outils des documents texte.	`#38567A`
`text-toolbar-header-on-background-spreadsheet`	Le couleur des initiales de l'utilisateur dans l'en-tête de la barre d'outils des classeurs.	`#336B49`
`text-toolbar-header-on-background-presentation`	La couleur des initiales de l'utilisateur dans l'en-tête de la barre d'outils des présentations.	`#854535`
`text-toolbar-header-on-background-pdf`	La couleur des initiales de l'utilisateur sur l'en-tête de la barre d'outils des fichiers PDF.	`#8D4444`

Couleur d'arrière plan

Paramètre	Description	Défaut
`background-normal`	La couleur de l'arrière-plan des fenêtres, des panneaux déroulants, des contrôles standards.	`#fff`
`background-toolbar`	La couleur d'arrière-plan de la barre d'outils, de tous panneaux, de l'en-tête des boîtes de dialogue, des panneaux avec un bouton sur le canevas (des en-têtes des contrôles de contenu, des boutons pour les options d'insertion et de correction automatique).	`#f7f7f7`
`background-toolbar-additional`	La couleur d'arrière-plan de la barre d'outils additionnelle. Elle est utilisée pour des feuilles de calcul inactives dans un classeur.	`#efefef`
`background-primary-dialog-button`	La couleur d'arrière-plan du bouton dans une boîte de dialogue principale.	`#444`
`background-accent-button`	La couleur d'arrière-plan du bouton d'accent dans l'éditeur de documents texte.	`#446995`
`background-tab-underline`	La couleur d'arrière-plan du soulignement d'un onglet sur la barre d'outils grise.	`#444`
`background-notification-popover`	La couleur d'arrière-plan de la fenêtre contextuelle de notification (par exemple, notification de mode révision, de remplissage formulaire, etc.).	`#fcfed7`
`background-notification-badge`	La couleur d'arrière-plan des badge d'icône de notification sur l'en-tête de la barre d'outils ou sur le panneau de gauche.	`#ffd112`
`background-scrim`	La couleur de canevas qui réduit l'intensité de l'arrière-plan des fenêtres modales.	`rgba(0, 0, 0, 0.2)`
`background-loader`	La couleur d'arrière-plan du chargeur.	`rgba(24, 24, 24, 0.9)`
`background-alt-key-hint`	La couleur d'arrière-plan des conseils pour les raccourci clavier lors de la suppression de la clé Alt.	`#FFD938`
`background-contrast-popover`	La couleur d'arrière-plan des conseils d'information.	`#fff`
`background-fill-button`	La couleur d'arrière-plan du bouton sur l'en-tête de formulaire	`#FFD112`
`shadow-contrast-popover`	La couleur d'arrière-plan de l'ombre des conseils d'information.	`rgba(0, 0, 0, 0.3)`

Couleurs de surbrillance

Paramètre	Description	Défaut
`highlight-button-hover`	La couleur de surbrillance des boutons, des éléments de menus contextuels et d'autres listes interactives lors du passage de la souris.	`#e0e0e0`
`highlight-button-pressed`	La couleur de surbrillance du bouton qui reste appuyé.	`#cbcbcb`
`highlight-button-pressed-hover`	La couleur de surbrillance du bouton qui reste appuyé au passage de la souris.	`#bababa`
`highlight-primary-dialog-button-hover`	La couleur de surbrillance du bouton dans une boîte de dialogue principale au passage de la souris.	`#1c1c1c`
`highlight-accent-button-hover`	La couleur de surbrillance du bouton d'accent au passage de la souris.	`#375478`
`highlight-accent-button-pressed`	La couleur de surbrillance du bouton d'accent qui reste appuyé.	`#293f59`
`highlight-header-button-hover`	La couleur de surbrillance du bouton d'en-tête au passage de la souris.	`rgba(255, 255, 255, 0.15)`
`highlight-header-button-pressed`	La couleur de surbrillance du bouton d'en-tête qui reste appuyé.	`rgba(255, 255, 255, 0.25)`
`highlight-toolbar-tab-underline`	La couleur de surbrillance du soulignement d'un onglet actif sur la barre d'outils grise.	`#444`
`highlight-text-select`	La couleur de surbrillance du texte sélectionné sur les contrôles standard.	`#3494fb`
`highlight-fill-button-hover`	La couleur de surbrillance du bouton d'en-tête au passage de la souris.	`#FFE165`
`highlight-fill-button-pressed`	La couleur d'arrière-plan du bouton qui reste appuyé dans l'en-tête de formulaire	`#DFB500`

Couleurs de bordures

Paramètre	Description	Défaut
`border-toolbar`	La couleur des bordures de la barre d'outils, des panneaux et des fenêtres modales.	`#cbcbcb`
`border-toolbar-active-panel-top`	La couleur des bordures du panneau actif de la barre d'outils.	`#f7f7f7`
`border-divider`	La couleur des bordures qui divisent les éléments de la barre d'outils et du panneau.	`#dfdfdf`
`border-regular-control`	La couleur des bordures de contrôles standards.	`#c0c0c0`
`border-toolbar-button-hover`	La couleur de base de la bordure des boutons sur la barre d'outils qui sont placés ensemble au passage de la souris.	`#e0e0e0`
`border-preview-hover`	La couleur des bordures d'un élément du contrôle aperçu au passage de la souris (aperçu de diapositives, styles de la barre d'outils).	`#bababa`
`border-preview-select`	La couleur des bordures d'un élément du contrôle aperçu qui reste appuyé (aperçu de diapositives, styles de la barre d'outils).	`#888`
`border-control-focus`	La couleur des bordures du contrôle standard prioritaire.	`#848484`
`border-color-shading`	La couleur des bordures de couleurs de palette.	`rgba(0, 0, 0, 0.15)`
`border-error`	La couleurs des bordures de boîtes de saisie lors de la saisie d'une valeur incorrecte.	`#f62211`
`border-contrast-popover`	La couleur des bordures du conseil d'information.	`#fff`
`border-button-pressed-focus`	La couleur des bordures du bouton qui reste appuyé avec le focus.	`#848484`

Couleurs du texte

Paramètre	Description	Défaut
`text-normal`	La couleur du texte par défaut.	`rgba(0, 0, 0, 0.8)`
`text-normal-pressed`	La couleur de texte de l'élément actif (l'onglet sélectionné, le bouton qui reste appuyé, etc.).	`rgba(0, 0, 0, 0.8)`
`text-secondary`	La couleur de texte secondaire (mentions, explications, etc.).	`rgba(0, 0, 0, 0.6)`
`text-tertiary`	La couleur du texte tertiaire (espaces réservés).	`rgba(0, 0, 0, 0.4)`
`text-link`	La couleur du texte de liens et de boutons lien dans des fenêtres contextuelles de notification.	`#445799`
`text-link-hover`	La couleur du texte de liens et de boutons lien dans des fenêtres contextuelles de notification au passage de la souris.	`#445799`
`text-link-active`	La couleur du texte de liens et de boutons lien dans qui restent appuyés dans des fenêtres contextuelles de notification.	`#445799`
`text-link-visited`	La couleur du texte de liens et de boutons lien dans qu'on a déjà visité dans des fenêtres contextuelles de notification.	`#445799`
`text-inverse`	La couleur du texte dans l'arrière-plan inversé de la barre d'outils.	`#fff`
`text-toolbar-header`	La couleur du texte de l'en-tête de la barre d'outils.	`#fff`
`text-contrast-background`	La couleur du texte dans l'arrière-plan contrasté (chargeur, titres de cellules dans des options de l'affichage des feuilles de calcul).	`#fff`
`text-alt-key-hint`	La couleur du texte des conseils pour les raccourci clavier lors de la suppression de la clé Alt.	`rgba(0, 0, 0, 0.8)`

Couleurs des icônes

Paramètre	Description	Défaut
`icon-normal`	Couleur de l'icône.	`#444`
`icon-normal-pressed`	La couleur de l'icône d'un élément actif (l'onglet sélectionné, le bouton qui reste appuyé, etc.).	`#444`
`icon-inverse`	La couleur inversée de l'icône (actuellement, n'est pas implémenté dans l'interface).	`#fff`
`icon-toolbar-header`	La couleur de l'icône dans l'en-tête de la barre d'outils (par exemple, l'icône avec lettres initiales).	`#fff`
`icon-notification-badge`	La couleur de l'icône des badge de notification dans l'en-tête de la barre d'outils ou sur le panneau de gauche.	`#000`
`icon-contrast-popover`	La couleur de l'icône des conseils d'information contrastés (actuellement, n'est pas implémenté dans l'interface).	`#fff`
`icon-success`	La couleur des cases à cocher pour des commentaires résolus ou pour d'autres indicateurs de succès.	`#090`

Couleur de canevas

Paramètre	Description	Défaut
`canvas-background`	La couleur d'arrière-plan de l'espace de travail derrière la page du document, de la feuille de calcul ou de la diapositive, l'arrière-plan de l'en-tête d'une colonne et de l'arrière-plan de l'interface de regroupement des cellules dans une feuille de calcul.	`#eee`
`canvas-content-background`	La couleur d'arrière-plan de la page du document, des cellules ou de la diapositive.	`#fff`
`canvas-page-border`	La couleur des bordures de la page du document.	`#ccc`
`canvas-ruler-background`	La couleur d'arrière-plan de la règle.	`#fff`
`canvas-ruler-border`	La couleur des bordures de la règle.	`#cbcbcb`
`canvas-ruler-margins-background`	La couleur d'arrière-plan des marges de la règle.	`#d9d9d9`
`canvas-ruler-mark`	La couleur des marques de règle (ciblé et texte)	`#555`
`canvas-ruler-handle-border`	La couleur des bordures de la poignée de règle.	`#555`
`canvas-ruler-handle-border-disabled`	La couleur des bordures de la poignée de règle désactivée.	`#aaa`
`canvas-high-contrast`	La couleur des éléments à contraste élevé (les taquets de tabulation sur la règle, les symboles de cellules groupées).	`#000`
`canvas-high-contrast-disabled`	La couleur des éléments à contraste élevé désactivés (les taquets de tabulation sur la règle, les symboles de cellules groupées).	`#666`
`canvas-cell-border`	La couleur des bordures de cellule.	`rgba(0, 0, 0, 0.1)`
`canvas-cell-title-text`	La couleur du titre de la cellule.	`#444`
`canvas-cell-title-background`	La couleur d'arrière plan du titre de la cellule.	`#f7f7f7`
`canvas-cell-title-background-hover`	La couleur d'arrière-plan du titre de la cellule au passage de la souris.	`#dfdfdf`
`canvas-cell-title-background-selected`	La couleur d'arrière-plan du titre de la cellule sélectionnée.	`#cfcfcf`
`canvas-cell-title-border`	La couleur des bordures du titre de la cellule.	`#d8d8d8`
`canvas-cell-title-border-hover`	La couleur des bordures du titre de la cellule au passage de la souris.	`#c9c9c9`
`canvas-cell-title-border-selected`	La couleur des bordures du titre de la cellule sélectionnée.	`#bbb`
`canvas-scroll-thumb`	La couleur du curseur de défilement.	`#f1f1f1`
`canvas-scroll-thumb-hover`	La couleur du curseur de défilement au passage de la souris.	`#cfcfcf`
`canvas-scroll-thumb-pressed`	La couleur du curseur de défilement qui reste appuyé.	`#adadad`
`canvas-scroll-thumb-border`	La couleur des bordures du curseur de défilement.	`#cfcfcf`
`canvas-scroll-thumb-border-hover`	La couleur des bordures du curseur de défilement au passage de la souris.	`#cfcfcf`
`canvas-scroll-thumb-border-pressed`	La couleur des bordures du curseur de défilement qui reste appuyé.	`#adadad`
`canvas-scroll-arrow`	La couleur de la flèche de défilement.	`#adadad`
`canvas-scroll-arrow-hover`	La couleur de la flèche de défilement au passage de la souris.	`#f1f1f1`
`canvas-scroll-arrow-pressed`	La couleur de la flèche de défilement qui reste appuyée.	`#f1f1f1`
`canvas-scroll-thumb-target`	La couleur cible du curseur de défilement.	`#cfcfcf`
`canvas-scroll-thumb-target-hover`	La couleur cible du curseur de défilement au passage de la souris.	`#f1f1f1`
`canvas-scroll-thumb-target-pressed`	La couleur cible du curseur de défilement qui reste appuyé.	`#f1f1f1`
`canvas-sheet-view-cell-background`	La couleur d'arrière plan de la cellule en mode d'affichage de feuille.	`#73bf91`
`canvas-sheet-view-cell-background-hover`	La couleur d'arrière plan de la cellule en mode d'affichage de feuille au passage de la souris.	`#97e3b6`
`canvas-sheet-view-cell-background-pressed`	La couleur d'arrière plan de la cellule qui reste appuyée en mode d'affichage de feuille.	`#aaffcc`
`canvas-sheet-view-cell-title-label`	La couleur du texte dans la cellule en mode d'affichage de feuille.	`#121212`
`canvas-sheet-view-select-all-icon`	La couleur de l'icône Sélectionner toutes les cellules en mode d'affichage de feuille.	`#3d664e`
`canvas-freeze-line-1px`	La couleur de la ligne de verrouillage ombrée.	`#818181`
`canvas-freeze-line-2px`	La couleur de la ligne de verrouillage sans ombre.	`#aaaaaa`
`canvas-select-all-icon`	La couleur de l'icône Sélectionner toutes les cellules.	`#82878f`

Hébergez ONLYOFFICE Docs sur votre serveur ou utilisez dans le cloud

Obtenir maintenant Utiliser dans le cloud