Discourse'de Karanlık/Açık mod CSS ekleme

  • Admin

    Discourse forum/tartışma yazılımında aynı nesneye ait karanlık ve açık mod seçenekleri için CSS ekleme yapacağız.

    İlk olarak yönetici panelde Kişiselleştir > Temalar > HTML/CSS düzenle seçeneğine geliyoruz.

    discourse-css.png

    Açılan sayfadan Color Definitions sekmesine tıklıyoruz. Bu sayfada artık CSS kodlarımızı ekleyebiliriz.

    Discourse aydınlık mod için;

    @if is-light-color-scheme() {
    	// CSS kodunuzu buraya yazın.
        }
    

    Discourse karanlık mod için;

    @if is-dark-color-scheme() {
    // CSS kodunuzu buraya yazın.
        }
    

    Bu şekilde aynı nesne için aydınlık ve karanlık mod için CSS ekleyebilirsiniz.

    Bir örnekle açıklayayım. Örneğin ID’si 1 olan kategorinin arka planı için aydınlık ve karanlık mod için iki farklı arka plan ayarlamak istiyorsam eklemem gereken CSS kodu aşağıdaki gibi olacaktır.

    @if is-light-color-scheme() {
        .category-list [data-category-id="1"] {
        border-bottom: 0;
        background: #ddf6ff;
         }
    }
    
    @if is-dark-color-scheme() {
        .category-list [data-category-id="1"] {
        border-bottom: 1px solid var(--primary-low);
        background: #3d4147
         }
    }
    

Benzer Konular