Ovaj članak je preveden pomoću veštačke inteligencije

Promena tema interfejsa u ONLYOFFICE Docs

Uvod

Pored dostupnih svetlih, klasičnih svetlih i tamnih tema interfejsa, ONLYOFFICE urednici sada mogu biti prilagođeni vašom sopstvenom temom boja. Molimo vas da pratite korake iz ovog vodiča kako biste naučili kako to da uradite.

Mogućnost dodavanja prilagođenih tema interfejsa dostupna je počevši od ONLYOFFICE Docs v7.0.

Kreirajte .json fajl koji će izgledati ovako:
```
{
    "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)"
        ...
    }
}
                
```
gde treba da navedete sledeće parametre:
- name: Definiše naziv teme koji će biti prikazan u biraču tema naprednih podešavanja.
- l10n: Definiše lokalizovani naziv teme. Ključevi objekta su dvoslovni kodovi jezika (ru, de, it, itd.) a vrednosti su prevodi naziva teme za svaki jezik.
- id: Definiše jedinstveni identifikator teme, koji mora početi sa prefiksom theme-. Može sadržati znakove a-Z, 1-9, -, _.
- type: Definiše tip teme, koji može biti tamna ili svetla.
- colors: Definiše skup boja teme. Boje mogu biti predstavljene u heksadecimalnom ili RGBA formatu. Pogledajte boje za detalje o promenljivama boja koje ovaj objekat može sadržati.
Postavite kreirani fajl u sledeći direktorijum:
- Windows: %ProgramFiles%\ONLYOFFICE\DocumentServer\web-apps\apps\common\main\resources\themes
- Linux: /var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes
- Docker: Kopirajte fajl u Docs kontejner: sudo docker cp /home/username/folder_name/file_name {container_id}:/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes
Keš na serveru za ovaj zahtev ima trajanje od 5 minuta, tako da će tema biti dostupna nakon 5 minuta. Potrebno je da osvežite stranicu urednika.

U nekim slučajevima, možda ćete morati da restartujete servise i očistite keš. Za više detalja o tome kako očistiti keš servera, možete se obratiti odeljku za rešavanje problema za Linux, ili Docker.
Sada će tema biti prikazana na listi Tema interfejsa u Naprednim podešavanjima i možete je primeniti na interfejs urednika.

Boje

Boje alatne trake zaglavlja

Parametar	Opis	Podrazumevano
`toolbar-header-document`	Boja zaglavlja alatne trake za tekstualne dokumente.	`#446995`
`toolbar-header-spreadsheet`	Boja zaglavlja alatne trake za tabele.	`#40865c`
`toolbar-header-presentation`	Boja zaglavlja alatne trake za prezentacije.	`#BE664F`
`toolbar-header-pdf`	Boja zaglavlja alatne trake za PDF dokumente.	`#AA5252`
`text-toolbar-header-on-background-document`	Boja teksta inicijala korisnika iz zaglavlja alatne trake tekstualnih dokumenata.	`#38567A`
`text-toolbar-header-on-background-spreadsheet`	Boja teksta inicijala korisnika iz zaglavlja alatne trake tabela.	`#336B49`
`text-toolbar-header-on-background-presentation`	Boja teksta inicijala korisnika iz zaglavlja alatne trake prezentacija.	`#854535`
`text-toolbar-header-on-background-pdf`	Boja teksta inicijala korisnika iz zaglavlja alatne trake PDF dokumenata.	`#8D4444`

Boje pozadine

Parametar	Opis	Podrazumevano
`background-normal`	Boja pozadine prozora, padajućih panela, regularnih kontrola.	`#fff`
`background-toolbar`	Boja pozadine alatne trake, svih panela, zaglavlja dijaloga, panela sa dugmetom u platnu (zaglavlja kontrola sadržaja, dugmad za umetanje ili opcije automatske korekcije).	`#f7f7f7`
`background-toolbar-additional`	Dodatna boja pozadine alatne trake. Koristi se za neaktivne listove u tabelama.	`#efefef`
`background-primary-dialog-button`	Boja pozadine primarnog dugmeta dijaloga.	`#444`
`background-accent-button`	Boja pozadine akcentnog dugmeta u uredniku tekstualnih dokumenata.	`#446995`
`background-tab-underline`	Boja pozadine podvlačenja kartice za sivu alatnu traku.	`#444`
`background-notification-popover`	Boja pozadine iskačućeg obaveštenja (na primer, o režimu pregleda, popunjavanju obrazaca, itd.).	`#fcfed7`
`background-notification-badge`	Boja pozadine ikona obaveštenja iz zaglavlja alatne trake ili sa leve strane panela.	`#ffd112`
`background-scrim`	Boja zaslona koja smanjuje intenzitet pozadine modalnih prozora.	`rgba(0, 0, 0, 0.2)`
`background-loader`	Boja pozadine učitavača.	`rgba(24, 24, 24, 0.9)`
`background-alt-key-hint`	Boja pozadine za prečice tastera kada je pritisnut Alt taster.	`#FFD938`
`background-contrast-popover`	Boja pozadine informativnih saveta.	`#fff`
`background-fill-button`	Boja pozadine dugmeta iz zaglavlja obrasca.	`#FFD112`
`shadow-contrast-popover`	Boja pozadine senke informativnog saveta.	`rgba(0, 0, 0, 0.3)`

Boje isticanja

Parametar	Opis	Podrazumevano
`highlight-button-hover`	Boja isticanja dugmadi, stavki padajućeg menija i drugih interaktivnih lista kada se prelazi mišem.	`#e0e0e0`
`highlight-button-pressed`	Boja isticanja pritisnutog dugmeta.	`#cbcbcb`
`highlight-button-pressed-hover`	Boja isticanja pritisnutog dugmeta kada se prelazi mišem.	`#bababa`
`highlight-primary-dialog-button-hover`	Boja isticanja glavnog dugmeta dijaloga kada se prelazi mišem.	`#1c1c1c`
`highlight-accent-button-hover`	Boja isticanja akcentnog dugmeta kada se prelazi mišem.	`#375478`
`highlight-accent-button-pressed`	Boja isticanja pritisnutog akcentnog dugmeta.	`#293f59`
`highlight-header-button-hover`	Boja isticanja dugmeta zaglavlja kada se prelazi mišem.	`rgba(255, 255, 255, 0.15)`
`highlight-header-button-pressed`	Boja isticanja pritisnutog dugmeta zaglavlja.	`rgba(255, 255, 255, 0.25)`
`highlight-toolbar-tab-underline`	Boja isticanja podvlačenja aktivne kartice za sivu alatnu traku.	`#444`
`highlight-text-select`	Boja isticanja izabranog teksta u regularnim kontrolama.	`#3494fb`
`highlight-fill-button-hover`	Boja isticanja dugmeta zaglavlja obrasca kada se prelazi mišem.	`#FFE165`
`highlight-fill-button-pressed`	Boja pozadine pritisnutog dugmeta iz zaglavlja obrasca.	`#DFB500`

Boje ivica

Parametar	Opis	Podrazumevano
`border-toolbar`	Boja ivice alatne trake, panela i modalnih prozora.	`#cbcbcb`
`border-toolbar-active-panel-top`	Boja ivice aktivnog panela gornje alatne trake.	`#f7f7f7`
`border-divider`	Boja ivica koje razdvajaju elemente alatne trake i panela.	`#dfdfdf`
`border-regular-control`	Boja ivice regularnih kontrola.	`#c0c0c0`
`border-toolbar-button-hover`	Opšta boja ivice za dugmad na alatnoj traci kada su zajedno na prelazu miša.	`#e0e0e0`
`border-preview-hover`	Boja ivice elementa iz kontrolne prikaze na prelazu miša (pregled slajda, stilovi alatne trake).	`#bababa`
`border-preview-select`	Boja ivice pritisnutog elementa iz kontrolne prikaze (pregled slajda, stilovi alatne trake).	`#888`
`border-control-focus`	Boja ivice fokusirane regularne kontrole.	`#848484`
`border-color-shading`	Boja ivice palete boja.	`rgba(0, 0, 0, 0.15)`
`border-error`	Boja ivice polja za unos kada se unese nevažeća vrednost.	`#f62211`
`border-contrast-popover`	Boja ivice informativnog saveta.	`#fff`
`border-button-pressed-focus`	Boja ivice fokusiranog pritisnutog dugmeta.	`#848484`

Boje teksta

Parametar	Opis	Podrazumevano
`text-normal`	Podrazumevana boja teksta.	`rgba(0, 0, 0, 0.8)`
`text-normal-pressed`	Boja teksta aktivnog elementa (izabrana kartica, pritisnuto dugme, itd.).	`rgba(0, 0, 0, 0.8)`
`text-secondary`	Sekundarna boja teksta (napomene, objašnjenja, itd.).	`rgba(0, 0, 0, 0.6)`
`text-tertiary`	Tercijarna boja teksta (placeholderi).	`rgba(0, 0, 0, 0.4)`
`text-link`	Boja teksta linkova i dugmadi za linkove u obaveštenjima.	`#445799`
`text-link-hover`	Boja teksta linkova i dugmadi za linkove u obaveštenjima na prelazu miša.	`#445799`
`text-link-active`	Boja teksta pritisnutih linkova i dugmadi za linkove u obaveštenjima.	`#445799`
`text-link-visited`	Boja teksta posećenih linkova i dugmadi za linkove u obaveštenjima.	`#445799`
`text-inverse`	Boja teksta na invertovanoj pozadini alatne trake.	`#fff`
`text-toolbar-header`	Boja teksta zaglavlja alatne trake.	`#fff`
`text-contrast-background`	Boja teksta za kontrastnu pozadinu (učitavanje, naslovi ćelija u prikazu listova).	`#fff`
`text-alt-key-hint`	Boja teksta za skraćenice dugmadi kada je pritisnut taster Alt.	`rgba(0, 0, 0, 0.8)`

Boje ikona

Parametar	Opis	Podrazumevano
`icon-normal`	Boja ikone.	`#444`
`icon-normal-pressed`	Boja ikone za aktivne elemente (izabrana kartica, pritisnuto dugme, itd.).	`#444`
`icon-inverse`	Invertovana boja ikone (trenutno se ne koristi u interfejsu).	`#fff`
`icon-toolbar-header`	Boja ikone iz zaglavlja alatne trake (na primer, ikona sa inicijalima korisnika).	`#fff`
`icon-notification-badge`	Boja ikone za oznake obaveštenja iz zaglavlja alatne trake ili sa leve strane panela.	`#000`
`icon-contrast-popover`	Boja ikone za kontrastne informativne savete (trenutno se ne koristi u interfejsu).	`#fff`
`icon-success`	Boja za čekboksove komentara koji su rešeni ili druge indikacije uspeha.	`#090`

Boja platna

Parametar	Opis	Podrazumevano
`canvas-background`	Boja pozadine radnog prostora iza stranice dokumenta, lista ili slajda, pozadina naslova kolone i pozadina interfejsa za grupisanje kolona u tabelama.	`#eee`
`canvas-content-background`	Boja pozadine stranice dokumenta, ćelija ili slajda.	`#fff`
`canvas-page-border`	Boja ivice stranice dokumenta.	`#ccc`
`canvas-ruler-background`	Boja pozadine lenjira.	`#fff`
`canvas-ruler-border`	Boja ivice lenjira.	`#cbcbcb`
`canvas-ruler-margins-background`	Boja pozadine margina lenjira.	`#d9d9d9`
`canvas-ruler-mark`	Boja oznaka na lenjiru (cilj i tekst).	`#555`
`canvas-ruler-handle-border`	Boja ivice ručke lenjira.	`#555`
`canvas-ruler-handle-border-disabled`	Boja ivice onemogućene ručke lenjira.	`#aaa`
`canvas-high-contrast`	Boja elemenata visokog kontrasta (oznake kartica na lenjiru, simboli grupisanih ćelija).	`#000`
`canvas-high-contrast-disabled`	Boja onemogućenih elemenata visokog kontrasta (oznake kartica na lenjiru, simboli grupisanih ćelija).	`#666`
`canvas-cell-border`	Boja ivice ćelije.	`rgba(0, 0, 0, 0.1)`
`canvas-cell-title-text`	Boja teksta naslova ćelije.	`#444`
`canvas-cell-title-background`	Boja pozadine naslova ćelije.	`#f7f7f7`
`canvas-cell-title-background-hover`	Boja pozadine naslova ćelije pri prelasku mišem.	`#dfdfdf`
`canvas-cell-title-background-selected`	Boja pozadine izabranog naslova ćelije.	`#cfcfcf`
`canvas-cell-title-border`	Boja ivice naslova ćelije.	`#d8d8d8`
`canvas-cell-title-border-hover`	Boja ivice naslova ćelije prilikom prelaska mišem.	`#c9c9c9`
`canvas-cell-title-border-selected`	Boja ivice izabranog naslova ćelije.	`#bbb`
`canvas-scroll-thumb`	Boja klizača.	`#f1f1f1`
`canvas-scroll-thumb-hover`	Boja klizača prilikom prelaska mišem.	`#cfcfcf`
`canvas-scroll-thumb-pressed`	Boja pritisnutog klizača.	`#adadad`
`canvas-scroll-thumb-border`	Boja ivice klizača.	`#cfcfcf`
`canvas-scroll-thumb-border-hover`	Boja ivice klizača prilikom prelaska mišem.	`#cfcfcf`
`canvas-scroll-thumb-border-pressed`	Boja ivice pritisnutog klizača.	`#adadad`
`canvas-scroll-arrow`	Boja strelice za skrolovanje.	`#adadad`
`canvas-scroll-arrow-hover`	Boja strelice za skrolovanje prilikom prelaska mišem.	`#f1f1f1`
`canvas-scroll-arrow-pressed`	Boja pritisnute strelice za skrolovanje.	`#f1f1f1`
`canvas-scroll-thumb-target`	Boja cilja klizača.	`#cfcfcf`
`canvas-scroll-thumb-target-hover`	Boja cilja klizača prilikom prelaska mišem.	`#f1f1f1`
`canvas-scroll-thumb-target-pressed`	Boja cilja pritisnutog klizača.	`#f1f1f1`
`canvas-sheet-view-cell-background`	Boja pozadine ćelije u Sheet View režimu.	`#73bf91`
`canvas-sheet-view-cell-background-hover`	Boja pozadine ćelije u Sheet View režimu prilikom prelaska mišem.	`#97e3b6`
`canvas-sheet-view-cell-background-pressed`	Boja pozadine pritisnute ćelije u Sheet View režimu.	`#aaffcc`
`canvas-sheet-view-cell-title-label`	Boja teksta ćelije u Sheet View režimu.	`#121212`
`canvas-sheet-view-select-all-icon`	Boja ikone Izaberi sve ćelije u Sheet View režimu.	`#3d664e`
`canvas-freeze-line-1px`	Boja linije zamrzavanja sa senkom.	`#818181`
`canvas-freeze-line-2px`	Boja linije zamrzavanja bez senke.	`#aaaaaa`
`canvas-select-all-icon`	Boja ikone Izaberi sve ćelije.	`#82878f`