Modifier le thème de l'interface ONLYOFFICE Docs
Introduction
Outre que des thèmes d'interface clair, classique clair 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 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 :
- name : 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 clair.
- colors : Pour définir le jeu de couleurs du thème. Les couleurs sont utilisées au format hexadécimal ou RGBA. Veuillez consulter couleurs, pour en savoir plus sur les variables de couleurs qu'un 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
- Windows :
-
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.
remarqueParfois, il faudra également réinitialiser les services et vider le cache.
-
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
toolbar-header-document
La couleur de l'en-tête de la barre d'outils pour des documents texte.
Défaut: #446995
toolbar-header-spreadsheet
La couleur de l'en-tête de la barre d'outils pour des classeurs.
Défaut: #40865c
toolbar-header-presentation
La couleur de l'en-tête de la barre d'outils pour des présentations.
Défaut: #BE664F
toolbar-header-pdf
La couleur de l'en-tête de la barre d'outils pour des fichiers PDF.
Défaut: #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.
Défaut: #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.
Défaut: #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.
Défaut: #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.
Défaut: #8D4444
Couleur d'arrière plan
background-normal
La couleur de l'arrière-plan des fenêtres, des panneaux déroulants, des contrôles standards.
Défaut: #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).
Défaut: #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.
Défaut: #efefef
background-primary-dialog-button
La couleur d'arrière-plan du bouton dans une boîte de dialogue principale.
Défaut: #444
background-accent-button
La couleur d'arrière-plan du bouton d'accent dans l'éditeur de documents texte.
Défaut: #446995
background-tab-underline
La couleur d'arrière-plan du soulignement d'un onglet sur la barre d'outils grise.
Défaut: #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.).
Défaut: #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.
Défaut: #ffd112
background-scrim
La couleur de canevas qui réduit l'intensité de l'arrière-plan des fenêtres modales.
Défaut: rgba(0, 0, 0, 0.2)
background-loader
La couleur d'arrière-plan du chargeur.
Défaut: 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.
Défaut: #FFD938
background-contrast-popover
La couleur d'arrière-plan des conseils d'information.
Défaut: #fff
background-fill-button
La couleur d'arrière-plan du bouton sur l'en-tête de formulaire
Défaut: #FFD112
shadow-contrast-popover
La couleur d'arrière-plan de l'ombre des conseils d'information.
Défaut: rgba(0, 0, 0, 0.3)
Couleurs de surbrillance
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.
Défaut: #e0e0e0
highlight-button-pressed
La couleur de surbrillance du bouton qui reste appuyé.
Défaut: #cbcbcb
highlight-button-pressed-hover
La couleur de surbrillance du bouton qui reste appuyé au passage de la souris.
Défaut: #bababa
highlight-primary-dialog-button-hover
La couleur de surbrillance du bouton dans une boîte de dialogue principale au passage de la souris.
Défaut: #1c1c1c
highlight-accent-button-hover
La couleur de surbrillance du bouton d'accent au passage de la souris.
Défaut: #375478
highlight-accent-button-pressed
La couleur de surbrillance du bouton d'accent qui reste appuyé.
Défaut: #293f59
highlight-header-button-hover
La couleur de surbrillance du bouton d'en-tête au passage de la souris.
Défaut: rgba(255, 255, 255, 0.15)
highlight-header-button-pressed
La couleur de surbrillance du bouton d'en-tête qui reste appuyé.
Défaut: 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.
Défaut: #444
highlight-text-select
La couleur de surbrillance du texte sélectionné sur les contrôles standard.
Défaut: #3494fb
highlight-fill-button-hover
La couleur de surbrillance du bouton d'en-tête au passage de la souris.
Défaut: #FFE165
highlight-fill-button-pressed
La couleur d'arrière-plan du bouton qui reste appuyé dans l'en-tête de formulaire
Défaut: #DFB500
Couleurs de bordures
border-toolbar
La couleur des bordures de la barre d'outils, des panneaux et des fenêtres modales.
Défaut: #cbcbcb
border-toolbar-active-panel-top
La couleur des bordures du panneau actif de la barre d'outils.
Défaut: #f7f7f7
border-divider
La couleur des bordures qui divisent les éléments de la barre d'outils et du panneau.
Défaut: #dfdfdf
border-regular-control
La couleur des bordures de contrôles standards.
Défaut: #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.
Défaut: #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).
Défaut: #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).
Défaut: #888
border-control-focus
La couleur des bordures du contrôle standard prioritaire.
Défaut: #848484
border-color-shading
La couleur des bordures de couleurs de palette.
Défaut: 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.
Défaut: #f62211
border-contrast-popover
La couleur des bordures du conseil d'information.
Défaut: #fff
border-button-pressed-focus
La couleur des bordures du bouton qui reste appuyé avec le focus.
Défaut: #848484
Couleurs du texte
text-normal
La couleur du texte par défaut.
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.).
Défaut: rgba(0, 0, 0, 0.8)
text-secondary
La couleur de texte secondaire (mentions, explications, etc.).
Défaut: rgba(0, 0, 0, 0.6)
text-tertiary
La couleur du texte tertiaire (espaces réservés).
Défaut: 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.
Défaut: #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.
Défaut: #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.
Défaut: #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.
Défaut: #445799
text-inverse
La couleur du texte dans l'arrière-plan inversé de la barre d'outils.
Défaut: #fff
text-toolbar-header
La couleur du texte de l'en-tête de la barre d'outils.
Défaut: #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).
Défaut: #fff
text-alt-key-hint
La couleur du texte des conseils pour les raccourci clavier lors de la suppression de la clé Alt.
Défaut: rgba(0, 0, 0, 0.8)
Couleurs des icônes
icon-normal
Couleur de l'icône.
Défaut: #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.).
Défaut: #444
icon-inverse
La couleur inversée de l'icône (actuellement, n'est pas implémenté dans l'interface).
Défaut: #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).
Défaut: #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.
Défaut: #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).
Défaut: #fff
icon-success
La couleur des cases à cocher pour des commentaires résolus ou pour d'autres indicateurs de succès.
Défaut: #090
Couleur de canevas
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.
Défaut: #eee
canvas-content-background
La couleur d'arrière-plan de la page du document, des cellules ou de la diapositive.
Défaut: #fff
canvas-page-border
La couleur des bordures de la page du document.
Défaut: #ccc
canvas-ruler-background
La couleur d'arrière-plan de la règle.
Défaut: #fff
canvas-ruler-border
La couleur des bordures de la règle.
Défaut: #cbcbcb
canvas-ruler-margins-background
La couleur d'arrière-plan des marges de la règle.
Défaut: #d9d9d9
canvas-ruler-mark
La couleur des marques de règle (ciblé et texte)
Défaut: #555
canvas-ruler-handle-border
La couleur des bordures de la poignée de règle.
Défaut: #555
canvas-ruler-handle-border-disabled
La couleur des bordures de la poignée de règle désactivée.
Défaut: #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).
Défaut: #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).
Défaut: #666
canvas-cell-border
La couleur des bordures de cellule.
Défaut: rgba(0, 0, 0, 0.1)
canvas-cell-title-text
La couleur du titre de la cellule.
Défaut: #444
canvas-cell-title-background
La couleur d'arrière plan du titre de la cellule.
Défaut: #f7f7f7
canvas-cell-title-background-hover
La couleur d'arrière-plan du titre de la cellule au passage de la souris.
Défaut: #dfdfdf
canvas-cell-title-background-selected
La couleur d'arrière-plan du titre de la cellule sélectionnée.
Défaut: #cfcfcf
canvas-cell-title-border
La couleur des bordures du titre de la cellule.
Défaut: #d8d8d8
canvas-cell-title-border-hover
La couleur des bordures du titre de la cellule au passage de la souris.
Défaut: #c9c9c9
canvas-cell-title-border-selected
La couleur des bordures du titre de la cellule sélectionnée.
Défaut: #bbb
canvas-scroll-thumb
La couleur du curseur de défilement.
Défaut: #f1f1f1
canvas-scroll-thumb-hover
La couleur du curseur de défilement au passage de la souris.
Défaut: #cfcfcf
canvas-scroll-thumb-pressed
La couleur du curseur de défilement qui reste appuyé.
Défaut: #adadad
canvas-scroll-thumb-border
La couleur des bordures du curseur de défilement.
Défaut: #cfcfcf
canvas-scroll-thumb-border-hover
La couleur des bordures du curseur de défilement au passage de la souris.
Défaut: #cfcfcf
canvas-scroll-thumb-border-pressed
La couleur des bordures du curseur de défilement qui reste appuyé.
Défaut: #adadad
canvas-scroll-arrow
La couleur de la flèche de défilement.
Défaut: #adadad
canvas-scroll-arrow-hover
La couleur de la flèche de défilement au passage de la souris.
Défaut: #f1f1f1
canvas-scroll-arrow-pressed
La couleur de la flèche de défilement qui reste appuyée.
Défaut: #f1f1f1
canvas-scroll-thumb-target
La couleur cible du curseur de défilement.
Défaut: #cfcfcf
canvas-scroll-thumb-target-hover
La couleur cible du curseur de défilement au passage de la souris.
Défaut: #f1f1f1
canvas-scroll-thumb-target-pressed
La couleur cible du curseur de défilement qui reste appuyé.
Défaut: #f1f1f1
canvas-sheet-view-cell-background
La couleur d'arrière plan de la cellule en mode d'affichage de feuille.
Défaut: #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.
Défaut: #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.
Défaut: #aaffcc
canvas-sheet-view-cell-title-label
La couleur du texte dans la cellule en mode d'affichage de feuille.
Défaut: #121212
canvas-sheet-view-select-all-icon
La couleur de l'icône Sélectionner toutes les cellules en mode d'affichage de feuille.
Défaut: #3d664e
canvas-freeze-line-1px
La couleur de la ligne de verrouillage ombrée.
Défaut: #818181
canvas-freeze-line-2px
La couleur de la ligne de verrouillage sans ombre.
Défaut: #aaaaaa
canvas-select-all-icon
La couleur de l'icône Sélectionner toutes les cellules.
Défaut: #82878f