Powerapps'te Dark/Light Mod Oluşturma nasıl yapılır ?

Sıklıkla karşıladığım sorulardan bir tanesi de Powerapps ile Gece/Gündüz Tema Modu oluşturmanın mümkün olup olmadığıyla ilgiliydi. Evet Mümkün ve bugün bunu nasıl yapacağımızı öğrenmiş olacağız :) Konuya tam anlamıyla aydınlık getirmek amacıyla Butonlarda,Arkaplanlarda,Metin Girişlerinde,Metin Etiketlerinde, Görsellerde,Veri Tablolarında uygulamalı olarak göstermek istedim fakat hepsinde işlem birebir aynı. Projelerinizde Daha Modern bir görünüm katmak için kullanacağız bir konu olması dileğiyle.

Bu konu için oluşturduğum örnek bir Dashboard üzerinden anlatacağım.


Mantığımız hepsi için aynı olacak.

If(Toggle.Checked;"Seçili ise yapılacak işlem";"Seçili değilken yapılacak işlem")

Öncelikle HEX ve RGBA konusunu ele almak gerekiyor. Renkleri RGBA türünde kullanacağız.
RGBA türünde renginizi şuradan öğrenebilirsiniz.


Şimdi başlayabiliriz. :)


İlk olarak Toggle'ı ekliyoruz.
Ekle > Giriş > Değiştir
İngilizce kullananlar için ise;
Insert > Input > Toggle'ı ekliyoruz.
Sonraki işlem Etiket(Label) kısmına bu kodu yazıyoruz.

If(Toggle2.Checked;"Gündüz Modu";"Gece Modu")



Bu işlemle şunu yapmış olduk;
Eğer Toggle2 Seçili ise "Gündüz Modu", değil ise "Gece Modu" yazsın.
Sonrasında Değişiklik sonrası Yazının rengininde değişmesi için "FontColor" kısmına aynı işlemi uyguluyoruz. Yazı Tipi Rengi kısmına tıklayarak "FontColor" kısmına erişebilirsiniz.


Header kısmı ile devam edelim. Yazımızın rengi için Aşağıdaki görselde seçili olan Renk kısmına tıklayabiliriz yada Sol üstteki Açılır menüden "Color" seçeneğini seçerek kodumuzu yazıyoruz.


Arkaplan rengi için ise "Fill" seçeneğini seçerek devam ediyoruz.



Görseller içinde aynı işlemi yapıyoruz.
Görüntümüzü Medya kısmına eklemeden önce İsmini kolay ve anlaşılır olarak belirlemeniz bulmanızda fayda sağlayacaktır. Benim belirttiğim "Beyaz Duvar Kağıdı" ve "Siyah Duvar Kağıdı" kısmına sizin görüntünüzün isimleri geleceğini unutmayalım. Kodumuzu Sol üstteki "Image" seçeneği seçiliyken yazacağız.


İkonlarımız içinde aynı İşlemi yapmaya devam ediyoruz. Fakat bu sefer "IconColor" seçeneğine yazıyoruz kodumuzu.



Projemizdeki Metinleri seçerek "FontColor" kısmına belirlediğimiz renklerle birlikte kodumuzu yazıyoruz.

If(Toggle2.Checked;RGBA(0;0;0;1);RGBA(255;255;255;1))


Butonumuz Seçiliyken "Color" kısmına yazı rengimizi belirtiyoruz. Arkaplan rengi için ise "Fill" kısmına belirlediğim renkleri ekliyoruz.


 
Bu işlemleri Değiştirmek istediğimiz tüm bileşenlere aynı mantık ile uyguluyoruz ve günün sonunda Tek bir Toggle yardımı ile projenizi daha Modern bir görünüme kavuşturabilirsiniz.Konu hakkında yardıma ihtiyaç duyduğunuz kısımlarda yorum ekleyebilirsiniz yada iletişim kısmından benimle iletişime geçebilirsiniz. Bir sonraki konularda görüşmek üzere.