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.

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
     }
}