ONLYOFFICE Docs'ta arayüz temalarını değiştirme

Giriş

Mevcut açık, klasik açık ve koyu arayüz temalarının yanı sıra ONLYOFFICE düzenleyicileri artık kendi renk temanızla da özelleştirilebilir. Bunu nasıl yapacağınızı öğrenmek için bu kılavuzdaki adımları izleyin.

not

Özel arayüz teması ekleme özelliği ONLYOFFICE Docs v7.0'dan itibaren kullanılabilir.

1. Aşağıdaki gibi görünecek .json dosyasını oluşturun:

   {
       "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)"
           ...
       }
   }

   Burada aşağıdaki parametreleri belirtmeniz gerekir:

   • name: Gelişmiş ayarlardaki tema seçicide görüntülenecek tema adını tanımlar.
   • l10n: Yerelleştirilmiş tema adını tanımlar. Nesne anahtarları iki harfli dil kodlarıdır (ru, de, it vb.), değerler ise tema adının her dil için çevirisidir.
   • id: Temanın benzersiz tanımlayıcısını belirler; theme- önekiyle başlamalıdır. a-Z, 1-9, -, _ karakterlerini içerebilir.
   • type: Tema türünü belirler; dark (koyu) veya light (açık) olabilir.
   • colors: Tema renkleri kümesini tanımlar. Renkler hex veya RGBA biçiminde verilebilir. Bu nesnenin içerebileceği renk değişkenlerinin ayrıntıları için renkler bölümüne bakın.

2. Oluşturduğunuz dosyayı aşağıdaki dizine yerleştirin:

   • Windows: %ProgramFiles%\ONLYOFFICE\DocumentServer\web-apps\apps\common\main\resources\themes
   • Linux: /var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes
   • Docker: Dosyayı Docs kapsayıcısına kopyalayın: sudo docker cp /home/username/folder_name/file_name {container_id}:/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes

3. Sunucudaki bu isteğin önbellek ömrü 5 dakikadır, bu nedenle tema 5 dakika sonra kullanılabilir olur. Düzenleyici sayfasını yenilemeniz gerekir.

   not

   Bazı durumlarda hizmetleri yeniden başlatmanız ve önbelleği temizlemeniz de gerekebilir.

4. Tema artık Gelişmiş Ayarlar içindeki Arayüz teması listesinde görüntülenir ve düzenleyici arayüzüne uygulayabilirsiniz.

Renkler

Üst bilgi araç çubuğu renkleri

toolbar-header-document

Metin belgeleri için araç çubuğu üst bilgisi rengi.

Varsayılan: #446995

toolbar-header-spreadsheet

E-tablolar için araç çubuğu üst bilgisi rengi.

Varsayılan: #40865c

toolbar-header-presentation

Sunumlar için araç çubuğu üst bilgisi rengi.

Varsayılan: #BE664F

toolbar-header-pdf

PDF'ler için araç çubuğu üst bilgisi rengi.

Varsayılan: #AA5252

text-toolbar-header-on-background-document

Metin belgeleri araç çubuğu üst bilgisindeki kullanıcı baş harflerinin metin rengi.

Varsayılan: #38567A

text-toolbar-header-on-background-spreadsheet

E-tablolar araç çubuğu üst bilgisindeki kullanıcı baş harflerinin metin rengi.

Varsayılan: #336B49

text-toolbar-header-on-background-presentation

Sunumlar araç çubuğu üst bilgisindeki kullanıcı baş harflerinin metin rengi.

Varsayılan: #854535

text-toolbar-header-on-background-pdf

PDF'ler araç çubuğu üst bilgisindeki kullanıcı baş harflerinin metin rengi.

Varsayılan: #8D4444

Arka plan renkleri

background-normal

Pencerelerin, açılır panellerin ve normal denetimlerin arka plan rengi.

Varsayılan: #fff

background-toolbar

Araç çubuğunun, tüm panellerin, iletişim kutusu üst bilgisinin ve tuval üzerindeki düğmeli panellerin (içerik denetimlerinin üst bilgileri, ekleme veya otomatik düzeltme seçenekleri düğmeleri) arka plan rengi.

Varsayılan: #f7f7f7

background-toolbar-additional

Ek araç çubuğu arka plan rengi. E-tablolardaki etkin olmayan sayfalar için kullanılır.

Varsayılan: #efefef

background-primary-dialog-button

Birincil iletişim kutusu düğmesinin arka plan rengi.

Varsayılan: #444

background-accent-button

Metin belgesi düzenleyicisindeki vurgulu düğmenin arka plan rengi.

Varsayılan: #446995

background-tab-underline

Gri araç çubuğunda sekme alt çizgisinin arka plan rengi.

Varsayılan: #444

background-notification-popover

Bildirim açılır penceresinin arka plan rengi (örneğin inceleme modu, form doldurma vb. hakkında).

Varsayılan: #fcfed7

background-notification-badge

Araç çubuğu üst bilgisindeki veya sol paneldeki simge bildirim rozetlerinin arka plan rengi.

Varsayılan: #ffd112

background-scrim

Kalıcı pencerelerin arka plan yoğunluğunu azaltan örtü rengi.

Varsayılan: rgba(0, 0, 0, 0.2)

background-loader

Yükleyicinin arka plan rengi.

Varsayılan: rgba(24, 24, 24, 0.9)

background-alt-key-hint

Alt tuşuna basıldığında düğme kısayolu ipuçlarının arka plan rengi.

Varsayılan: #FFD938

background-contrast-popover

Bilgi ipuçlarının arka plan rengi.

Varsayılan: #fff

background-fill-button

Form üst bilgisindeki düğmenin arka plan rengi.

Varsayılan: #FFD112

shadow-contrast-popover

Bilgi ipucu gölgesinin arka plan rengi.

Varsayılan: rgba(0, 0, 0, 0.3)

Vurgu renkleri

highlight-button-hover

Düğmelerin, açılır menü öğelerinin ve diğer etkileşimli listelerin üzerine gelindiğinde vurgu rengi.

Varsayılan: #e0e0e0

highlight-button-pressed

Basılı düğmenin vurgu rengi.

Varsayılan: #cbcbcb

highlight-button-pressed-hover

Basılı düğmenin üzerine gelindiğinde vurgu rengi.

Varsayılan: #bababa

highlight-primary-dialog-button-hover

Birincil iletişim kutusu düğmesinin üzerine gelindiğinde vurgu rengi.

Varsayılan: #1c1c1c

highlight-accent-button-hover

Vurgulu düğmenin üzerine gelindiğinde vurgu rengi.

Varsayılan: #375478

highlight-accent-button-pressed

Basılı vurgulu düğmenin vurgu rengi.

Varsayılan: #293f59

highlight-header-button-hover

Üst bilgi düğmesinin üzerine gelindiğinde vurgu rengi.

Varsayılan: rgba(255, 255, 255, 0.15)

highlight-header-button-pressed

Basılı üst bilgi düğmesinin vurgu rengi.

Varsayılan: rgba(255, 255, 255, 0.25)

highlight-toolbar-tab-underline

Gri araç çubuğunda etkin sekme alt çizgisinin vurgu rengi.

Varsayılan: #444

highlight-text-select

Normal denetimlerde seçili metnin vurgu rengi.

Varsayılan: #3494fb

highlight-fill-button-hover

Form üst bilgisi düğmesinin üzerine gelindiğinde vurgu rengi.

Varsayılan: #FFE165

highlight-fill-button-pressed

Form üst bilgisindeki basılı düğmenin arka plan rengi.

Varsayılan: #DFB500

Kenarlık renkleri

border-toolbar

Araç çubuğunun, panellerin ve kalıcı pencerelerin kenarlık rengi.

Varsayılan: #cbcbcb

border-toolbar-active-panel-top

Üst araç çubuğunun etkin panelinin kenarlık rengi.

Varsayılan: #f7f7f7

border-divider

Araç çubuğu ve panel öğelerini ayıran kenarlıkların rengi.

Varsayılan: #dfdfdf

border-regular-control

Normal denetimlerin kenarlık rengi.

Varsayılan: #c0c0c0

border-toolbar-button-hover

Birlikte yerleştirilmiş araç çubuğu düğmelerinin üzerine gelindiğinde genel kenarlık rengi.

Varsayılan: #e0e0e0

border-preview-hover

Önizleme denetimindeki öğenin üzerine gelindiğinde kenarlık rengi (slayt önizlemesi, araç çubuğu stilleri).

Varsayılan: #bababa

border-preview-select

Önizleme denetimindeki basılı öğenin kenarlık rengi (slayt önizlemesi, araç çubuğu stilleri).

Varsayılan: #888

border-control-focus

Odaklanılan normal denetimin kenarlık rengi.

Varsayılan: #848484

border-color-shading

Palet renklerinin kenarlık rengi.

Varsayılan: rgba(0, 0, 0, 0.15)

border-error

Geçersiz bir değer girildiğinde giriş kutularının kenarlık rengi.

Varsayılan: #f62211

border-contrast-popover

Bilgi ipucunun kenarlık rengi.

Varsayılan: #fff

border-button-pressed-focus

Odaklanılan basılı düğmenin kenarlık rengi.

Varsayılan: #848484

Metin renkleri

text-normal

Varsayılan metin rengi.

Varsayılan: rgba(0, 0, 0, 0.8)

text-normal-pressed

Etkin öğenin metin rengi (seçili sekme, basılı düğme vb.).

Varsayılan: rgba(0, 0, 0, 0.8)

text-secondary

İkincil metin rengi (notlar, açıklamalar vb.).

Varsayılan: rgba(0, 0, 0, 0.6)

text-tertiary

Üçüncül metin rengi (yer tutucular).

Varsayılan: rgba(0, 0, 0, 0.4)

text-link

Bildirim açılır pencerelerindeki bağlantıların ve bağlantı düğmelerinin metin rengi.

Varsayılan: #445799

text-link-hover

Bildirim açılır pencerelerindeki bağlantıların ve bağlantı düğmelerinin üzerine gelindiğinde metin rengi.

Varsayılan: #445799

text-link-active

Bildirim açılır pencerelerindeki basılı bağlantıların ve bağlantı düğmelerinin metin rengi.

Varsayılan: #445799

text-link-visited

Bildirim açılır pencerelerindeki ziyaret edilmiş bağlantıların ve bağlantı düğmelerinin metin rengi.

Varsayılan: #445799

text-inverse

Ters çevrilmiş araç çubuğu arka planındaki metin rengi.

Varsayılan: #fff

text-toolbar-header

Araç çubuğu üst bilgisinin metin rengi.

Varsayılan: #fff

text-contrast-background

Kontrast arka plan için metin rengi (yükleyici, sayfa görünümü ön ayarlarındaki hücre başlıkları).

Varsayılan: #fff

text-alt-key-hint

Alt tuşuna basıldığında düğme kısayolu ipuçlarının metin rengi.

Varsayılan: rgba(0, 0, 0, 0.8)

Simge renkleri

icon-normal

Simge rengi.

Varsayılan: #444

icon-normal-pressed

Etkin öğelerin simge rengi (seçili sekme, basılı düğme vb.).

Varsayılan: #444

icon-inverse

Ters çevrilmiş simge rengi (şu anda arayüzde kullanılmıyor).

Varsayılan: #fff

icon-toolbar-header

Araç çubuğu üst bilgisindeki simge rengi (örneğin kullanıcı baş harflerini içeren simge).

Varsayılan: #fff

icon-notification-badge

Araç çubuğu üst bilgisindeki veya sol paneldeki bildirim rozetlerinin simge rengi.

Varsayılan: #000

icon-contrast-popover

Kontrast bilgi ipuçlarının simge rengi (şu anda arayüzde kullanılmıyor).

Varsayılan: #fff

icon-success

Çözülmüş yorum onay kutularının veya diğer başarı göstergelerinin rengi.

Varsayılan: #090

Tuval rengi

canvas-background

Belge sayfasının, sayfanın veya slaydın arkasındaki çalışma alanı arka plan rengi; e-tablolarda sütun başlığı arka planı ve sütun gruplama arayüzü arka planı.

Varsayılan: #eee

canvas-content-background

Belge sayfasının, hücrelerin veya slaydın arka plan rengi.

Varsayılan: #fff

canvas-page-border

Belge sayfasının kenarlık rengi.

Varsayılan: #ccc

canvas-ruler-background

Cetvel arka plan rengi.

Varsayılan: #fff

canvas-ruler-border

Cetvel kenarlık rengi.

Varsayılan: #cbcbcb

canvas-ruler-margins-background

Cetvel kenar boşluklarının arka plan rengi.

Varsayılan: #d9d9d9

canvas-ruler-mark

Cetvel işaretlerinin rengi (hedef ve metin).

Varsayılan: #555

canvas-ruler-handle-border

Cetvel tutamacının kenarlık rengi.

Varsayılan: #555

canvas-ruler-handle-border-disabled

Devre dışı cetvel tutamacının kenarlık rengi.

Varsayılan: #aaa

canvas-high-contrast

Yüksek kontrastlı öğelerin rengi (cetveldeki sekme işaretleri, gruplanmış hücre simgeleri).

Varsayılan: #000

canvas-high-contrast-disabled

Devre dışı yüksek kontrastlı öğelerin rengi (cetveldeki sekme işaretleri, gruplanmış hücre simgeleri).

Varsayılan: #666

canvas-cell-border

Hücre kenarlık rengi.

Varsayılan: rgba(0, 0, 0, 0.1)

canvas-cell-title-text

Hücre başlığının metin rengi.

Varsayılan: #444

canvas-cell-title-background

Hücre başlığının arka plan rengi.

Varsayılan: #f7f7f7

canvas-cell-title-background-hover

Hücre başlığının üzerine gelindiğinde arka plan rengi.

Varsayılan: #dfdfdf

canvas-cell-title-background-selected

Seçili hücre başlığının arka plan rengi.

Varsayılan: #cfcfcf

canvas-cell-title-border

Hücre başlığının kenarlık rengi.

Varsayılan: #d8d8d8

canvas-cell-title-border-hover

Hücre başlığının üzerine gelindiğinde kenarlık rengi.

Varsayılan: #c9c9c9

canvas-cell-title-border-selected

Seçili hücre başlığının kenarlık rengi.

Varsayılan: #bbb

canvas-scroll-thumb

Kaydırma kutusunun rengi.

Varsayılan: #f1f1f1

canvas-scroll-thumb-hover

Kaydırma kutusunun üzerine gelindiğinde rengi.

Varsayılan: #cfcfcf

canvas-scroll-thumb-pressed

Basılı kaydırma kutusunun rengi.

Varsayılan: #adadad

canvas-scroll-thumb-border

Kaydırma kutusunun kenarlık rengi.

Varsayılan: #cfcfcf

canvas-scroll-thumb-border-hover

Kaydırma kutusunun üzerine gelindiğinde kenarlık rengi.

Varsayılan: #cfcfcf

canvas-scroll-thumb-border-pressed

Basılı kaydırma kutusunun kenarlık rengi.

Varsayılan: #adadad

canvas-scroll-arrow

Kaydırma oku rengi.

Varsayılan: #adadad

canvas-scroll-arrow-hover

Kaydırma okunun üzerine gelindiğinde rengi.

Varsayılan: #f1f1f1

canvas-scroll-arrow-pressed

Basılı kaydırma okunun rengi.

Varsayılan: #f1f1f1

canvas-scroll-thumb-target

Kaydırma kutusunun hedef rengi.

Varsayılan: #cfcfcf

canvas-scroll-thumb-target-hover

Kaydırma kutusunun üzerine gelindiğinde hedef rengi.

Varsayılan: #f1f1f1

canvas-scroll-thumb-target-pressed

Basılı kaydırma kutusunun hedef rengi.

Varsayılan: #f1f1f1

canvas-sheet-view-cell-background

Sayfa Görünümü modunda hücre arka plan rengi.

Varsayılan: #73bf91

canvas-sheet-view-cell-background-hover

Sayfa Görünümü modunda hücrenin üzerine gelindiğinde arka plan rengi.

Varsayılan: #97e3b6

canvas-sheet-view-cell-background-pressed

Sayfa Görünümü modunda basılı hücrenin arka plan rengi.

Varsayılan: #aaffcc

canvas-sheet-view-cell-title-label

Sayfa Görünümü modunda hücre metin rengi.

Varsayılan: #121212

canvas-sheet-view-select-all-icon

Sayfa Görünümü modunda Tüm hücreleri seç simgesinin rengi.

Varsayılan: #3d664e

canvas-freeze-line-1px

Gölgeli dondurma çizgisinin rengi.

Varsayılan: #818181

canvas-freeze-line-2px

Gölgesiz dondurma çizgisinin rengi.

Varsayılan: #aaaaaa

canvas-select-all-icon

Tüm hücreleri seç simgesinin rengi.

Varsayılan: #82878f